Component 23 · Complete

Table

Presents comparable data with native semantics, contained overflow, deterministic sorting, and synchronized row selection.

Default

Keep comparable data aligned

Native rows and column headers preserve relationships while the surrounding surface contains horizontal overflow.

Current design-system projects
ProjectOwnerStatusComponents
Nikba Design SystemPublic interface foundationsMaya ChenActive23
Brand libraryIdentity and templatesAlex MorganDraft8
Product patternsApplication compositionsJordan LeeReview12

Sorting and selection

Expose controls in the Table model

Sort Buttons update their header state. Row Checkboxes synchronize with an indeterminate Select all control.

Team access
Maya ChenProduct designer8
Alex MorganEngineer12
Jordan LeeContent designer5

Table stateReady

Selection contract

Keep selection independent from navigation

Each Checkbox names its row. Selecting a row does not make the complete row an ambiguous interactive target.

NoneHeader unchecked
SomeHeader indeterminate
All enabledHeader checked

Compact density

Increase density without losing targets

Compact reduces vertical cell padding for scanning-heavy desktop contexts. Interactive controls retain their own minimum size.

Recent releases
VersionDateStatus
0.4.015 Sep 2026Current
0.3.002 Sep 2026Supported
0.2.018 Aug 2026Maintenance

Empty state

Keep the Table structure recognizable

A spanning row explains why no data appears and points toward the next useful action outside the Table.

Archived projects
ProjectArchived byDate
No archived projects

Usage guidance

Preserve the comparison model.

Contain horizontal overflow and keep key columns stable. Convert data to cards only when row-to-row comparison is no longer the primary task.

Next pattern: Product States