components/datatable
데이터 표시 · 31 / 64

DataTable

ui.widgets.DataTable

필터, 페이지 이동, 열 동작을 갖춘 데이터 테이블.

BEHAVIOR CONTRACT

filter, page, columns, rows가 다시 읽을 수 있는 하나의 상태 모델을 이룹니다.

RECORDED INTERACTION

harness가 “admin”을 입력하면 결과 페이지가 바뀝니다.

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

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