Table
Data table with sortable columns, row selection, status badges, end-aligned numbers and row actions.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
| Status | Role | Actions | ||
|---|---|---|---|---|
OROlivia Rhye | Active | Product designer | $4,200 | |
PBPhoenix Baker | Offline | Engineer | $12,980 | |
LSLana Steiner | Invited | Researcher | $860 |
<div class="px-table-wrap">
<table class="px-table" data-px-table>
<thead><tr>
<th><div class="px-table__lead"><input type="checkbox" class="px-check__box" aria-label="Select all"><button type="button" class="px-table__sort">Name<svg class="px-icon" aria-hidden="true">…</svg></button></div></th>
<th>Status</th><th>Role</th><th class="px-num"><button type="button" class="px-table__sort">Amount<svg class="px-icon" aria-hidden="true">…</svg></button></th><th><span class="px-sr">Actions</span></th>
</tr></thead>
<tbody>
<tr><td><div class="px-table__lead"><input type="checkbox" class="px-check__box" aria-label="Select Olivia"><span class="px-avatar px-avatar--sm">OR</span><span class="px-table__strong">Olivia Rhye</span></div></td><td><span class="px-badge px-badge--success"><span class="px-badge__dot"></span>Active</span></td><td>Product designer</td><td class="px-num">$4,200</td><td><div class="px-table__actions"><button type="button" class="px-icon-btn" aria-label="Edit Olivia"><svg class="px-icon" aria-hidden="true">…</svg></button><button type="button" class="px-icon-btn" aria-label="Delete Olivia"><svg class="px-icon" aria-hidden="true">…</svg></button></div></td></tr>
<tr><td><div class="px-table__lead"><input type="checkbox" class="px-check__box" aria-label="Select Phoenix"><span class="px-avatar px-avatar--sm px-avatar--accent">PB</span><span class="px-table__strong">Phoenix Baker</span></div></td><td><span class="px-badge"><span class="px-badge__dot"></span>Offline</span></td><td>Engineer</td><td class="px-num">$12,980</td><td><div class="px-table__actions"><button type="button" class="px-icon-btn" aria-label="Edit Phoenix"><svg class="px-icon" aria-hidden="true">…</svg></button><button type="button" class="px-icon-btn" aria-label="Delete Phoenix"><svg class="px-icon" aria-hidden="true">…</svg></button></div></td></tr>
<tr><td><div class="px-table__lead"><input type="checkbox" class="px-check__box" aria-label="Select Lana"><span class="px-avatar px-avatar--sm">LS</span><span class="px-table__strong">Lana Steiner</span></div></td><td><span class="px-badge px-badge--warning"><span class="px-badge__dot"></span>Invited</span></td><td>Researcher</td><td class="px-num">$860</td><td><div class="px-table__actions"><button type="button" class="px-icon-btn" aria-label="Edit Lana"><svg class="px-icon" aria-hidden="true">…</svg></button><button type="button" class="px-icon-btn" aria-label="Delete Lana"><svg class="px-icon" aria-hidden="true">…</svg></button></div></td></tr>
</tbody>
</table>
</div>Usage
- Numbers align to the end with tabular figures.
- Actions are icon buttons with aria-labels.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-table-wrap · px-table | class | Scroll container and table. |
data-px-table | attribute | Select-all + sort behaviour. |
px-num · px-table__lead · __strong · __actions | class | Cell types (Figma Cell Type). |
px-table__sort | class | Sortable header button; th gets aria-sort. |
Figma properties
Table2 variants · page “Table”Open
Example data table assembled from Header cell and Cell instances: sortable Name column, row selection, status badges, end-aligned amounts and row actions. RTL reverses column order. Use semantic <t…
| Property | Type | Values |
|---|---|---|
| Direction | Variant | LTR RTL |
Table / Header cell6 variants · page “Table”Open
Column header. Sortable headers are buttons with aria-sort. Resize the cell width to the column width.
| Property | Type | Values |
|---|---|---|
| Label | Text | “Column” |
| Checkbox | Boolean | — |
| Sort | Variant | None Ascending Descending |
| Direction | Variant | LTR RTL |
Table / Cell30 variants · page “Table”Open
Body cell types. Lead holds the row checkbox and primary identifier; Number aligns to the inline end with tabular figures; Actions holds icon buttons with aria-labels. Hover/Selected apply to the whol…
| Property | Type | Values |
|---|---|---|
| Text | Text | “Product designer” |
| Type | Variant | Lead Text Badge Number Actions |
| State | Variant | Default Hover Selected |
| Direction | Variant | LTR RTL |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-table-header-background | color-surface-sunken | #f9fafb |
--px-table-header-content | color-content-neutral-secondary | #475467 |
--px-table-border | color-border-neutral-subtle | #f2f4f7 |
--px-table-content | color-content-neutral-secondary | #475467 |
--px-table-radius | radius-16 | 16px |
--px-table-header-height | spacing-40 | 40px |
--px-table-row-height | spacing-56 | 56px |
--px-table-cell-padding-x | spacing-2xl | 24px |
Accessibility
- Use semantic <table>; sortable headers set aria-sort.
- Row checkboxes need labels.