Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Data Table examples · Advanced

Data Table with Actions for React

A table of payments with a menu of actions at the end of each row.

Framework
UI library

Five payments with a Dropdown Menu at the end of each row: copy the payment ID, view the customer, view the details. One menu button per row keeps the table narrow however many actions there are. Use it for admin lists, orders and accounts where each row has its own operations.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

Where do the row actions live?

In a display column with the id actions. Its header is a visually hidden Actions label, and its cell renders the menu for row.original.

What opens the menu?

A ghost icon Button labeled Open menu with MoreHorizontalIcon. DropdownMenuTrigger renders it through render.

What does Copy payment ID do?

It writes payment.id to the clipboard with navigator.clipboard.writeText. The item runs it from onClick. View customer and View payment details have no handler yet.

How is the menu laid out?

An Actions group label over Copy payment ID, a separator, then the two View items. The menu opens below the button, aligned to its end. That's align="end" on DropdownMenuContent.

Can one item be turned off for some rows?

Yes: the menu is rendered per row from row.original, so disable an item from that row's data. Pass disabled to DropdownMenuItem.

Can I open the row menu from the keyboard?

Tab reaches the Open menu button, and Enter, Space or the down arrow opens it. The arrow keys move through the items and Escape closes the menu.

All 8 data table examples