An accessible dropdown menu for actions on an individual table row.
Define typed actions once, then pass each row to the menu. Actions can be hidden or disabled from the current row without coupling the component to TanStack Table.
Choose an action from any row.
| Project | Owner | Status | |
|---|---|---|---|
| Website redesign | Maya Chen | Active | |
| Mobile application | Noah Williams | Active | |
| Analytics dashboard | Aarav Patel | Archived | |
| Customer portal | Sofia Garcia | Active |
Installation
Install dependencies
Install the required packages for this component:
Copy the Source Code
Copy and paste the following code into your project:
Folder Structure
Column definition
Create a typed RowAction<T>[], then use renderComponent in the actions column. The current row is passed into every callback and state function.
Direct usage
The component can also be rendered in any list or custom table. Use a row-specific label when the page contains multiple menus.
Accessibility
The dropdown manages focus, arrow-key navigation, Escape, and focus restoration. The trigger stops click propagation so it can safely sit inside a clickable row. shortcut is only a visual hint; register keyboard commands in your application.
Props
Row actions menu props
| Name | Type | Default | Description |
|---|---|---|---|
row | T | required | Current row value passed to action callbacks and state functions. |
actions | RowAction<T>[] | required | Actions rendered in the dropdown menu. |
label | string | "Open row actions" | Accessible label and tooltip for the ellipsis trigger. |
menuLabel | string | undefined | Optional heading displayed above the actions. |
disabled | boolean | false | Disables the trigger. It is also disabled when no visible actions remain. |
align | "start" | "center" | "end" | "end" | Alignment of the dropdown relative to its trigger. |
sideOffset | number | 4 | Distance between the trigger and menu in pixels. |
open | boolean | false | Bindable open state for controlled usage. |
class | string | undefined | Classes applied to the trigger button. |
contentClass | string | undefined | Classes applied to the dropdown content. |
RowAction<T>
| Name | Type | Default | Description |
|---|---|---|---|
id | string | required | Stable key for the action. |
label | string | required | Visible menu item text. |
onSelect | (row: T) => void | required | Runs with the current row when selected. |
icon | Component | undefined | Optional Svelte icon component. |
shortcut | string | undefined | Visual shortcut hint; keyboard behavior remains application-owned. |
variant | "default" | "destructive" | "default" | Visual treatment for the menu item. |
disabled | boolean | ((row: T) => boolean) | false | Disables the action globally or for the current row. |
hidden | boolean | ((row: T) => boolean) | false | Hides the action globally or for the current row. |
separatorBefore | boolean | false | Adds a separator before this action. |