Opting out of features in Mantine React Table Example

Minimal Example

Mantine React Table gives you a lot out of the box, but it's also easy to turn off any features that you do not need.

Every feature has an enable... prop that let's you turn it on or off.

Also, you can choose to not import the entire <MantineReactTable /> component and instead import a smaller sub-component like <MRT_TableContainer /> or <MRT_Table />. These imports do not include all of the extra toolbar components and only include the React code for the table itself.

Demo

First Name	Last Name	Address	City	State
Wava	Hoppe	4456 Towne Estates	Edmond	New Jersey
Kamren	Kemmer	237 Reinger View	Kesslermouth	New Jersey
Dillon	Hackett	79266 Cronin Rest	Conroyland	Colorado
Wilber	Von	4162 Della Roads	Champaign	Idaho
Ronny	Lowe	4057 Burley Extensions	Siennastead	Alaska
Lavinia	Kreiger	24310 Aufderhar Union	Ceceliachester	Kentucky
Tracy	Wilkinson	7204 Claudine Summit	Fort Melanychester	Tennessee

1
import { useMemo } from 'react';
2
import {
3
  MRT_Table, //import alternative sub-component if we do not want toolbars
4
  type MRT_ColumnDef,
5
  useMantineReactTable,
6
} from 'mantine-react-table';
7
import { useMantineTheme } from '@mantine/core';
8
import { data, type Person } from './makeData';
9

10
export const Example = () => {
11
  const { colorScheme } = useMantineTheme();
12

13
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
14
    () => [
15
      {
16
        accessorKey: 'firstName',
17
        header: 'First Name',
18
      },
19
      {
20
        accessorKey: 'lastName',
21
        header: 'Last Name',
22
      },
23
      {
24
        accessorKey: 'address',
25
        header: 'Address',
26
      },
27
      {
28
        accessorKey: 'city',
29
        header: 'City',
30
      },
31
      {
32
        accessorKey: 'state',
33
        header: 'State',
34
      },
35
    ],
36
    [],
37
  );
38

39
  const table = useMantineReactTable({
40
    columns,
41
    data,
42
    enableColumnActions: false,
43
    enableColumnFilters: false,
44
    enablePagination: false,
45
    enableSorting: false,
46
    mantineTableProps: {
47
      highlightOnHover: false,
48
      withColumnBorders: true,
49
      withBorder: colorScheme === 'light',
50
      sx: {
51
        'thead > tr': {
52
          backgroundColor: 'inherit',
53
        },
54
        'thead > tr > th': {
55
          backgroundColor: 'inherit',
56
        },
57
        'tbody > tr > td': {
58
          backgroundColor: 'inherit',
59
        },
60
      },
61
    },
62
  });
63

64
  //using MRT_Table instead of MantineReactTable if we do not want any of the toolbar features
65
  return <MRT_Table table={table} />;
66
};
67

68
export default Example;

1
import { useMemo } from 'react';
2
import {
3
  MRT_Table, //import alternative sub-component if we do not want toolbars
4
  useMantineReactTable,
5
} from 'mantine-react-table';
6
import { useMantineTheme } from '@mantine/core';
7
import { data } from './makeData';
8

9
export const Example = () => {
10
  const { colorScheme } = useMantineTheme();
11

12
  const columns = useMemo(
13
    () => [
14
      {
15
        accessorKey: 'firstName',
16
        header: 'First Name',
17
      },
18
      {
19
        accessorKey: 'lastName',
20
        header: 'Last Name',
21
      },
22
      {
23
        accessorKey: 'address',
24
        header: 'Address',
25
      },
26
      {
27
        accessorKey: 'city',
28
        header: 'City',
29
      },
30
      {
31
        accessorKey: 'state',
32
        header: 'State',
33
      },
34
    ],
35
    [],
36
  );
37

38
  const table = useMantineReactTable({
39
    columns,
40
    data,
41
    enableColumnActions: false,
42
    enableColumnFilters: false,
43
    enablePagination: false,
44
    enableSorting: false,
45
    mantineTableProps: {
46
      highlightOnHover: false,
47
      withColumnBorders: true,
48
      withBorder: colorScheme === 'light',
49
      sx: {
50
        'thead > tr': {
51
          backgroundColor: 'inherit',
52
        },
53
        'thead > tr > th': {
54
          backgroundColor: 'inherit',
55
        },
56
        'tbody > tr > td': {
57
          backgroundColor: 'inherit',
58
        },
59
      },
60
    },
61
  });
62

63
  //using MRT_Table instead of MantineReactTable if we do not want any of the toolbar features
64
  return <MRT_Table table={table} />;
65
};
66

67
export default Example;

1
import { useMemo } from 'react';
2
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
3
import { useMantineTheme } from '@mantine/core';
4
import { data, type Person } from './makeData';
5

6
export const Example = () => {
7
  const { colorScheme } = useMantineTheme();
8

9
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
10
    () => [
11
      {
12
        accessorKey: 'firstName',
13
        header: 'First Name',
14
      },
15
      {
16
        accessorKey: 'lastName',
17
        header: 'Last Name',
18
      },
19
      {
20
        accessorKey: 'address',
21
        header: 'Address',
22
      },
23
      {
24
        accessorKey: 'city',
25
        header: 'City',
26
      },
27
      {
28
        accessorKey: 'state',
29
        header: 'State',
30
      },
31
    ],
32
    [],
33
  );
34

35
  return (
36
    <MantineReactTable
37
      columns={columns}
38
      data={data}
39
      enableColumnActions={false}
40
      enableColumnFilters={false}
41
      enablePagination={false}
42
      enableSorting={false}
43
      enableBottomToolbar={false}
44
      enableTopToolbar={false}
45
      mantineTableProps={{
46
        highlightOnHover: false,
47
        withColumnBorders: true,
48
        withBorder: colorScheme === 'light',
49
        sx: {
50
          'thead > tr': {
51
            backgroundColor: 'inherit',
52
          },
53
          'thead > tr > th': {
54
            backgroundColor: 'inherit',
55
          },
56
          'tbody > tr > td': {
57
            backgroundColor: 'inherit',
58
          },
59
        },
60
      }}
61
    />
62
  );
63
};
64

65
export default Example;

View Extra Storybook Examples