React AG-Grid中分组列product无法添加过滤器的问题

当你按product和category分组时，AG-Grid会把分组列替换成自动生成的autoGroup列，原来的product列默认被隐藏，所以直接给product列配置过滤器不会生效，得针对autoGroupColumnDef来设置，具体步骤如下：

• 调整列定义：把product和category设为分组列并隐藏，让AG-Grid自动生成分组列
• 配置autoGroupColumnDef：给自动生成的分组列开启过滤器，同时设置表头名称匹配原列

完整代码示例 #

import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const YourComponent = () => {
  // 你的数据源
  const rowData = [
    { product: 'apple', category: 'fruit1', price1: 3, price2: 4, price3: 5 },
    { product: 'apple', category: 'fruit2', price1: 6, price2: 8, price3: 5 },
    { product: 'carrot', category: 'veg1', price1: 5, price2: 6, price3: 9 },
    { product: 'carrot', category: 'veg2', price1: 58, price2: 25, price3: 60 },
  ];

  // 列定义：分组列设为rowGroup并隐藏
  const columnDefs = [
    { field: 'product', rowGroup: true, hide: true },
    { field: 'category', rowGroup: true, hide: true },
    { field: 'price1', filter: true },
    { field: 'price2', filter: true },
    { field: 'price3', filter: true },
  ];

  // 配置自动分组列的过滤器
  const autoGroupColumnDef = {
    headerName: 'Product', // 显示原列名作为表头
    filter: true, // 启用过滤器
    filterParams: {
      // 可选：自定义过滤器选项，比如文本过滤的类型
      filterOptions: ['contains', 'equals', 'startsWith', 'endsWith'],
      caseSensitive: false,
    },
    // 可选：如果需要更复杂的过滤逻辑，可以自定义过滤器组件
    // filterFramework: YourCustomFilterComponent
  };

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
        autoGroupColumnDef={autoGroupColumnDef}
        defaultColDef={{ sortable: true }}
      />
    </div>
  );
};

export default YourComponent;

关键说明 #

1. 分组列必须设置rowGroup: true和hide: true，否则AG-Grid不会自动替换为autoGroup列
2. autoGroupColumnDef是专门配置自动分组列的属性，这里开启filter: true就能给分组列加过滤器
3. 如果需要对第二个分组列category也加过滤器，可禁用默认自动分组，改用多列分组的自定义配置，或者把category作为普通分组列后单独配置过滤逻辑

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