MRT logoMantine React Table

docs
/
API
/
column instance APIs

Column Instance APIs

NOTE: These are NOT column options for Mantine React Table. These are just static methods on a column instance that you can use.

Each column has a column instance object associated with it that can be accessed in callback props and other places in the table.

You can access and use a column instance in quite a few places, but here are some of the most common:

const columns = [
  {
    accessorKey: 'username',
    header: 'Username',
    //you can access a column instance in many callback functions in a column definition like this
    mantineTableHeadCellProps: ({ column }) => ({
      style: {
        color: column.getIsSorted() ? 'red' : 'black',
      },
    }),
    //or in the component override callbacks
    Header: ({ column }) => <div>{column.columnDef.header}</div>,
    Cell: ({ cell, column }) => (
      <Box
        style={{
          backgroundColor: column.getIsGrouped() ? 'green' : 'white',
        }}
      >
        {cell.getValue()}
      </Box>
    ),
  },
];

const table = useMantineReactTable({
  columns,
  data,
  //or in callback props like this
  mantineTableBodyCellProps: ({ column }) => ({
    style: {
      boxShadow: column.getIsPinned() ? '0 0 0 2px red' : 'none',
    },
  }),
});
#
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
40
41
42
43
44
45
46
47
48
49
50
51

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_Column,
} from 'mantine-react-table';
import { Anchor, Text } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import {
  type ColumnInstanceAPI,
  columnInstanceAPIs,
} from './columnInstanceAPIs';
import { InlineCodeHighlight } from '@mantine/code-highlight';

interface Props {
  onlyOptions?: Set<keyof MRT_Column<ColumnInstanceAPI>>;
}

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

  const columns = useMemo(
    () =>
      [
        {
          accessorKey: 'columnInstanceAPI',
          enableClickToCopy: true,
          header: 'State Option',
          mantineCopyButtonProps: ({ cell }) => ({
            className: 'column-instance-api',
            id: `${cell.getValue<string>()}-column-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<ColumnInstanceAPI>[],
    [],
  );

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

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

  const data = useMemo(() => {
    if (onlyOptions) {
      return columnInstanceAPIs.filter(({ columnInstanceAPI }) =>
        onlyOptions.has(columnInstanceAPI),
      );
    }
    return columnInstanceAPIs;
  }, [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: 'columnInstanceAPI', desc: false }],
      }}
      mantineSearchTextInputProps={{
        placeholder: 'Search Column APIs',
        style: { minWidth: '18rem' },
        variant: 'filled',
      }}
      mantinePaperProps={{
        style: { marginBottom: '24px' },
        id: onlyOptions
          ? 'relevant-column-instance-apis-table'
          : 'column-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 ColumnInstanceAPIsTable;

Using Material-UI instead of Mantine?
Check out Material React Table