Components

Data Tables

Tables for structured data — how to design sortable, filterable, accessible tables that make data scannable rather than overwhelming.

#tables#data table#sorting#filtering#pagination#rows#columns

What is it?

A data table is a structured layout for displaying multiple records with multiple attributes in a comparative format. Tables are the correct pattern when users need to compare values across items or scan a data set. They are frequently used incorrectly when a list, card grid, or chart would better serve the use case.

Why it matters

Data tables are the most complex common component in enterprise and data-heavy applications. A well-designed table makes data scannable, comparable, and actionable. A poorly designed table creates cognitive overload, horizontal scrolling nightmares, and inaccessible data. Dashboards, admin panels, CRMs, and analytics tools live and die by their table design.

Best Practices

Align numbers right, text left, and centered only for icons or status indicators.
Truncate long text with ellipsis and show full content on hover or in a detail view.
Make columns sortable by clicking headers — show current sort state with an arrow indicator.
Sticky header: keep column headers visible when scrolling vertically.
For dense tables, use alternating row backgrounds (zebra striping) to aid horizontal scanning.
Row actions (edit, delete) appear on hover in the rightmost column — don't always show them.
Pagination vs. infinite scroll: tables should paginate; feeds can use infinite scroll.
Column visibility controls let users show/hide less-important columns.
Fixed column width for numeric data — variable widths make comparisons harder.
Empty state design: when a table has no data, explain why and what to do.

Common Mistakes

Centering all content — number alignment in the center makes comparison impossible.
No frozen/sticky header — users lose column context when scrolling vertically.
Horizontal scrolling tables on mobile without freeze column support.
Displaying too many columns — more than 8 columns on desktop is almost always too many.
No row action discoverability — users don't know rows are actionable.
Mixing sort types in the same column (numeric and text) without explicit handling.
Tables for data that would be better as a chart or card grid.

Checklist

Numbers are right-aligned, text is left-aligned

Column headers are sortable (click to sort, visual sort indicator)

Sticky column header on vertical scroll

Pagination or load-more for >25 rows

Row actions are accessible (hover state or persistent for mobile)

Empty state has explanation and call to action

Table is keyboard navigable (Tab through cells, Enter to activate)

Responsive handling: horizontal scroll or stacked cards on mobile

Column width is appropriate to content type

Table has a clear accessible caption or aria-label

Research & Theory

Numeric Alignment Research

Typography research consistently shows that right-aligned numeric data in tables is faster to compare than center-aligned. The decimal points create a consistent vertical axis.

Why it's relevant

This is not a preference — it is a measurable readability difference. Always right-align numbers in tables.

Real-World Examples

Linear

Issue list is essentially a data table. Sticky headers, sortable columns, keyboard navigation, hover-to-reveal actions. Handles thousands of rows through virtualization.

Stripe Dashboard

Transaction tables with right-aligned currency, status badges, sticky headers, and export functionality. The standard for payment data tables.

Airtable

The entire product is a data table. Column types, sorting, filtering, grouping, and field configuration are the product. Sets the standard for flexible table design.