如何实现ag-grid分组列左侧固定？附解决方案

我之前也被这个问题卡过好一阵，终于找到了解决方案——别在普通列定义（columnDefs）里设置固定，要通过autoGroupColumnDef配置项来实现。原因很简单：当你把某列标记为rowGroup: true后，AG Grid会自动生成一个分组列，这个自动生成的列的行为，只能通过autoGroupColumnDef来控制，普通列的配置对它无效。

下面是完整的示例代码，重点看autoGroupColumnDef部分：

var columnDefs = [ 
  { headerName: "Console", field: "console", width: 140, rowGroup: true},
  { headerName: "Alarm Type", field: "AlarmType", width: 20, pivot: true },
  { headerName: "Total", field: "Total", width: 55, aggFunc: 'sum'},
  { headerName: "%", field: "Percentage", width: 50, aggFunc: 'sum', cellRenderer: roundNumber },
  { headerName: "IP", field: "InProgress", width: 45, aggFunc: 'sum', cellRenderer: roundNumber }
];
var gridOptions = {
  groupMultiAutoColumn: true,
  groupDefaultExpanded: -1,
  suppressAggFuncInHeader: true,
  groupSuppressBlankHeader: true,
  pivotMode: true,
  columnDefs: columnDefs,
  enableRangeSelection: true,
  toolPanelSuppressRowGroups: true,
  toolPanelSuppressPivotMode: true,
  toolPanelSuppressPivots: true,
  toolPanelSuppressValues: true,
  autoGroupColumnDef: {
    headerName: 'Consoles', // 自定义分组列的表头名称
    pinned: 'left', // 核心配置：把分组列固定到左侧，这个设置在columnDef里不生效
    cellRendererParams: {
      suppressCount: true, // 移除分组列默认显示的计数数字
    }
  }
};

几个关键配置说明：

• autoGroupColumnDef.pinned: 'left'：这是实现固定的核心，自动生成的分组列只认这里的固定配置
• 你可以通过headerName自定义分组列的表头文字，用cellRendererParams.suppressCount去掉默认的分组计数，让界面更贴合你的需求

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