components/table
데이터 표시 · 30 / 64

Table

ui.widgets.Table

고정 열 정의와 사용자 정의 cell renderer를 갖춘 기본 테이블.

BEHAVIOR CONTRACT

열 너비, header, striped row, 정렬 진입점, cell 수명이 명확히 분리되어 있습니다.

RECORDED INTERACTION

실제 데이터 8행과 정렬 가능한 열을 보여 줍니다.

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에서 소스 보기examples/storybook/stories.zig:2446

Storybook에 있는 이 story의 원본 코드입니다(zenit 5f9add5+wip 2026-09-30). W는 ui.widgets이며, col / row / label은 Storybook 내부의 작은 레이아웃 헬퍼입니다.

zenit · 이중 라이선스오픈 소스 프로젝트는 GPL-3.0-only로 무료 사용할 수 있으며, 비공개 소스나 상용 제품에는 상용 라이선스가 필요합니다.작성자 연락처: zongyi.xzy#gmail.com (#을 @로 바꾸세요)zenit 5f9add5+wip 2026-09-30