MRT logoMaterial React Table

State Options

Many of the state options that you can pass here are the same as the ones that you can pass to the useReactTable useTableInstance hook.

Here is a list of all the state options that you can pass to initialState or state.

<MaterialReactTable
initialState={
{
// all the state options you can pass here
}
}
state={
{
// or here
}
}
/>
#
State Option
Type
Default Value
More Info Links
1
{ [key: string]: MRT_FilterFn }

No Description Provided... Yet...

2
Array<{id: string, value: unknown}>
{}
TanStack Table Filters Docs

No Description Provided... Yet...

3
Array<string>
[]
TanStack Table Column Ordering Docs

No Description Provided... Yet...

4
{ left: Array<string>, right: Array<string> }
{ left: [], right: [] }
TanStack Table Column Pinning Docs

No Description Provided... Yet...

5
Record<string, number>
{}
TanStack Table Column Sizing Docs

No Description Provided... Yet...

6
See TanStack Docs
{}
TanStack Table Column Sizing Docs

No Description Provided... Yet...

7
Record<string, boolean>
{}
TanStack Table Column Visibility Docs

No Description Provided... Yet...

8
'comfortable' | 'compact' | 'spacious'
comfortable

No Description Provided... Yet...

9
MRT_Column | null

No Description Provided... Yet...

10
MRT_Row | null

No Description Provided... Yet...

11
MRT_Cell

No Description Provided... Yet...

12
MRT_Row

No Description Provided... Yet...

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

No Description Provided... Yet...

14
any
TanStack Table Filtering Docs

No Description Provided... Yet...

15
MRT_FilterFn

No Description Provided... Yet...

16
Array<string>
[]
TanStack Table Grouping Docs

No Description Provided... Yet...

17
MRT_Column | null

No Description Provided... Yet...

18
MRT_Row | null

No Description Provided... Yet...

19
boolean
false

No Description Provided... Yet...

20
boolean
false

No Description Provided... Yet...

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

No Description Provided... Yet...

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

No Description Provided... Yet...

23
boolean
false

No Description Provided... Yet...

24
boolean
false

No Description Provided... Yet...

25
boolean
false

No Description Provided... Yet...

26
boolean
false

No Description Provided... Yet...

27
boolean
false

No Description Provided... Yet...

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

No Description Provided... Yet...

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 enableColumnOrdering={!onlyProps}
141 enablePagination={false}
142 enablePinning
143 enableRowNumbers
144 enableBottomToolbar={false}
145 enableTopToolbar={!onlyProps}
146 initialState={{
147 columnVisibility: { description: false },
148 density: 'compact',
149 showGlobalFilter: true,
150 sorting: [{ id: 'stateOption', desc: false }],
151 }}
152 muiSearchTextFieldProps={{
153 placeholder: 'Search State Options',
154 sx: { minWidth: '18rem' },
155 variant: 'outlined',
156 }}
157 muiTablePaperProps={{
158 sx: { mb: '1.5rem' },
159 id: onlyProps ? 'relevant-state-options-table' : 'state-options-table',
160 }}
161 positionGlobalFilter="left"
162 renderDetailPanel={({ row }) => (
163 <Typography
164 color={row.original.description ? 'secondary.main' : 'text.secondary'}
165 >
166 {row.original.description || 'No Description Provided... Yet...'}
167 </Typography>
168 )}
169 rowNumberMode="static"
170 state={{ columnPinning }}
171 />
172 );
173};
174
175export default StateOptionsTable;
176