shadcn.io is not affiliated with official shadcn/ui
Copy Cell Table Block for Radix UI
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 Radix 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.