Custom column filter

[Janekk]

I'd like to implement a custom date range filter for a column. Is there a way to hook up a custom component?

[KevinVandy]

You can pass in a custom Filter component on a column definition. I have this example in the storybook from a while ago for a custom select https://www.material-react-table.dev/?path=/story/features-filtering-examples--custom-filter-component

const columns={[
      {
        header: 'First Name',
        id: 'firstName',
      },
      {
        header: 'Last Name',
        id: 'lastName',
      },
      {
        header: 'Age',
        id: 'age',
      },
      {
        header: 'Gender',
        id: 'gender',
        Filter: ({ header }) => (
          <TextField
            onChange={(e) =>
              header.column.setFilterValue(e.target.value || undefined)
            }
            select
            value={header.column.getFilterValue() ?? ''}
            margin="dense"
            placeholder="Filter"
            variant="standard"
            fullWidth
          >
            <MenuItem value={null}>All</MenuItem>
            <MenuItem value="Male">Male</MenuItem>
            <MenuItem value="Female">Female</MenuItem>
            <MenuItem value="Other">Other</MenuItem>
          </TextField>
        ),
        filterFn: (row, _columnId, filterValue) =>
          row.getValue('gender').toLowerCase() === filterValue.toLowerCase(),
      },
      {
        header: 'Address',
        id: 'address',
      },
      {
        header: 'State',
        id: 'state',
      },
    ]}

[SRGajjala]

can we have select multiple with checkboxes and textbox to filter the list items just like combo box?

[KevinVandy]

you can create any react component you want and pass it in as the Filter component. So yes, it will just take some work on your part.