shadcn.io is not affiliated with official shadcn/ui
Table With Actions Skeleton Block for Vue
An API key table with row actions that loads in place: bars become key names, masked keys and dates, and each row's Copy ID button really copies the key's id.
Installation
Overview
Show a table with row buttons while it loads, with this table skeleton with actions for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a band heading and a native table of six API keys from Gules, an API platform. The heads are real from the first paint; each cell is a Skeleton bar that becomes the key's name, its masked key in mono type, when it was made and when it was last used, and each row's two icon buttons are a bar of their size until the row arrives. Once loaded, Copy Button really copies the key's id to the clipboard and the polite line names it, and Revoke says it is not wired in this demo. Every button names its key. Below the medium breakpoint the table becomes a list, each key with its buttons under it. It's built from Skeleton, Copy Button, Button and Guides, with a CSS entrance only. For key managers, token lists and any table whose rows act.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The six keys are typed in KEYS, Load starts a 700 millisecond timer, and when it ends the phase becomes ready and the data swaps in; Reload goes back to the bars and in again. To wire it for real, delete the timer, the Load button and the polite line, and set data-state (loading or ready) and aria-busy on the region from your query's pending state, or use the bars as a Suspense fallback and render the real rows when they arrive. The bars are derived from the same array as the data, so keep one row component for both.
What does Copy ID copy?
The key's id (key_7f3a), not the secret: a masked key is never on the page. The copy goes through the real clipboard, the polite line says "Copied key_7f3a", and when the browser refuses (no permission, or a page not served over HTTPS) it says so instead of a false success. The button's own status is silenced so the page has a single live region.
What does Revoke do?
Nothing, and it says so: "Revoke isn't wired in this demo." Wire it to your own call, ask for confirmation first, and remove the row from your data when it succeeds. A destructive action deserves a confirmation dialog rather than an instant row removal.
Why are the buttons bars while loading?
A control that acts on a row can't exist before the row does, so it is a bar of the button's size until the data is there, in the same cell. The hidden button is invisible, so it can't be focused or read, and nothing moves when it appears.
Does the table keep its height while it loads?
Each bar and its data sit in one grid cell, so the larger of the two sets the cell's box and the swap changes nothing around it. The table is fixed-layout with set column widths and fixed row heights, the heads and the frame are real in both phases, and the polite line reserves two lines, so the panel is exactly as tall before, during and after loading at every width.