Loading, empty, and error states for a table. The real column headers stay visible in every state, so the toolbar and the user's filters survive. Each failure is shown where it happened: the table, the row, the cell, or a bulk operation.
Initial loadSTATE-LOADING
Invoice
Customer
Amount
RefetchSTATE-REFETCH
Updating
Invoice
Customer
Amount
INV-204
Acme Corp
$1,240
INV-205
Globex
$860
Empty, first useSTATE-EMPTY-FIRST
Invoice
Customer
Amount
No invoices yet
Create an invoice and it shows up here.
Empty, filteredSTATE-EMPTY-FILTERED
Invoice
Customer
Amount
No results for "invoice 204"
Try a different search or clear your filters.
Empty by natureSTATE-EMPTY-NATURE
Issue
Owner
Opened
No open issues
Nothing needs your attention right now.
Empty, no accessSTATE-EMPTY-PERMISSION
Invoice
Customer
Amount
You don't have access to invoices
Ask an admin to add you to the Billing team.
Table failed to loadSTATE-LOAD-ERROR
Invoice
Customer
Amount
We couldn't load your invoices. Check your connection and try again.
Row action failedERROR-ROW-ACTION
Invoice
Customer
Status
INV-204
Acme Corp
Open
INV-205
Globex
⚠ Couldn't archive
Cell validationERROR-CELL
Item
Price
Wireless mouse
19.99
USB-C charger
⚠ Enter a price like 25.00
Import partly failedERROR-BULK-PARTIAL
3 rows can't be imported. The other 22 are ready. Fix the 3 here, or continue without them.
Row status
Name
Email
Role
✓
Robert Choi
robert@example.com
Chef
⚠ 1
Jane Smith
jane@example
Server Email needs an @ and a domain
✓
Ana Ruiz
ana@example.com
Host
⚠ 1
Ben Lee
ben@example.com
Manager This role isn't available for your location