MRT logoMaterial React Table

Legacy V2 Docs
On This Page

    Cell Actions Feature Guide

    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.

    Relevant Table Options

    1
    ((cell: MRT_Cell<TData>) => boolean) | boolean
    2
    boolean | 'context-menu' | ((cell: MRT_Cell<TData>) => 'context-menu' | boolean)
    false
    MRT Click to Copy Docs
    3
    { cell, closeMenu, column, internalMenuItems, row, staticColumnIndex, staticRowIndex, table }) => ReactNode[]

    Relevant Column Options

    1
    boolean | 'context-menu' | ((cell: MRT_Cell<TData>) => 'context-menu' | boolean)
    MRT Click to Copy Docs
    2
    { cell, closeMenu, column, internalMenuItems, row, staticColumnIndex, staticRowIndex, table }) => ReactNode[]

    Enable Cell Actions

    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),
    });

    Render Cell Action Menu Items

    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}
    />,
    ],
    });

    Include Automatic Cell Actions

    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}
    />,
    ],
    });

    Demo

    Open StackblitzOpen Code SandboxOpen on GitHub
    DylanMurray261 Erdman FordEast DaphneKentucky
    RaquelKohler769 Dominic GroveColumbusOhio
    ErvinReinger566 Brakus InletSouth LindaWest Virginia
    BrittanyMcCullough722 Emie StreamLincolnNebraska
    BransonFrami32188 Larkin TurnpikeCharlestonSouth Carolina
    1-5 of 5

    Source Code

    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...
    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