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.

#
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

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