MRT logoMantine React Table

docs
/
API
/
table instance APIs

Table Instance APIs
Internally, Mantine React Table uses the useReactTable hook from TanStack Table to create a table instance that handles a majority of the logic and events and the state for the table.
You can also access the table instance by consuming a table param from many of the callback functions in many of the props.
const columns = useMemo(() => [
  {
    accessor: 'name',
    header: 'Name',
    Cell: ({ cell, table }) => <span onClick={() => table.{/* or maybe here */}}></span>,
  },
], []);


const table = useMantineReactTable({
  columns,
  data,
  renderTopToolbarCustomActions: ({ table }) => <Button onClick={() => table{/* or maybe here */}}>Click Me</Button>,
});


const someEventHandler = () => {
  table. //call any of the table instance methods here
};


return <MantineReactTable table={table} />;
NOTE: These are NOT the table options for Mantine React Table. These are just static methods on a table 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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128


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_TableInstance,
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 TableInstanceAPI, tableInstanceAPIs } from './tableInstanceAPIs';
12


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


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


20
  const columns = useMemo(
21
    () =>
22
      [
23
        {
24
          accessorKey: 'tableInstanceAPI',
25
          enableClickToCopy: true,
26
          header: 'State Option',
27
          mantineCopyButtonProps: ({ cell }) => ({
28
            className: 'table-instance-api',
29
            id: `${cell.getValue<string>()}-table-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<TableInstanceAPI>[],
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', 'tableInstanceAPI'],
73
          right: ['link'],
74
        });
75
      } else {
76
        setColumnPinning({});
77
      }
78
    }
79
  }, [isDesktop]);
80


81
  const data = useMemo(() => {
82
    if (onlyOptions) {
83
      return tableInstanceAPIs.filter(({ tableInstanceAPI }) =>
84
        onlyOptions.has(tableInstanceAPI),
85
      );
86
    }
87
    return tableInstanceAPIs;
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: 'tableInstanceAPI', desc: false }],
114
      }}
115
      mantineSearchTextInputProps={{
116
        placeholder: 'Search Table APIs',
117
        sx: { minWidth: '18rem' },
118
        variant: 'filled',
119
      }}
120
      mantinePaperProps={{
121
        sx: { marginBottom: '24px' },
122
        id: onlyOptions
123
          ? 'relevant-table-instance-apis-table'
124
          : 'table-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 TableInstanceAPIsTable;
You can help make these docs better! PRs are Welcome
Using Material-UI instead of Mantine?
Check out Material React Table