Data List
Table-like compontent useful to organize and display data.
Import#
import { DataList } from '@volue/wave-react';
Examples#
Basic#
Striped#
Bordered#
Customize columns ratio#
Use the ratio property, to define the relative width of the label and value columns. The default ratio is 1:3.
Alignment#
Use align property to horizontally align the value, useful for numeric or similar data.
Emphasise value#
Sometimes the value itself is what matters, the label should only act as a supporting content.
Set emphasize property to value to de-emphasize labels and thus give values more emphasis.
API Reference#
DataList#
Prop | Type | Default |
|---|---|---|
css | StitchesCss | No default value |
striped | boolean | No default value |
bordered | boolean | No default value |
ratio | [number, number] | [1, 3] |
align | enum | No default value |
emphasize | enum | "label" |
DataList.Row#
Prop | Type | Default |
|---|---|---|
css | StitchesCss | No default value |
DataList.Label#
Prop | Type | Default |
|---|---|---|
css | StitchesCss | No default value |
DataList.Value#
Prop | Type | Default |
|---|---|---|
css | StitchesCss | No default value |