MRT logoMaterial React Table

Row Instance APIs

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
muiTableBodyCellEditTextFieldProps: ({ 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>
),
},
];
return (
<MaterialReactTable
columns={columns}
data={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>
)}
/>
);

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.

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

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