shadcn.io is an independent project built on shadcn/ui
A payments table has columns ID, Status, Email and Amount. Each row ends in a menu. The menu lists Copy payment ID, View customer and View payment details.
Put row actions in a menu so they do not crowd the table. Inline buttons on a Table are fine for a single Edit. In React, Ark UI does not copy the payment id.
Installation
Usage
<div className="w-full max-w-4xl">
<div className="rounded-md border bg-background">
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<TableHead key={header.id}>
{header.isPlaceholder ? null : (
<table.FlexRender header={header} />
)}
</TableHead>
))}
</TableRow>
))}
</TableHeader>
<TableBody>
{rows.length > 0 ? (
rows.map((row) => (
<TableRow key={row.id}>
{row.getAllCells().map((cell) => (
<TableCell key={cell.id}>
<table.FlexRender cell={cell} />
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
className="h-24 text-center"
{/* The rest of the file is under Installation. */}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 wraps it with asChild.
What does Copy payment ID do?
It writes payment.id to the clipboard with navigator.clipboard.writeText. The item runs it from onSelect. View customer and View payment details have no handler yet.
API Reference
Table
Sets colSpan={columns.length}. The rest is on the Table page.
