Empty States Table Block for React

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".

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.

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.

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.

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.

The field and Remove all share a row that wraps, and the table keeps Name and Email, with the company and phone folded under the name. Long emails wrap rather than being cut, and the region scrolls inside the card if the rows are taller than it.