Mantine React Table

1
import { useMemo } from 'react';
2
import {
3
  MantineReactTable,
4
  useMantineReactTable,
5
  type MRT_ColumnDef,
6
} from 'mantine-react-table';
7
import { citiesList, data, usStateList, type Person } from './makeData';
8

9
const Example = () => {
10
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
11
    () => [
12
      {
13
        accessorFn: (originalRow) => (originalRow.isActive ? 'true' : 'false'), //must be strings
14
        id: 'isActive',
15
        header: 'Account Status',
16
        filterVariant: 'checkbox',
17
        Cell: ({ cell }) =>
18
          cell.getValue() === 'true' ? 'Active' : 'Inactive',
19
        size: 220,
20
      },
21
      {
22
        accessorKey: 'name',
23
        header: 'Name',
24
        filterVariant: 'text', // default
25
      },
26
      {
27
        accessorFn: (originalRow) => new Date(originalRow.hireDate), //convert to date for sorting and filtering
28
        id: 'hireDate',
29
        header: 'Hire Date',
30
        filterVariant: 'date-range',
31
        Cell: ({ cell }) => cell.getValue<Date>().toLocaleDateString(), // convert back to string for display
32
      },
33
      {
34
        accessorKey: 'age',
35
        header: 'Age',
36
        filterVariant: 'range',
37
        filterFn: 'between',
38
        size: 80,
39
      },
40
      {
41
        accessorKey: 'salary',
42
        header: 'Salary',
43
        Cell: ({ cell }) =>
44
          cell.getValue<number>().toLocaleString('en-US', {
45
            style: 'currency',
46
            currency: 'USD',
47
          }),
48
        filterVariant: 'range-slider',
49
        filterFn: 'betweenInclusive', // default (or between)
50
        mantineFilterRangeSliderProps: {
51
          max: 200_000, //custom max (as opposed to faceted max)
52
          min: 30_000, //custom min (as opposed to faceted min)
53
          step: 10_000,
54
          label: (value) =>
55
            value.toLocaleString('en-US', {
56
              style: 'currency',
57
              currency: 'USD',
58
            }),
59
        },
60
      },
61
      {
62
        accessorKey: 'city',
63
        header: 'City',
64
        filterVariant: 'select',
65
        mantineFilterSelectProps: {
66
          data: citiesList as any,
67
        },
68
      },
69
      {
70
        accessorKey: 'state',
71
        header: 'State',
72
        filterVariant: 'multi-select',
73
        mantineFilterMultiSelectProps: {
74
          data: usStateList as any,
75
        },
76
      },
77
    ],
78
    [],
79
  );
80

81
  const table = useMantineReactTable({
82
    columns,
83
    data,
84
    initialState: { showColumnFilters: true },
85
  });
86

87
  return <MantineReactTable table={table} />;
88
};
89

90
export default Example;

1
import { useMemo } from 'react';
2
import {
3
  MantineReactTable,
4
  useMantineReactTable,
5
  type MRT_ColumnDef,
6
} from 'mantine-react-table';
7
import { data, type Person } from './makeData';
8

9
const Example = () => {
10
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
11
    () => [
12
      {
13
        accessorKey: 'name',
14
        header: 'Name',
15
        filterVariant: 'autocomplete',
16
        //no need to specify autocomplete props data if using faceted values
17
        size: 100,
18
      },
19
      {
20
        accessorKey: 'salary',
21
        header: 'Salary',
22
        Cell: ({ cell }) =>
23
          cell.getValue<number>().toLocaleString('en-US', {
24
            style: 'currency',
25
            currency: 'USD',
26
          }),
27
        filterVariant: 'range-slider',
28
        filterFn: 'betweenInclusive', // default (or between)
29
        mantineFilterRangeSliderProps: {
30
          //no need to specify min/max/step if using faceted values
31
          color: 'pink',
32
          step: 5_000,
33
          label: (value) =>
34
            value.toLocaleString('en-US', {
35
              style: 'currency',
36
              currency: 'USD',
37
            }),
38
        },
39
      },
40
      {
41
        accessorKey: 'city',
42
        header: 'City',
43
        filterVariant: 'select',
44
        //no need to specify select props data if using faceted values
45
      },
46
      {
47
        accessorKey: 'state',
48
        header: 'State',
49
        filterVariant: 'multi-select',
50
        //no need to specify select props data if using faceted values
51
      },
52
    ],
53
    [],
54
  );
55

56
  const table = useMantineReactTable({
57
    columns,
58
    data,
59
    enableFacetedValues: true,
60
    initialState: { showColumnFilters: true },
61
  });
62

63
  return <MantineReactTable table={table} />;
64
};
65

66
export default Example;

1
import { useMemo } from 'react';
2
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
3
import { data, type Person } from './makeData';
4

5
const Example = () => {
6
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
7
    () => [
8
      {
9
        accessorKey: 'id',
10
        header: 'ID',
11
      },
12
      {
13
        accessorKey: 'firstName',
14
        header: 'First Name',
15
      },
16
      {
17
        accessorKey: 'lastName',
18
        header: 'Last Name',
19
      },
20
      {
21
        accessorKey: 'gender',
22
        header: 'Gender',
23
        filterFn: 'equals',
24
        mantineFilterSelectProps: {
25
          data: ['Male', 'Female', 'Other'],
26
        },
27
        filterVariant: 'select',
28
      },
29
      {
30
        accessorKey: 'age',
31
        header: 'Age',
32
        filterVariant: 'range',
33
      },
34
    ],
35
    [],
36
  );
37

38
  return (
39
    <MantineReactTable
40
      columns={columns}
41
      data={data}
42
      columnFilterDisplayMode="popover"
43
    />
44
  );
45
};
46

47
export default Example;