Components · Data display

Table

A bordered data table with a muted, letter-spaced header, hairline row dividers, a hover state, and a brand-tinted selected row. Composes cleanly with badges in cells.

Preview

Light

Name	Role	Status
Ava Chen	Engineer	Active
Liam Park	Designer	Pending
Noah Reyes	Product	Invited

Dark

Name	Role	Status
Ava Chen	Engineer	Active
Liam Park	Designer	Pending
Noah Reyes	Product	Invited

Accessibility

Name	Role	Status
Ava Chen	Engineer	Active
Liam Park	Designer	Pending
Noah Reyes	Product	Invited

Spec

Values and token references straight from the Zetta spec.

table-container

backgroundColor: {colors.surface-card}
borderColor: {colors.hairline}
borderWidth: 1px
borderRadius: {rounded.base}
overflow: hidden

table-header

backgroundColor: {colors.surface-table-header}
textColor: {colors.muted}
fontFamily: Geist
fontSize: 13px
fontWeight: 500
letterSpacing: 0.05em
textAlign: left
borderBottomColor: {colors.border-strong}
borderBottomWidth: 2px
paddingX: 16px
paddingY: 14px

table-header-sortable-hover

backgroundColor: {colors.surface-muted}
cursor: pointer

table-column-resizer

width: 4px
backgroundColor: transparent
cursor: col-resize
position: absolute
right: 0
top: 0
bottom: 0

table-column-resizing

backgroundColor: {colors.brand}
width: 2px

table-row

backgroundColor: transparent
textColor: {colors.body}
fontFamily: Geist
fontSize: 14px
fontWeight: 400
lineHeight: 1.6
borderBottomColor: {colors.hairline}
borderBottomWidth: 1px

table-row-hover

backgroundColor: {colors.surface-secondary}

table-row-selected

backgroundColor: {colors.brand-bg}
textColor: {colors.ink}

table-row-selected-focus

outline: 2px solid {colors.border-focus}
outlineOffset: 2px

table-cell

paddingX: 16px
paddingY: 12px
verticalAlign: middle
overflow: hidden
textOverflow: ellipsis
whiteSpace: nowrap

table-sort-icon

size: 16px
colorInactive: {colors.muted}
colorActive: {colors.brand}

Build with the skill

No package to install — hand this to your AI to generate the table in your stack.

Prompt for your AI

Implement the Zetta "Table" component in this project's stack using the zetta-design-md skill.

- Apply the `table` spec from the skill (variants: header, row, row-hover, row-selected).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.

Anatomy & rules

Container: 1px hairline border, 8px radius, clipped. Header: surface-table-header, muted 13/500, 2px border-strong underline.
Rows: 1px hairline dividers, hover surface-secondary, selected brand-bg. Cells: 12×16 padding, ellipsis overflow.

Known gaps

Column resizing, sortable-header icons, sticky header, and pagination wiring are specified at the token level but not previewed here yet.