MRT logoMantine React Table

docs
/
API
/
table instance APIs

Table Instance APIs

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

These are the methods available on the table instance that is returned from the useMantineReactTable hook. You can use these methods to interact with the table instance.

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} />;
#
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!

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

interface Props {
  onlyOptions?: Set<keyof MRT_TableInstance<TableInstanceAPI>>;
}

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

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

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

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

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

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