VOL. III · CH. 3.12 · COMPONENT
Data Tables
The densest, most information-critical component in most internal and admin products.
1 min read · 148 words
3.12.1Definition & Anatomy
A data table presents structured records in rows and columns, typically with sorting, filtering, and pagination — the primary interface for scanning and comparing many records at once.
3.12.2Common Mistakes
- No empty state design, leaving a blank table with no explanation when a filter returns nothing.
- Loading the entire dataset client-side rather than paginating server-side, causing severe slowdowns at scale.
- Poor mobile handling — tables that simply shrink illegibly rather than adapting layout.
3.12.3Best Practices
- Paginate or virtualize large datasets server-side rather than rendering everything at once.
- Design explicit empty, loading, and error states, not just the populated-data state.
- On mobile, consider collapsing rows into card-style summaries rather than horizontal scrolling.
ExampleAdmin dashboards for large customer bases paginate server-side and load only 25–50 rows at a time, since rendering thousands of DOM rows client-side would make the browser itself the bottleneck.