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} />;
#
State Option
Type
More Info Links
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