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