GenericDataBox

Reusable labelled stat box used by container summary panels for one-off numeric values. Displays a table of label-value-unit rows.

Reusable labelled stat box used by container summary panels for one-off numeric values.

Displays a table of label-value-unit rows.

import { GenericDataBox } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`data`	Optional	`DataItem[] \| undefined`	—	Array of data items to display
`fallbackValue`	Optional	`unknown`	—	Fallback value when value is undefined

Usage

Reusable labelled stat box for container summary panels. Renders a vertical list of label-value-unit rows with optional highlight and colour/flash states driven by threshold rules.

Minimal example

import { GenericDataBox } from "@tetherto/mdk-react-devkit";

<GenericDataBox
  data={[
    { label: "Temperature", value: 45, units: "°C" },
    { label: "Pressure", value: 2.5, units: "bar", isHighlighted: true },
  ]}
/>

Example

import { GenericDataBox } from '@tetherto/mdk-react-devkit'export const GenericDataBoxExample = () => (  <div className="mdk-example-row">    <GenericDataBox      data={[        { label: 'Temperature', value: 45, units: '°C' },        { label: 'Pressure', value: 2.5, units: 'bar', isHighlighted: true },        { label: 'Status', value: 'Running', color: 'green' },      ]}    />  </div>)