shadcn.io is not affiliated with official shadcn/ui
Link Cell Table Block for React
A 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.
Installation
Overview
Make the title the way in, with this link cell table for React with Base UI. A framed panel holds a native table of five saved links from a team bookmarking tool (title, source, kind and who saved it), a one-line legend over it explaining the arrow. A link to another site has an arrow and a name that ends "opens in a new tab"; a link to a page inside the app is plain and stays where it is. The source column shortens long hosts with an ellipsis and keeps the whole host in a title. Hovering or focusing a title opens a Hover Card with a typed preview (the title, two lines about it and who saved it); Escape closes it. A screen that can't hover has no preview, so there the same two lines sit under the title, and below the medium breakpoint the host and who saved it move under the title too. The kind is a Badge and the person an Avatar with initials. It's built from Hover Card, Badge, Avatar and Guides, with a CSS entrance only. For reading lists, bookmark managers, resource directories and any table of links.
FAQ
How does it tell an outside link from one inside the app?
Each link has an external flag in its data. An outside link gets target="_blank", rel="noopener noreferrer", the arrow (hidden from assistive technology) and an accessible name that ends ", opens in a new tab". An inside link is a plain anchor; in this demo its press says what it would open and goes nowhere. The title link is an a set through the trigger's render.
When does the preview card show, and can a keyboard reach it?
It opens when a title is hovered and also when it takes focus, and Escape closes it while the title keeps focus. The card holds only text, so nothing in it needs a Tab stop; the same facts are in the row. Focus, blur and Escape are wired through a small controlled state, because that library's hover card follows the pointer only.
What about phones and touch screens?
A finger can't hover, so a screen with no hover shows the two preview lines under each title, at any width (@media (hover: none)). Below the medium breakpoint the host and who saved it move under the title as well, and the Source and Saved by columns go.
What happens to a long host or title?
Both are cut with an ellipsis in a fixed-layout table, so a row never grows. The source cell keeps the whole host in its title, and the title link's full name is read by screen readers whatever is cut. Hosts keep their left-to-right direction in a right-to-left page.
Where do the links go?
Nowhere real: every address is a reserved .example host or #, so nothing opens from the demo. Replace href and host in LINKS with your own and set external for anything that leaves your app.
What stays local?
The five links and their previews are typed in LINKS, and the polite line only reports what an inside link would open. Nothing is fetched: to preview real pages, load the summary on your server and pass it in as data, since a preview that fetches on hover is slow and hard to announce.
Related
- Pro
Copy Cell Table
Select and actA 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.
- Pro
Tags Table
Rich cellsA note library whose rows carry tag buttons: two show and a plus button opens the rest in a popover, pressing any tag filters the table to the notes that have it, and a strip says Tag and how many of the seven remain.
- Pro
Thumbnail Table
Rich cellsA media library whose first column is a drawn thumbnail: pressing one opens a dialog with a larger drawing, the file's facts and Previous and Next buttons through all six files, shown open in place.
- Pro
Avatar Stack Table
Rich cellsA sprint board whose assignee cell is a stack of initials and a plus count that opens a popover of checkboxes: ticking assigns a teammate, unticking removes them, an empty cell is a dashed circle and Unassigned.
- Pro
Searchable Catalogue Table
Sort and searchA library catalogue table with a search field and an availability menu: typing keeps the titles whose name or author holds the words and marks them, the foot says how many match, and an empty state under the head clears the search.
- Pro
Sortable Members Table
Sort and searchA members table whose column heads are buttons: press one to sort, again to reverse, a third time for the original order, with aria-sort on the active head, ties settled by name and a spoken line for each result.