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
string
TanStack Table ColumnDef Docs

No Description Provided... Yet...

2
(originalRow: TData) => any
MRT Data Columns Docs

Alternative to an accessorKey, define an accessor function instead of a string key.

3
string & keyof TData
MRT Data Columns Docs

If provided, the accessorKey will be used to point to which key in the data object should be used to access the data in this column.

4
(({ cell, column, row, table }) => ReactNode)

Define a custom cell render for an aggregated cell.

5
'count'
TanStack Table Grouping Docs

Specify which aggregate function should be used for grouped columns.

6
(({ cell, column, row, table }) => ReactNode)
MRT Data Columns Docs

Define a custom cell render to add markup, styles, or conditional logic.

7
Array<string>

No Description Provided... Yet...

8
Array<MRT_ColumnDef<TData>>

If using header groups, define an array of sub columns here.

9
(({ cell, column, row, table }) => ReactNode)
MRT Editing Docs

Define a custom edit component for cells in a column.

10
boolean
MRT Click to Copy Docs

Enable the click to copy feature for this column.

11
boolean
MRT Column Actions Docs

Enable or disable column actions for this column.

12
boolean

Enable or disable column dragging for this column.

13
boolean
MRT Column Filtering Docs

Enable or disable column filtering for this column. Filter will not be shown if disabled.

14
boolean
MRT Column Filtering Docs

Enable column filtering modes for this column.

15
boolean

No Description Provided... Yet...

16
boolean

No Description Provided... Yet...

17
boolean

No Description Provided... Yet...

18
boolean

No Description Provided... Yet...

19
boolean

No Description Provided... Yet...

20
boolean

No Description Provided... Yet...

21
boolean

No Description Provided... Yet...

22
boolean

No Description Provided... Yet...

23
boolean

No Description Provided... Yet...

24
(({ column, header, table }) => ReactNode)
MRT Column Filtering Docs

Define a custom filter component in a column.

25
MRT_FilterFn
fuzzy

No Description Provided... Yet...

26
Array<{ text: string; value: string }>

No Description Provided... Yet...

27
'text' | 'select' | 'multi-select | 'range
text

Specify whether the filter should be a text input or a select input, or other type of pre-built input.

28
ReactNode | (({ column, footer, table }) => ReactNode)
MRT Data Columns Docs

Render custom markup for a column footer.

29
(({ cell, column, row, table }) => ReactNode)

Define a custom cell render for a grouped cell.

30
ReactNode | (({ column, header, table }) => ReactNode)
MRT Data Columns Docs

Render custom markup for a column header.

31
string
TanStack Table ColumnDef Docs

No Description Provided... Yet...

32
boolean
false

No Description Provided... Yet...

33
number
1000

No Description Provided... Yet...

34
any
{}

No Description Provided... Yet...

35
number
40

No Description Provided... Yet...

36
ButtonProps | ({ cell, column, row, table }) => ButtonProps
Material UI Button API

No Description Provided... Yet...

37
TextFieldProps | ({ cell, column, row, table }) => TextFieldProps
Material UI TextField API

No Description Provided... Yet...

38
TableCellProps | ({ cell, table }) => TableCellProps
Material UI TableCell API

No Description Provided... Yet...

39
TableCellProps | ({ column, table }) => TableCellProps
Material UI TableCell API

No Description Provided... Yet...

40
IconButtonProps | ({ column, table }) => IconButtonProps
Material UI IconButton API

No Description Provided... Yet...

41
IconButtonProps | ({ column, table }) => IconButtonProps
Material UI IconButton API

No Description Provided... Yet...

42
Checkbox | ({ column, table }) => CheckboxProps
Material UI Checkbox Props

No Description Provided... Yet...

43
TextFieldProps | ({ column, rangeFilterIndex, table }) => TextFieldProps
Material UI TextField Props

No Description Provided... Yet...

44
TableCellProps | ({ column, table }) => TableCellProps
Material UI TableCell API

No Description Provided... Yet...

45

No Description Provided... Yet...

46

No Description Provided... Yet...

47
number
180

No Description Provided... Yet...

48
boolean

No Description Provided... Yet...

49
SortingFnOption

No Description Provided... Yet...

50
false | 1 | -1

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