Data display
Key-value displays
A two-column list of labels and values
Nameharbour-chart.png
KindPNG image
Size1.4 MB
Dimensions1920 × 1080
Modified24 Oct 2026
label column 120px · every value begins at the track's edge
Usage
import { KeyValue } from "@gpuixui/data";
<KeyValue
entries={[
{ key: "width", label: "Width", value: "120" },
{ key: "height", label: "Height", value: "80" },
]}
/>;API
KeyValue
| Prop | Type | Default | Consequence |
|---|---|---|---|
entries | KeyValueEntry[] | — | the rows, in the order they paint; a value that is not a list paints no rows, and an entry without a text key is not a row |
labelWidth | number | 120 | the label column's width; one the layout cannot paint reads as 120 |
valueWidth | number | — | the value column's width; omitted — or one that cannot paint — and the value fills the row |
className | string | — | joined after the recipe |
testId | string | — | every cell derives from it |
KeyValueEntry
| Field | Type | Consequence |
|---|---|---|
key | string | the stable identity a row is addressed by; the cells derive their ids from it, and an entry whose key is not text is not a row |
label | string | the words in the fixed label column; a blank one reads as the row's key |
value | ReactNode | the value, already rendered by the caller; a string or a number is painted as its own Label |
Edit this page on GitHubpackages/data/docs/key-value.mdx