Mantine React Table State Options API Reference

State Options

Many of the state options you can pass here are the same as the ones you can pass to the useReactTable useTableInstance hook.

Here is a list of all the state options you can pass to initialState or state.

const table = useMantineReactTable({
  columns,
  data,
  initialState: {
    // all the state options you can pass here
  },
  state: {
    // or here - NOTE: state values will override initialState values
  },
});

return <MantineReactTable table={table} />;

#	Type	Default Value	More Info Links
1	{ [key: string]: MRT_FilterFn }

2	Array<{id: string, value: unknown}>	{}	TanStack Table Filters Docs

3	Array<string>	[]	TanStack Table Column Ordering Docs

4	{ left: Array<string>, right: Array<string> }	{ left: [], right: [] }	TanStack Table Column Pinning Docs

5	Record<string, number>	{}	TanStack Table Column Sizing Docs

6	See TanStack Docs	{}	TanStack Table Column Sizing Docs

7	Record<string, boolean>	{}	TanStack Table Column Visibility Docs

8	MRT_Row

9	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'

10	MRT_Column \| null

11	MRT_Row \| null

12	MRT_Cell

13	MRT_Row

14	Record<string, boolean> \| boolean	{}	TanStack Table Expanding Docs

15	any		TanStack Table Filtering Docs

16	MRT_FilterFn

17	Array<string>	[]	TanStack Table Grouping Docs

18	MRT_Column \| null

19	MRT_Row \| null

20	boolean	false

21	boolean	false

22	boolean	false

23	{ pageIndex: number, pageSize: number }	{ pageIndex: 0, pageSize: 10 }	TanStack Table Pagination Docs

24	Record<string, boolean>	{}	TanStack Table Row Selection Docs

25	boolean	false

26	boolean	false

27	boolean	false

28	boolean	false

29	boolean	false

30	boolean	false

31	Array<{ id: string, desc: boolean }>	[]	TanStack Table Sorting Docs

Wanna see the source code for this table? Check it out down below!

1
import { useEffect, useMemo, useState } from 'react';
2
import Link from 'next/link';
3
import {
4
  MantineReactTable,
5
  type MRT_ColumnDef,
6
  type MRT_TableState,
7
} from 'mantine-react-table';
8
import { Anchor, Text } from '@mantine/core';
9
import { useMediaQuery } from '@mantine/hooks';
10
import { SampleCodeSnippet } from '../mdx/SampleCodeSnippet';
11
import { type StateOption, stateOptions } from './stateOptions';
12

13
interface Props {
14
  onlyOptions?: Set<keyof MRT_TableState<StateOption>>;
15
}
16

17
const StateOptionsTable = ({ onlyOptions }: Props) => {
18
  const isDesktop = useMediaQuery('(min-width: 1200px)');
19

20
  const columns = useMemo(
21
    () =>
22
      [
23
        {
24
          accessorKey: 'stateOption',
25
          enableClickToCopy: true,
26
          header: 'State Option',
27
          mantineCopyButtonProps: ({ cell }) => ({
28
            className: 'state-option',
29
            id: `${cell.getValue<string>()}-state-option`,
30
          }),
31
        },
32
        {
33
          accessorKey: 'type',
34
          header: 'Type',
35
          enableGlobalFilter: false,
36
          Cell: ({ cell }) => (
37
            <SampleCodeSnippet language="typescript" noCopy>
38
              {cell.getValue<string>()}
39
            </SampleCodeSnippet>
40
          ),
41
        },
42
        {
43
          accessorKey: 'defaultValue',
44
          enableGlobalFilter: false,
45
          header: 'Default Value',
46
          Cell: ({ cell }) => (
47
            <SampleCodeSnippet language="typescript" noCopy>
48
              {cell.getValue<string>()}
49
            </SampleCodeSnippet>
50
          ),
51
        },
52
        {
53
          accessorKey: 'description',
54
          enableGlobalFilter: false,
55
          header: 'Description',
56
        },
57
        {
58
          accessorKey: 'link',
59
          disableFilters: true,
60
          enableGlobalFilter: false,
61
          header: 'More Info Links',
62
          Cell: ({ cell, row }) => (
63
            <Link href={cell.getValue() as string} passHref legacyBehavior>
64
              <Anchor
65
                target={
66
                  (cell.getValue() as string).startsWith('http')
67
                    ? '_blank'
68
                    : undefined
69
                }
70
                rel="noopener"
71
              >
72
                {row.original?.linkText}
73
              </Anchor>
74
            </Link>
75
          ),
76
        },
77
      ] as MRT_ColumnDef<StateOption>[],
78
    [],
79
  );
80

81
  const [columnPinning, setColumnPinning] = useState({});
82

83
  useEffect(() => {
84
    if (typeof window !== 'undefined') {
85
      if (isDesktop) {
86
        setColumnPinning({
87
          left: ['mrt-row-expand', 'mrt-row-numbers', 'stateOption'],
88
          right: ['link'],
89
        });
90
      } else {
91
        setColumnPinning({});
92
      }
93
    }
94
  }, [isDesktop]);
95

96
  const data = useMemo(() => {
97
    if (onlyOptions) {
98
      return stateOptions.filter(({ stateOption }) =>
99
        onlyOptions.has(stateOption),
100
      );
101
    }
102
    return stateOptions;
103
  }, [onlyOptions]);
104

105
  return (
106
    <MantineReactTable
107
      columns={columns}
108
      data={data}
109
      displayColumnDefOptions={{
110
        'mrt-row-numbers': {
111
          size: 10,
112
        },
113
        'mrt-row-expand': {
114
          size: 10,
115
        },
116
      }}
117
      enableColumnActions={!onlyOptions}
118
      enableColumnFilterModes
119
      enablePagination={false}
120
      enablePinning
121
      enableRowNumbers
122
      enableBottomToolbar={false}
123
      enableTopToolbar={!onlyOptions}
124
      initialState={{
125
        columnVisibility: { description: false },
126
        density: 'xs',
127
        showGlobalFilter: true,
128
        sorting: [{ id: 'stateOption', desc: false }],
129
      }}
130
      mantineSearchTextInputProps={{
131
        placeholder: 'Search State Options',
132
        sx: { minWidth: '18rem' },
133
        variant: 'filled',
134
      }}
135
      mantinePaperProps={{
136
        sx: { marginBottom: '24px' },
137
        id: onlyOptions
138
          ? 'relevant-state-options-table'
139
          : 'state-options-table',
140
      }}
141
      positionGlobalFilter="left"
142
      renderDetailPanel={({ row }) => (
143
        <Text color={row.original.description ? 'teal' : 'gray'}>
144
          {row.original.description || 'No Description Provided... Yet...'}
145
        </Text>
146
      )}
147
      rowNumberMode="static"
148
      onColumnPinningChange={setColumnPinning}
149
      state={{ columnPinning }}
150
    />
151
  );
152
};
153

154
export default StateOptionsTable;