MRT logoMaterial React Table

Legacy V2 Docs

Row Instance APIs

NOTE: These are NOT props or column options for Material React Table. These are just static methods on a row instance that you can use.

Every row in the table has an associated row instance that can be accessed in many of the callback props that you can use to access a row's information and methods.

You can access and use a row object in quite a few places, but here are some of the most common:

const columns = [
{
accessorKey: 'salary',
header: 'Salary',
//you can access a row instance in column definition option callbacks like this
muiEditTextFieldProps: ({ row }) => ({
disabled: row.original.employmentStatus === 'Retired',
}),
//or in the component override callbacks like this
Cell: ({ cell, row }) => (
<div>
{row.original.employmentStatus === 'Retired'
? 'Retired'
: cell.getValue()}
</div>
),
},
];
const table = useMaterialReactTable({
columns,
data,
//or a row instance in callback props like this
muiSelectCheckboxProps: ({ row }) => ({
disabled: row.original.isAccountActive === false,
}),
renderDetailPanel: ({ row }) => (
<div>
<span>First Name: {row.original.firstName}</span>
<span>Last Name: {row.original.lastName}</span>
</div>
),
});
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

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_Row,
7} from 'material-react-table';
8import { Link as MuiLink, Typography, useMediaQuery } from '@mui/material';
9import { SampleCodeSnippet } from '../mdx/SampleCodeSnippet';
10import { type RowInstanceAPI, rowInstanceAPIs } from './rowInstanceAPIs';
11
12interface Props {
13 onlyOptions?: Set<keyof MRT_Row<RowInstanceAPI>>;
14}
15
16const RowInstanceAPIsTable = ({ onlyOptions }: Props) => {
17 const isDesktop = useMediaQuery('(min-width: 1200px)');
18
19 const columns = useMemo<MRT_ColumnDef<RowInstanceAPI>[]>(
20 () => [
21 {
22 accessorKey: 'rowInstanceAPI',
23 enableClickToCopy: true,
24 header: 'State Option',
25 muiCopyButtonProps: ({ cell }) => ({
26 className: 'row-instance-api',
27 id: `${cell.getValue<string>()}-row-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', 'rowInstanceAPI'],
81 right: ['link'],
82 });
83 } else {
84 setColumnPinning({});
85 }
86 }
87 }, [isDesktop]);
88
89 const data = useMemo(() => {
90 if (onlyOptions) {
91 return rowInstanceAPIs.filter(({ rowInstanceAPI }) =>
92 onlyOptions.has(rowInstanceAPI),
93 );
94 }
95 return rowInstanceAPIs;
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: 'rowInstanceAPI', desc: false }],
122 }}
123 muiSearchTextFieldProps={{
124 placeholder: 'Search Row APIs',
125 sx: { minWidth: '18rem' },
126 variant: 'outlined',
127 }}
128 muiTablePaperProps={{
129 sx: { mb: '1.5rem' },
130 id: onlyOptions
131 ? 'relevant-row-instance-apis-table'
132 : 'row-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 RowInstanceAPIsTable;
150