Material React Table

New in v2.10.0

Material React Table provides you an easy shell to render a context menu for when a table cell/row is right clicked or otherwise activated. This is useful for providing additional actions that can be performed on a cell or row.

((cell: MRT_Cell<TData>) => boolean) | boolean

boolean | 'context-menu' | ((cell: MRT_Cell<TData>) => 'context-menu' | boolean)

false

{ cell, closeMenu, column, internalMenuItems, row, staticColumnIndex, staticRowIndex, table }) => ReactNode[]

boolean | 'context-menu' | ((cell: MRT_Cell<TData>) => 'context-menu' | boolean)

{ cell, closeMenu, column, internalMenuItems, row, staticColumnIndex, staticRowIndex, table }) => ReactNode[]

To enable cell actions, you need to set the enableCellActions option to true for the cells that you want to have access to the context menu. This can be done at the table level or at the column level, and accepts a boolean or a function that returns a boolean.

const table = useMaterialReactTable({
  columns,
  data,
  enableCellActions: true,
  //or
  enableCellActions: (cell) => (cell.row.original.someCondition ? true : false),
});

The cell actions context menu will only appear if there are items to display. You can provide the renderCellActionMenuItems table option or column option to render the appropriate items in the context menu for each cell.

MRT also provides a MRT_ActionMenuItem component that you can use to render the menu items. This just a wrapper for the MUI MenuItem component that also provides consistent CSS for styling the icons, spacing, and optional sub-menu items. Use it if you want to have a consistent look and feel with all of the other built-in MRT Menus.

const table = useMaterialReactTable({
  columns,
  data,
  enableCellActions: true,
  renderCellActionMenuItems: ({ closeMenu, cell, row, table }) => [
    //array required
    <MRT_ActionMenuItem //or just use the normal MUI MenuItem
      icon={<Email />}
      key={1}
      label="Item 1"
      onClick={() => {
        //your logic here
        closeMenu(); //close the menu after the action is performed
      }}
      table={table}
    />,
    <MRT_ActionMenuItem
      icon={<PersonOffOutlined />}
      key={2}
      label="Item 2"
      onClick={async () => {
        //await your logic here
        closeMenu(); //close the menu after the async action is performed
      }}
      table={table}
    />,
  ],
});

A few cell actions are included by default when certain other features are enabled.

• A "Copy" action will be included when the enableClickToCopy option is set to "context-menu" (instead of true) for the table or column.

• An "Edit" action will be included when the enableEditing option is set to true and the editDisplayMode option is set to "cell". This will not disable the default double-click to edit behavior, but will provide an additional way to edit the cell.

More built-in cell actions may be added in the future.

const table = useMaterialReactTable({
  columns,
  data,
  enableCellActions: true,
  enableClickToCopy: 'context-menu',
  enableEditing: true,
  editDisplayMode: 'cell',
});

If you want to render these actions alongside your custom actions, you will just need to include the internalMenuItems parameter in your renderCellActionMenuItems function.

const table = useMaterialReactTable({
  columns,
  data,
  enableCellActions: true,
  enableClickToCopy: 'context-menu',
  enableEditing: true,
  editDisplayMode: 'cell',
  renderCellActionMenuItems: ({
    closeMenu,
    cell,
    row,
    table,
    internalMenuItems,
  }) => [
    ...internalMenuItems, //render the copy and edit actions wherever you want in the list
    <Divider />, //optionally place a Menu Divider to separate groups of actions
    <MRT_ActionMenuItem
      icon={<Email />}
      key={1}
      label="Item 1"
      onClick={() => {
        //your logic here
        closeMenu(); //close the menu after the action is performed
      }}
      table={table}
    />,
    <MRT_ActionMenuItem
      icon={<PersonOffOutlined />}
      key={2}
      label="Item 2"
      onClick={async () => {
        //await your logic here
        closeMenu(); //close the menu after the async action is performed
      }}
      table={table}
    />,
  ],
});

1import { useMemo } from 'react';
2import {
3  MaterialReactTable,
4  MRT_ActionMenuItem,
5  useMaterialReactTable,
6  type MRT_ColumnDef,
7} from 'material-react-table';
8import { data, type Person } from './makeData';
9import { Divider } from '@mui/material';
10import EmailIcon from '@mui/icons-material/Email';
11import PersonOffOutlinedIcon from '@mui/icons-material/PersonOffOutlined';
12
13export const Example = () => {
14  const columns = useMemo<MRT_ColumnDef<Person>[]>(
15    //column definitions...
16    () => [
17      {
18        accessorKey: 'firstName',
19        header: 'First Name',
20      },
21      {
22        accessorKey: 'lastName',
23        header: 'Last Name',
24      },
25      {
26        accessorKey: 'address',
27        header: 'Address',
28      },
29      {
30        accessorKey: 'city',
31        header: 'City',
32      },
33      {
34        accessorKey: 'state',
35        header: 'State',
36      },
37    ],
38    [],
39    
40  );
41
42  const table = useMaterialReactTable({
43    columns,
44    data,
45    enableCellActions: true,
46    enableClickToCopy: 'context-menu',
47    enableEditing: true,
48    editDisplayMode: 'cell',
49    renderCellActionMenuItems: ({ closeMenu, table, internalMenuItems }) => [
50      ...internalMenuItems,
51      <Divider key="divider" />,
52      <MRT_ActionMenuItem
53        icon={<EmailIcon />}
54        key={1}
55        label="Item 1"
56        onClick={() => {
57          closeMenu();
58        }}
59        table={table}
60      />,
61      <MRT_ActionMenuItem
62        icon={<PersonOffOutlinedIcon />}
63        key={2}
64        label="Item 2"
65        onClick={() => {
66          closeMenu();
67        }}
68        table={table}
69      />,
70    ],
71  });
72
73  return <MaterialReactTable table={table} />;
74};
75
76export default Example;
77

View Extra Storybook Examples