CropWatch User Interface

CwCardDataRowItem

Reusable sensor-style key/value row for detail panels, cards, and metadata lists. This is the same component used inside CwDataList and the expanded CwSensorCard, now with built-in freshness scheduling and a bindable timeout state.

Standard list

Use it inside a semantic list container

The component renders a list item, so wrap it with ul or ol when you use it standalone.

Temperature

22.40 °C
Humidity

67.30 %
Last Update

2m 00s ago

Live duration

Built-in freshness scheduler with bindable state

Use lastSeenAt plus expireAfterMinutes to turn the row into a freshness monitor. The row now schedules expiry internally and exposes both onExpire and bind:withinTimeout.

Current freshness state: no timer

Last Update

4s ago

Flexible icons

Built-ins, emoji, or snippets all work

Use thermo, drop, or timer for the built-in SVGs, or pass a plain string like an emoji for one-off metadata rows.

Relay State

On
Lux Level

48500 lx

<ul>
	<CwCardDataRowItem
		id="temperature"
		label="Temperature"
		value="22.40"
		unit="°C"
		icon="thermo"
	/>
	<CwCardDataRowItem
		id="humidity"
		label="Humidity"
		value="67.30"
		unit="%"
		icon="drop"
	/>
	<CwCardDataRowItem
		id="updated"
		label="Last Update"
		icon="timer"
		lastSeenAt={new Date(Date.now() - 120_000)}
		expireAfterMinutes={10}
	/>
</ul>

<script lang="ts">
	let withinTimeout = $state<boolean | null>(null);
	let expired = $state(false);
</script>

<ul>
	<CwCardDataRowItem
		id="updated"
		label="Last Update"
		icon="timer"
		lastSeenAt={new Date(Date.now() - 120_000)}
		expireAfterMinutes={10}
		onExpire={() => (expired = true)}
		bind:withinTimeout
	/>
</ul>

<p>Within timeout: {withinTimeout}</p>
<p>Expired callback fired: {expired}</p>

<CwCardDataRowItem
	id="relay-state"
	label="Relay State"
	value="On"
	icon="⚡"
/>

Documentation Upgrade

Start here

CwCardDataRowItem is the reusable detail-row primitive behind CwDataList and the expanded CwSensorCard panel. Use it anywhere you need a compact sensor-style label/value row with optional built-in icons and freshness timers.

How to think about it

Wrap it in a real list The component renders an `<li>`, so use it inside `ul` or `ol` when you render it directly.
Use built-ins first Set `icon` to `thermo`, `drop`, or `timer` for the shared SVG icons. Plain strings and snippets still work for custom metadata.
Switch to timer mode with `lastSeenAt` When `lastSeenAt` is present, the value side renders `CwDuration` automatically and appends the `ago` suffix. `lastUpdated` still works as a backwards-compatible alias.
Use expiry callbacks or bind freshness state Use `onExpire`, `onTimeoutReset`, and `bind:withinTimeout` when a parent needs to react to stale data. You can still pass the legacy `alarmCallback` names if needed.

Row props

Because the component renders `<li>`, the surrounding list container stays your responsibility.

API	Type	Details
`id` Required	`string`	Stable identifier for keyed rendering, telemetry hooks, or debug attributes.
`label` Required	`string`	Row label shown on the left side.
`value`	`string \| number \| null`	Static value shown on the right side when `lastUpdated` is not supplied.
`unit`	`string`	Optional suffix rendered after `value`, for example `%`, `°C`, or `km/h`.
`icon`	`'drop' \| 'thermo' \| 'timer' \| string \| Snippet`	Built-in icon keyword, plain string content such as emoji, or a custom snippet.
`lastSeenAt / lastSeen / LastSeen / lastUpdated`	`Date \| string \| number`	Switches the row into live timer mode via `CwDuration`. Prefer `lastSeenAt`; `lastUpdated` remains supported for compatibility.
`expireAfterMinutes / alarmTimeoutMinutes / AlarmTimeoutMinutes / expectedUpdateAfter`	`number`	Minutes until the freshness alarm is considered overdue. Prefer `expireAfterMinutes`; `expectedUpdateAfter` remains supported for compatibility.
`onExpire`	`() => void`	Called once when the row crosses its freshness timeout.
`onTimeoutReset`	`() => void`	Called when the row returns to a non-expired state after previously being overdue.
`bind:withinTimeout`	`boolean \| null`	Bindable freshness state. `true` means fresh, `false` means expired, and `null` means no timer inputs were supplied.
`alarmScheduler`	`CwAlarmApi`	Optional shared scheduler. Omit it to let the row create and manage its own alarm scheduler internally.
`alarmCallback / AlarmCallback / alarmResetCallback / AlarmResetCallback`	`() => void`	Legacy callback aliases preserved for existing integrations.
`status`	`'online' \| 'offline' \| 'warning' \| 'loading'`	Optional metadata hook preserved on the row so parent components can round-trip row state.
`class`	`string`	Extra class applied to the root row element.

Copy-paste examples

These snippets intentionally show the full public API surface the live demo relies on.

Built-in sensor rows

The default pairing for temperature, humidity, and freshness data.

<ul>
	<CwCardDataRowItem id="temperature" label="Temperature" value="22.40" unit="°C" icon="thermo" />
	<CwCardDataRowItem id="humidity" label="Humidity" value="67.30" unit="%" icon="drop" />
	<CwCardDataRowItem id="updated" label="Last Update" icon="timer" lastSeenAt={new Date(Date.now() - 120_000)} expireAfterMinutes={10} />
</ul>

Bindable freshness state

Use this when a parent needs the timeout state without parsing timer text.

<script lang="ts">
	let withinTimeout = $state<boolean | null>(null);
	let expired = $state(false);
</script>

<ul>
	<CwCardDataRowItem
		id="updated"
		label="Last Update"
		icon="timer"
		lastSeenAt={new Date(Date.now() - 120_000)}
		expireAfterMinutes={10}
		onExpire={() => (expired = true)}
		bind:withinTimeout
	/>
</ul>

Custom metadata row

Plain strings work when you need a one-off icon like an emoji or text token.

<ul>
	<CwCardDataRowItem id="relay-state" label="Relay State" value="On" icon="⚡" />
</ul>