DataTable
ui.widgets.DataTableA data table with filtering, paging and column behavior.
BEHAVIOR CONTRACT
filter, page, columns and rows form one readable state model.
RECORDED INTERACTION
The harness types “admin” and the result page changes.
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;
}The story's verbatim source from the Storybook (zenit 4c50245 2026-10-01). W is ui.widgets; col / row / label are small Storybook layout helpers.
DataTableProps
ui.widgets.DataTablefn mountDataTable(props_in: DataTableProps, scope: *Scope, cx: *Cx) !DataTableMountField
Type
Default
Description
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.DataTableField
Type
Default
Description
wrapper*Node—
—
state*DataTableState—
—
filter_input?*Nodenull筛选输入框 wrapper(filterable=false 时为 null)