Basic Filter

Props

Field	Type	Description
options.filtering	boolean	display filter row on table
column.filtering	boolean	set as false to hide default filter to display on a column

Usage

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

<MaterialTable
  // ...
  options={{
    filtering: true,
  }}
  columns={[
    {
      title: "Name",
      field: "name",
      filtering: false,
    },
    {
      title: "Surname",
      field: "surname",
    },
    {
      title: "Birth Year",
      field: "birthYear",
      type: "numeric",
    },
    {
      title: "Birth Place",
      field: "birthCity",
      lookup: {
        34: "İstanbul",
        63: "Şanlıurfa",
      },
    },
  ]}
/>;

Live Demo

note

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

Live Editor

function BasicFilter() {
  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",
          /**
           * Hide filter on specific column
           */
          filtering: false,
        },
        {
          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

Loading...