DataTable
ui.widgets.DataTableフィルター、ページング、列の挙動を備えたデータテーブル。
BEHAVIOR CONTRACT
filter、page、columns、rows が読み戻し可能な一つの状態モデルを構成します。
RECORDED INTERACTION
harness が「admin」と入力すると、結果ページが変わります。
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;
}Storybook にあるこの story のコードそのままです（zenit 5f9add5+wip 2026-09-30）。W は ui.widgets のことで、col / row / label は Storybook 内の小さなレイアウトヘルパーです。
DataTableProps
ui.widgets.DataTablefn mountDataTable(props_in: DataTableProps, scope: *Scope, cx: *Cx) !DataTableMountフィールド
型
デフォルト値
説明
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.DataTableフィールド
型
デフォルト値
説明
wrapper*Node—
—
state*DataTableState—
—
filter_input?*Nodenull筛选输入框 wrapper（filterable=false 时为 null）