---
title: "Composant Table — zenit Zig UI"
description: "Un tableau de base avec colonnes fixes et cellules personnalisées. Largeurs de colonnes, en-tête, lignes alternées, tri et durée de vie des cellules sont des…"
url: https://zenit.z.express/fr/components/table
language: fr
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_ja: https://zenit.z.express/ja/components/table.md
alternate_ko: https://zenit.z.express/ko/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`

Un tableau de base avec colonnes fixes et cellules personnalisées.

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

**BEHAVIOR CONTRACT**

Largeurs de colonnes, en-tête, lignes alternées, tri et durée de vie des cellules sont des aspects distincts.

**RECORDED INTERACTION**

Montre huit vraies lignes et des colonnes triables.

`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;
}
```

[Voir le code sur GitHubexamples/storybook/stories.zig:2446](https://github.com/version-next/zenit/blob/HEAD/examples/storybook/stories.zig#L2446)

Le code source tel quel de la story dans le Storybook (zenit 5f9add5+wip 2026-09-30). `W` désigne `ui.widgets` ; `col` / `row` / `label` sont de petits helpers de mise en page du 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
```

| Champ | Type | Défaut | Description |
| --- | --- | --- | --- |
| `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)

| Champ | Type | Défaut | Description |
| --- | --- | --- | --- |
| `wrapper` | `*Node` | — | — |
| `state` | `*TableState` | — | — |
| `vl_state` | `?*VirtualListState` | `null` | 虚拟滚动模式下的 VirtualListState（可用于动态更新 row\_count） |