Custom Column Filter

Props

Field	Type	Description
options.filtering	boolean	display filter row on table
columns.filterComponent	React.Element	custom component for filtering

FilterComponent

The filterComponent passes these props to hook it to the table internal filtering:

Field	Type	Description
columnDef	Column	the current column of the filter
onFilterChanged	(columnId: string, value: any) => void;	the callback for the onChange

Usage

import MaterialTable from "@material-table/core";

<MaterialTable

// ...

options={{

filtering: true,

}}

/>;

Live Demo

note

See here for more on the GLOBAL_VARS we use in our demos

Live Editor

function CustomFilter() { return ( <MaterialTable data={[ { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63, }, { name: "Zerya Betül", surname: "Baran", birthYear: 2017, birthCity: 34, }, ]} columns={[ { title: "Name", field: "name", filterComponent: ({ columnDef, onFilterChanged }) => ( <input placeholder="custom" onChange={(e) => { // Calling the onFilterChanged with the current tableId and the new value onFilterChanged(columnDef.tableData.id, e.target.value); }} /> ), }, { title: "Surname", field: "surname", }, { title: "Birth Year", field: "birthYear", type: "numeric", }, { title: "Birth Place", field: "birthCity", lookup: { 34: "İstanbul", 63: "Şanlıurfa", }, }, ]} options={{ filtering: true, }} /> ); }

function CustomFilter() {
  return (
    <MaterialTable
      data={[
        {
          name: "Mehmet",
          surname: "Baran",
          birthYear: 1987,
          birthCity: 63,
        },
        {
          name: "Zerya Betül",
          surname: "Baran",
          birthYear: 2017,
          birthCity: 34,
        },
      ]}
      columns={[
        {
          title: "Name",
          field: "name",
          filterComponent: ({ columnDef, onFilterChanged }) => (
            <input
              placeholder="custom"
              onChange={(e) => {
                // Calling the onFilterChanged with the current tableId and the new value
                onFilterChanged(columnDef.tableData.id, e.target.value);
              }}
            />
          ),
        },
        {
          title: "Surname",
          field: "surname",
        },
        {
          title: "Birth Year",
          field: "birthYear",
          type: "numeric",
        },
        {
          title: "Birth Place",
          field: "birthCity",
          lookup: {
            34: "İstanbul",
            63: "Şanlıurfa",
          },
        },
      ]}
      options={{
        filtering: true,
      }}
    />
  );
}

Result