List page
The page around a table: search, filters, result count, loading, empty, no-results and error states, and paging.
The Data table pattern covers the table itself. This one is everything around it: the header with the primary action, search with Input Group, a status filter with Select, and the four states every list has, using Skeleton, Empty and Alert. Use the demo-state buttons to see each one.
Demo state:
Services
6 services
| Name | Status | Region |
|---|---|---|
| payroll-api | Running | ap-south |
| leave-worker | Running | ap-south |
| hris-web | Running | eu-west |
| reports-cron | Stopped | eu-west |
Page 1 of 2
How it works
| State | When | Shows |
|---|---|---|
| Loading | The first fetch | The table header and Skeleton rows: same count and height as a page, so nothing jumps |
| No data | The list is empty and no filter is on | Empty with an icon, what this list is for, and the primary action. The filters are hidden: there's nothing to filter |
| No results | Filters matched nothing | Empty inside the table, saying what didn't match, with Clear filters |
| Error | The fetch failed | A destructive Alert saying what failed and that nothing is lost, with Retry |
- No data and no results are different screens. One invites the first action, the other helps undo a filter. Mixing them up tells a new user to "clear filters" they never set.
- The result count says "2 of 6 services" when filtered and "6 services" when not, with
role="status"so screen readers announce changes. - Any change to search or filter goes back to page 1. Paging hides when there's only one page.
aria-busyon the table body while loading.
Guidelines
- One
brandbutton per view. In the no-data state the primary action moves from the header into theEmpty, so there's still only one. - Keep search, filters and page in the URL (
?q=pay&status=running&page=2) once the data comes from a server, so a filtered view can be shared and survives a reload. - Errors say what failed and what still works ("Your services are still running"). Never show a raw status code alone.
- Don't use a spinner for a list. Skeleton rows show the shape of what's coming.