Data Item

Import#

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

DataItem is a compound component that consists of multiple parts.

• ​
  DataItem: A container for all the parts of the data item.
• ​
  DataItem.Label: Contains the key of the key-value pair. The key is a field name, identifier or attribute.
• ​
  DataItem.Value: Contains the value of the key-value pair. The value is the data that is being identified.

Examples#

Basic#

DataItem is the easiest way to visually represent some data. Use it when you need to:

• ​
  visually associate a key with a value
• ​
  display data in a consistent way
• ​
  decrease the lookup time for a value

Sizes#

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

Emphasized#

emphasized property makes it possible to emphasize the information according to their importance. When emphasized the larger font size creates a stronger visual impact.

Reversed#

By default, label will display below the value. Set the reversed property to true to visually swap the positions of the label and value (label above value).

• ​
  Use label below value if you want to emphasize the value.
• ​
  Use label above value if the key has an equal importance to the value.

Info Tip#

Combine DataItem with Tooltip to provide additional context about the value.

Trend#

Combine DataItem with Label to display a trend indicator next to the value.

Value unit#

If your value contains a unit, for example, meters, seconds, hours etc., you may wrap it in DataItem.ValueUnit for improved readability.

Multiple items#

Data items can be arranged in many ways and composed with other components.

Use Flex component to layout a group of data items in a row and allow them to wrap onto a new line.

Or use the Auto Grid to layout data items in configurable, responsive columns.

Inside Card#

Nest DataItem inside Card to highlight some key indicators or important metrics in a dashboard-like fashion.

API Reference#

DataItem#

DataItem.Label#

DataItem.Value#

DataItem.ValueUnit#