Material React Table

By default, Material React Table renders a column actions button for each column header. It contains a dropdown 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 dropdown menu, so this serves as a UI/UX alternative to make sure your users can find many of the table features easily.

boolean

true

IconButtonProps | (({table, column}) => IconButtonProps);

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

boolean

IconButtonProps | ({ column, table }) => IconButtonProps

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 the desired column definition to false instead.

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

1import React, { useMemo } from 'react';
2import MaterialReactTable from 'material-react-table';
3
4const 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    //data definitions...
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
42  return <MaterialReactTable columns={columns} data={data} />;
43};
44
45export default Example;
46

Changed to left alignment in v1.2.0

By default, the column actions button is left aligned right 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.

1import React, { FC, useMemo } from 'react';
2import MaterialReactTable, { 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: FC = () => {
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

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. x of the column in the table.

const columns = [
  {
    accessorKey: 'salary',
    header: 'Salary',
    renderColumnActionsMenuItems: ({ closeMenu, column, table }) => {
      return [
        <MenuItem
          onClick={() => {
            // do something
            closeMenu();
          }}
        >
          Custom Menu Item 1
        </MenuItem>,
        <MenuItem
          onClick={() => {
            // do something
            closeMenu();
          }}
        >
          Custom Menu Item 2
        </MenuItem>,
      ];
    },
  },
];

return (
  <MaterialReactTable
    data={data}
    columns={columns}
    //renderColumnActionsMenuItems could go here if you want to apply it to all columns
  />
);

View Extra Storybook Examples