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 (
  <MaterialReactTable
    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, { 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 = ({ onlyProps }: Props) => {
16  const isDesktop = useMediaQuery('(min-width: 1200px)');
17

18  const columns = useMemo<MRT_ColumnDef<TableInstanceAPI>[]>(
19    () => [
20      {
21        accessorKey: 'tableInstanceAPI',
22        enableClickToCopy: true,
23        header: 'State Option',
24        muiTableBodyCellCopyButtonProps: ({ cell }) => ({
25          className: 'table-instance-api',
26          id: `${cell.getValue<string>()}-table-instance-api`,
27        }),
28      },
29      {
30        accessorKey: 'type',
31        header: 'Type',
32        enableGlobalFilter: false,
33        Cell: ({ cell }) => (
34          <SampleCodeSnippet
35            className="language-ts"
36            enableCopyButton={false}
37            style={{
38              backgroundColor: 'transparent',
39              fontSize: '0.9rem',
40              margin: 0,
41              padding: 0,
42              minHeight: 'unset',
43            }}
44          >
45            {cell.getValue<string>()}
46          </SampleCodeSnippet>
47        ),
48      },
49      {
50        accessorKey: 'link',
51        disableFilters: true,
52        enableGlobalFilter: false,
53        header: 'More Info Links',
54        Cell: ({ cell, row }) => (
55          <Link href={cell.getValue<string>()} passHref legacyBehavior>
56            <MuiLink
57              target={
58                cell.getValue<string>().startsWith('http')
59                  ? '_blank'
60                  : undefined
61              }
62              rel="noopener"
63            >
64              {row.original?.linkText}
65            </MuiLink>
66          </Link>
67        ),
68      },
69    ],
70    [],
71  );
72

73  const [columnPinning, setColumnPinning] = useState({});
74

75  useEffect(() => {
76    if (typeof window !== 'undefined') {
77      if (isDesktop) {
78        setColumnPinning({
79          left: ['mrt-row-expand', 'mrt-row-numbers', 'tableInstanceAPI'],
80          right: ['link'],
81        });
82      } else {
83        setColumnPinning({});
84      }
85    }
86  }, [isDesktop]);
87

88  const data = useMemo(() => {
89    if (onlyProps) {
90      return tableInstanceAPIs.filter(({ tableInstanceAPI }) =>
91        onlyProps.has(tableInstanceAPI),
92      );
93    }
94    return tableInstanceAPIs;
95  }, [onlyProps]);
96

97  return (
98    <MaterialReactTable
99      columns={columns}
100      data={data}
101      displayColumnDefOptions={{
102        'mrt-row-numbers': {
103          size: 10,
104        },
105        'mrt-row-expand': {
106          size: 10,
107        },
108      }}
109      enableColumnActions={!onlyProps}
110      enableColumnFilterModes
111      enablePagination={false}
112      enablePinning
113      enableRowNumbers
114      enableBottomToolbar={false}
115      enableTopToolbar={!onlyProps}
116      initialState={{
117        columnVisibility: { description: false },
118        density: 'compact',
119        showGlobalFilter: true,
120        sorting: [{ id: 'tableInstanceAPI', desc: false }],
121      }}
122      muiSearchTextFieldProps={{
123        placeholder: 'Search Table APIs',
124        sx: { minWidth: '18rem' },
125        variant: 'outlined',
126      }}
127      muiTablePaperProps={{
128        sx: { mb: '1.5rem' },
129        id: onlyProps
130          ? 'relevant-table-instance-apis-table'
131          : 'table-instance-apis-table',
132      }}
133      positionGlobalFilter="left"
134      renderDetailPanel={({ row }) => (
135        <Typography
136          color={row.original.description ? 'secondary.main' : 'text.secondary'}
137        >
138          {row.original.description || 'No Description Provided... Yet...'}
139        </Typography>
140      )}
141      rowNumberMode="static"
142      onColumnPinningChange={setColumnPinning}
143      state={{ columnPinning }}
144    />
145  );
146};
147

148export default TableInstanceAPIsTable;
149