Data List

Component for organizing and displaying data as a list of key-value pairs.

Import#

import { DataList } from '@volue/wave-react';

Data List is a compound component that consists of multiple parts.

DataList: A container for all the parts of the data list.
DataList.Row: Row that wraps a key-value pair.
DataList.Label: Contains the key of the key-value pair.
DataList.Value: Contains the value of the key-value pair.

Examples#

Basic#

Sizes#

DataList comes in two sizes: medium and small. By default, it uses medium size.

Orientation#

Use the orientation prop to change the way the data list is laid out. DataList supports horizontal (default) and vertical orientations.

Orientation prop is responsive, meaning it accepts either a single orientation or an object that maps orientation to a breakpoint.

Row separation#

Use the rowSeparation prop to control the appearance of row separation.

Stripes#

Dividers#

Customize column sizes#

By default the label column in horizontal orientation extends to accomodate the label and the value column fills the rest of available space. Use the columnSizes property, to control the size of the label and value columns in horizontal orientation.

Align value to end#

Use alignValueToEnd property to align the value to an end of the column in horizontal orientation, useful for numeric or similar data.

Sometimes it makes sense to emphasise the label instead of the data (i.e. if it helps the user to scan more easily for the right information).

Set emphasize property to label to give labels more emphasis.

API Reference#

DataList#

Prop	Type	Default
`css`	`StitchesCss`	No default value
`size`	`enum`	`"medium"`
`orientation`	`enum`	`"horizontal"`
`columnSizes`	`[string, string]`	No default value
`rowSeparation`	`enum`	No default value
`alignValueToEnd`	`boolean`	`false`
`emphasize`	`enum`	`"value"`

DataList.Row#

Prop	Type	Default
`css`	`StitchesCss`	No default value
`alignItems`	`enum`	No default value

DataList.Label#

Prop	Type	Default
`css`	`StitchesCss`	No default value

DataList.Value#

Prop	Type	Default
`css`	`StitchesCss`	No default value