Table · cells

Atom-based table — Mantine Table structure (Th header cells · Td body cells) adapted to our tokens, 1:1 with the CloposDS table-spec. Header cells (2 types × sort) · 12 body cell types × hover · status/badge schemes · assembled table · customize panel. Typography uses body2 · caption1 · caption2 only.

Header cells · TableHeaderCell

Single line · sort states

label cap1/500 #grey700 · sort icon 14 primary · default · asc · desc · none

With description · 2-line

label (cap1/500) + description (cap2/400 primary)

Body cells · 12 types · default + hover

Status · Badge · Boolean · colour schemes

Status (left) · Badge (left + desc) · Boolean

pill h22 · px8 · r:1000 · cap2/500 · categorical = left-aligned

IconText · transaction logs

Assembled table · real <table> · Mantine props

Table.Thead / Tbody / Tr / Th / Td — withRowBorders · highlightOnHover · striped · withColumnBorders · stickyHeader

default · row borders · highlight on hover

striped

withTableBorder + withColumnBorders

stickyHeader · scroll

Customize panel · DragDropRow molecule

Trigger · panel · DragDropRow states

trigger 36×36 · panel 320 · row h40 · checkbox = our atom