BalanceReckon Design System
Others

Data Group

Use data rows to render key/value pairs within related groups.

import { DataGroup, DataRow } from '@balance-web/data-group';
Loading demo…

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.

Loading demo…

Alignment

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

Loading demo…

Template

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

Loading demo…

On this page