Guides
Row Actions Guide
How to add row action buttons to each row in Shadcn Table
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
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 = useShadcnTable({
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 <ShadcnTable table={table} />;Add Row Action Buttons
If you want to add row action buttons, you can use the renderRowActions table option.
const table = useShadcnTable({
columns,
data,
enableRowActions: true,
renderRowActions: ({ row }) => (
<span>
<IconButton onClick={() => console.info('Edit')}>
<EditIcon />
</IconButton>
<IconButton onClick={() => console.info('Delete')}>
<DeleteIcon />
</IconButton>
</span>
),
});
return <ShadcnTable table={table} />;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 = useShadcnTable({
columns,
data,
enableRowActions: true,
displayColumnDefOptions: {
'st-row-actions': {
header: 'Change Account Settings', //change header text
size: 300, //make actions column wider
},
},
renderRowActions: ({ table }) => (
<span>
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
</span>
),
});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 = useShadcnTable({
columns,
data,
enableRowActions: true,
positionActionsColumn: 'last',
renderRowActions: ({ table }) => (
//...
),
})View Extra Storybook Examples