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, { 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 = ({ onlyProps }: Props) => {
16  const isDesktop = useMediaQuery('(min-width: 1200px)');
17

18  const columns = useMemo<MRT_ColumnDef<RowInstanceAPI>[]>(
19    () => [
20      {
21        accessorKey: 'rowInstanceAPI',
22        enableClickToCopy: true,
23        header: 'State Option',
24        muiTableBodyCellCopyButtonProps: ({ cell }) => ({
25          className: 'row-instance-api',
26          id: `${cell.getValue<string>()}-row-instance-api`,
27        }),
28      },
29      {
30        accessorKey: 'type',
31        header: 'Type',
32        enableGlobalFilter: false,
33        Cell: ({ cell }) => (
34          <SampleCodeSnippet
35            className="language-ts"
36            enableCopyButton={false}
37            style={{
38              backgroundColor: 'transparent',
39              fontSize: '0.9rem',
40              margin: 0,
41              padding: 0,
42              minHeight: 'unset',
43            }}
44          >
45            {cell.getValue<string>()}
46          </SampleCodeSnippet>
47        ),
48      },
49      {
50        accessorKey: 'link',
51        disableFilters: true,
52        enableGlobalFilter: false,
53        header: 'More Info Links',
54        Cell: ({ cell, row }) => (
55          <Link href={cell.getValue<string>()} passHref legacyBehavior>
56            <MuiLink
57              target={
58                cell.getValue<string>().startsWith('http')
59                  ? '_blank'
60                  : undefined
61              }
62              rel="noopener"
63            >
64              {row.original?.linkText}
65            </MuiLink>
66          </Link>
67        ),
68      },
69    ],
70    [],
71  );
72

73  const [columnPinning, setColumnPinning] = useState({});
74

75  useEffect(() => {
76    if (typeof window !== 'undefined') {
77      if (isDesktop) {
78        setColumnPinning({
79          left: ['mrt-row-expand', 'mrt-row-numbers', 'rowInstanceAPI'],
80          right: ['link'],
81        });
82      } else {
83        setColumnPinning({});
84      }
85    }
86  }, [isDesktop]);
87

88  const data = useMemo(() => {
89    if (onlyProps) {
90      return rowInstanceAPIs.filter(({ rowInstanceAPI }) =>
91        onlyProps.has(rowInstanceAPI),
92      );
93    }
94    return rowInstanceAPIs;
95  }, [onlyProps]);
96

97  return (
98    <MaterialReactTable
99      columns={columns}
100      data={data}
101      displayColumnDefOptions={{
102        'mrt-row-numbers': {
103          size: 10,
104        },
105        'mrt-row-expand': {
106          size: 10,
107        },
108      }}
109      enableColumnActions={!onlyProps}
110      enableColumnFilterModes
111      enablePagination={false}
112      enablePinning
113      enableRowNumbers
114      enableBottomToolbar={false}
115      enableTopToolbar={!onlyProps}
116      initialState={{
117        columnVisibility: { description: false },
118        density: 'compact',
119        showGlobalFilter: true,
120        sorting: [{ id: 'rowInstanceAPI', desc: false }],
121      }}
122      muiSearchTextFieldProps={{
123        placeholder: 'Search Row APIs',
124        sx: { minWidth: '18rem' },
125        variant: 'outlined',
126      }}
127      muiTablePaperProps={{
128        sx: { mb: '1.5rem' },
129        id: onlyProps
130          ? 'relevant-row-instance-apis-table'
131          : 'row-instance-apis-table',
132      }}
133      positionGlobalFilter="left"
134      renderDetailPanel={({ row }) => (
135        <Typography
136          color={row.original.description ? 'secondary.main' : 'text.secondary'}
137        >
138          {row.original.description || 'No Description Provided... Yet...'}
139        </Typography>
140      )}
141      rowNumberMode="static"
142      onColumnPinningChange={setColumnPinning}
143      state={{ columnPinning }}
144    />
145  );
146};
147

148export default RowInstanceAPIsTable;
149