数据展示Display · 31 / 64

DataTable

ui.widgets.DataTable

带筛选、分页和列行为的数据表。A data table with filtering, paging and column behavior.

BEHAVIOR CONTRACT

filter、page、columns 和 rows 是一个可回读状态模型。filter, page, columns and rows form one readable state model.

RECORDED INTERACTION

Harness 输入 admin，结果页随之变化。The harness types “admin” and the result page changes.

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 查看源码View source on GitHubexamples/storybook/stories.zig:3101

这是 Storybook 中该 story 的原样代码（zenit 5f9add5+wip 2026-09-30）。其中 W 即 ui.widgets，col / row / label 是 Storybook 内的布局小工具。The story's verbatim source from the Storybook (zenit 5f9add5+wip 2026-09-30). W is ui.widgets; col / row / label are small Storybook layout helpers.

← PREV

TableTable

CalendarCalendar