Material-table: Overriding filters

[phillipbritain]

I'm confused on how to implement custom filter components. I understand that I need to do something like this:

components={{
          FilterRow: props => (
            //insert custom filters for each column
          )
        }}

but I'm not sure where to go from here to get a differing custom filters for table columns.

[phillipbritain]

Solution for anyone with the same question:
It dawned on me that I should put on my big boy pants and take a look at the source code. From there, the easiest route to go IMO is to take a copy of the m-table-filter-row.js file, paste it into a new file in your code base, make any modifications you need (in my case, swapping out the MUI select component for a react-select component, and reference it in your table like so (last prop):

    <MaterialTable
        columns={[
          {
            title: "Adı",
            field: "name"
          },
          { title: "Soyadı", field: "surname" },
          { title: "Doğum Yılı", field: "birthYear", type: "numeric" },
          {
            title: "Doğum Yeri",
            field: "birthCity",
            lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
          }
        ]}
        data={[
          { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 }
        ]}
        options={{
          filtering: true
        }}
        title="Demo Title"
        icons={tableIcons}
        components={{
          FilterRow: props => <FilterRow {...props} /> <---- your modified filter row component
        }}
      />

[tylercaceres]

Do you have to override the entire filter row or add to the end? Is it possible to override just one filter? Thanks in advance.

[piekczyk]

Do you have to override the entire filter row or add to the end? Is it possible to override just one filter? Thanks in advance.

It is not possible to edit just one filter. I noticed that the best way is to copy entire file of m-table-filter-row.js from repo and use for example render props to add some additional filters / customizations. Using this approach you will still have access to default filters + additional ones created by you.

[ofirkg]

Do you have to override the entire filter row or add to the end? Is it possible to override just one filter? Thanks in advance.

It is not possible to edit just one filter. I noticed that the best way is to copy entire file of m-table-filter-row.js from repo and use for example render props to add some additional filters / customizations. Using this approach you will still have access to default filters + additional ones created by you.

it is actually possible to customize a specific filter, for instance:

1.create a custom filter component.
notice the props.onFilterChanged function to fire the filter.

const CustomFilter = props => {
    const [selectedVal, setSelectedVal] = useState(0);

    function handleChange(e) {
        const val = e.target.value;
        setSelectedVal(val);
        props.onFilterChanged(props.columnDef.id, val);
    }

    return (
        <th>
            <Select value={selectedVal} onChange={handleChange}>
                <MenuItem value={0} disabled>
                    some default option
                </MenuItem>
                <MenuItem value={'1'}>option 1</MenuItem>
                <MenuItem value={'2'}>option 2</MenuItem>
            </Select>
        </th>
    );
};

1. override the filter component for the specific column.

columns={[
          {
            title: "Adı",
            field: "name"
          },
          { title: "Soyadı", field: "surname" },
          { title: "Doğum Yılı", field: "birthYear", type: "numeric" },
          {
            title: "Doğum Yeri",
            field: "birthCity",
            **filterComponent = CustomFilterComponent**
          }
        ]}

[ninjasawan]

const CustomDatePicker = (props) => {
  const [date, setDate] = useState(null);

  return (
    <DatePicker
      label="Select Date"
      inputVariant="outlined"
      variant="inline"
      format="dd/MM/yyyy"
      value={date}
      ampm
      autoOk
      allowKeyboardControl
      style={{ minWidth: 175 }}
      onChange={(event) => {
        setDate(event);
        props.onFilterChanged(props.columnDef.tableData.id, event);
      }}
      InputProps={{
        endAdornment: (
          <InputAdornment position="end">
            <IconButton>
              <EventIcon />
            </IconButton>
          </InputAdornment>
        ),
      }}
    />
  );
};

Now in column

{
    title: "Created Date",
    field: "order_created_date",
    searchable: false,
    grouping: false,
    sorting: true,
    type: "datetime",
    filterComponent: (props) => <CustomDatePicker {...props} />,
  }