Sortable, dense metric rows with quality, timestamps, units, and inline trend.
ComfortableCompactStaleMissingLoadingEmpty
Realtime data
5 rows| Quality | |||
|---|---|---|---|
| Cache hit rate stale | —% Last value seen: 06/22, 02:40:00 PM | missing | 06/22, 02:40:00 PM |
| CPU load warning | 78.4% ↑ | uncertain | 06/22, 03:15:00 PM |
| Queue depth normal | 3.1k ↓ | good | 06/22, 03:25:00 PM |
| Requests normal | 428.6/s ↑ | good | 06/22, 03:25:00 PM |
| Response time normal | 82.1ms ↓ | good | 06/22, 03:25:00 PM |
<RealtimeDataTable rows={metrics} />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { RealtimeDataTable } from '@chanrg/4ui';<RealtimeDataTable rows={metrics} />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
rows | MetricRow[] | [] | Generic display rows; no IDs become labels. |
density | compact | comfortable | comfortable | Vertical density. |
labels | Partial<RealtimeDataTableLabels> | English | Column headers (name, value, quality, updated), the row/rows counter, and the empty-state title and description. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Headers remain real table headers.
- Sort controls are buttons.