Balance Logo
Balance
Reckon Design System

Data Group

Data groups are used to organize and display information.
Install
pnpm add @reckon-web/data-group
Import usage
import {
DataGroup,
DataRow
} from '@reckon-web/data-group';
  • Code
  • API

Usage

Use data rows to render key/value pairs within related groups. Because we're using a description list for the underlying elements, DataRow must be wrapped by DataGroup even if there's just one row.

Key
Value
Label
Content
Open in Playroom

Title

Provide an optional title to describe the group of values.

Ice Cream

Temperature
Cold
Flavour
Vanilla
Serving size
Large
Serving method
Cone

Label and Value

A data row consist of a label and a value. The label is a string and should be concise. The value is implemented using children so you can provide inline elements like <strong/> and <a/>, but block-level elements are forbidden.

To aid the user when parsing rows we replace empty values with a symbol so the eye doesn't drift away from the content.

Inline elements
We could have some bold text, or perhaps a link
Empty (undefined)
Empty (null)
Empty (false)
Valid (number)
0

Alignment

For numeric or similar data it may be necessary to align the value to the right of the container.

Annual entitlement
152 hours
Leave start date
Friday, 26 June 2020
Leave loading
17.5%
Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.