MRT logoMaterial React Table

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

    1
    { [key: string]: MRT_ColumnDef<TData> }
    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 prop to true.

    Then you can 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, then you can use the renderRowActionMenuItems prop.

    <MaterialReactTable
    enableRowActions
    renderRowActionMenuItems={(row, index) => [
    <MenuItem onClick={() => console.info('Edit')}>Edit</MenuItem>,
    <MenuItem onClick={() => console.info('Delete')}>Delete</MenuItem>
    ]
    )}
    />

    Add Row Action Buttons

    If you want to add row action buttons, then you can use the renderRowActions prop.

    <MaterialReactTable
    enableRowActions
    renderRowActions={(row, index) => (
    <Box>
    <IconButton onClick={() => console.info('Edit')}>
    <EditIcon />
    </IconButton>
    <IconButton onClick={() => console.info('Delete')}>
    <DeleteIcon />
    </IconButton>
    </Box>
    )}
    />

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

    <MaterialReactTable
    columns={columns}
    data={data}
    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 prop. The default is as the first column.

    <MaterialTable columns={columns} data={data} positionActionsColumn="last" />