Empty States
Three empty state patterns for tables: no data, no search results, and error states.
No data
Brand-new or cleared dataset
No orders yet
When customers place orders, they'll appear here. Get started by creating your first order.
No search results
Filters returned nothing
No matches found
We couldn't find anything matching your filters. Try adjusting your search or clearing filters.
Error state
Fetch failed or connection lost
Couldn't load data
Something went wrong while fetching orders. Check your connection and try again.
Interactive demo
Clear the table to see the empty state inside a real DataTable.
| ORD-4218 | Priya Iyer | $1,248 | delivered |
| ORD-4217 | Marcus Chen | $329 | shipped |
| ORD-4216 | Sofia García | $89 | processing |
| ORD-4215 | Yuki Tanaka | $1,799 | delivered |
| ORD-4214 | Ethan Wright | $249 | cancelled |
Showing 1–5 of 10
Empty state guidelines
No data
Show a welcoming state with a primary CTA to create the first item. Use a friendly icon and helpful copy.
No results
When filters return nothing, offer to adjust filters or clear them. Mention the active filter count if helpful.
Error state
Be honest about the failure. Provide a retry button and, if available, a link to status or support.