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.

#
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

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