Data screens prompt

Lists of records: a sortable table, filters and pagination.

Prompt

Use the klarhimmel-design skill. Build the {records} list: columns {columns}, filter by {filters}. Install: npx shadcn add @klarhimmel/app-data-table @klarhimmel/app-data-filters @klarhimmel/app-data-pagination (remove what you do not use) Pick: - app-data-table: sortable columns, row headers, and filled, empty, loading and error states - app-data-filters: search, selects and removable chips with a results count - app-data-pagination: summary, previous, next and numbered pages Props: columns and rows as text; sort as the active column and direction; state enum from your fetch status; messages for the empty and error states; active page as text. Copy: Empty state says what to do next ("Add a booking"). Error says what failed and offers retry. Numbers carry their unit. Accessibility: Sortable headers are buttons with aria-sort; rows have a row header; the table scrolls in a focusable region; the results count is announced when it changes. Never: viewport variants (md:, lg:), style=, text or images outside Text and Media, fields the schema lacks. Shorten copy to fit the limits. Done when: all four table states handled; sorted column announced; current page has aria-current.

Variables

Variable	What to fill in	Example
`{records}`	What the rows are	bookings
`{columns}`	Up to six columns	guest, room, arrival, nights, total
`{filters}`	Up to three filters	status, room type

Blocks it uses

A good result

All four table states handled. Sorted column announced. Current page has aria-current.

checklist.md

- [ ] all four table states handled
- [ ] sorted column announced
- [ ] current page has aria-current