DataTable
Lightweight data table with sorting and selection
DataTable
Lightweight data table with sorting, row selection, and custom rendering.
Basic Usage
Demo loads on client.
Row Selection
Demo loads on client.
API
TxDataTable Props
| Name | Type | Default | Description |
|---|---|---|---|
columns | DataTableColumn[] | [] | Column config |
data | any[] | [] | Data source |
rowKey | string | (row, index) => string | number | index | Unique row key |
loading | boolean | false | Loading state |
emptyText | string | 'No data' | Empty text |
striped | boolean | false | Zebra rows |
bordered | boolean | false | Show borders |
hover | boolean | true | Hover highlight |
selectable | boolean | false | Selectable rows |
selectedKeys | Array<string | number> | [] | Selected keys |
defaultSort | { key: string; order: 'asc' | 'desc' | null } | null | Default sort |
sortOnClient | boolean | true | Client-side sort |
DataTableColumn
| Field | Type | Description |
|---|---|---|
key | string | Column key |
title | string | Header title |
dataIndex | string | Data field |
width | string | number | Column width |
align | 'left' | 'center' | 'right' | Alignment |
sortable | boolean | Sortable |
sorter | (a, b) => number | Custom sorter |
format | (value, row, index) => string | Cell formatter |
headerClass | string | Header class |
cellClass | string | Cell class |
Events
| Event | Payload | Description |
|---|---|---|
update:selectedKeys | (keys) | Selection update |
selectionChange | (keys) | Selection change |
sortChange | (sort) | Sort change |
rowClick | ({ row, index }) | Row click |
Slots
| Name | Description |
|---|---|
header-<columnKey> | Custom header |
cell-<columnKey> | Custom cell |
empty | Empty slot |
Was this helpful?