MRT logoMaterial React Table

Legacy V2 Docs
On This Page

    Row Actions Feature Guide

    The row actions feature is simply a pre-built Display Column feature that adds a column as a place to store either a row action menu or other row action buttons.

    Using the built-in Row Actions column is optional, as you can simply create your own display columns, but this feature has some built-in conveniences that make it easy to add row actions to your table.

    Relevant Table Options

    #
    Prop Name
    Type
    Default Value
    More Info Links
    1
    { [key: string]: MRT_DisplayColumnDef<TData> }
    		MRT Display Columns Docs
    2
    boolean
    3
    'first' | 'last'
    4
    ({ closeMenu, row, table }) => ReactNode[]
    5
    ({ cell, row, table }) => ReactNode

    Enable Row Actions

    You can enable the row actions feature by setting the enableRowActions table option to true.

    You can then add your row action components with either the renderRowActions or renderRowActionMenuItems props.

    Add Row Actions Menu Items

    If you want to embed all of your row actions into a single menu, you can use the renderRowActionMenuItems table option.

    const table = useMaterialReactTable({
      columns,
      data,
      enableRowActions: true,
      renderRowActionMenuItems: ({ row }) => [
        <MenuItem key="edit" onClick={() => console.info('Edit')}>
          Edit
        </MenuItem>,
        <MenuItem key="delete" onClick={() => console.info('Delete')}>
          Delete
        </MenuItem>,
      ],
    });
    

    return <MaterialReactTable table={table} />;

    Demo

    Open StackblitzOpen Code SandboxOpen on GitHub
    Actions
    First Name
    Last Name
    Address
    City
    State
    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  type MRT_ColumnDef,
    6} from 'material-react-table';
    7import { data, type Person } from './makeData';
    8import { Edit, Delete } from '@mui/icons-material';
    9

    10export const Example = () => {
    11  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    12    //column definitions...
    37  );
    38

    39  return (
    40    <MaterialReactTable
    41      columns={columns}
    42      data={data}
    43      enableRowActions
    44      renderRowActionMenuItems={({ row, table }) => [
    45        <MRT_ActionMenuItem //or just use a normal MUI MenuItem component
    46          icon={<Edit />}
    47          key="edit"
    48          label="Edit"
    49          onClick={() => console.info('Edit')}
    50          table={table}
    51        />,
    52        <MRT_ActionMenuItem
    53          icon={<Delete />}
    54          key="delete"
    55          label="Delete"
    56          onClick={() => console.info('Delete')}
    57          table={table}
    58        />,
    59      ]}
    60    />
    61  );
    62};
    63

    64export default Example;
    65

    Add Row Action Buttons

    If you want to add row action buttons, you can use the renderRowActions table option.

    const table = useMaterialReactTable({
      columns,
      data,
      enableRowActions: true,
      renderRowActions: ({ row }) => (
        <Box>
          <IconButton onClick={() => console.info('Edit')}>
            <EditIcon />
          </IconButton>
          <IconButton onClick={() => console.info('Delete')}>
            <DeleteIcon />
          </IconButton>
        </Box>
      ),
    });
    

    return <MaterialReactTable table={table} />;

    Demo

    Open StackblitzOpen Code SandboxOpen on GitHub
    Actions
    First Name
    Last Name
    Address
    City
    State
    		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, useState } from 'react';
    2import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
    3import { Box, IconButton } from '@mui/material';
    4import {
    5  Edit as EditIcon,
    6  Delete as DeleteIcon,
    7  Email as EmailIcon,
    8} from '@mui/icons-material';
    9import { data as initialData, type Person } from './makeData';
    10

    11export const Example = () => {
    12  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    13    //column definitions...
    38  );
    39

    40  const [data, setData] = useState<Person[]>(initialData);
    41

    42  return (
    43    <MaterialReactTable
    44      columns={columns}
    45      data={data}
    46      layoutMode="grid"
    47      displayColumnDefOptions={{
    48        'mrt-row-actions': {
    49          size: 180, //if using layoutMode that is not 'semantic', the columns will not auto-size, so you need to set the size manually
    50          grow: false,
    51        },
    52      }}
    53      enableRowActions
    54      renderRowActions={({ row, table }) => (
    55        <Box sx={{ display: 'flex', flexWrap: 'nowrap', gap: '8px' }}>
    56          <IconButton
    57            color="primary"
    58            onClick={() =>
    59              window.open(
    60                `mailto:kevinvandy@mailinator.com?subject=Hello ${row.original.firstName}!`,
    61              )
    62            }
    63          >
    64            <EmailIcon />
    65          </IconButton>
    66          <IconButton
    67            color="secondary"
    68            onClick={() => {
    69              table.setEditingRow(row);
    70            }}
    71          >
    72            <EditIcon />
    73          </IconButton>
    74          <IconButton
    75            color="error"
    76            onClick={() => {
    77              data.splice(row.index, 1); //assuming simple data table
    78              setData([...data]);
    79            }}
    80          >
    81            <DeleteIcon />
    82          </IconButton>
    83        </Box>
    84      )}
    85    />
    86  );
    87};
    88

    89export default Example;
    90

    Customize Row Actions Column

    Change Row Actions Display Column Options

    You can customize all column def options for the row actions column, including the column width, header text, and more using the displayColumnDefOptions table option.

    const table = useMaterialReactTable({
      columns,
      data,
      enableRowActions: true,
      displayColumnDefOptions: {
        'mrt-row-actions': {
          header: 'Change Account Settings', //change header text
          size: 300, //make actions column wider
        },
      },
      renderRowActions: ({ table }) => (
        <Box>
          <Button>Button 1</Button>
          <Button>Button 2</Button>
          <Button>Button 3</Button>
        </Box>
      ),
    });

    Position Row Actions Column

    You can position the row actions column to the left or right (first or last column) of the table using the positionActionsColumn table option. The default is as the first column.

    const table = useMaterialReactTable({
      columns,
      data,
      enableRowActions: true,
      positionActionsColumn: 'last',
      renderRowActions: ({ table }) => (
        //...
      ),
    })

    View Extra Storybook Examples