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

Alignment

Horizontally align the value, useful for numeric or similar data.

Currency
$123.45
Percentage
17.5%

Template

Define the relative width of the label and value columns using the template prop. The default the ratio is 1:2.

Key
Value
Label
Content
Copyright © 2022 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo