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

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

24	boolean	false

25	boolean	false

26	boolean	false

27	boolean	false

28	boolean	false

29	boolean	false

30	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, { 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      rowNumberMode="static"
168      onColumnPinningChange={setColumnPinning}
169      state={{ columnPinning }}
170    />
171  );
172};
173
174export default StateOptionsTable;
175