MRT logoMaterial React Table

Table Instance APIs

Internally, Material React Table uses the useReactTable hook from TanStack Table to create a table instance that handles a majority of the logic and events and the state for the table.

You can access this table instance yourself by either setting up a tableInstanceRef or by consuming a table param from many of the callback functions in many of the props.

const tableInstanceRef = useRef(null);
const someEventHandler = () => {
tableInstanceRef.current. //call any of the table instance methods here
};
const columns = useMemo(() => [
{
accessor: 'name',
header: 'Name',
Cell: ({ cell, table }) => <span onClick={() => table.{/* or maybe here */}}></span>,
},
]);
return (
<MaterialTable
columns={columns}
data={data}
//all callback props have access to the table instance when used like this
renderTopToolbarCustomActions={({ table }) => (
<Button onClick={() => table.{/* or maybe here */}}>Click Me</Button>
)}
tableInstanceRef={tableInstanceRef}
/>
);

NOTE: These are NOT the props for Material React Table. These are just static methods on a table instance that you can use.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

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_TableInstance,
6} from 'material-react-table';
7import { Link as MuiLink, Typography, useMediaQuery } from '@mui/material';
8import { SampleCodeSnippet } from '../mdx/SampleCodeSnippet';
9import { TableInstanceAPI, tableInstanceAPIs } from './tableInstanceAPIs';
10
11interface Props {
12 onlyProps?: Set<keyof MRT_TableInstance>;
13}
14
15const TableInstanceAPIsTable: FC<Props> = ({ onlyProps }) => {
16 const isDesktop = useMediaQuery('(min-width: 1200px)');
17
18 const columns = useMemo(
19 () =>
20 [
21 {
22 accessorKey: 'tableInstanceAPI',
23 enableClickToCopy: true,
24 header: 'State Option',
25 muiTableBodyCellCopyButtonProps: ({ cell }) => ({
26 className: 'table-instance-api',
27 id: `${cell.getValue<string>()}-table-instance-api`,
28 }),
29 Cell: ({ cell }) => cell.getValue<string>(),
30 },
31 {
32 accessorKey: 'type',
33 header: 'Type',
34 enableGlobalFilter: false,
35 Cell: ({ cell }) => (
36 <SampleCodeSnippet
37 className="language-ts"
38 enableCopyButton={false}
39 style={{
40 backgroundColor: 'transparent',
41 fontSize: '0.9rem',
42 margin: 0,
43 padding: 0,
44 minHeight: 'unset',
45 }}
46 >
47 {cell.getValue<string>()}
48 </SampleCodeSnippet>
49 ),
50 },
51 {
52 accessorKey: 'link',
53 disableFilters: true,
54 enableGlobalFilter: false,
55 header: 'More Info Links',
56 Cell: ({ cell, row }) => (
57 <Link href={cell.getValue() as string} passHref legacyBehavior>
58 <MuiLink
59 target={
60 (cell.getValue() as string).startsWith('http')
61 ? '_blank'
62 : undefined
63 }
64 rel="noreferrer"
65 >
66 {row.original?.linkText}
67 </MuiLink>
68 </Link>
69 ),
70 },
71 ] as MRT_ColumnDef<TableInstanceAPI>[],
72 [],
73 );
74
75 const [columnPinning, setColumnPinning] = useState({});
76
77 useEffect(() => {
78 if (typeof window !== 'undefined') {
79 if (isDesktop) {
80 setColumnPinning({
81 left: ['mrt-row-expand', 'mrt-row-numbers', 'tableInstanceAPI'],
82 right: ['link'],
83 });
84 } else {
85 setColumnPinning({});
86 }
87 }
88 }, [isDesktop]);
89
90 const data = useMemo(() => {
91 if (onlyProps) {
92 return tableInstanceAPIs.filter(({ tableInstanceAPI }) =>
93 onlyProps.has(tableInstanceAPI),
94 );
95 }
96 return tableInstanceAPIs;
97 }, [onlyProps]);
98
99 return (
100 <MaterialReactTable
101 columns={columns}
102 data={data}
103 displayColumnDefOptions={{
104 'mrt-row-numbers': {
105 size: 10,
106 },
107 'mrt-row-expand': {
108 size: 10,
109 },
110 }}
111 enableColumnActions={!onlyProps}
112 enableColumnFilterModes
113 enablePagination={false}
114 enablePinning
115 enableRowNumbers
116 enableBottomToolbar={false}
117 enableTopToolbar={!onlyProps}
118 initialState={{
119 columnVisibility: { description: false },
120 density: 'compact',
121 showGlobalFilter: true,
122 sorting: [{ id: 'tableInstanceAPI', desc: false }],
123 }}
124 muiSearchTextFieldProps={{
125 placeholder: 'Search Table APIs',
126 sx: { minWidth: '18rem' },
127 variant: 'outlined',
128 }}
129 muiTablePaperProps={{
130 sx: { mb: '1.5rem' },
131 id: onlyProps
132 ? 'relevant-table-instance-apis-table'
133 : 'table-instance-apis-table',
134 }}
135 positionGlobalFilter="left"
136 renderDetailPanel={({ row }) => (
137 <Typography
138 color={row.original.description ? 'secondary.main' : 'text.secondary'}
139 >
140 {row.original.description || 'No Description Provided... Yet...'}
141 </Typography>
142 )}
143 rowNumberMode="static"
144 onColumnPinningChange={setColumnPinning}
145 state={{ columnPinning }}
146 />
147 );
148};
149
150export default TableInstanceAPIsTable;
151