MRT logoMaterial React Table

Legacy V2 Docs
On This Page

    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 Table Options

    #
    Prop Name
    Type
    Default Value
    More Info Links
    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

    #
    Column Option
    Type
    Default Value
    More Info Links
    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 table option to false in the table to disable this feature and hide the button in each column header completely.

    const table = useMaterialReactTable({
      data,
      columns,
      enableColumnActions: false,
    });
    

    return <MaterialReactTable table={table} />;

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

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

    Demo

    Open StackblitzOpen Code SandboxOpen on GitHub
    ID
    First Name
    Last Name
    1DylanMurray
    2RaquelKohler
    1-2 of 2

    Source Code 

    1import { useMemo } from 'react';
    2import {
    3  MaterialReactTable,
    4  useMaterialReactTable,
    5  type MRT_ColumnDef,
    6} from 'material-react-table';
    7import { data, type Person } from './makeData';
    8

    9const Example = () => {
    10  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    11    () => [
    12      {
    13        accessorKey: 'id',
    14        enableColumnActions: false,
    15        header: 'ID',
    16      },
    17      {
    18        accessorKey: 'firstName',
    19        header: 'First Name',
    20      },
    21      {
    22        accessorKey: 'lastName',
    23        header: 'Last Name',
    24      },
    25    ],
    26    [],
    27  );
    28

    29  const table = useMaterialReactTable({
    30    columns,
    31    data,
    32  });
    33

    34  return <MaterialReactTable table={table} />;
    35};
    36

    37export default Example;
    38

    Custom Column Actions Menu

    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 table or column option. You can choose whether or not to include the internal menu items by using the internalColumnMenuItems parameter.

    const table = useMaterialReactTable({
      data,
      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>,
        ];
      },
    });
    

    return <MaterialReactTable table={table} />;

    Demo

    Open StackblitzOpen Code SandboxOpen on GitHub
    ID
    First Name
    Last Name
    1DylanMurray
    2RaquelKohler
    1-2 of 2

    Source Code 

    1import { useMemo } from 'react';
    2import {
    3  MaterialReactTable,
    4  useMaterialReactTable,
    5  type MRT_ColumnDef,
    6} from 'material-react-table';
    7import { Divider, MenuItem } from '@mui/material';
    8import { data, type Person } from './makeData';
    9

    10const Example = () => {
    11  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    12    () => [
    13      {
    14        accessorKey: 'id',
    15        header: 'ID',
    16        renderColumnActionsMenuItems: ({ closeMenu }) => [
    17          <MenuItem
    18            key={1}
    19            onClick={() => {
    20              console.log('Item 1 clicked');
    21              closeMenu();
    22            }}
    23          >
    24            Item 1
    25          </MenuItem>,
    26          <MenuItem
    27            key={2}
    28            onClick={() => {
    29              console.log('Item 2 clicked');
    30              closeMenu();
    31            }}
    32          >
    33            Item 2
    34          </MenuItem>,
    35        ],
    36      },
    37      {
    38        accessorKey: 'firstName',
    39        header: 'First Name',
    40        renderColumnActionsMenuItems: ({
    41          closeMenu,
    42          internalColumnMenuItems,
    43        }) => [
    44          ...internalColumnMenuItems,
    45          <Divider key="divider-1" />,
    46          <MenuItem
    47            key={'item-1'}
    48            onClick={() => {
    49              console.log('Item 1 clicked');
    50              closeMenu();
    51            }}
    52          >
    53            Item 1
    54          </MenuItem>,
    55          <MenuItem
    56            key={'item-2'}
    57            onClick={() => {
    58              console.log('Item 2 clicked');
    59              closeMenu();
    60            }}
    61          >
    62            Item 2
    63          </MenuItem>,
    64        ],
    65      },
    66      {
    67        accessorKey: 'lastName',
    68        header: 'Last Name',
    69        renderColumnActionsMenuItems: ({
    70          closeMenu,
    71          internalColumnMenuItems,
    72        }) => [
    73          <MenuItem
    74            key={'item-1'}
    75            onClick={() => {
    76              console.log('Item 1 clicked');
    77              closeMenu();
    78            }}
    79          >
    80            Item 1
    81          </MenuItem>,
    82          <MenuItem
    83            key={'item-2'}
    84            onClick={() => {
    85              console.log('Item 2 clicked');
    86              closeMenu();
    87            }}
    88          >
    89            Item 2
    90          </MenuItem>,
    91          <Divider key="divider-1" />,
    92          ...internalColumnMenuItems.splice(0, 3),
    93        ],
    94      },
    95    ],
    96    [],
    97  );
    98

    99  const table = useMaterialReactTable({
    100    columns,
    101    data,
    102    //or you could define the menu items here for all columns
    103    // renderColumnActionsMenuItems: ({ closeMenu }) => [],
    104  });
    105

    106  return <MaterialReactTable table={table} />;
    107};
    108

    109export default Example;
    110

    Justify Column Actions Button

    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 StackblitzOpen Code SandboxOpen on GitHub
    ID
    First Name
    Last Name
    1DylanMurray
    2RaquelKohler
    1-2 of 2

    Source Code 

    1import { useMemo } from 'react';
    2import {
    3  MaterialReactTable,
    4  useMaterialReactTable,
    5  type MRT_ColumnDef,
    6} from 'material-react-table';
    7import { data, type Person } from './makeData';
    8

    9const Example = () => {
    10  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    11    //column definitions...
    27  );
    28

    29  const table = useMaterialReactTable({
    30    columns,
    31    data,
    32    muiTableHeadCellProps: {
    33      sx: {
    34        '& .Mui-TableHeadCell-Content': {
    35          justifyContent: 'space-between',
    36        },
    37      },
    38    },
    39  });
    40

    41  return <MaterialReactTable table={table} />;
    42};
    43

    44export default Example;
    45

    View Extra Storybook Examples