✍️ Table

Updated 2026-05-14

Confidence anatomy low variants medium motion medium a11y high content high

Overview

Use for large datasets requiring comparison, sorting, and filtering. Supports complex rows with multi-type data (text, badges, actions).

“If data is null, display the ‘Empty State’ illustration variant with a ‘Create New’ call to action.”

1
Container
the bounding surface — frames the data presentation
2
Title or heading (optional)
identifies what the data represents
3
Primary content
the data itself — text, value, chart, table cells, badge label
4
Supporting metadata (optional)
timestamps, units, counts, attribution
5
Visual indicator (optional)
color dot, icon, badge, or status pill
6
Action affordance (optional)
expand, drill-in, dismiss, or copy

Built type
`By columns`
`By rows`

rows/cards reveal with skeleton placeholders during load

lists, tables, search-result-cards enter with staggered fades

collapsible cards/sections expand at the accordion pace