Mantine React Table Row Instance API Reference

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
    mantineEditTextInputProps: ({ 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 = useMantineReactTable({
  columns,
  data,
  mantineSelectCheckboxProps: ({ row }) => ({
    disabled: row.original.isAccountActive === false,
  }),
  renderDetailPanel: ({ row }) => (
    <div>
      <span>First Name: {row.original.firstName}</span>
      <span>Last Name: {row.original.lastName}</span>
    </div>
  ),
});

return <MantineReactTable table={table} />;

	#	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

Wanna see the source code for this table? Check it out down below!

1
import { useEffect, useMemo, useState } from 'react';
2
import Link from 'next/link';
3
import {
4
  MantineReactTable,
5
  type MRT_ColumnDef,
6
  type MRT_Row,
7
} from 'mantine-react-table';
8
import { Anchor, Text } from '@mantine/core';
9
import { useMediaQuery } from '@mantine/hooks';
10
import { SampleCodeSnippet } from '../mdx/SampleCodeSnippet';
11
import { type RowInstanceAPI, rowInstanceAPIs } from './rowInstanceAPIs';
12

13
interface Props {
14
  onlyOptions?: Set<keyof MRT_Row<RowInstanceAPI>>;
15
}
16

17
const RowInstanceAPIsTable = ({ onlyOptions }: Props) => {
18
  const isDesktop = useMediaQuery('(min-width: 1200px)');
19

20
  const columns = useMemo(
21
    () =>
22
      [
23
        {
24
          accessorKey: 'rowInstanceAPI',
25
          enableClickToCopy: true,
26
          header: 'State Option',
27
          mantineCopyButtonProps: ({ cell }) => ({
28
            className: 'row-instance-api',
29
            id: `${cell.getValue<string>()}-row-instance-api`,
30
          }),
31
        },
32
        {
33
          accessorKey: 'type',
34
          header: 'Type',
35
          enableGlobalFilter: false,
36
          Cell: ({ cell }) => (
37
            <SampleCodeSnippet language="typescript" noCopy>
38
              {cell.getValue<string>()}
39
            </SampleCodeSnippet>
40
          ),
41
        },
42
        {
43
          accessorKey: 'link',
44
          disableFilters: true,
45
          enableGlobalFilter: false,
46
          header: 'More Info Links',
47
          Cell: ({ cell, row }) => (
48
            <Link href={cell.getValue() as string} passHref legacyBehavior>
49
              <Anchor
50
                target={
51
                  (cell.getValue() as string).startsWith('http')
52
                    ? '_blank'
53
                    : undefined
54
                }
55
                rel="noopener"
56
              >
57
                {row.original?.linkText}
58
              </Anchor>
59
            </Link>
60
          ),
61
        },
62
      ] as MRT_ColumnDef<RowInstanceAPI>[],
63
    [],
64
  );
65

66
  const [columnPinning, setColumnPinning] = useState({});
67

68
  useEffect(() => {
69
    if (typeof window !== 'undefined') {
70
      if (isDesktop) {
71
        setColumnPinning({
72
          left: ['mrt-row-expand', 'mrt-row-numbers', 'rowInstanceAPI'],
73
          right: ['link'],
74
        });
75
      } else {
76
        setColumnPinning({});
77
      }
78
    }
79
  }, [isDesktop]);
80

81
  const data = useMemo(() => {
82
    if (onlyOptions) {
83
      return rowInstanceAPIs.filter(({ rowInstanceAPI }) =>
84
        onlyOptions.has(rowInstanceAPI),
85
      );
86
    }
87
    return rowInstanceAPIs;
88
  }, [onlyOptions]);
89

90
  return (
91
    <MantineReactTable
92
      columns={columns}
93
      data={data}
94
      displayColumnDefOptions={{
95
        'mrt-row-numbers': {
96
          size: 10,
97
        },
98
        'mrt-row-expand': {
99
          size: 10,
100
        },
101
      }}
102
      enableColumnActions={!onlyOptions}
103
      enableColumnFilterModes
104
      enablePagination={false}
105
      enablePinning
106
      enableRowNumbers
107
      enableBottomToolbar={false}
108
      enableTopToolbar={!onlyOptions}
109
      initialState={{
110
        columnVisibility: { description: false },
111
        density: 'xs',
112
        showGlobalFilter: true,
113
        sorting: [{ id: 'rowInstanceAPI', desc: false }],
114
      }}
115
      mantineSearchTextInputProps={{
116
        placeholder: 'Search Row APIs',
117
        sx: { minWidth: '18rem' },
118
        variant: 'filled',
119
      }}
120
      mantinePaperProps={{
121
        sx: { marginBottom: '24px' },
122
        id: onlyOptions
123
          ? 'relevant-row-instance-apis-table'
124
          : 'row-instance-apis-table',
125
      }}
126
      positionGlobalFilter="left"
127
      renderDetailPanel={({ row }) => (
128
        <Text color={row.original.description ? 'teal' : 'gray'}>
129
          {row.original.description || 'No Description Provided... Yet...'}
130
        </Text>
131
      )}
132
      rowNumberMode="static"
133
      onColumnPinningChange={setColumnPinning}
134
      state={{ columnPinning }}
135
    />
136
  );
137
};
138

139
export default RowInstanceAPIsTable;