如何在 react table v7 中创建数字范围过滤器？

Question

如何在 react table v7 中创建数字范围过滤器？这是我的相关列定义和过滤功能。

// The Filter function
import { Box, Input } from '@mui/material';
    const NumberFilter = ({ column, data }) => {
        const { filterValue = [], setFilter } = column;
        console.log('filterValue: ' + filterValue);
        return (
            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                <Input
                    placeholder="Min"
                    value={filterValue[0] || ''}
                    type="number"
                    onChange={(e) => {
                        setFilter([e.target.value || undefined, filterValue[1]]);
                    }}
                />
                <Input
                    placeholder="Max"
                    value={filterValue[1] || ''}
                    type="number"
                    onChange={(e) => {
                        setFilter([filterValue[0], e.target.value || undefined]);
                    }}
                />{' '}
            </Box>
        );
    };
    export default NumberFilter;




// The column definition...
{
 Header: 'Pant Size',
 accessor: 'pant-size',
 Filter: NumberFilter,
 filter: 'isNumberRange',
 filterValue: [0, 10],
 Cell: ({ value}) => value);
}

这行不通。该列似乎没有过滤值在最小值和最大值范围内的所有行，而是在进行文本匹配，这是默认设置。

我认为我的问题是过滤器参数有多种选择。例如，“文本”和“精确”。我在某处读到有一个数字范围选项，它是“isNumberRange”。这显然是不正确的。还有其他选择吗？有谁知道这个文档在哪里？

Answer 1

根据filterTypes源码，默认支持的filterType列表有：

• text（默认）：作为字符串的行中单元格的值具有作为子字符串的过滤值
• exactText：行中某个单元格的值为字符串，正好具有过滤值，不区分大小写
• exactTextCase：行中某个单元格的值为String，正好具有过滤值，区分大小写
• includes：行中某个单元格的值将过滤值作为其元素之一（由

  value.includes(filterValue)

  返回）
• includesAll：行中的每个单元格对于过滤值列表都是有效的
• includesSome：行中至少有一个单元格对于过滤值列表有效
• includesValue：行中单元格的值是过滤值的一部分（

  filterValue.includes(value)

  ）
• exact：行中某个单元格的值===等于过滤值
• 等于：一个单元格的值==等于过滤值
• between：如果过滤器值具有'min'或'max'属性，则该行中至少有一个单元格大于或等于'min'且小于或等于'max'；如果缺少“min”或“max”，则假设负/正无穷大。

对于这个用例，'between' filterType 是最合适的。