如何在Material React Table中获取ColumnFilterMode并实现服务端过滤

核心问题解决思路 #

当开启manualFiltering后，表格不会自动处理过滤逻辑，你需要从onColumnFiltersChange回调中获取列过滤的完整参数（包括过滤模式filterFn），再将这些参数传给服务端执行过滤，最后把服务端返回的结果更新到表格中。

步骤1：配置可过滤的列 #

首先要给需要过滤的列开启过滤功能，并指定可用的过滤模式（内置或自定义）：

const columns = [
  {
    accessorKey: 'name',
    header: '姓名',
    enableColumnFilter: true, // 开启列过滤
    filterFn: 'contains', // 默认过滤模式
    // 提供可选的过滤模式下拉选项
    filterOptions: [
      { label: '包含', value: 'contains' },
      { label: '完全匹配', value: 'equals' },
      { label: '开头匹配', value: 'startsWith' },
    ],
  },
  {
    accessorKey: 'age',
    header: '年龄',
    enableColumnFilter: true,
    filterFn: 'equals', // 数字列默认用精确匹配
    filterOptions: [
      { label: '等于', value: 'equals' },
      { label: '大于', value: 'greaterThan' },
      { label: '小于', value: 'lessThan' },
    ],
  },
  // 其他列配置...
];

步骤2：获取过滤参数并请求服务端 #

修改onColumnFiltersChange回调，拿到包含过滤模式的完整参数，触发服务端请求：

const handleColumnFiltersChange = (newColumnFilters) => {
  setColumnFilters(newColumnFilters);
  // newColumnFilters数组中每个对象结构：{ id: 列accessorKey, value: 过滤值, filterFn: 过滤模式 }
  // 把过滤参数和分页、排序参数一起传给服务端
  fetchFilteredData({
    columnFilters: newColumnFilters,
    globalFilter,
    pagination,
    sorting,
  });
};

// 示例服务端请求函数
const fetchFilteredData = async (params) => {
  setIsLoading(true);
  try {
    const res = await fetch('/api/your-data-endpoint', {
      method: 'POST',
      body: JSON.stringify(params),
      headers: { 'Content-Type': 'application/json' },
    });
    const result = await res.json();
    setData(result.queryResult);
    setRowCount(result.totalCount);
  } catch (err) {
    setIsError(true);
  } finally {
    setIsLoading(false);
  }
};

步骤3：更新表格组件配置 #

将修改后的回调和配置传入表格，确保所有手动模式的回调都正确绑定：

<>
  <MaterialReactTable
    initialState={{
      density: "compact",
      showGlobalFilter: true,
      showColumnFilters: true,
    }}
    columns={columns}
    data={data?.queryResult ?? []}
    manualFiltering
    manualPagination
    manualSorting
    onColumnFiltersChange={handleColumnFiltersChange}
    onGlobalFilterChange={setGlobalFilter}
    onPaginationChange={setPagination}
    onSortingChange={setSorting}
    rowCount={data?.totalCount ?? 0}
    state={{
      columnFilters,
      globalFilter,
      isLoading,
      pagination,
      showAlertBanner: isError,
      showProgressBars: isFetching,
      sorting,
    }}
  />
</>

服务端处理逻辑参考 #

服务端需要根据filterFn的值执行对应过滤逻辑（以SQL为例，注意用参数化查询防止注入）：

• 若filterFn为contains：WHERE ${column} LIKE ?（参数为%${value}%）
• 若filterFn为equals：WHERE ${column} = ?
• 若filterFn为greaterThan：WHERE ${column} > ?

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