Filter Variants Mantine React Table Example

Filter Variants Example

Mantine React Table not only has filtering built in, but it also has a lot of different filter variants that take care of a lot of the heavy lifting for you. Text filters, date filters, range filters, range slider filters, and more are all built in and ready to use. There is much more you can do to customize the behavior of filtering, so be sure to check out the full Column Filtering Feature Guide for more information.

Demo

Account Status Filter by Account Status	Name	Hire Date	Age	Salary	City	State
Active	Tanner Linsley	2/23/2016	42	$100,000.00	San Francisco	California
Active	Kevin Vandy	2/23/2019	51	$80,000.00	Richmond	Virginia
Inactive	John Doe	2/23/2014	27	$120,000.00	Riverside	South Carolina
Active	Jane Doe	2/25/2015	32	$150,000.00	San Francisco	California
Inactive	John Smith	6/11/2023	42	$75,000.00	Los Angeles	California
Active	Jane Smith	2/23/2019	51	$56,000.00	Blacksburg	Virginia
Inactive	Samuel Jackson	2/23/2010	27	$90,000.00	New York	New York

import '@mantine/core/styles.css';
import '@mantine/dates/styles.css'; //if using mantine date picker features
import 'mantine-react-table/styles.css'; //make sure MRT styles were imported in your app root (once)
import { useMemo } from 'react';
import {
  MantineReactTable,
  useMantineReactTable,
  type MRT_ColumnDef,
} from 'mantine-react-table';
import { citiesList, data, usStateList, type Person } from './makeData';

const Example = () => {
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    () => [
      {
        accessorFn: (originalRow) => (originalRow.isActive ? 'true' : 'false'), //must be strings
        id: 'isActive',
        header: 'Account Status',
        filterVariant: 'checkbox',
        Cell: ({ cell }) =>
          cell.getValue() === 'true' ? 'Active' : 'Inactive',
        size: 220,
      },
      {
        accessorKey: 'name',
        header: 'Name',
        filterVariant: 'text', // default
      },
      {
        accessorFn: (originalRow) => new Date(originalRow.hireDate), //convert to date for sorting and filtering
        id: 'hireDate',
        header: 'Hire Date',
        filterVariant: 'date-range',
        Cell: ({ cell }) => cell.getValue<Date>().toLocaleDateString(), // convert back to string for display
      },
      {
        accessorKey: 'age',
        header: 'Age',
        filterVariant: 'range',
        filterFn: 'between',
        size: 80,
      },
      {
        accessorKey: 'salary',
        header: 'Salary',
        Cell: ({ cell }) =>
          cell.getValue<number>().toLocaleString('en-US', {
            style: 'currency',
            currency: 'USD',
          }),
        filterVariant: 'range-slider',
        filterFn: 'betweenInclusive', // default (or between)
        mantineFilterRangeSliderProps: {
          max: 200_000, //custom max (as opposed to faceted max)
          min: 30_000, //custom min (as opposed to faceted min)
          step: 10_000,
          label: (value) =>
            value.toLocaleString('en-US', {
              style: 'currency',
              currency: 'USD',
            }),
        },
      },
      {
        accessorKey: 'city',
        header: 'City',
        filterVariant: 'select',
        mantineFilterSelectProps: {
          data: citiesList as any,
        },
      },
      {
        accessorKey: 'state',
        header: 'State',
        filterVariant: 'multi-select',
        mantineFilterMultiSelectProps: {
          data: usStateList as any,
        },
      },
    ],
    [],
  );

  const table = useMantineReactTable({
    columns,
    data,
    initialState: { showColumnFilters: true },
  });

  return <MantineReactTable table={table} />;
};

export default Example;

View Extra Storybook Examples