Table
ui.widgets.Table고정 열 정의와 사용자 정의 cell renderer를 갖춘 기본 테이블.
BEHAVIOR CONTRACT
열 너비, header, striped row, 정렬 진입점, cell 수명이 명확히 분리되어 있습니다.
RECORDED INTERACTION
실제 데이터 8행과 정렬 가능한 열을 보여 줍니다.
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;
}Storybook에 있는 이 story의 원본 코드입니다(zenit 5f9add5+wip 2026-09-30). W는 ui.widgets이며, col / row / label은 Storybook 내부의 작은 레이아웃 헬퍼입니다.
TableProps
ui.widgets.Tablefn Table(props: TableProps) TableBuilder필드
타입
기본값
설명
columns[]const ColumnDef&.{}—
row_countusize0—
row_heightf3236—
header_heightf3240—
stripedboolfalse—
hoverablebooltrue—
table_width?f32null—
table_heightf32400—
render_cell?CellRenderFnnull—
on_sort?core.HandlerRefnull—
on_row_click?core.HandlerRefnull—
TableResult
ui.widgets.Table필드
타입
기본값
설명
wrapper*Node—
—
state*TableState—
—
vl_state?*VirtualListStatenull虚拟滚动模式下的 VirtualListState(可用于动态更新 row_count)