Introduction

A custom multi-select filter component designed for Material React Table Version ^1 and Material UI Version ^5 .

Motivation

Material React Table is awesome (it really is!), but version 1 lacks a built-in multi-select filter. If you're stuck using v1—perhaps due to migration limitations—you might still need this feature. I faced this exact situation, so I created a plug-and-play component that adds multi-select filtering with minimal setup.

Installation

npm material-react-table-v1-autocomplete
# or
yarn material-react-table-v1-autocomplete

Usage

Define your columns as usual, but pass a custom Filter using the AutocompleteCheckbox component and its companion autocompleteFilterFn for exact-match filtering.

import MaterialReactTable from 'material-react-table';
import { AutocompleteCheckbox, autocompleteFilterFn } from 'material-react-table-v1-autocomplete';

const App = () => {
  const data: TData[] = []; // Your data here or coming from anywhere

  const columns = useMemo<MRT_ColumnDef<TData>[]>(() => [
    {
      header: 'First Name',
      accessorKey: 'firstName',
      filterFn: autocompleteFilterFn,
      Filter: ({ header }) => (
        <AutocompleteCheckbox
          key="firstName"
          header={header}
          options={[...new Set(data.map((i) => i.firstName))]}
        />
      ),
    },
    {
      header: 'Automatic',
      accessorKey: 'automatic',
      accessorFn: (row) => (row.automatic ? 'Yes' : 'No'),
      filterFn: autocompleteFilterFn,
      Filter: ({ header }) => (
        <AutocompleteCheckbox
          key="automatic"
          header={header}
          options={[...new Set(data.map((i) => (i.automatic ? 'Yes' : 'No')))]}
        />
      ),
    },
    {
      header: 'Release Date',
      accessorKey: 'releaseDate',
      accessorFn: (row) => (row.releaseDate ? formatDate(row.releaseDate) : ''),
      filterFn: autocompleteFilterFn,
      Filter: ({ header }) => (
        <AutocompleteCheckbox
          key="releaseDate"
          header={header}
          options={[...new Set(data.map((i) => formatDate(i.releaseDate)))]}
        />
      ),
    },
    {
      header: 'State',
      accessorKey: 'state', // Uses the default Material React Table filtering
    },
  ], [data]);

  return (
    <MaterialReactTable
      key="mrt-example"
      columns={columns}
      data={data}
    />
  );
};

⚠️Important Notes

• accessorKey is required. It’s how the component links to the correct column.
• If you're using accessorFn to transform data (e.g., converting booleans to "Yes"/"No"), you must apply the same logic when defining the filter options.

Accepted Props

✅ MUI

Since Material React Table is built on Material UI, the internal elements (like TextField and Checkbox) accept the same MUI props. Avoid overriding props such as onChange or onClick, as these are handled internally by the component.

✨ Custom Props

Other props that the component accepts can be seen in TAutocompleteCheckboxProps which is exported by the component. Some of them are placeholder, filterButtonText, cleanButtonText and others.

🧼 Cleaning all Filters

Material React Table v1 does not offer a built-in method to clear all filters. You’ll need to manually reset filters and also clear the internal state of AutocompleteCheckbox components by calling the dispatchCleanAutocomplete() function provided by this package.

import { dispatchCleanAutocomplete } from 'material-react-table-v1-autocomplete';
import { Button } from "@mui/material";

const App = () => {
  const tableInstanceRef = useRef<MRT_TableInstance<TData>>(null);

  const handleCleanFilters = () => {
    tableInstanceRef.current?.resetColumnFilters();
    dispatchCleanAutocomplete();
  };

  return (
    <>
      <Button onClick={handleCleanFilters}>Clean All Filters</Button>
      <MaterialReactTable
        key="mrt-example"
        tableInstanceRef={tableInstanceRef}
        columns={columns}
        data={data}
      />
    </>
  );
};

⚡Performance Tips

The AutocompleteCheckbox component is memoized using React.memo. Although it's not mandatory, to benefit from this, you would have to wrap the options prop in a useMemo to prevent unnecessary re-renders.

♻️ Reusability

Some props are commonly reused every time you use the AutocompleteCheckbox component. These include:

• placeHolder — defaults to an empty string
• filterButtonText — defaults to "Filter"
• cleanButtonText — defaults to "Clear"
• noOptionsText — defaults to "No options"
• sortAscending — enables ascending sort for the dropdown (default behavior)
• sortDescending — enables descending sort for the dropdown
• optionFontSize — defaults to inherit

⚠️ Important: sortAscending and sortDescending are mutually exclusive. If neither is passed, it defaults to ascending. Passing both will result in a TypeScript error, so only pass the one you need.

🧱 Example: Creating a Reusable Wrapper Component

You can wrap AutocompleteCheckbox in a custom component to centralize common props and avoid repetition:

💡 Tip: Wrapping the component like this helps you localize text and avoid repetition across column definitions.

import { AutocompleteCheckbox, TAutocompleteCheckboxProps } from 'material-react-table-v1-autocomplete';

const MyBaseAutocomplete = <TData,> (props: TAutocompleteCheckboxProps<TData>) => {
  const { sortAscending, ...rest } = props;

  // We destructure `sortAscending` to prevent a TypeScript conflict in case both sort props are accidentally included

  return (
    <AutocompleteCheckbox
      {...rest}
      filterButtonText="Filtrar"
      cleanButtonText="Limpar"
      noOptionsText="Sem opções"
      optionFontSize="0.625rem"
    />
  );
};