Data Table
Sortable / paginated table — click headers to sort, rows to act.
Preview
Installation
npx slintcn@latest add data-tableUsage
import { DataTable, DataTableRow } from "slintcn/components/data-table.slint";
DataTable {
columns: ["Name", "Email", "Role"];
rows: visible-page; // already sorted / filtered / paged in your model
total-pages: pages;
current-page <=> page;
sort(col) => { /* re-sort your model by column index */ }
page-changed(p) => { /* slice rows for the new page */ }
row-clicked(r) => { /* … */ }
}Properties
columns
in
[string]
Column headers (left-to-right). Each header is clickable to fire `sort`.
rows
in
[DataTableRow]
Visible rows (already sorted / filtered / paged by the consumer).
sort-column
in-out
int
Current sort column index (-1 = unsorted). Two-way so the indicator stays accurate as the consumer flips state.
sort-desc
in-out
bool
Current sort direction; flipping is automatic when the same header is clicked twice in a row.
sort
callback
(int)
Fired with the column index when a header is clicked. The component updates `sort-column` / `sort-desc` first.
total-pages
in
int
Optional pagination — set `total-pages > 1` to render the pager.
current-page
in-out
int
Two-way; the active page (0-indexed).
page-changed
callback
(int)
Fired when the user picks a different page.
row-clicked
callback
(int)
Fired with the row index when a row is clicked.
API
focusablenoDependencies
Installed automatically as transitive dependencies of slintcn add data-table.