以下是一个示例代码，演示如何使用AG-Grid在保持其他列状态的同时添加和删除列组中的列：

// 列定义
var columnDefs = [
  { headerName: 'Athlete', field: 'athlete' },
  { headerName: 'Country', field: 'country' },
  { headerName: 'Sport', field: 'sport' },
  { headerName: 'Gold', field: 'gold' },
  { headerName: 'Silver', field: 'silver' },
  { headerName: 'Bronze', field: 'bronze' },
];

// 初始列组定义
var columnGroupDefs = [
  {
    headerName: 'Medals',
    children: [
      { headerName: 'Gold', field: 'gold' },
      { headerName: 'Silver', field: 'silver' },
      { headerName: 'Bronze', field: 'bronze' },
    ],
  },
];

// 初始列状态
var defaultColDef = {
  sortable: true,
  filter: true,
};

// Grid选项
var gridOptions = {
  columnDefs: columnDefs,
  columnGroupDefs: columnGroupDefs,
  defaultColDef: defaultColDef,
};

// 创建Grid
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);

// 添加列组中的列
function addColumnToGroup(columnName) {
  var column = {
    headerName: columnName,
    field: columnName,
  };

  // 添加到列组中的children数组中
  columnGroupDefs[0].children.push(column);

  // 更新列定义
  gridOptions.api.setColumnDefs(columnDefs);
}

// 删除列组中的列
function removeColumnFromGroup(columnName) {
  // 过滤掉要删除的列
  columnGroupDefs[0].children = columnGroupDefs[0].children.filter(function (column) {
    return column.field !== columnName;
  });

  // 更新列定义
  gridOptions.api.setColumnDefs(columnDefs);
}

在上面的代码中，我们首先定义了列定义（columnDefs），列组定义（columnGroupDefs）和默认列定义（defaultColDef）。然后，我们使用这些定义创建了Grid，并将其附加到页面中的一个div元素上。

然后，我们定义了两个函数addColumnToGroup和removeColumnFromGroup，用于添加和删除列组中的列。这些函数会更新列组定义中的children数组，并通过调用gridOptions.api.setColumnDefs方法来更新列定义。

通过调用addColumnToGroup('columnName')和removeColumnFromGroup('columnName')函数，您可以添加和删除列组中的列。请将'columnName'替换为您要添加或删除的列的名称。

请注意，上述代码只是一个示例，您可能需要根据您的具体要求进行适当的修改和调整。