Table Atoms
ImportCC
Available via @stackmates/ui-interactive/atoms
RowCheckbox
Checkbox for table row selection. Wraps Checkbox with click-stop propagation.
RowCheckboxProps
| Prop | Type | Default | Description |
|---|---|---|---|
| checked* | boolean | — | Whether the row is selected |
| onCheckedChange* | (checked: boolean) => void | — | Callback when selection changes |
| disabled | boolean | false | Disable the checkbox |
| aria-label | string | 'Select row' | Accessible label for the checkbox |
Installation
typescript
import { RowCheckbox } from '@stackmates/ui-interactive/atoms';Accessibility
- Defaults to aria-label="Select row" when none provided
- Stops click propagation to prevent row click handlers firing
- Built on Radix Checkbox primitive -- keyboard accessible
Related:
SortIndicator
Up/down arrow icon showing column sort direction. Renders unsorted state when false.
Unsorted Ascending Descending Large
SortIndicatorProps
| Prop | Type | Default | Description |
|---|---|---|---|
| direction* | 'asc' | 'desc' | false | — | Current sort direction (false = unsorted) |
| size | 'sm' | 'md' | 'lg' | 'sm' | Size of the indicator icon |
Installation
typescript
import { SortIndicator } from '@stackmates/ui-interactive/atoms';Accessibility
- Rendered with aria-hidden="true" -- sort state should be conveyed by column header
- Uses lucide-react icons (ArrowUp, ArrowDown, ArrowUpDown)
Related:
TableCell
Styled cell with automatic value formatting (currency, date, percent, boolean).
| Name | Revenue | Status |
|---|---|---|
| Acme Corp | $45,200.00 | Yes |
| Beta Inc | 87.3% | Mar 14, 2026 |
TableCellProps
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | number | boolean | Date | null | — | The value to display |
| format | 'text' | 'number' | 'currency' | 'date' | 'datetime' | 'boolean' | 'percent' | 'text' | Format type for automatic value formatting |
| align | 'left' | 'center' | 'right' | 'left' | Text alignment |
| variant | 'default' | 'muted' | 'success' | 'warning' | 'danger' | 'default' | Color variant |
| isHeader | boolean | false | Render as <th> instead of <td> |
| truncate | boolean | false | Truncate text with ellipsis |
Installation
typescript
import { TableCell } from '@stackmates/ui-interactive/atoms';Accessibility
- Renders <td> by default, <th> when isHeader is true
- Null/undefined values display an em-dash for visual clarity
Related: