React Table v7 数值范围过滤器创建问题：自定义过滤器未生效

核心原因 #

React Table v7没有内置isNumberRange这个过滤器类型，你需要自定义过滤器函数并注册到表格配置中，才能让列定义的filter参数生效。

解决步骤 #

1. 自定义数值范围过滤器函数

编写一个判断行数据是否在数值范围内的函数：

// 自定义数值范围过滤器
const isNumberRange = (rows, id, filterValue) => {
  const [min, max] = filterValue;
  // 若min和max都为空，返回所有行
  if (!min && !max) return rows;

  return rows.filter(row => {
    const cellValue = row.values[id];
    const numValue = Number(cellValue);
    // 非数字直接过滤掉
    if (isNaN(numValue)) return false;
    
    const meetsMin = min === undefined || numValue >= min;
    const meetsMax = max === undefined || numValue <= max;
    return meetsMin && meetsMax;
  });
};

2. 在表格中注册过滤器类型

调用useTable时，通过filterTypes选项注册自定义过滤器，同时确保启用useFilters插件：

import { useTable, useFilters } from 'react-table';

function YourTableComponent() {
  const tableInstance = useTable(
    {
      columns: yourColumnDefinitions,
      data: yourTableData,
      // 注册自定义过滤器类型
      filterTypes: {
        isNumberRange
      }
    },
    useFilters // 必须启用该插件才能使用过滤器功能
  );

  // ... 其他表格逻辑
}

3. 修正过滤器组件的数值转换

你的NumberFilter组件中，Input的value是字符串类型，需要转成数字再存入filterValue，否则会导致范围判断错误：

import { Box, Input } from '@mui/material';

const NumberFilter = ({ column }) => {
  const { filterValue = [], setFilter } = column;

  return (
    <Box sx={{ display: 'flex', gap: 1, justifyContent: 'space-between' }}>
      <Input
        placeholder="Min"
        value={filterValue[0] || ''}
        type="number"
        onChange={(e) => {
          const min = e.target.value ? Number(e.target.value) : undefined;
          setFilter([min, filterValue[1]]);
        }}
      />
      <Input
        placeholder="Max"
        value={filterValue[1] || ''}
        type="number"
        onChange={(e) => {
          const max = e.target.value ? Number(e.target.value) : undefined;
          setFilter([filterValue[0], max]);
        }}
      />
    </Box>
  );
};

export default NumberFilter;

4. 修正列定义的语法错误

你的列定义中Cell属性存在语法错误，同时确保filter参数使用注册的过滤器名称：

// 修正后的列定义
{
  Header: 'Pant Size',
  accessor: 'pant-size',
  Filter: NumberFilter,
  filter: 'isNumberRange', // 对应注册的过滤器类型名称
  filterValue: [0, 10],
  Cell: ({ value }) => <span>{value}</span> // 修正为合法JSX
}

官方文档参考 #

React Table v7的过滤器自定义逻辑在Filters插件文档中，核心内容包括：

• filterTypes配置项的使用
• 自定义过滤器函数的参数规范（rows、id、filterValue）
• 过滤器插件的启用方式

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