数据展示Display · 30 / 64

Table

ui.widgets.Table

固定列定义与自定义 cell renderer 的基础表格。A basic table with fixed columns and custom cells.

BEHAVIOR CONTRACT

列宽、header、striped row、排序入口和 cell 生命周期清晰分离。Column widths, header, striped rows, sorting and cell lifetime are separate concerns.

RECORDED INTERACTION

录像展示真实 8 行数据和 sortable 列。Shows eight real rows and sortable columns.

examples/storybook/stories.zig:2446

pub fn buildTable(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const cols = [_]W.ColumnDef{
        .{ .id = "name", .header = "Name", .width = 160 },
        .{ .id = "role", .header = "Role", .width = 120 },
        .{ .id = "age", .header = "Age", .width = 80, .sortable = true },
    };
    const t = try W.Table(.{ .columns = &cols, .row_count = 8, .striped = true, .render_cell = tableCell }).mount(scope, cx);
    return t.wrapper;
}

在 GitHub 查看源码View source on GitHubexamples/storybook/stories.zig:2446

这是 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

TreeTree

DataTableDataTable