shadcn.io is not affiliated with official shadcn/ui
Copy Cell Table Block for React
A table of discount codes where each code is a button across its whole cell that copies it to the real clipboard and says Copied for two seconds, with a Copy all in the head and a foot line that counts what was copied.
Installation
Overview
Put the copy button in the data, with this copy cell table for React with Base UI. A framed panel holds a native table of five discount codes from a coupon manager (code, uses, expiry and status), and the code itself is the control: mono text across its whole cell, a Button in everything but name, that puts the code on the real clipboard when you press it or hit Enter or Space on it. The cell swaps to a check and "Copied" for two seconds, and its name changes with it ("Copy SPRING-24", then "Copied SPRING-24"). A "Copy all" button in the head copies every code, one to a line. The foot band is the one polite line: it says what was copied and how many of the five codes have been copied this session, and when the browser refuses the clipboard a separate alert says so instead of showing a check. Uses, expiry and a status word (Active, Used up, Expired, shown with a Badge and a dot) come from the typed rows. It's built from Button, Badge and Guides, with a CSS entrance only. For coupon lists, API keys, order numbers and anywhere people copy a value out of a table.
FAQ
Does it really copy?
Yes. Pressing a code calls navigator.clipboard.writeText, so the text is on the visitor's real clipboard. Browsers only allow that on a secure page (HTTPS or localhost) and may ask for permission. When the call is refused the cell does not swap to "Copied": the foot shows an alert, "Couldn't copy SPRING-24: the browser blocked the clipboard", and the status line stays quiet.
How does it work from the keyboard?
Each code is a native button, so Tab reaches it and Enter or Space copies. The focus ring is drawn inside the cell so the table's edge never clips it, and focus stays on the same button while its label swaps. The head's Copy all is a button too, and on a phone it shows only its icon with the full name kept for screen readers.
What does the confirmation do, and for how long?
The cell shows a check and "Copied" for two seconds, then goes back to the code. The code and the word share one box, so the swap moves nothing. Nothing animates, so reduced motion needs no special case. The same moment the foot line reads "Copied SPRING-24. 2 of 5 codes copied this session." for screen readers.
What does Copy all put on the clipboard?
Every code in the table's order, joined with line breaks, so pasting into a spreadsheet gives one code per row. It counts all five as copied this session. Change COLUMN_TEXT to join with commas or tabs if your destination wants that.
Where do the status words come from?
They are derived, never typed. A code is Used up when its uses reach its limit, otherwise Expired when its expiry date is before AS_OF, otherwise Active. AS_OF is a fixed date in the file so the demo never drifts; in your app pass today's date from your server.
What stays local, and how do I wire it for real?
The five codes are typed in CODES and nothing is stored or sent: the copied count lives in the tab and resets on reload. To wire it, replace CODES with your data (the code field is what lands on the clipboard) and keep the copy handler as it is; the clipboard never needs your server.
Related
- Pro
Link Cell Table
Rich cellsA reading list whose titles are real links: an arrow and a name that says opens in a new tab on links to other sites, plain links inside the app, truncated hosts with the whole address in a title, and a preview card on hover or focus.
- Pro
Row Selection Table
Select and actA stock list with a checkbox on every row, a head checkbox that shows a dash when only some are ticked, Shift-click range select and a live line that adds up the price of the ticked rows.
- Pro
Export Table
Select and actA sales table with a search and row checkboxes and an Export dialog that asks which rows (visible, selected or all, with counts), whether to include hidden columns and a file name, then downloads a real CSV, shown open in place.
- Pro
Quick Actions Table
Select and actA document table whose rows show Rename, Duplicate and Delete icon buttons on hover or focus, with tooltips that name the document and show the key, and a Delete that becomes a quiet row with Undo.
- Pro
Row Menu Table
Select and actA drafts table where every row has a three-dot menu named after it, with View, Edit, Duplicate, a Shared with team checkbox item, Archive and a destructive Delete that confirms in an alert dialog, shown open in place.
- Pro
Row Actions Table
Select and actA task table with one state-advancing button per row, Start then Mark done then Reopen, that shows a pending spinner, updates the status, the counts and a polite line, and returns focus to the row.