Bordered data table with a tinted header, row hover, and empty/loading/selected states.
Preview
Jobs table
Preview
| Job | Customer | Status | Value |
|---|
| #4412 | Nordküste — window clean | On site | €380 |
<div class="nx-table__wrap"><table class="nx-table"><thead><tr><th>Job</th><th>Customer</th><th>Status</th><th class="num">Value</th></tr></thead><tbody><tr><td style="font-variant-numeric:tabular-nums;color:var(--nx-slate-500)">#4412</td><td>Nordküste — window clean</td><td><span class="nx-badge nx-badge--soft">On site</span></td><td class="num">€380</td></tr></tbody></table></div>
<NxTable>
<thead><tr><th>Job</th><th>Customer</th><th>Status</th><th className="num">Value</th></tr></thead>
<tbody>
<tr>
<td>#4412</td><td>Nordküste — window clean</td>
<td><NxBadge variant="soft">On site</NxBadge></td>
<td className="num">€380</td>
</tr>
</tbody>
</NxTable>
API
React props (NxKit)
React (NxKit) props| Prop | Type | Default | Required | Description |
|---|
wrap | boolean | true | | Wraps the table in the rounded .nx-table__wrap card; set false to compose your own wrapper. |
Classes
Framework-agnostic classes| Class | Description |
|---|
.nx-table | Base table, uppercase muted th, hairline row rules |
.nx-table__wrap | Rounded bordered card wrapper |
.num | Right-aligned, tabular-nums cell |
.nx-table__empty | Full-width empty-state cell |
.nx-table__row--loading | Skeleton placeholder row |
States
empty
State
| Job | Kunde | Wert |
|---|
▤Keine JobsErstelle deinen ersten Job, um loszulegen. |
loading
State
Jobs werden geladen| Job | Kunde | Wert |
|---|
Accessibility
- Give a loading table a visually-hidden <caption> announcing the state ("Jobs werden geladen") for screen readers, since skeleton rows carry no text.
- aria-selected="true" on tbody tr pairs with the same inset leading-edge marker as List row, RTL-mirrored — don't rely on the accent-50 tint alone.
Do / Don’t
- ✓Do: Right-align numeric columns with .num (tabular-nums).✕Don’t: Don't ship an empty table with no .nx-empty guidance — always give the next action.
View in spec →
View source: registry.js ↗
