Table
Data · Avatar, Badge, Table
Quiet data table: uppercase captions, hairline rows, right-aligned tabular numbers.
Props: columns ({key, label, align, render}), rows. Place inside a surface Panel; numbers right-aligned; status as Badges.
Props
Avatar
| Prop | Type | Notes |
|---|
name | string | Required |
src? | string | |
size? | number | |
tint? | Tint | "surface-sunken" | |
className? | string | Extra class on the root element. |
style? | CSSProperties | Inline style on the root element. |
Badge
| Prop | Type | Notes |
|---|
tone? | Tone | |
dot? | boolean | |
live? | boolean | |
children? | ReactNode | |
className? | string | Extra class on the root element. |
style? | CSSProperties | Inline style on the root element. |
Table
| Prop | Type | Notes |
|---|
columns | TableColumn[] | Required |
rows | Record<string, any>[] | Required |
animate? | boolean | |
stack? | boolean | Cards instead of columns when the table's box is narrow (up to 600px): every row stacks its
cells, each with its column label. Without it narrow tables scroll sideways. |
className? | string | Extra class on the root element. |
style? | CSSProperties | Inline style on the root element. |