数据展示 · 31 / 64

DataTable

ui.widgets.DataTable

带筛选、分页和列行为的数据表。

BEHAVIOR CONTRACT

filter、page、columns 和 rows 是一个可回读状态模型。

RECORDED INTERACTION

Harness 输入 admin，结果页随之变化。

examples/storybook/stories.zig:3101

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;
}

在 GitHub 查看源码examples/storybook/stories.zig:3101

这是 Storybook 中该 story 的原样代码（zenit 5f9add5+wip 2026-09-30）。其中 W 即 ui.widgets，col / row / label 是 Storybook 内的布局小工具。

DataTableProps

ui.widgets.DataTable

src/ui/components/data_table/mod.zig:47

fn mountDataTable(props_in: DataTableProps, scope: *Scope, cx: *Cx) !DataTableMount

字段

类型

默认值

说明

columns

[]const ColumnDef

&.{}

—

rows

[]const []const []const u8

&.{}

行数据（row-major；rows[r][c] 与 columns 一一对应）。生命周期须覆盖组件。

page_size

usize

10

—

row_height

f32

36

—

header_height

f32

40

—

striped

bool

true

—

filterable

bool

true

—

resizable

bool

true

—

table_width

?f32

null

—

min_col_width

f32

60

—

selection_mode

SelectionMode

.none.single.multi

.none

行选择模式。默认 .none = 与加入多选之前完全一致（非破坏性新增）。 .multi 下 Cmd/Ctrl 点选切换、Shift 点选连续区间。

on_selection_change

?core.HandlerRef

null

选择变化回调；caller 在回调里读 state.selection（selected_count / isSelected / collect）

DataTableMount

ui.widgets.DataTable

src/ui/components/data_table/mod.zig:248

字段

类型

默认值

说明

wrapper

*Node

—

state

*DataTableState

—

filter_input

?*Node

null

筛选输入框 wrapper（filterable=false 时为 null）

← PREV

Table

Calendar