Guides
Cell Actions Guide
How to add cell action context menus to each cell in Shadcn Table
Shadcn 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
Relevant Column Options
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 = useShadcnTable({
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.
ST also provides a ST_ActionMenuItem component that you can use to render the menu items. This just a wrapper for the shadcn/ui 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 ST Menus.
const table = useShadcnTable({
columns,
data,
enableCellActions: true,
renderCellActionMenuItems: ({ closeMenu, cell, row, table }) => [
//array required
<ST_ActionMenuItem //or just use the normal shadcn/ui MenuItem
icon={<Email />}
key={1}
label="Item 1"
onClick={() => {
//your logic here
closeMenu(); //close the menu after the action is performed
}}
table={table}
/>,
<ST_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
enableClickToCopyoption is set to"context-menu"(instead oftrue) for the table or column. -
An "Edit" action will be included when the
enableEditingoption is set totrueand theeditDisplayModeoption 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 = useShadcnTable({
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 = useShadcnTable({
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
<ST_ActionMenuItem
icon={<Email />}
key={1}
label="Item 1"
onClick={() => {
//your logic here
closeMenu(); //close the menu after the action is performed
}}
table={table}
/>,
<ST_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}
/>,
],
});View Extra Storybook Examples