Components / Data Table
Data Table
Typed tabular data with controlled filtering, sorting, selection, pagination and loading states.
| Select row | Status | Amount | ||
|---|---|---|---|---|
| INV-001 | Olivia Martin | Paid | $240.00 | |
| INV-002 | Noah Williams | Pending | $190.00 | |
| INV-003 | Emma Wilson | Paid | $320.00 | |
| INV-004 | Liam Brown | Draft | $90.00 |
Page 1 of 1
html
<aevko-data-table caption="Invoices" [rows]="invoices" [columns]="columns" [rowKey]="invoiceKey" [selectable]="true" />Installation
npx aevko-ui@latest add data-table --yesSource ownership
Customization
Keep domain formatting in typed column accessors, use controlled state for remote datasets and edit the local template when a product needs custom cells.
Edit locallyThe installed template and stylesheet are application code, not a black box.
Theme semanticallyOverride
--aevko-* tokens or ordinary classes without !important.API reference
| Property or slot | Type | Default | Description |
|---|---|---|---|
rows / columns | readonly T[] / readonly Column<T>[] | required | Typed records and visible column definitions. |
rowKey | (row: T) => string | required | Stable identity for tracking and selection. |
filter / sort | model<string> / model<Sort | null> | '' / null | Controlled query and sorting state. |
selectable / selectedKeys | boolean / model<readonly string[]> | false / [] | Optional labelled row selection. |
page / pageSize | model<number> / number | 1 / 10 | Current page and local page size. |
manual / totalRows | boolean / number | null | false / null | Delegates sorting/filter/paging to remote application state. |
loading / emptyMessage | boolean / string | false / 'No results found' | Data-region loading and empty feedback. |
Accessibility contract
Accessibility
Included behavior
- A native table retains caption/header/cell relationships; sort state, row selection and loading remain explicitly labelled.
Your responsibility
Use stable row keys, meaningful captions and formatted text values; announce remote loading and preserve selection intentionally across pages.