React TS项目中ag-grid 33.1筛选功能失效问题求助

针对你在React TS项目中遇到的AG Grid筛选失效问题（排序正常，但defaultColDef及列定义中设置filter均无效），可以按以下步骤逐一排查：

1. 检查列定义是否覆盖默认配置 #

确认adapterConnectionGrid中的列配置没有显式设置filter: false。列定义的优先级高于defaultColDef，如果某列单独设置了filter: false，会直接覆盖默认的filter: true。可以打印列配置进行验证：

console.log(adapterConnectionGrid); // 查看每列的filter属性是否被设为false

2. 验证AG Grid依赖版本一致性 #

确保安装的@ag-grid-community/react和@ag-grid-community/core版本完全一致，混合版本极易导致功能异常。查看package.json中的依赖：

{
  "@ag-grid-community/react": "x.x.x",
  "@ag-grid-community/core": "x.x.x"
}

如果版本不一致，重新安装统一版本：

npm install @ag-grid-community/react@x.x.x @ag-grid-community/core@x.x.x

3. 确认全局筛选开关未被关闭 #

AG Grid默认启用筛选，但如果组件或父组件中设置了enableFilter={false}，会全局关闭筛选功能。检查你的AgGridReact组件：

// 错误示例：意外关闭筛选
<AgGridReact enableFilter={false} ... />

// 正确：不设置或显式启用
<AgGridReact enableFilter={true} ... />

4. 检查列的field属性绑定正确性 #

筛选功能依赖列的field属性对应rowData中的字段。如果adapterConnectionGrid中的列未设置field，或field与rowData的字段不匹配，筛选无法获取有效数据。例如：

// 正确的列配置示例
const adapterConnectionGrid = [
  { headerName: "连接名称", field: "connectionName" }, // field对应rowData中的connectionName字段
  { headerName: "状态", field: "status" }
];

5. 排查样式加载问题 #

如果筛选图标不显示或无法点击，可能是主题样式未正确加载：

• 确保在项目入口文件（如index.tsx）中导入AG Grid主题样式：

import '@ag-grid-community/styles/ag-theme-alpine.css';

• 检查是否有自定义CSS覆盖了AG Grid的筛选按钮样式，导致交互元素被隐藏或无法点击。

6. 用极简示例验证环境 #

创建一个无干扰的基础AG Grid示例，排除项目中其他代码的影响：

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

const TestGrid = () => {
  const rowData = useMemo(() => [
    { name: "适配器1", type: "HTTP" },
    { name: "适配器2", type: "MQTT" }
  ], []);
  
  const columnDefs = useMemo(() => [
    { headerName: "适配器名称", field: "name" },
    { headerName: "类型", field: "type" }
  ], []);
  
  const defaultColDef = useMemo(() => ({
    sortable: true,
    filter: true,
    resizable: true
  }), []);
  
  return (
    <div className="ag-theme-alpine" style={{ height: 200, width: '100%' }}>
      <AgGridReact
        columnDefs={columnDefs}
        defaultColDef={defaultColDef}
        rowData={rowData}
      />
    </div>
  );
};

export default TestGrid;

如果该示例能正常筛选，说明你的项目中存在其他代码（如自定义渲染器、状态管理逻辑、样式冲突）影响了AG Grid的筛选功能。

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