MRT logoMaterial React Table

Legacy V2 Docs

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.

const table = useMaterialReactTable({
columns,
data,
//note: each individual state must be mutually exclusive to `initial state` or `state`
initialState: {
// all the state options you can pass here
},
state: {
// or here
},
});
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
MRT_Row
9
'comfortable' | 'compact' | 'spacious'
'comfortable'
10
MRT_Column | null
11
MRT_Row | null
12
MRT_Cell
13
MRT_Row
14
Record<string, boolean> | boolean
{}
TanStack Table Expanding Docs
15
any
TanStack Table Filtering Docs
16
MRT_FilterFn
17
Array<string>
[]
TanStack Table Grouping Docs
18
MRT_Column | null
19
MRT_Row | null
20
boolean
false
21
boolean
false
22
boolean
false
23
{ pageIndex: number, pageSize: number }
{ pageIndex: 0, pageSize: 10 }
TanStack Table Pagination Docs
24
{ top: string[], bottom: string[] }
{ top: [], bottom: [] }
TanStack Table Column Pinning Docs
25
Record<string, boolean>
{}
TanStack Table Row Selection Docs
26
boolean
false
27
boolean
false
28
boolean
false
29
boolean
false
30
boolean
false
31
boolean
false
32
boolean
false
33
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 { 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 rowNumberDisplayMode="static"
168 onColumnPinningChange={setColumnPinning}
169 state={{ columnPinning }}
170 />
171 );
172};
173
174export default StateOptionsTable;
175