AG Grid/React：分组列无法显示在左侧固定列之前的问题

这不是AG Grid的Bug，是默认列排序逻辑导致的问题。

当你左侧固定多列时，AG Grid会按照列的加载顺序（包括自动生成的分组列）排列固定列。你的现有固定列在columnDefs中先被定义，而自动分组列默认被添加到列集合开头，但AG Grid会将所有左侧固定列归为一组，按实际加载顺序排列——这就导致手动固定列排在了自动分组列前面，即便你给自动分组列设置了pinned: 'left'和lockPinned: true也不会改变这个顺序。

解决方法有两种：

方法一：手动定义自动分组列在列定义最前面 #

直接在columnDefs的第一个位置手动添加分组列配置，替代自动生成的列：

columnDefs: [
  {
    headerName: '分组',
    field: 'ag-Grid-AutoColumn', // 必须使用此字段名对应自动分组列
    pinned: 'left',
    lockPinned: true,
    cellRenderer: 'agGroupCellRenderer', // 启用分组渲染器
    cellRendererParams: {
      // 可选：添加自定义参数，比如控制是否显示分组计数
      suppressCount: false
    }
  },
  // 你的其他左侧固定列
  { field: '列1', pinned: 'left' },
  { field: '列2', pinned: 'left' },
  // 其他非固定列...
],
// 禁用自动生成分组列
autoGroupColumnDef: false

方法二：在Grid就绪后调整列顺序 #

利用columnApi的moveColumn方法，将自动分组列移到最前面：

gridOptions: {
  autoGroupColumnDef: {
    pinned: 'left',
    lockPinned: true,
  },
  onGridReady: (params) => {
    // 自动分组列的默认colId是'ag-Grid-AutoColumn'
    params.columnApi.moveColumn('ag-Grid-AutoColumn', 0);
  },
  // 你的其他配置...
}

这两种方法都能让自动分组列显示在所有左侧固定列的前面。

内容的提问来源于stack exchange，提问作者complexpie