应用过滤器时是否可以抑制AgGrid客户端数据过滤？

Question

我使用 React AgGrid 来显示通过 RTK 查询获取的数据。 是否可以抑制 AgGrid 客户端数据过滤，特别是对于内置 AgGrid 的过滤器组件，因为我已经在后端使用 rtk 查询进行了过滤？我不想使用服务器端行模型，因为它对我的目的来说是开销。对我来说没关系，分组和排序是在客户端进行的。

这是代码示例：

const [filters, setFilters] = useImmer({
    finishDateFrom: null,
    finishDateTo: null,
    projectTitle: null,
    projectIds: null,
    managerIds: null,
});


const { data: rowData, isFetching } = useGetGridDataQuery({
    finishDateFrom: filters.finishDateFrom,
    finishDateTo: filters.finishDateTo,
    projectTitle: filters.projectTitle,
    projectIds: filters.projectIds,
    managerIds: filters.managerIds,
});

const handleFilterChanged = (event: FilterChangedEvent) => {
    const filterModel = event.api.getFilterModel();
    setFilters((draft) => {
        draft.finishDateFrom = filterModel?.finishDate?.dateFrom;
        draft.finishDateTo = filterModel?.finishDate?.dateTo;
        draft.projectTitle = filterModel?.projectTitle?.values;
        draft.projectIds = filterModel?.projectIds?.values;
        draft.managerIds = filterModel?.managerIds?.values;
    });
};


return (
    <AgGridReact
        ...
        rowData={rowData}
        onFilterChanged={handleFilterChanged}
    />
);

我只发现，可以编写自定义过滤器组件，并且始终从其中的

'true'

函数返回

doesFilterPass()

。但我想使用标准的 AgGrid 过滤器功能。

Answer 1

取消所有列的过滤

const defaultColDef = useMemo(() => {
  return {
    flex: 1,
    minWidth: 150,
    // add this line
    filter: false,
  };
}, []);

相关栏目

{ field: 'athlete' },

之前（过滤器：true）

之后（过滤器：false）

当心！如果您对某列有自定义过滤器，它将不起作用。例如，如果您的 columnDefs 中有类似的内容，它将不起作用

{
  field: 'date',
  filter: 'agDateColumnFilter',
  filterParams: filterParams,
},

游乐场：https://plnkr.co/edit/Jrdm7qGFT4M2b8El？预览