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 all the logic, events, and 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

No Description Provided... Yet...

2

No Description Provided... Yet...

3

No Description Provided... Yet...

4

No Description Provided... Yet...

5

No Description Provided... Yet...

6

No Description Provided... Yet...

7

No Description Provided... Yet...

8

No Description Provided... Yet...

9

No Description Provided... Yet...

10

No Description Provided... Yet...

11

No Description Provided... Yet...

12

No Description Provided... Yet...

13

No Description Provided... Yet...

14

No Description Provided... Yet...

15

No Description Provided... Yet...

16

No Description Provided... Yet...

17

No Description Provided... Yet...

18

No Description Provided... Yet...

19

No Description Provided... Yet...

20

No Description Provided... Yet...

21

No Description Provided... Yet...

22

No Description Provided... Yet...

23

No Description Provided... Yet...

24

No Description Provided... Yet...

25

No Description Provided... Yet...

26

No Description Provided... Yet...

27

No Description Provided... Yet...

28

No Description Provided... Yet...

29

No Description Provided... Yet...

30

No Description Provided... Yet...

31

No Description Provided... Yet...

32

No Description Provided... Yet...

33

No Description Provided... Yet...

34

No Description Provided... Yet...

35

No Description Provided... Yet...

36

No Description Provided... Yet...

37

No Description Provided... Yet...

38

No Description Provided... Yet...

39

No Description Provided... Yet...

40

No Description Provided... Yet...

41

No Description Provided... Yet...

42

No Description Provided... Yet...

43

No Description Provided... Yet...

44

No Description Provided... Yet...

45

No Description Provided... Yet...

46

No Description Provided... Yet...

47

No Description Provided... Yet...

48

No Description Provided... Yet...

49

No Description Provided... Yet...

50

No Description Provided... Yet...

51

No Description Provided... Yet...

52

No Description Provided... Yet...

53

No Description Provided... Yet...

54

No Description Provided... Yet...

55

No Description Provided... Yet...

56

No Description Provided... Yet...

57

No Description Provided... Yet...

58

No Description Provided... Yet...

59

No Description Provided... Yet...

60

No Description Provided... Yet...

61

No Description Provided... Yet...

62

No Description Provided... Yet...

63

No Description Provided... Yet...

64

No Description Provided... Yet...

65

No Description Provided... Yet...

66

No Description Provided... Yet...

67

No Description Provided... Yet...

68

No Description Provided... Yet...

69

No Description Provided... Yet...

70

No Description Provided... Yet...

71

No Description Provided... Yet...

72

No Description Provided... Yet...

73

No Description Provided... Yet...

74

No Description Provided... Yet...

75

No Description Provided... Yet...

76

No Description Provided... Yet...

77

No Description Provided... Yet...

78

No Description Provided... Yet...

79

No Description Provided... Yet...

80

No Description Provided... Yet...

81

No Description Provided... Yet...

82

No Description Provided... Yet...

83

No Description Provided... Yet...

84

No Description Provided... Yet...

85

No Description Provided... Yet...

86

No Description Provided... Yet...

87

No Description Provided... Yet...

88

No Description Provided... Yet...

89

No Description Provided... Yet...

90

No Description Provided... Yet...

91

No Description Provided... Yet...

92

No Description Provided... Yet...

93

No Description Provided... Yet...

94

No Description Provided... Yet...

95

No Description Provided... Yet...

96

No Description Provided... Yet...

97

No Description Provided... Yet...

98

No Description Provided... Yet...

99

No Description Provided... Yet...

100

No Description Provided... Yet...

101

No Description Provided... Yet...

102

No Description Provided... Yet...

103

No Description Provided... Yet...

104

No Description Provided... Yet...

105

No Description Provided... Yet...

106

No Description Provided... Yet...

107

No Description Provided... Yet...

108

No Description Provided... Yet...

109

No Description Provided... Yet...

110

No Description Provided... Yet...

111

No Description Provided... Yet...

112

No Description Provided... Yet...

113

No Description Provided... Yet...

114

No Description Provided... Yet...

115

No Description Provided... Yet...

116

No Description Provided... Yet...

117

No Description Provided... Yet...

118

No Description Provided... Yet...

119

No Description Provided... Yet...

120

No Description Provided... Yet...

121

No Description Provided... Yet...

122

No Description Provided... Yet...

123

No Description Provided... Yet...

124

No Description Provided... Yet...

125

No Description Provided... Yet...

126

No Description Provided... Yet...

127

No Description Provided... Yet...

128

No Description Provided... Yet...

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-js"
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>
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 enableColumnOrdering={!onlyProps}
114 enablePagination={false}
115 enablePinning
116 enableRowNumbers
117 enableBottomToolbar={false}
118 enableTopToolbar={!onlyProps}
119 initialState={{
120 columnVisibility: { description: false },
121 density: 'compact',
122 showGlobalFilter: true,
123 sorting: [{ id: 'tableInstanceAPI', desc: false }],
124 }}
125 muiSearchTextFieldProps={{
126 placeholder: 'Search Table APIs',
127 sx: { minWidth: '18rem' },
128 variant: 'outlined',
129 }}
130 muiTablePaperProps={{
131 sx: { mb: '1.5rem' },
132 id: onlyProps
133 ? 'relevant-table-instance-apis-table'
134 : 'table-instance-apis-table',
135 }}
136 positionGlobalFilter="left"
137 renderDetailPanel={({ row }) => (
138 <Typography
139 color={row.original.description ? 'secondary.main' : 'text.secondary'}
140 >
141 {row.original.description || 'No Description Provided... Yet...'}
142 </Typography>
143 )}
144 rowNumberMode="static"
145 state={{ columnPinning }}
146 />
147 );
148};
149
150export default TableInstanceAPIsTable;
151