All components (204)

Data list

Data · DataList · .amset-data

What it is and when to use it

Label-value pairs: a customer record, an order summary, a product's details. In one column or several, with the label above or beside the value.

When to use it

To show the data of a single thing, read one item at a time.
columns (up to 4) for wide records: it is a maximum, and the pairs stack one below the other when a column would end up narrower than 12rem (18rem in horizontal). The width of the list decides it, not that of the window. full on an item makes it take up the whole row (addresses, notes).
size: the font size, sm in a side panel or lg in a record that fills the screen.
orientation="horizontal" for a record with the label on the left. In narrow panels, inside a container with data-density="compact": density is global, not a prop.
An empty value (null, undefined or '') is shown with a dash, or with whatever empty says: never a blank gap.

When not to

Many things with the same data, to compare them: Table.
A dashboard figure with its change: Stat.
Order lines with subtotal and total: OrderSummary.

Keyboard: none; whatever is inside the values (a link, a button) is traversed.

Accessibility: it is built on real dl, dt and dd, so the screen reader says "NIF, B41234567" and not two loose texts. The title is a heading at the level of headingLevel (h3 by default).

Fine-tuning: CSS variables --amset-data-*: -slot-rows and -slot-columns (the gaps between pairs), -padding-divider (the space on each side of the line with dividers), which shrink in compact density; -width-label (the label in horizontal: 10rem, 8 in sm, 12 in lg; if there is no room, the value drops below), -width-min (that of a column) and -font, -font-label and -font-title. The lines sit in the middle of the gap between rows, with any number of columns.

What it looks like

Summary

Order: 4821
Status: Entregado
Total: 148,20 €

<DataList
  title="Summary"
  data={[
    { key: 'order', label: 'Order', value: '4821' },
    { key: 'total', label: 'Total', value: '148.20 EUR' },
  ]}
/>

Props

Import it with import { DataList } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`data`required	`readonly DataListItem[]`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`columns`	`3 \| 4 \| 2 \| 1`	How many columns fit at most. They follow the width of the container, not of the window: in a narrow side column they stack even if the screen is wide.
`dividers`	`boolean`	Line between items. Helpful in long records.
`empty`	`ReactNode`	What to show when a value is empty. By default, a dash.
`headingLevel`	`LevelTitleData`	—
`orientation`	`DataListOrientation`	Label on top when vertical; beside it when horizontal, like a record.
`size`	`"sm" \| "md" \| "lg"`	The body text: `sm` in a side panel, `lg` in a detail page that fills the screen.
`title`	`string`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-data-font`	`var(--amset-text-base)`
`--amset-data-font-label`	`var(--amset-text-sm)`
`--amset-data-font-title`	`var(--amset-text-lg)`
`--amset-data-width-label`	`10rem`

How to change it

.amset-data {
  --amset-data-font: ...;
  --amset-data-font-label: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: