MRT logoMantine React Table

docs
/
API
/
column instance APIs

Column Instance APIs
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 }) => ({
      sx: {
        color: column.getIsSorted() ? 'red' : 'black',
      },
    }),
    //or in the component override callbacks
    Header: ({ column }) => <div>{column.columnDef.header}</div>,
    Cell: ({ cell, column }) => (
      <Box
        sx={{
          backgroundColor: column.getIsGrouped() ? 'green' : 'white',
        }}
      >
        {cell.getValue()}
      </Box>
    ),
  },
];


const table = useMantineReactTable({
  columns,
  data,
  mantineTableBodyCellProps: ({ column }) => ({
    sx: { boxShadow: column.getIsPinned() ? '0 0 0 2px red' : 'none' },
  }),
});


return <MantineReactTable table={table} />;
NOTE: These are NOT column options for Mantine React Table. These are just static methods on a column 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
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!
1
import { useEffect, useMemo, useState } from 'react';
2
import Link from 'next/link';
3
import {
4
  MantineReactTable,
5
  type MRT_ColumnDef,
6
  type MRT_Column,
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 {
12
  type ColumnInstanceAPI,
13
  columnInstanceAPIs,
14
} from './columnInstanceAPIs';
15


16
interface Props {
17
  onlyOptions?: Set<keyof MRT_Column<ColumnInstanceAPI>>;
18
}
19


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


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


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


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


84
  const data = useMemo(() => {
85
    if (onlyOptions) {
86
      return columnInstanceAPIs.filter(({ columnInstanceAPI }) =>
87
        onlyOptions.has(columnInstanceAPI),
88
      );
89
    }
90
    return columnInstanceAPIs;
91
  }, [onlyOptions]);
92


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


142
export default ColumnInstanceAPIsTable;
You can help make these docs better! PRs are Welcome
Using Material-UI instead of Mantine?
Check out Material React Table