This page is a reusable-component split from the source checklist row Table or dense list. The source row remains authoritative.
- Job
- Scan
- Requirement
- may defer
- States / rules
- Specified means
- Not separately stated in this row.
- Hardest context
- Not separately stated in this row.
Baseline vs product decision
Building Blocks baseline supplies
- Semantic tabular relationships where the data is truly tabular.
- Keyboard/focus behavior for interactive cells.
- Dense-state guidance and readable hierarchy.
- A documented responsive strategy rather than “it scales.”
The consuming product still decides
- Which columns matter and in what order.
- Sorting, selection, inline editing, and bulk-action needs.
- Density and truncation policy.
- Whether a dense list is the more appropriate surface.
Anatomy
This is documentation anatomy, not a public API shape.
Names the column meaning and any sorting affordance.
Represents one record without hiding essential actions in hover only.
Preserves semantic data relationships and readable alignment.
Appears only when the product actually needs the job.
Documents what reflows, scrolls, collapses, or becomes a list.
Preview
Preview — not a published component API.
| Project | Status |
|---|---|
| Northstar | Ready |
| Atlas | Draft |
Usage
Job: Scan.
A consuming product should document the job, its rules, and the hardest context before treating the component as specified.
When not to use
Do not use a table for a small list where comparison across columns is not the primary job.
Variants
The checklist row does not authorize this page to invent a final component API. Where the source rule names a variant, preserve it; otherwise keep the implemented variant set minimal and job-driven.
States & behavior
Default, Hover, Focus, Active/Pressed, and Disabled apply to interactive controls. Error, Loading, Empty, and Success apply where the component takes or reports data.
Hardest-context test
Building Blocks baseline recommendation: Test many columns, long values, keyboard interaction, 200% zoom, and the product’s explicit 375px transformation.
Accessibility
- Use native semantics whenever they match the job.
- Keep keyboard focus visible and distinct from hover.
- Do not rely on color alone for state.
- Maintain touch-operable targets and no hover-only actions.
- For composite/overlay controls, document focus movement, Escape, and return focus as applicable.
Responsive behavior
At sm, preserve the comparison job deliberately: scroll, prioritize columns, or change representation. Never rely on “it will scale.”
Theme comparison
The component job and interaction contract stay stable while product expression changes.
| Project | Status |
|---|---|
| Northstar | Ready |
| Atlas | Draft |
| Project | Status |
|---|---|
| Northstar | Ready |
| Atlas | Draft |
| Project | Status |
|---|---|
| Northstar | Ready |
| Atlas | Draft |
Tokens
Bind the implementation to semantic roles for surface, text, border, focus, spacing, shape, and motion as needed. Actual token names must come from the implemented Foundation; this demo deliberately does not mint package-level token names.
Code / Storybook
When this component exists in code, this section should link to its source and Storybook stories for executable states, Controls, viewport, accessibility checks, and interaction tests. The documentation page remains responsible for job, guidance, source contract, product decisions, themes, and Catalog lineage.