Table

Structural table chrome for data lists. Compose rows and cells; put content in light DOM with existing Catnip primitives. The table does not own sorting, filtering, selection, or expansion logic.

Overview

Piece	Role
catnip-table	Table chrome, density M / L, optional striped body rows, optional sticky header
catnip-table-row	Body row chrome: default / hover (neutral/subtler) / selected (primary/subtler)
catnip-table-cell	Slotted cell; header uses table-header + primary/stronger; body uses text-m/l + neutral/strongest

Out of scope for v1 (build in the product): typed cell variants (status, badge, user, avatar), expandable rows, column filters inside headers, virtualization, column resize. Filters belong above or beside the table (for example catnip-dropdown). Status dots, badges, and avatars are consumer markup until dedicated primitives ship.

Live example

Accessibility

• The table sets role="table"; rows use role="row"; cells use role="cell" or role="columnheader" when header is set.
• Provide aria-label or aria-labelledby on catnip-table when there is no visible caption.
• Sortable headers set aria-sort from activeSort (ascending / descending / none). The consumer still owns sort state and data order.
• Interactive content in cells (checkboxes, links, buttons) keeps its own accessible name.