Created by felipehimself License
A custom multi-select filter component designed for Material React Table Version ^1 and Material UI Version ^5 .
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.
npm material-react-table-v1-autocomplete
# or
yarn material-react-table-v1-autocompleteDefine 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}
/>
);
};
accessorKeyis required. It’s how the component links to the correct column.- If you're using
accessorFnto transform data (e.g., converting booleans to "Yes"/"No"), you must apply the same logic when defining the filter options.
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.
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.
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}
/>
</>
);
};
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.
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:sortAscendingandsortDescendingare 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.
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"
/>
);
};