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
    }
  }
/>

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	'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	boolean	false

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