Design System · 11 of 25
Data display
Tables, lists and data density.
Data display philosophy
Present data clearly, never hide it.
Tables and lists are the primary ways users interact with large datasets. A good data display system makes it easy to scan, sort, filter, and select information. It should work across all screen sizes, from phone to television, and be accessible to keyboard and screen reader users.
The key principle is to separate structure from style. Use the spacing scale for vertical rhythm, the elevation scale for row hover states, and the alignment system for column layout.
Rules
Always provide a header row with column labels.
Make sorting and filtering accessible.
Ensure keyboard navigation works for all interactive elements.
Adapt layout for mobile and desktop.
A well-structured table includes a header, data rows, and an empty state.
Sorting and filtering
Help users find what they need.
Sorting reorders data by a column, while filtering narrows the dataset. Both should be accessible and provide clear visual feedback. Use server-side sorting for large datasets and client-side for smaller sets.
Provide clear affordances for column headers to sort, and use dropdowns or type-ahead for filtering.
Examples
Sort by name: ascending or descending
Filter by status: active, pending, completed
Search across multiple columns
Rules
Provide sorting on column headers.
Use accessible filtering controls.
Maintain sort/filter state in the URL for shareability.
Debounce client-side filtering for performance.
Interface elements for sorting and filtering data tables.
Selection
Users should be able to select one or more rows.
Row selection enables bulk actions like delete, export, or move to another status. Provide clear checkboxes and indicate the number of selected items. Support single selection for detail views and multi-select for batch operations.
Always show a count of selected items in the UI chrome.
Examples
Single select: navigate with arrows, enter to detail view
Multi-select: checkboxes with shift/ctrl click
Deselect: click again or escape to close
Rules
Provide checkboxes for row selection.
Show a count of selected items.
Support both single and multi-select patterns.
Disable selection during loading states.
Row selection with checkboxes and bulk action indicators.
Empty state
Design for when there is no data.
Every data display should have an empty state that explains why there is no data and provides a path forward. Use illustrative graphics, microcopy, and a call-to-action.
Empty states should be informative, not dismissive. Tell the user what happened and what they can do next.
Examples
No results found: "No items match your filter."
New user: "Get started by adding your first item."
Permission denied: "You do not have access to view items."
Rules
Always provide an empty state when no data is available.
Use clear microcopy that explains the situation.
Provide a call-to-action or next step.
Use the illustration scale for visual interest.
Empty state with message and illustration for data display.
Responsive data display
Tables and lists that work at every screen size.
Tables don't shrink gracefully. Use responsive patterns: horizontal scrolling on mobile, column collapsing, or conversion to a list view. Provide a dense mode for power users and a comfortable mode for casual reading.
Use the spacing scale for horizontal gutters and the elevation scale for row hover states.
Examples
Mobile: horizontal scroll, stacked list view
Tablet: column collapse, moderate density
Desktop: full table with sorting and selection
Rules
Provide a mobile-friendly fallback.
Use horizontal scrolling on screens narrower than 640px.
Offer a dense mode with tighter spacing.
Maintain accessibility in all layouts.
Practical guidelines
Tips for applying the data display system.
Start with the default layout and density, then adjust for responsive and power-user needs. Use the spacing scale for vertical and horizontal rhythm, and the elevation scale for hover states. Test with keyboard navigation and screen readers.
Do
Use header rows, provide sorting/filtering.
Don't
Don't hide horizontal scroll on mobile. Don't forget keyboard accessibility.
Rules
Use the spacing scale for vertical rhythm.
Apply elevation on hover states.
Test with keyboard navigation and screen readers.
Provide dense and comfortable density options.
Maintain column alignment across breakpoints.
```tsx
// Simple table using data display tokens
export function Table({ columns, rows }: { columns: string[]; rows: string[][] }) {
return (
<table>
<thead>
<tr>
{columns.map(col => (
<th key={col} style={{ padding: \"var(--space-4)\" }}>
{col}
</th>
))}
</tr>
</thead>
<tbody>
{rows.map((row, rowIndex) => (
<tr
style={{ backgroundIndex: rowIndex % 2 ? \"var(--color-surface)\" : \"transparent\" }}
onMouseOver={{ style: { boxShadow: \"var(--shadow-sm)\" } }}
onMouseOut={{ style: { boxShadow: \"none\" } }}
>
{row.map(cell => (
<td key={cell} style={{ padding: \"var(--space-4)\" }}>
{cell}
</td>
))}
</tr>
))}
</tbody>
</table>
);
```
Checklist
Before shipping your data display.
Structure
Header row present. Clear column labels. Sorted and filtered state is persistent.
Accessibility
Keyboard navigable. Screen reader labeled. Sort/filter controls are perceivable.
Responsive
Works across phone, tablet, desktop. Mobile has horizontal scroll or stacked view.
Density
Comfortable mode default. Dense mode available for power users.