Material 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 = useMaterialReactTable({
  columns,
  data,
  //note: each individual state must be mutually exclusive to `initial state` or `state`
  initialState: {
    // all the state options you can pass here
  },
  state: {
    // or here
  },
});

Drop to group by

#	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	'comfortable' \| 'compact' \| 'spacious'	'comfortable'

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	{ top: string[], bottom: string[] }	{ top: [], bottom: [] }	TanStack Table Column Pinning Docs

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

26	boolean	false

27	boolean	false

28	boolean	false

29	boolean	false

30	boolean	false

31	boolean	false

32	boolean	false

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

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

This example is written for MRT V2.

If your app is still using MRT V1, either Upgrade to MRT V2 or use the V1 Docs instead. (useMaterialReactTable only exists in V2)

Source Code

1import { useEffect, useMemo, useState } from 'react';
2import Link from 'next/link';
3import {
4  MaterialReactTable,
5  type MRT_ColumnDef,
6  type MRT_TableState,
7} from 'material-react-table';
8import { Link as MuiLink, Typography, useMediaQuery } from '@mui/material';
9import { SampleCodeSnippet } from '../mdx/SampleCodeSnippet';
10import { type StateOption, stateOptions } from './stateOptions';
11
12interface Props {
13  onlyOptions?: Set<keyof MRT_TableState<StateOption>>;
14}
15
16const StateOptionsTable = ({ onlyOptions }: Props) => {
17  const isDesktop = useMediaQuery('(min-width: 1200px)');
18
19  const columns = useMemo<MRT_ColumnDef<StateOption>[]>(
20    () => [
21      {
22        accessorKey: 'stateOption',
23        enableClickToCopy: true,
24        header: 'State Option',
25        muiCopyButtonProps: ({ cell }) => ({
26          className: 'state-option',
27          id: `${cell.getValue<string>()}-state-option`,
28        }),
29      },
30      {
31        accessorKey: 'type',
32        header: 'Type',
33        enableGlobalFilter: false,
34        Cell: ({ cell }) => (
35          <SampleCodeSnippet
36            className="language-ts"
37            enableCopyButton={false}
38            style={{
39              backgroundColor: 'transparent',
40              fontSize: '0.9rem',
41              margin: 0,
42              padding: 0,
43              minHeight: 'unset',
44            }}
45          >
46            {cell.getValue<string>()}
47          </SampleCodeSnippet>
48        ),
49      },
50      {
51        accessorKey: 'defaultValue',
52        enableGlobalFilter: false,
53        header: 'Default Value',
54        Cell: ({ cell }) => (
55          <SampleCodeSnippet
56            className="language-js"
57            enableCopyButton={false}
58            style={{
59              backgroundColor: 'transparent',
60              fontSize: '0.9rem',
61              margin: 0,
62              padding: 0,
63              minHeight: 'unset',
64            }}
65          >
66            {cell.getValue<string>()}
67          </SampleCodeSnippet>
68        ),
69      },
70      {
71        accessorKey: 'description',
72        enableGlobalFilter: false,
73        header: 'Description',
74      },
75      {
76        accessorKey: 'link',
77        disableFilters: true,
78        enableGlobalFilter: false,
79        header: 'More Info Links',
80        Cell: ({ cell, row }) => (
81          <Link href={cell.getValue<string>()} passHref legacyBehavior>
82            <MuiLink
83              target={
84                cell.getValue<string>().startsWith('http')
85                  ? '_blank'
86                  : undefined
87              }
88              rel="noopener"
89            >
90              {row.original?.linkText}
91            </MuiLink>
92          </Link>
93        ),
94      },
95    ],
96    [],
97  );
98
99  const [columnPinning, setColumnPinning] = useState({});
100
101  useEffect(() => {
102    if (typeof window !== 'undefined') {
103      if (isDesktop) {
104        setColumnPinning({
105          left: ['mrt-row-expand', 'mrt-row-numbers', 'stateOption'],
106          right: ['link'],
107        });
108      } else {
109        setColumnPinning({});
110      }
111    }
112  }, [isDesktop]);
113
114  const data = useMemo(() => {
115    if (onlyOptions) {
116      return stateOptions.filter(({ stateOption }) =>
117        onlyOptions.has(stateOption),
118      );
119    }
120    return stateOptions;
121  }, [onlyOptions]);
122
123  return (
124    <MaterialReactTable
125      columns={columns}
126      data={data}
127      displayColumnDefOptions={{
128        'mrt-row-numbers': {
129          size: 10,
130        },
131        'mrt-row-expand': {
132          size: 10,
133        },
134      }}
135      enableColumnActions={!onlyOptions}
136      enableColumnFilterModes
137      enablePagination={false}
138      enableColumnPinning
139      enableRowNumbers
140      enableBottomToolbar={false}
141      enableTopToolbar={!onlyOptions}
142      initialState={{
143        columnVisibility: { description: false },
144        density: 'compact',
145        showGlobalFilter: true,
146        sorting: [{ id: 'stateOption', desc: false }],
147      }}
148      muiSearchTextFieldProps={{
149        placeholder: 'Search State Options',
150        sx: { minWidth: '18rem' },
151        variant: 'outlined',
152      }}
153      muiTablePaperProps={{
154        sx: { mb: '1.5rem' },
155        id: onlyOptions
156          ? 'relevant-state-options-table'
157          : 'state-options-table',
158      }}
159      positionGlobalFilter="left"
160      renderDetailPanel={({ row }) => (
161        <Typography
162          color={row.original.description ? 'secondary.main' : 'text.secondary'}
163        >
164          {row.original.description || 'No Description Provided... Yet...'}
165        </Typography>
166      )}
167      rowNumberDisplayMode="static"
168      onColumnPinningChange={setColumnPinning}
169      state={{ columnPinning }}
170    />
171  );
172};
173
174export default StateOptionsTable;
175