Table Row
ProA styled table row component for use within Data Table or standalone table layouts. Supports selection state (checkbox), hover highlighting, expandable detail rows, and inline action buttons. Handles alternating row colours (striped) and compact density modes.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard table row with hover highlight. | Use for regular data rows within a table. |
| Selectable | ||
| Expandable | Row with an expand/collapse chevron revealing a detail sub-row. | Use when rows have additional details that don't fit in columns. |
Usage Guidelines
Do
Use proper <tr>, <th>, and <td> elements — never divs for table rows.
Don't
Use table rows outside of a <table> context.
Do
Maintain consistent cell alignment (numbers right-aligned, text left-aligned).
Don't
Mix expandable and non-expandable rows in the same table without clear indication.
Do
Use aria-selected="true" for selected rows.
Don't
Remove hover states — they help users track which row they are reading.
Code
Design Tokens
Accessibility
- Selected rows must use aria-selected="true".
- Row checkboxes need aria-label="Select [row identifier]".
- Expandable rows should use aria-expanded and aria-controls on the toggle button.
- Maintain proper <tr>/<td> structure within <table> context.