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.

<MaterialReactTable
  initialState={
    {
      // all the state options you can pass here
    }
  }
  state={
    {
      // or here
    }
  }
/>

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

9	MRT_Column \| null

10	MRT_Row \| null

11	MRT_Cell

12	MRT_Row

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

14	any		TanStack Table Filtering Docs

15	MRT_FilterFn

16	Array<string>	[]	TanStack Table Grouping Docs

17	MRT_Column \| null

18	MRT_Row \| null

19	boolean	false

20	boolean	false

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

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

23	boolean	false

24	boolean	false

25	boolean	false

26	boolean	false

27	boolean	false

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

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

Source Code

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