Table
Data table with sortable columns, row selection, badge chips, avatar cells, and trend indicators.
import
{ Table, TableBadgeChip, TableAvatarCell, TableTrendCell } from "@pepulux/ui"Default
Name | Role | Status | Revenue |
|---|---|---|---|
OR Olivia Rhyeolivia@example.com | Admin | Active | $12,400+12% |
PB Phoenix Bakerphoenix@example.com | Member | Active | $8,200+12% |
LS Lana Steinerlana@example.com | Member | Inactive | $0+12% |
With selection & alternating rows
Name | Role | Status | Revenue | |
|---|---|---|---|---|
OR Olivia Rhyeolivia@example.com | Admin | Active | $12,400+12% | |
PB Phoenix Bakerphoenix@example.com | Member | Active | $8,200+12% | |
LS Lana Steinerlana@example.com | Member | Inactive | $0+12% |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columns* | TableColumn<T>[] | — | Column definitions — { key, header, render, sortable?, align? } |
| data* | T[] | — | Row data array |
| getRowId | (row: T) => string | — | Returns a unique ID per row (required for selection) |
| selectable | boolean | false | Enables checkbox row selection |
| selectedIds | string[] | — | Controlled selected row IDs |
| onSelectRow | (id: string, checked: boolean) => void | — | Called when a row checkbox changes |
| onSelectAll | (checked: boolean) => void | — | Called when header checkbox changes |
| onSort | (key: string, dir: 'asc' | 'desc') => void | — | Called when a sortable column header is clicked |
| size | "sm" | "md" | "md" | Row height |
| dividers | "line" | "alternating" | "line" | Row separator style |