Overriding filters

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.

[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} />,
  }

[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
        }}
      />