Design Data Tables

Align columns by data type, freeze the header, make columns sortable, and provide a responsive fallback — so users can scan, compare, and act on tabular data across all screen sizes.

Why This Is Best Practice

Adopted by: IBM Carbon Design System, Google Material Design, Shopify Polaris, and Atlassian Design System all define explicit data table patterns with column alignment, sorting, selection, and responsive guidelines; NNG's "Designing Better Data Tables" (Babich, 2017) is the canonical UX reference; Baymard Institute's data table research documents the most common failures across enterprise applications Impact: NNG: correct numeric column alignment (right-aligned numbers) reduces data comparison errors by 25% compared to left-aligned numbers — decimal alignment allows vertical scanning without reading each value; IBM Carbon table research shows row hover highlighting reduces misread-row errors by 20% in dense tables; Baymard Institute: pagination outperforms infinite scroll for task accuracy on data tables at 15+ rows — users need to know where they are in a dataset (Holst 2018) Why best: Data tables are used for comparison — users scan columns to compare values across rows; the design decisions that support scanning (alignment, density, sorting, sticky headers) directly determine task accuracy; a poorly designed data table forces users to read row-by-row rather than scan, turning a 5-second comparison into a 30-second one

Sources: NNG "Designing Better Data Tables" (Babich, 2017); IBM Carbon Design System "Data table" (carbondesignsystem.com); Google Material Design "Tables" (m3.material.io, 2022); Holst "Pagination vs Infinite Scroll" (Baymard Institute, 2018)

Steps

1. Align columns by data type

Column alignment is one of the most impactful and most violated data table conventions: