| Proyecto | Tipo | Estado |
|---|---|---|
| Sitio principal | Sitio web | PUBLICADO |
| Panel de clientes | Aplicación | EN DESARROLLO |
| Guía de componentes | Documentación | PUBLICADO |
| Total de proyectos | 3 | Equipo Meeko |
| Entorno | Desarrollo |
| Entorno | Valor |
|---|---|
| No hay datos. | |
Columnas y filas tipadas
<script lang="ts">
import type { TableColumn } from '@meekojs/ui/runtime'
interface Project { id: number; name: string; status: string }
const columns = [
{ key: 'name', label: 'Proyecto' },
{ key: 'status', label: 'Estado', format: value => value.toUpperCase() },
] satisfies TableColumn<Project>[]
const rows = signal<Project[]>([
{ id: 1, name: 'Sitio principal', status: 'Publicado' },
])
</script>
<template>
<UITable bind:columns="columns" bind:rows="rows.value"
rowKey="id" caption="Proyectos del equipo" />
</template>
TableColumn<T>
relaciona
key
con el valor recibido por
format. Usa
satisfies
para conservar esa comprobación sin perder la inferencia.
rowKey
puede ser una propiedad con valores string/number o una función.
| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
rows
|
readonly T[]
| Obligatoria. Datos de las filas. |
columns
|
readonly TableColumn<T>[]
| Obligatoria. key, label, format opcional y footer opcional. |
rowKey
|
TableRowKey<T>
| Obligatoria. Clave estable de cada fila. |
layout
|
native | grid
native
| Distribución de las columnas. |
gridColumns
|
string
| Plantilla de columnas CSS para el modo grid. |
caption
|
string
| Nombre visible y accesible de la tabla. |
hideHeader
|
boolean
false
| Oculta la cabecera. |
emptyText
|
string
No hay datos.
| Contenido alternativo cuando no hay filas. El valor por defecto sigue el idioma del documento (véase Temas). |
class
|
string
| Clases adicionales de la tabla. |
Personalizar las celdas
Los snippets opcionales son
header(column),
cell(row, column, value, index),
footer(column, rows)
y
empty(). El pie aparece cuando hay contenido de footer. El contenedor permite desplazamiento horizontal en pantallas estrechas.
Celdas por columna
Cada clave de la fila tiene sus propios snippets:
cell-<clave>(row, value), con
value
del tipo de esa columna, y
header-<clave>(column). Una clave que la fila no tiene da error de tipos. Gana
cell-<clave>; después
cell
y por último
format. En la cabecera,
header-<clave>,
header
y la etiqueta.
| Proyecto | Tipo | Estado |
|---|---|---|
| Sitio principal | Sitio web | Publicado |
| Panel de clientes | Aplicación | En desarrollo |
| Guía de componentes | Documentación | Publicado |
| Total de proyectos | 3 | Equipo Meeko |
<UITable bind:columns="columns" bind:rows="rows.value" rowKey="id">
<!-- value es string: el tipo de Project['status']. -->
<snippet name="cell-status" params="row, value">
<UIBadge bind:tone="value === 'Publicado' ? 'accent' : 'neutral'">{value}</UIBadge>
</snippet>
<snippet name="header-name" params="column">
<abbr title="Nombre del proyecto">{column.label}</abbr>
</snippet>
<!-- name="cell-email" no compila: Project no tiene email. -->
</UITable>