MRT logoMaterial React Table

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>
  ),
});
#
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

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