shadcn.io is not affiliated with official shadcn/ui
Empty States Table Block for Vue
A contact book table with two empty states you reach by doing something: searching for text that is not there, and removing every contact after a confirm, then adding the samples back, all at one fixed height.
Installation
Overview
Design the empty table, not just the full one, with this contact book for Vue with Ark UI. One framed panel with a plus mark on each corner holds an inset card, a Frame, with a search field and a Remove all button over a native table of six contacts in a region of fixed height. Searching for something that is not there fills the region under the table's head with the no-results Empty state: it names the query, and its Clear search button puts focus back in the field. Remove all opens an Alert Dialog that says how many contacts go, and confirming it shows the first-run state, whose one primary is a Shine Button, "Add sample contacts": it brings back the six typed contacts and focuses the first one's email. Both states take exactly the space of the rows, so the card never changes height, and a status line under the table says what just happened. On a phone the company and phone fold under the name. It's built from Empty, Frame, Alert Dialog, Shine Button, Input Group, Button and Guides, with a CSS entrance only. For address books, directories and any list a visitor can empty or search to nothing.
FAQ
How do I fill it with my own contacts?
Edit SAMPLE: each contact has an id, a name, an email, a company and a phone. The count in the foot, the number in the confirm dialog and the search results are all worked out from the list in state, so nothing is typed twice. To search more fields, add them to matches. The search ignores case and accents, so "valtys" finds "Valtysdottir".
What are the two empty states, and when do they show?
The no-results state shows when the search matches nothing: its title names the query, its text says to check the spelling and its one button clears the search and focuses the field. The first-run state shows when there are no contacts at all, which here you reach with Remove all: its one button, Add sample contacts, is the block's only primary. They are two different messages on purpose: one says the search failed, the other says there is nothing to search.
What stays local, and how do I wire real removal?
Everything happens in the page: the contacts are a useState list, Remove all empties it and Add sample contacts refills it from SAMPLE; nothing is stored or sent. For real data, send the delete from the dialog's action handler, wait for it, then set the list from the response, and put your own sample or import step behind the first-run button. Keep the confirm: a bulk delete should ask.
Where does focus go in each case?
Clear search, and Escape in the field, put focus in the search field. Confirming Remove all moves it, about a third of a second later so the dialog has finished closing, to the Add sample contacts button that replaced the rows. Adding the samples moves it to the first contact's email, so the keyboard lands on the new content. Cancelling the dialog, or pressing Escape, returns focus to the Remove all button, which is how the dialog behaves in every library.
Does the card change height when a state changes?
No. The table sits in a region of fixed height with a head that stays in place, and each empty state is a block that fills the rest of that region under the head, so rows, no-results and first-run all occupy the same space. The status line under the region reserves two lines on a phone.