components/table
Display · 30 / 64

Table

ui.widgets.Table

A basic table with fixed columns and custom cells.

BEHAVIOR CONTRACT

Column widths, header, striped rows, sorting and cell lifetime are separate concerns.

RECORDED INTERACTION

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;
}
View source on GitHubexamples/storybook/stories.zig:2446

The story's verbatim source from the Storybook (zenit 4c50245 2026-10-01). W is ui.widgets; col / row / label are small Storybook layout helpers.

zenit · Dual-licensedFree for open-source projects under GPL-3.0-only; closed-source or commercial products need a commercial license.Contact the author: zongyi.xzy#gmail.com (replace # with @)zenit 4c50245 2026-10-01