Column Actions Feature Guide

By default, Mantine React Table renders a column actions button for each column header. It contains a drop-down menu to help your users use the other features of the table. All of these actions can be triggered in some other way other than from this drop-down menu, so this serves as a UI/UX alternative to make sure your users can find many of the table features easily.

Relevant Table Options

#	Type	Default Value	More Info Links
1	boolean	true	MRT Column Actions Docs

2	ActionIconProps \| (({table, column }) => ActionIconProps);		Mantine ActionIcon Docs

3	({ closeMenu, column, table, internalColumnMenuItems }) => ReactNode

Relevant Column Options

#	Type	More Info Links
1	boolean	MRT Column Actions Docs

2	ActionIconProps \| ({ column, table }) => ActionIconProps	Mantine ActionIcon API

3

Disable or Hide Column Actions Buttons

You can set the enableColumnActions table option to false to disable this feature and hide the button in each column header completely.

const table = useMantineReactTable({
  data,
  columns,
  enableColumnActions: false,
});

Alternatively, if you only want to hide the column actions button in specific columns, you can set the enableColumnActions column option to false instead.

In this demo, we disable the column actions button for the 'ID' column.

Demo

ID	First Name	Last Name
1	Dylan	Murray
2	Raquel	Kohler

Rows per page

1-2 of 2

1
import { useMemo } from 'react';
2
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
3

4
const Example = () => {
5
  const columns = useMemo(
6
    () =>
7
      [
8
        {
9
          accessorKey: 'id',
10
          enableColumnActions: false,
11
          header: 'ID',
12
        },
13
        {
14
          accessorKey: 'firstName',
15
          header: 'First Name',
16
        },
17
        {
18
          accessorKey: 'lastName',
19
          header: 'Last Name',
20
        },
21
      ] as MRT_ColumnDef<(typeof data)[0]>[],
22
    [],
23
  );
24

25
  const data = useMemo(
26
    () => [
27
      {
28
        id: 1,
29
        firstName: 'Dylan',
30
        lastName: 'Murray',
31
      },
32
      {
33
        id: 2,
34
        firstName: 'Raquel',
35
        lastName: 'Kohler',
36
      },
37
    ],
38
    [],
39
  );
40

41
  return <MantineReactTable columns={columns} data={data} />;
42
};
43

44
export default Example;

1
import { useMemo } from 'react';
2
import { MantineReactTable } from 'mantine-react-table';
3

4
const Example = () => {
5
  const columns = useMemo(
6
    () => [
7
      {
8
        accessorKey: 'id',
9
        enableColumnActions: false,
10
        header: 'ID',
11
      },
12
      {
13
        accessorKey: 'firstName',
14
        header: 'First Name',
15
      },
16
      {
17
        accessorKey: 'lastName',
18
        header: 'Last Name',
19
      },
20
    ],
21
    [],
22
  );
23

24
  const data = useMemo(
25
    () => [
26
      {
27
        id: 1,
28
        firstName: 'Dylan',
29
        lastName: 'Murray',
30
      },
31
      {
32
        id: 2,
33
        firstName: 'Raquel',
34
        lastName: 'Kohler',
35
      },
36
    ],
37
    [],
38
  );
39

40
  return <MantineReactTable columns={columns} data={data} />;
41
};
42

43
export default Example;

If you do not like the default column actions menu items that Mantine React Table generates, you can provide your own custom menu items with the renderColumnActionsMenuItems option.

const table = useMantineReactTable({
  data,
  columns,
  renderColumnActionsMenuItems: ({ internalColumnMenuItems }) => (
    <>
      {internalColumnMenuItems} //optionally include the default menu items
      <Divider />
      <Menu.Item>Item 1</Menu.Item>
      <Menu.Item>Item 2</Menu.Item>
    </>
  ),
});

return <MantineReactTable table={table} />;

Demo

ID	First Name	Last Name
1	Dylan	Murray
2	Raquel	Kohler

Rows per page

1-2 of 2

1
import { useMemo } from 'react';
2
import {
3
  MantineReactTable,
4
  useMantineReactTable,
5
  type MRT_ColumnDef,
6
} from 'mantine-react-table';
7
import { Menu, Divider } from '@mantine/core';
8

9
const data = [
10
  {
11
    id: 1,
12
    firstName: 'Dylan',
13
    lastName: 'Murray',
14
  },
15
  {
16
    id: 2,
17
    firstName: 'Raquel',
18
    lastName: 'Kohler',
19
  },
20
];
21

22
const Example = () => {
23
  const columns = useMemo<MRT_ColumnDef<(typeof data)[0]>[]>(
24
    () => [
25
      {
26
        accessorKey: 'id',
27
        header: 'ID',
28
        renderColumnActionsMenuItems: () => (
29
          <>
30
            <Menu.Item
31
              onClick={() => {
32
                console.log('Item 1 clicked');
33
              }}
34
            >
35
              Item 1
36
            </Menu.Item>
37
            <Menu.Item
38
              onClick={() => {
39
                console.log('Item 2 clicked');
40
              }}
41
            >
42
              Item 2
43
            </Menu.Item>
44
          </>
45
        ),
46
      },
47
      {
48
        accessorKey: 'firstName',
49
        header: 'First Name',
50
        renderColumnActionsMenuItems: ({ internalColumnMenuItems }) => (
51
          <>
52
            {internalColumnMenuItems}
53
            <Divider />
54
            <Menu.Item
55
              onClick={() => {
56
                console.log('Item 1 clicked');
57
              }}
58
            >
59
              Item 1
60
            </Menu.Item>
61
            <Menu.Item
62
              onClick={() => {
63
                console.log('Item 2 clicked');
64
              }}
65
            >
66
              Item 2
67
            </Menu.Item>
68
          </>
69
        ),
70
      },
71
      {
72
        accessorKey: 'lastName',
73
        header: 'Last Name',
74
        renderColumnActionsMenuItems: ({ internalColumnMenuItems }) => (
75
          <>
76
            <Menu.Item>Item 1</Menu.Item>
77
            <Menu.Item>Item 2</Menu.Item>
78
            <Divider />
79
            {internalColumnMenuItems}
80
          </>
81
        ),
82
      },
83
    ],
84
    [],
85
  );
86

87
  const table = useMantineReactTable({
88
    columns,
89
    data,
90
    //renderColumnActionsMenuItems //or you could define the menu items here for all columns
91
  });
92

93
  return <MantineReactTable table={table} />;
94
};
95

96
export default Example;

1
import { useMemo } from 'react';
2
import { MantineReactTable, useMantineReactTable } from 'mantine-react-table';
3
import { Menu, Divider } from '@mantine/core';
4

5
const data = [
6
  {
7
    id: 1,
8
    firstName: 'Dylan',
9
    lastName: 'Murray',
10
  },
11
  {
12
    id: 2,
13
    firstName: 'Raquel',
14
    lastName: 'Kohler',
15
  },
16
];
17

18
const Example = () => {
19
  const columns = useMemo(
20
    () => [
21
      {
22
        accessorKey: 'id',
23
        header: 'ID',
24
        renderColumnActionsMenuItems: () => (
25
          <>
26
            <Menu.Item
27
              onClick={() => {
28
                console.log('Item 1 clicked');
29
              }}
30
            >
31
              Item 1
32
            </Menu.Item>
33
            <Menu.Item
34
              onClick={() => {
35
                console.log('Item 2 clicked');
36
              }}
37
            >
38
              Item 2
39
            </Menu.Item>
40
          </>
41
        ),
42
      },
43
      {
44
        accessorKey: 'firstName',
45
        header: 'First Name',
46
        renderColumnActionsMenuItems: ({ internalColumnMenuItems }) => (
47
          <>
48
            {internalColumnMenuItems}
49
            <Divider />
50
            <Menu.Item
51
              onClick={() => {
52
                console.log('Item 1 clicked');
53
              }}
54
            >
55
              Item 1
56
            </Menu.Item>
57
            <Menu.Item
58
              onClick={() => {
59
                console.log('Item 2 clicked');
60
              }}
61
            >
62
              Item 2
63
            </Menu.Item>
64
          </>
65
        ),
66
      },
67
      {
68
        accessorKey: 'lastName',
69
        header: 'Last Name',
70
        renderColumnActionsMenuItems: ({ internalColumnMenuItems }) => (
71
          <>
72
            <Menu.Item>Item 1</Menu.Item>
73
            <Menu.Item>Item 2</Menu.Item>
74
            <Divider />
75
            {internalColumnMenuItems}
76
          </>
77
        ),
78
      },
79
    ],
80
    [],
81
  );
82

83
  const table = useMantineReactTable({
84
    columns,
85
    data,
86
    //renderColumnActionsMenuItems //or you could define the menu items here for all columns
87
  });
88

89
  return <MantineReactTable table={table} />;
90
};
91

92
export default Example;

Justify Column Actions Button

By default, the column actions button is left aligned directly after the column header text and any sort or filter labels that may be present. If you want to change this, you can use a CSS selector in mantineTableHeadCellProps to change the justify-content property of the column header container.

Demo

ID	First Name	Last Name
1	Dillon	Howler
2	Ross	Everest

Rows per page

1-2 of 2

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

5
const Example = () => {
6
  const columns = useMemo<MRT_ColumnDef<(typeof data)[0]>[]>(
7
    () => [
8
      {
9
        accessorKey: 'id',
10
        header: 'ID',
11
      },
12
      {
13
        accessorKey: 'firstName',
14
        header: 'First Name',
15
      },
16
      {
17
        accessorKey: 'lastName',
18
        header: 'Last Name',
19
      },
20
    ],
21
    [],
22
  );
23

24
  return (
25
    <MantineReactTable
26
      columns={columns}
27
      data={data}
28
      mantineTableHeadCellProps={{
29
        sx: {
30
          '& .mantine-TableHeadCell-Content': {
31
            justifyContent: 'space-between',
32
          },
33
        },
34
      }}
35
    />
36
  );
37
};
38

39
export default Example;

1
import { useMemo } from 'react';
2
import { MantineReactTable } from 'mantine-react-table';
3
import { data } from './makeData';
4

5
const Example = () => {
6
  const columns = useMemo(
7
    () => [
8
      {
9
        accessorKey: 'id',
10
        header: 'ID',
11
      },
12
      {
13
        accessorKey: 'firstName',
14
        header: 'First Name',
15
      },
16
      {
17
        accessorKey: 'lastName',
18
        header: 'Last Name',
19
      },
20
    ],
21
    [],
22
  );
23

24
  return (
25
    <MantineReactTable
26
      columns={columns}
27
      data={data}
28
      mantineTableHeadCellProps={{
29
        sx: {
30
          '& .mantine-TableHeadCell-Content': {
31
            justifyContent: 'space-between',
32
          },
33
        },
34
      }}
35
    />
36
  );
37
};
38

39
export default Example;

View Extra Storybook Examples