DataTable
ui.widgets.DataTableEine Datentabelle mit Filterung, Paginierung und Spaltenverhalten.
BEHAVIOR CONTRACT
filter, page, columns und rows bilden ein auslesbares Zustandsmodell.
RECORDED INTERACTION
Der Harness tippt „admin“ und die Ergebnisseite ändert sich.
pub fn buildDataTable(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
const dt = try ui.widgets.DataTable(.{
.columns = &DT_COLS,
.rows = &DT_ROWS,
.page_size = 3,
}, scope, cx);
if (dt.filter_input) |fi| fi.meta.ownership.meta.test_id = "story.datatable.filter";
dt.wrapper.meta.ownership.meta.test_id = "story.datatable.table";
return dt.wrapper;
}Der unveränderte Quellcode der Story aus dem Storybook (zenit 5f9add5+wip 2026-09-30). W steht für ui.widgets; col / row / label sind kleine Layout-Helfer des Storybooks.
DataTableProps
ui.widgets.DataTablefn mountDataTable(props_in: DataTableProps, scope: *Scope, cx: *Cx) !DataTableMountFeld
Typ
Standard
Beschreibung
columns[]const ColumnDef&.{}—
rows[]const []const []const u8&.{}行数据(row-major;rows[r][c] 与 columns 一一对应)。生命周期须覆盖组件。
page_sizeusize10—
row_heightf3236—
header_heightf3240—
stripedbooltrue—
filterablebooltrue—
resizablebooltrue—
table_width?f32null—
min_col_widthf3260—
selection_modeSelectionMode.none.single.multi.none行选择模式。默认 .none = 与加入多选之前完全一致(非破坏性新增)。 .multi 下 Cmd/Ctrl 点选切换、Shift 点选连续区间。
on_selection_change?core.HandlerRefnull选择变化回调;caller 在回调里读 state.selection(selected_count / isSelected / collect)
DataTableMount
ui.widgets.DataTableFeld
Typ
Standard
Beschreibung
wrapper*Node—
—
state*DataTableState—
—
filter_input?*Nodenull筛选输入框 wrapper(filterable=false 时为 null)