Components / Table
Table
Data table with sorting, row selection, loading skeleton, clickable rows, empty state, footer slot for pagination, sticky header, and responsive scroll.
data-display v0.1.0
Playground
Examples
With selection
<cg-table selectable></cg-table>With pagination
<cg-table></cg-table>Loading
<cg-table loading></cg-table>Empty state
<cg-table></cg-table>Import
import { CgTable } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-table';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
columns | TableColumn[] | — | Column definitions — {key, label, align?, sortable?, width?} |
rows | unknown[][] | — | Row data as 2D array |
selectable | boolean | false | Show row checkboxes |
clickable | boolean | false | Enable row click events |
striped | boolean | false | Alternate row backgrounds |
compact | boolean | false | Smaller padding and font |
loading | boolean | false | Show skeleton loading rows |
loadingRows | number | 5 | Number of skeleton rows |
emptyText | string | "No data" | Empty state message |
rounded | "none" | "sm" | "md" | "lg" | "lg" | Border radius variant |
Events
| Event | Detail | Description |
|---|---|---|
cg-sort | {key, direction} | Column sorted |
cg-select | {indices: number[]} | Selection changed |
cg-row-click | {index, row} | Row clicked |