1

How can I create a number range filter in react table v7? Here is my relevant column definition, and filter function.

// 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);
}

This does not work. Instead of filtering all rows that have a value within the range of min and max, the column seems to be doing text matching, which is the default.

I think my issue is that there are various options for the filter parameter. For example, 'text' and 'exact'. I read somewhere that there is an option for numeric ranges and it was "isNumberRange". This clearly is incorrect. Is there another option? Does anyone know where this documentation lives?

toki
  • 936
  • 5
  • 18
GNG
  • 1,341
  • 2
  • 23
  • 50

1 Answers1

0

According to the filterTypes source code, the list of filterTypes supported by default are:

  • text (default): the value of a cell in the row as a String has the filter value as a substring
  • exactText: the value of a cell in the row as a String has the filter value exactly, case-insensitive
  • exactTextCase: the value of a cell in the row as a String has the filter value exactly, case-sensitive
  • includes: the value of a cell in the row has the filter value as one of its elements (returned by value.includes(filterValue))
  • includesAll: every cell in the row is valid for a list of filter values
  • includesSome: at least one cell in the row is valid for a list of filter values
  • includesValue: the value of a cell in the row is part of a filter value (filterValue.includes(value))
  • exact: the value of a cell in the row is === equal to the filter value
  • equals: the value of a cell is == equal to the filter value
  • between: if the filter value has a 'min' or 'max' attribute, then at least one cell in the row is greater than or equal to the 'min' and less than or equal to the 'max'; if either 'min' or 'max' are missing, then assume negative/positive Infinity.

For this use case, the 'between' filterType would be most appropriate.

toki
  • 936
  • 5
  • 18