MRT logoMaterial React Table

Table Instance APIs

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

These are the methods available on the table instance that is returned from the useMaterialReactTable hook. You can use these methods to interact with the table instance.

const columns = useMemo(() => [
{
accessor: 'name',
header: 'Name',
Cell: ({ cell, table }) => <span onClick={() => table.{/* or maybe here */}}></span>,
},
], []);
const table = useMaterialReactTable({
columns,
data,
renderTopToolbarCustomActions: ({ table }) => <Button onClick={() => table{/* or maybe here */}}>Click Me</Button>,
});
const someEventHandler = () => {
table. //call any of the table instance methods here
};
return <MaterialReactTable table={table} />;
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
129
130
131
132
133
134
135
136

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