DataTable
ui.widgets.DataTable필터, 페이지 이동, 열 동작을 갖춘 데이터 테이블.
BEHAVIOR CONTRACT
filter, page, columns, rows가 다시 읽을 수 있는 하나의 상태 모델을 이룹니다.
RECORDED INTERACTION
harness가 “admin”을 입력하면 결과 페이지가 바뀝니다.
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;
}Storybook에 있는 이 story의 원본 코드입니다(zenit 5f9add5+wip 2026-09-30). W는 ui.widgets이며, col / row / label은 Storybook 내부의 작은 레이아웃 헬퍼입니다.
DataTableProps
ui.widgets.DataTablefn mountDataTable(props_in: DataTableProps, scope: *Scope, cx: *Cx) !DataTableMount필드
타입
기본값
설명
columns[]const ColumnDef&.{}—
rows[]const []const []const u8&.{}行数据(row-major;rows[r][c] 与 columns 一一对应)。生命周期须覆盖组件。
page_sizeusize10—
row_heightf3236—
header_heightf3240—
stripedbooltrue—
filterablebooltrue—
resizablebooltrue—
table_width?f32null—
min_col_widthf3260—
selection_modeSelectionMode.none.single.multi.none行选择模式。默认 .none = 与加入多选之前完全一致(非破坏性新增)。 .multi 下 Cmd/Ctrl 点选切换、Shift 点选连续区间。
on_selection_change?core.HandlerRefnull选择变化回调;caller 在回调里读 state.selection(selected_count / isSelected / collect)
DataTableMount
ui.widgets.DataTable필드
타입
기본값
설명
wrapper*Node—
—
state*DataTableState—
—
filter_input?*Nodenull筛选输入框 wrapper(filterable=false 时为 null)