Column Actions Feature Guide

By default, Material 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 Props

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

2	IconButtonProps \| (({table, column}) => IconButtonProps);		Material UI IconButton Props

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

Relevant Column Options

#	Type 0	More Info Links 0
1	boolean	MRT Column Actions Docs

2	IconButtonProps \| ({ column, table }) => IconButtonProps	Material UI IconButton API

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

Disable or Hide Column Actions Buttons

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

<MaterialReactTable data={data} columns={columns} enableColumnActions={false} />

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

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

Demo

Open Stackblitz Open Code Sandbox Open on GitHub

Primary

Secondary

Drop to group by

ID 0	First Name 0	Last Name 0
1	Dylan	Murray
2	Raquel	Kohler

Source Code

1import React, { useMemo } from 'react';
2import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
3
4const 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    //data definitions...
27    () => [
28      {
29        id: 1,
30        firstName: 'Dylan',
31        lastName: 'Murray',
32      },
33      {
34        id: 2,
35        firstName: 'Raquel',
36        lastName: 'Kohler',
37      },
38    ],
39    [],
40    
41  );
42
43  return <MaterialReactTable columns={columns} data={data} />;
44};
45
46export default Example;
47

If you do not like the default column actions menu items that Material React Table generates, you can provide your own custom menu items with the renderColumnActionsMenuItems prop or column option. You can choose whether or not to include the internal menu items by using the internalColumnMenuItems parameter.

<MaterialReactTable
  data={data}
  columns={columns}
  renderColumnActionsMenuItems={({ internalColumnMenuItems }) => {
    return [
      ...internalColumnMenuItems, //optionally include the internal menu items above or below your custom menu items
      <MenuItem key="custom-menu-item-1">Custom Menu Item 1</MenuItem>,
      <MenuItem key="custom-menu-item-2">Custom Menu Item 2</MenuItem>,
    ];
  }}
/>

Demo

Open Stackblitz Open Code Sandbox Open on GitHub

Primary

Secondary

Drop to group by

ID 0	First Name 0	Last Name 0
1	Dylan	Murray
2	Raquel	Kohler

Source Code

1import React, { useMemo } from 'react';
2import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
3import { Divider, MenuItem } from '@mui/material';
4
5//data definitions...
6const data = [
7  {
8    id: 1,
9    firstName: 'Dylan',
10    lastName: 'Murray',
11  },
12  {
13    id: 2,
14    firstName: 'Raquel',
15    lastName: 'Kohler',
16  },
17];
18
19
20const Example = () => {
21  const columns = useMemo<MRT_ColumnDef<(typeof data)[0]>[]>(
22    () => [
23      {
24        accessorKey: 'id',
25        header: 'ID',
26        renderColumnActionsMenuItems: ({ closeMenu }) => [
27          <MenuItem
28            key={1}
29            onClick={() => {
30              console.log('Item 1 clicked');
31              closeMenu();
32            }}
33          >
34            Item 1
35          </MenuItem>,
36          <MenuItem
37            key={2}
38            onClick={() => {
39              console.log('Item 2 clicked');
40              closeMenu();
41            }}
42          >
43            Item 2
44          </MenuItem>,
45        ],
46      },
47      {
48        accessorKey: 'firstName',
49        header: 'First Name',
50        renderColumnActionsMenuItems: ({
51          closeMenu,
52          internalColumnMenuItems,
53        }) => [
54          ...internalColumnMenuItems,
55          <Divider key="divider-1" />,
56          <MenuItem
57            key={'item-1'}
58            onClick={() => {
59              console.log('Item 1 clicked');
60              closeMenu();
61            }}
62          >
63            Item 1
64          </MenuItem>,
65          <MenuItem
66            key={'item-2'}
67            onClick={() => {
68              console.log('Item 2 clicked');
69              closeMenu();
70            }}
71          >
72            Item 2
73          </MenuItem>,
74        ],
75      },
76      {
77        accessorKey: 'lastName',
78        header: 'Last Name',
79        renderColumnActionsMenuItems: ({
80          closeMenu,
81          internalColumnMenuItems,
82        }) => [
83          <MenuItem
84            key={'item-1'}
85            onClick={() => {
86              console.log('Item 1 clicked');
87              closeMenu();
88            }}
89          >
90            Item 1
91          </MenuItem>,
92          <MenuItem
93            key={'item-2'}
94            onClick={() => {
95              console.log('Item 2 clicked');
96              closeMenu();
97            }}
98          >
99            Item 2
100          </MenuItem>,
101          <Divider key="divider-1" />,
102          ...internalColumnMenuItems.splice(0, 3),
103        ],
104      },
105    ],
106    [],
107  );
108
109  return (
110    <MaterialReactTable
111      columns={columns}
112      data={data}
113      //or you could define the menu items here for all columns
114      // renderColumnActionsMenuItems={({ closeMenu }) => []}
115    />
116  );
117};
118
119export default Example;
120

Justify Column Actions Button

Changed to left alignment in v1.2.0

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 muiTableHeadCellProps to change the justify-content property of the column header container.

Demo

Open Stackblitz Open Code Sandbox Open on GitHub

Primary

Secondary

Drop to group by

ID 0	First Name 0	Last Name 0
1	Dillon	Howler
2	Ross	Everest

Source Code

1import React, { useMemo } from 'react';
2import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
3
4const data =
5  //data definitions...
6  [
7    {
8      id: 1,
9      firstName: 'Dillon',
10      lastName: 'Howler',
11    },
12    {
13      id: 2,
14      firstName: 'Ross',
15      lastName: 'Everest',
16    },
17  ]; 
18
19const Example = () => {
20  const columns = useMemo<MRT_ColumnDef<(typeof data)[0]>[]>(
21    //column definitions...
22    () => [
23      {
24        accessorKey: 'id',
25        header: 'ID',
26      },
27      {
28        accessorKey: 'firstName',
29        header: 'First Name',
30      },
31      {
32        accessorKey: 'lastName',
33        header: 'Last Name',
34      },
35    ],
36    [], 
37  );
38
39  return (
40    <MaterialReactTable
41      columns={columns}
42      data={data}
43      muiTableHeadCellProps={{
44        sx: {
45          '& .Mui-TableHeadCell-Content': {
46            justifyContent: 'space-between',
47          },
48        },
49      }}
50    />
51  );
52};
53
54export default Example;
55

View Extra Storybook Examples