MRT logoMaterial React Table

    Column Actions Feature Guide

    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.

    Relevant Props

    #
    Prop Name
    Type
    Default Value
    More Info Links
    1
    boolean
    true

    No Description Provided... Yet...

    2

    No Description Provided... Yet...

    3

    No Description Provided... Yet...

    Relevant Column Options

    #
    Column Option
    Type
    Default Value
    More Info Links
    1
    boolean
    MRT Column Actions Docs

    Enable or disable column actions for this column.

    2
    IconButtonProps | ({ column, table }) => IconButtonProps
    Material UI IconButton API

    No Description Provided... Yet...

    3

    No Description Provided... Yet...

    Disable or Hide Column Actions Buttons

    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.


    Demo

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

    Rows per page

    1-2 of 2

    Source Code

    1import React, { FC, useMemo } from 'react';
    2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
    3
    4const Example: FC = () => {
    5 const columns = useMemo(
    6 () =>
    7 [
    8 {
    9 accessorKey: 'id',
    10 enableColumnActions: false,
    11 header: 'ID',
    12 },
    13 {
    14 accessorKey: 'firstName',
    15 header: 'First Name',
    16 },
    17 {
    18 accessorKey: 'lastName',
    19 header: 'Last Name',
    20 },
    21 ] as MRT_ColumnDef<typeof data[0]>[],
    22 [],
    23 );
    24
    25 const data = useMemo(
    26 //data definitions...
    41 );
    42
    43 return <MaterialReactTable columns={columns} data={data} />;
    44};
    45
    46export default Example;
    47

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