Searchable Catalogue Table Block for React

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.

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.

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.

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.

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.

The field and the menu stack at full width. The table keeps Title and Status, and the author and the shelf fold under the title ("Tamsin Quarrington, shelf G2") with the matches marked there too, so nothing scrolls sideways.