Primitive contract

TableShell

Styles native table content, density, numeric alignment, optional sticky header, and honest overflow affordance without providing data-grid behavior.

Semantic responsive table wrapper · @sanchika/primitives

Purpose and semantics

Styles native table content, density, numeric alignment, optional sticky header, and honest overflow affordance without providing data-grid behavior.

Recommended semantic: Use a native table with caption, column headers, and row headers where appropriate inside a labelled scroll region only when overflow is genuinely necessary.

Anatomy

shell

Boundary and density owner.

overflow affordance

Visible wide-data guidance.

viewport

Focusable scroll region only when needed.

table

Native table semantics.

caption

Visible data-set name.

headers

Column and optional row relationships.

Finite variants and important states

Variant · density: compact, comfortable
Variant · header: static, sticky
Required states: comfortable, compact, sticky-header, overflow, zoom-200, zoom-400
Class hooks: .sk-table-shell · .sk-table-shell__viewport · .sk-table-shell__affordance · .sk-table-shell__numeric

Composed synthetic exemplar

Rendered state matrix

TableShell: 6 required states

Each specimen starts from the package-owned example and contract state inventory. Simulated pointer and focus frames are labelled; consumers still verify real interaction in context.

comfortableThe comfortable contract remains visible and inspectable.