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
},
],
[],
);
const table = useMaterialReactTable({ columns, data });
return <MaterialReactTable table={table} />;
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
DropdownOption[] | (({ cell, column, row, table, }) => DropdownOption[])
10
'text' | 'select'
'text'
11
boolean | 'context-menu' | ((cell: MRT_Cell<TData>) => 'context-menu' | 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' | 'autocomplete' | 'date' | 'date-range' | 'datetime' | 'datetime-range' | 'time' | 'time-range'
'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
boolean | number
34
ReactNode | (({ column, header, table }) => ReactNode)
MRT Data Columns Docs
35
string
TanStack Table ColumnDef Docs
36
string
TanStack Table ColumnDef Docs
37
boolean
false
38
number
1000
39
any
{}
40
number
40
41
IconButtonProps | ({ column, table }) => IconButtonProps
Material UI IconButton API
42
IconButtonProps | ({ column, table }) => IconButtonProps
Material UI IconButton API
43
ButtonProps | ({ cell, column, row, table }) => ButtonProps
Material UI Button API
44
TextFieldProps | ({ cell, column, row, table }) => TextFieldProps
Material UI TextField API
45
AutocompleteProps | ({ column, rangeFilterIndex, table }) => AutocompleteProps
MUI X DatePicker Props
46
CheckboxProps | ({ column, table }) => CheckboxProps
Material UI Checkbox Props
47
DatePickerProps | ({ column, rangeFilterIndex, table }) => DatePickerProps
MUI X DatePicker Props
48
DateTimePickerProps | ({ column, rangeFilterIndex, table }) => DateTimePickerProps
MUI X DateTimePicker Props
49
SliderProps | ({ column, table}) => SliderProps
Material UI Slider Props
50
TextFieldProps | ({ column, rangeFilterIndex, table }) => TextFieldProps
Material UI TextField Props
51
TimePickerProps | ({ column, rangeFilterIndex, table }) => TimePickerProps
MUI X TimePicker Props
52
TableCellProps | ({ cell, table }) => TableCellProps
Material UI TableCell API
53
TableCellProps | ({ column, table }) => TableCellProps
Material UI TableCell API
54
TableCellProps | ({ column, table }) => TableCellProps
Material UI TableCell API
55
({ cell, column, row, table }) => ReactNode
56
{ cell, closeMenu, column, internalMenuItems, row, staticColumnIndex, staticRowIndex, table }) => ReactNode[]
57
({ closeMenu, column, internalColumnMenuItems, table }) => ReactNode[]
58
59
number
180
60
boolean
61
SortingFnOption
62
false | 1 | -1
63
boolean
true
MRT Column Hiding 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 { 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