Mantine React Table Row Instance API Reference

Row Instance APIs

NOTE: These are NOT props or column options for Mantine 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
    mantineEditTextFieldProps: ({ 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,
  //or a row instance in callback props like this
  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>
  ),
});

	#	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!

import { useEffect, useMemo, useState } from 'react';
import Link from 'next/link';
import {
  MantineReactTable,
  type MRT_ColumnDef,
  type MRT_Row,
} from 'mantine-react-table';
import { Anchor, Text } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { type RowInstanceAPI, rowInstanceAPIs } from './rowInstanceAPIs';
import { InlineCodeHighlight } from '@mantine/code-highlight';

interface Props {
  onlyOptions?: Set<keyof MRT_Row<RowInstanceAPI>>;
}

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

  const columns = useMemo(
    () =>
      [
        {
          accessorKey: 'rowInstanceAPI',
          enableClickToCopy: true,
          header: 'State Option',
          mantineCopyButtonProps: ({ cell }) => ({
            className: 'row-instance-api',
            id: `${cell.getValue<string>()}-row-instance-api`,
          }),
        },
        {
          accessorKey: 'type',
          header: 'Type',
          enableGlobalFilter: false,
          Cell: ({ cell }) => (
            <InlineCodeHighlight
              bg="transparent"
              language="typescript"
              code={cell.getValue<string>()}
            />
          ),
        },
        {
          accessorKey: 'link',
          disableFilters: true,
          enableGlobalFilter: false,
          header: 'More Info Links',
          Cell: ({ cell, row }) => (
            <Link href={cell.getValue() as string} passHref legacyBehavior>
              <Anchor
                target={
                  (cell.getValue() as string).startsWith('http')
                    ? '_blank'
                    : undefined
                }
                rel="noopener"
              >
                {row.original?.linkText}
              </Anchor>
            </Link>
          ),
        },
      ] as MRT_ColumnDef<RowInstanceAPI>[],
    [],
  );

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

  useEffect(() => {
    if (typeof window !== 'undefined') {
      if (isDesktop) {
        setColumnPinning({
          left: ['mrt-row-expand', 'mrt-row-numbers', 'rowInstanceAPI'],
          right: ['link'],
        });
      } else {
        setColumnPinning({});
      }
    }
  }, [isDesktop]);

  const data = useMemo(() => {
    if (onlyOptions) {
      return rowInstanceAPIs.filter(({ rowInstanceAPI }) =>
        onlyOptions.has(rowInstanceAPI),
      );
    }
    return rowInstanceAPIs;
  }, [onlyOptions]);

  return (
    <MantineReactTable
      columns={columns}
      data={data}
      displayColumnDefOptions={{
        'mrt-row-numbers': {
          size: 10,
        },
        'mrt-row-expand': {
          size: 10,
        },
      }}
      enableColumnActions={!onlyOptions}
      enableColumnFilterModes
      enablePagination={false}
      enableColumnPinning
      enableRowNumbers
      enableBottomToolbar={false}
      enableTopToolbar={!onlyOptions}
      initialState={{
        columnVisibility: { description: false },
        density: 'xs',
        showGlobalFilter: true,
        sorting: [{ id: 'rowInstanceAPI', desc: false }],
      }}
      mantineSearchTextInputProps={{
        placeholder: 'Search Row APIs',
        style: { minWidth: '18rem' },
        variant: 'filled',
      }}
      mantinePaperProps={{
        style: { marginBottom: '24px' },
        id: onlyOptions
          ? 'relevant-row-instance-apis-table'
          : 'row-instance-apis-table',
      }}
      positionGlobalFilter="left"
      renderDetailPanel={({ row }) => (
        <Text color={row.original.description ? 'teal' : 'gray'}>
          {row.original.description || 'No Description Provided... Yet...'}
        </Text>
      )}
      rowNumberDisplayMode="static"
      onColumnPinningChange={setColumnPinning}
      state={{ columnPinning }}
    />
  );
};

export default RowInstanceAPIsTable;