display

Table

A structured component for displaying rows and columns of related data.

Tables are the primary component for data-dense interfaces. Their design must prioritise scanability over aesthetics — alignment, spacing, and column widths have direct impact on how quickly users can extract meaning.

Anatomy

  • Header row (th elements)
  • Data rows (tr/td)
  • Pagination (below)
  • Column sort controls
  • Row actions (inline or on hover)

Variants

Basic (bordered)Striped (zebra rows)Hoverable (row highlight)Compact (tight padding)Expandable (row details)

States

DefaultRow: hover, selectedColumn: sorted ascending, sorted descendingLoading (skeleton rows)

Rules

✓ Do

  • •Right-align numbers
  • •Left-align text
  • •Sticky header on long lists
  • •Horizontal scroll wrapper for responsive

✗ Don't

  • ×Don't centre number columns
  • ×Don't use tables for non-tabular data
  • ×Don't forget mobile — always add a horizontal scroll wrapper

AI Prompt

Paste into Claude, Cursor, Bolt, or v0.

Table: 44px row height, 14px cell padding, left-align text, right-align numbers. Sticky header (500 weight). Zebra stripe (alternating #F9FAFB). Row hover: #F1F5F9. Sort: ▲▼ with aria-sort.