Custom Filter Row

Props

Field	Type	Description
options.filtering	boolean	display filter row on table
components.FilterRow	React.Element	custom filter component to display instead MTableFilterRow

Usage

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

<MaterialTable

// ...

options={{

filtering: true,

}}

components={{

FilterRow: () => <CustomFilterRow {...props} />,

}}

/>;

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", }, { 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, }} components={{ FilterRow: (rowProps) => { const { columns, onFilterChanged } = rowProps; return ( <> <tr> {columns.map((col) => { if (col.field) { return ( <td> <input placeholder="custom filter" id={col.field} onChange={(e) => { console.log(e.target.id, e.target.value); onFilterChanged(col.tableData.id, e.target.value); }} /> </td> ); } })} </tr> </> ); }, }} /> ); }

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",
        },
        {
          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,
      }}
      components={{
        FilterRow: (rowProps) => {
          const { columns, onFilterChanged } = rowProps;

          return (
            <>
              <tr>
                {columns.map((col) => {
                  if (col.field) {
                    return (
                      <td>
                        <input
                          placeholder="custom filter"
                          id={col.field}
                          onChange={(e) => {
                            console.log(e.target.id, e.target.value);
                            onFilterChanged(col.tableData.id, e.target.value);
                          }}
                        />
                      </td>
                    );
                  }
                })}
              </tr>
            </>
          );
        },
      }}
    />
  );
}

Result