---
title: "Table コンポーネント — zenit Zig UI"
description: "固定の列定義とカスタム cell renderer を備えた基本テーブル。列幅、header、striped row、ソートの入口、cell のライフサイクルが明確に分離され…"
url: https://zenit.z.express/ja/components/table
language: ja
alternate_en: https://zenit.z.express/components/table.md
alternate_zh: https://zenit.z.express/zh/components/table.md
alternate_es: https://zenit.z.express/es/components/table.md
alternate_ko: https://zenit.z.express/ko/components/table.md
alternate_fr: https://zenit.z.express/fr/components/table.md
alternate_de: https://zenit.z.express/de/components/table.md
project: zenit v0.1.0-alpha (Zig 0.15.2, macOS)
source: https://github.com/version-next/zenit
---

# Table

`ui.widgets.Table`

固定の列定義とカスタム cell renderer を備えた基本テーブル。

[Video](https://zenit.z.express/media/stories/table.mp4?v=33a30d568f)

**BEHAVIOR CONTRACT**

列幅、header、striped row、ソートの入口、cell のライフサイクルが明確に分離されています。

**RECORDED INTERACTION**

実データ 8 行とソート可能な列を示します。

`examples/storybook/stories.zig:2446`

```zig
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](https://github.com/version-next/zenit/blob/HEAD/examples/storybook/stories.zig#L2446)

Storybook にあるこの story のコードそのままです（zenit 5f9add5+wip 2026-09-30）。`W` は `ui.widgets` のことで、`col` / `row` / `label` は Storybook 内の小さなレイアウトヘルパーです。

### TableProps

`ui.widgets.Table`

[src/ui/components/table/mod.zig:93](https://github.com/version-next/zenit/blob/HEAD/src/ui/components/table/mod.zig#L93)

```zig
fn Table(props: TableProps) TableBuilder
```

| フィールド | 型 | デフォルト値 | 説明 |
| --- | --- | --- | --- |
| `columns` | `[]const ColumnDef` | `&.{}` | — |
| `row_count` | `usize` | `0` | — |
| `row_height` | `f32` | `36` | — |
| `header_height` | `f32` | `40` | — |
| `striped` | `bool` | `false` | — |
| `hoverable` | `bool` | `true` | — |
| `table_width` | `?f32` | `null` | — |
| `table_height` | `f32` | `400` | — |
| `render_cell` | `?CellRenderFn` | `null` | — |
| `on_sort` | `?core.HandlerRef` | `null` | — |
| `on_row_click` | `?core.HandlerRef` | `null` | — |

### TableResult

`ui.widgets.Table`

[src/ui/components/table/mod.zig:142](https://github.com/version-next/zenit/blob/HEAD/src/ui/components/table/mod.zig#L142)

| フィールド | 型 | デフォルト値 | 説明 |
| --- | --- | --- | --- |
| `wrapper` | `*Node` | — | — |
| `state` | `*TableState` | — | — |
| `vl_state` | `?*VirtualListState` | `null` | 虚拟滚动模式下的 VirtualListState（可用于动态更新 row\_count） |