components/grid
레이아웃과 대용량 데이터 · 51 / 64

Grid

ui.widgets.mountGrid

2차원 행·열 데이터와 사용자 정의 cell renderer.

BEHAVIOR CONTRACT

열 너비, 행 높이, 스크롤 창, cell 좌표가 앱 노드에 섞이지 않습니다.

RECORDED INTERACTION

harness가 그리드를 스크롤하면 보이는 창이 갱신됩니다.

examples/storybook/stories.zig:3005
pub fn buildGrid(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const widths = [_]f32{ 90, 90, 90, 90 };
    const g = try W.mountGrid(.{
        .col_count = 4,
        .row_count = 12,
        .col_widths = &widths,
        .cell_height = 30,
        .width = 380,
        .height = 320,
        .cell_render_fn = gridCell,
    }, scope, cx);
    return g.root;
}
GitHub에서 소스 보기examples/storybook/stories.zig:3005

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