---
title: "Componente Table — zenit Zig UI"
description: "Una tabla básica con columnas fijas y celdas personalizadas. El ancho de columnas, la cabecera, las filas alternas, la ordenación y la vida de las celdas son…"
url: https://zenit.z.express/es/components/table
language: es
alternate_en: https://zenit.z.express/components/table.md
alternate_zh: https://zenit.z.express/zh/components/table.md
alternate_ja: https://zenit.z.express/ja/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`

Una tabla básica con columnas fijas y celdas personalizadas.

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

**BEHAVIOR CONTRACT**

El ancho de columnas, la cabecera, las filas alternas, la ordenación y la vida de las celdas son asuntos separados.

**RECORDED INTERACTION**

Muestra ocho filas reales y columnas ordenables.

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

[Ver el código en GitHubexamples/storybook/stories.zig:2446](https://github.com/version-next/zenit/blob/HEAD/examples/storybook/stories.zig#L2446)

El código literal de la story en el Storybook (zenit 5f9add5+wip 2026-09-30). `W` es `ui.widgets`; `col` / `row` / `label` son pequeños helpers de layout del 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
```

| Campo | Tipo | Predeterminado | Descripción |
| --- | --- | --- | --- |
| `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)

| Campo | Tipo | Predeterminado | Descripción |
| --- | --- | --- | --- |
| `wrapper` | `*Node` | — | — |
| `state` | `*TableState` | — | — |
| `vl_state` | `?*VirtualListState` | `null` | 虚拟滚动模式下的 VirtualListState（可用于动态更新 row\_count） |