如何禁用React AgGrid客户端数据过滤，保留内置过滤器功能？

要实现保留AgGrid内置过滤器UI、但完全由后端（RTK Query）处理过滤逻辑的需求，无需编写自定义过滤器组件，只需通过配置AgGrid的过滤相关属性，让其跳过客户端过滤逻辑即可，具体步骤如下：

核心配置思路 #

AgGrid默认会对客户端数据执行过滤，我们需要：

1. 保留内置过滤器的UI交互（列配置中指定对应过滤器类型）
2. 告诉AgGrid所有行都已通过过滤（因为后端返回的就是过滤后的结果）
3. 利用onFilterChanged事件捕获过滤器模型，同步到RTK Query的参数中触发后端查询

具体代码修改 #

1. 列配置保留内置过滤器 #

确保需要过滤的列指定了对应的AgGrid内置过滤器类型：

const columnDefs = [
  { 
    field: 'finishDate', 
    filter: 'agDateColumnFilter', // 保留日期过滤器UI
    filterParams: { // 可选：自定义日期过滤器参数
      comparator: (filterLocalDateAtMidnight, cellValue) => {
        // 自定义日期比较逻辑（按需实现）
      }
    }
  },
  { 
    field: 'projectTitle', 
    filter: 'agTextColumnFilter' // 保留文本过滤器UI
  },
  { 
    field: 'projectIds', 
    filter: 'agSetColumnFilter' // 保留多选过滤器UI
  },
  { 
    field: 'managerIds', 
    filter: 'agSetColumnFilter' 
  },
  // 其他列配置...
];

2. 修改AgGridReact组件属性 #

添加两个关键属性禁用客户端过滤，同时保留过滤器UI：

<AgGridReact
  columnDefs={columnDefs}
  rowData={rowData}
  loading={isFetching} // 可选：显示加载状态
  // 核心配置：告知AgGrid使用外部过滤，所有行直接通过
  isExternalFilterPresent={() => true}
  doesExternalFilterPass={() => true}
  // 捕获过滤器变化，同步到RTK Query参数
  onFilterChanged={handleFilterChanged}
  // 其他原有属性...
/>

3. 优化过滤器模型同步逻辑（可选） #

如果需要更精准地映射过滤器模型到RTK Query参数，可以调整handleFilterChanged：

const handleFilterChanged = (event) => {
  const filterModel = event.api.getFilterModel();
  setFilters(draft => {
    // 日期列参数转换
    draft.finishDateFrom = filterModel?.finishDate?.dateFrom 
      ? new Date(filterModel.finishDate.dateFrom) 
      : null;
    draft.finishDateTo = filterModel?.finishDate?.dateTo 
      ? new Date(filterModel.finishDate.dateTo) 
      : null;
    // 文本列参数转换
    draft.projectTitle = filterModel?.projectTitle?.filter || null;
    // 多选列参数转换
    draft.projectIds = filterModel?.projectIds?.values || null;
    draft.managerIds = filterModel?.managerIds?.values || null;
  });
};

原理说明 #

• isExternalFilterPresent={() => true}：告知AgGrid当前存在外部过滤逻辑（后端处理），跳过默认客户端过滤流程
• doesExternalFilterPass={() => true}：让AgGrid直接渲染后端返回的所有数据，无需执行本地过滤校验
• 内置过滤器UI保持正常交互，用户操作时触发onFilterChanged，我们将过滤器模型同步到RTK Query参数中，触发后端重新查询过滤后的结果

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