shadcn.io is not affiliated with official shadcn/ui
Searchable Catalogue Table Block for Vue
A 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.
Installation
Overview
Let people find a row by typing, with this searchable table for Vue with Ark UI. A compact header names the catalogue, and one framed panel with a plus mark on each corner holds the rest. Its first band is a search field, with a Kbd hint for the / key, beside a Select that limits the list to what is on the shelf or on loan. Under it a native table of fourteen titles sits in a fixed-height region with a sticky head. Typing keeps the titles whose name or author holds the words, ignoring case and accents, and Search Highlight Text marks the matches in both columns as you type. The foot band says in words what is shown ("2 of 14 titles match gar, on loan only"). When nothing matches, an Empty state under the head names the query, and its Clear button returns focus to the field. The region never changes height, so searching moves nothing. On a phone the author and shelf fold into the title's cell. It's built from Input Group, Kbd, Select, Search Highlight Text, Empty, Badge and Guides, with a CSS entrance only. For catalogues, directories and any list that outgrows its filters.
FAQ
How do I fill it with my own rows?
Edit TITLES: each has an id, a title, an author, a shelf mark and an availability of shelf or loan. FILTERS lists what the menu offers, with the words the foot uses after the count ("on loan"). The count, the sentence in the foot and the empty state's advice are all worked out from the rows and the two controls, so nothing is typed twice. To search more fields, add them to matches, and add a SearchHighlightText in the cell that shows them.
What does the search match, and how does the shortcut work?
Any title or author that holds the typed words, anywhere in the text, ignoring case and accents, so "edgar" finds "Edgar’s Orchard" and "cartographer" finds the title with an apostrophe. Escape clears the field while you are in it, and so does the small clear button. Pressing / focuses the field while focus is anywhere inside the block, unless you are already typing; the listener is on the block rather than on the page, so your own site search keeps its keys.
What stays local, and how do I search a real catalogue?
Everything is in the page: the rows are typed constants and the filter runs in the browser. For a real catalogue, keep the controls, send the query and the availability to your search API from the change handlers (debounced, or on Enter), render the rows it returns and take the count from its response. Keep the marks: SearchHighlightText only needs the text and the query.
What happens when nothing matches?
The table keeps its head and an empty state takes the space under it: it names the query ("No titles match zzz"), says if the availability menu is limiting the list, and offers Clear search. The button clears the field and puts focus back in it, so you can type again at once. The foot still says "0 of 14 titles match zzz" in a polite status line, so a screen reader hears the same news.
Does the block change height while I type?
No. The table sits in a region of fixed height that scrolls inside the frame, with a head that stays in place, and the empty state fills that same region, so the foot band never moves. A new query scrolls the region back to its top. The foot reserves two lines on a phone for the same reason.