Data table

Overview

Compare and operate on structured records. It converts domain state into an understandable, traceable and accessible interface contract.

When to use

Use HE/Data table when you need to compare and operate on structured records. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<div class="he-table-wrap"><table class="he-data-table"><caption class="he-sr-only">Device health</caption><thead><tr><th>Device</th><th>Status</th><th>Heartbeat</th></tr></thead><tbody><tr><td>AIEdge D1</td><td>Healthy</td><td>28 sec ago</td></tr><tr><td>Pi Sensor 1</td><td>Review</td><td>4 min ago</td></tr></tbody></table></div>

Anatomy

Anatomy stays identical in Pasture and Atlantic. A responsive layout may wrap or stack parts, but reading order and focus order remain equivalent.

Variants and states

Accessibility

Use semantic headers, announce sort direction, provide caption/context, and preserve row action names.

• Maintain a visible keyboard focus indicator and a logical focus sequence.
• Never rely on colour alone for operational, freshness or severity state.
• Keep touch targets at least 44 × 44 px unless the target is an inline text link.

Cross-platform contract

Related components