components/datatable
Display · 31 / 64

DataTable

ui.widgets.DataTable

A data table with filtering, paging and column behavior.

BEHAVIOR CONTRACT

filter, page, columns and rows form one readable state model.

RECORDED INTERACTION

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

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