MRT logoMaterial React Table

Column Options

Many of the column options you can pass here are the same as the ones that you can pass to the useReactTable ColumnDefs

Here is a list of all the column options you can specify in a column definition.

const columns = useMemo(
() => [
{
accessorKey: 'name',
header: 'Name',
// All of the options you can specify here
},
],
[],
);
return <MaterialReactTable columns={columns} data={data} />;
1
(originalRow: TData) => any
MRT Data Columns Docs
2
string & keyof TData
MRT Data Columns Docs
3
({ cell, column, row, table }) => ReactNode
4
'count'
TanStack Table Grouping Docs
5
({ cell, column, renderedCellValue, row, table }) => ReactNode
MRT Data Columns Docs
6
Array<string>
7
Array<MRT_ColumnDef<TData>>
8
({ cell, column, row, table }) => ReactNode
MRT Editing Docs
9
Array<string | { label: string; value: string }>
10
'text' | 'select'
'text'
11
boolean
MRT Click to Copy Docs
12
boolean
MRT Column Actions Docs
13
boolean
14
boolean
MRT Column Filtering Docs
15
boolean
MRT Column Filtering Docs
16
boolean
17
boolean | (row) => boolean
18
boolean
MRT Column Filtering Docs
19
boolean
20
boolean
21
boolean
22
boolean
true
23
boolean
24
boolean
25
boolean
26
({ column, header, table }) => ReactNode
MRT Column Filtering Docs
27
MRT_FilterFn
'fuzzy'
28
Array<string | { label: string; value: string }>
29
'text' | 'select' | 'multi-select' | 'range' | 'range-slider' | 'checkbox'
'text'
30
ReactNode | ({ column, footer, table }) => ReactNode
MRT Data Columns Docs
31
(row: TData) => any)
TanStack Table Grouping Docs
32
({ cell, column, row, table }) => ReactNode
33
ReactNode | (({ column, header, table }) => ReactNode)
MRT Data Columns Docs
34
string
TanStack Table ColumnDef Docs
35
string
TanStack Table ColumnDef Docs
36
boolean
false
37
number
1000
38
any
{}
39
number
40
40
IconButtonProps | ({ column, table }) => IconButtonProps
Material UI IconButton API
41
IconButtonProps | ({ column, table }) => IconButtonProps
Material UI IconButton API
42
ButtonProps | ({ cell, column, row, table }) => ButtonProps
Material UI Button API
43
TextFieldProps | ({ cell, column, row, table }) => TextFieldProps
Material UI TextField API
44
AutocompleteProps | ({ column, rangeFilterIndex, table }) => AutocompleteProps
MUI X DatePicker Props
45
CheckboxProps | ({ column, table }) => CheckboxProps
Material UI Checkbox Props
46
DatePickerProps | ({ column, rangeFilterIndex, table }) => DatePickerProps
MUI X DatePicker Props
47
SliderProps | ({ column, table}) => SliderProps
Material UI Slider Props
48
TextFieldProps | ({ column, rangeFilterIndex, table }) => TextFieldProps
Material UI TextField Props
49
TableCellProps | ({ cell, table }) => TableCellProps
Material UI TableCell API
50
TableCellProps | ({ column, table }) => TableCellProps
Material UI TableCell API
51
TableCellProps | ({ column, table }) => TableCellProps
Material UI TableCell API
52
({ cell, column, row, table }) => ReactNode
53
({ closeMenu, column, internalColumnMenuItems, table }) => ReactNode[]
54
55
number
180
56
boolean
57
SortingFnOption
58
false | 1 | -1

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