DataTable
ui.widgets.DataTableUna tabla de datos con filtrado, paginación y comportamiento de columnas.
BEHAVIOR CONTRACT
filter, page, columns y rows forman un único modelo de estado legible.
RECORDED INTERACTION
El harness escribe “admin” y la página de resultados cambia.
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;
}El código literal de la story en el Storybook (zenit 5f9add5+wip 2026-09-30). W es ui.widgets; col / row / label son pequeños helpers de layout del Storybook.
DataTableProps
ui.widgets.DataTablefn mountDataTable(props_in: DataTableProps, scope: *Scope, cx: *Cx) !DataTableMountCampo
Tipo
Predeterminado
Descripción
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.DataTableCampo
Tipo
Predeterminado
Descripción
wrapper*Node—
—
state*DataTableState—
—
filter_input?*Nodenull筛选输入框 wrapper(filterable=false 时为 null)