Introduction

El componente Table es un elemento de diseño robusto que renderiza claramente estructuras de conjuntos de datos tabulares complejos en páginas del cliente. Con soporte completo para plantillas responsivas sin JS y esquemas de configuración de CMS basados en datos, admite envoltura de desplazamiento vertical, alineación dinámica de columnas y resaltado al pasar el cursor.

Usage

Puedes mapear datos y dar estilo a las tablas fácilmente desde el panel.

1. Tabla de texto simple con alineación personalizada

Una lista de texto estándar con la variante plain y precios alineados a la derecha para facilitar la lectura.

{
  "type": "table",
  "variant": "plain",
  "columns": [
    { "header": "Name", "key": "name" },
    { "header": "Category", "key": "category" },
    { "header": "Price", "key": "price", "align": "end" }
  ],
  "rows": "[{\"name\": \"Laptop\", \"category\": \"Electronics\", \"price\": \"$999.00\"}, {\"name\": \"Coffee Mug\", \"category\": \"Home & Kitchen\", \"price\": \"$15.00\"}]"
}

2. Tabla interactiva con franjas cebra (variante Surface)

Con filas alternas sombreadas en cebra, resaltado interactivo al pasar el cursor y bordes estructurales.

{
  "type": "table",
  "variant": "surface",
  "striped": true,
  "interactive": true,
  "columnBorder": true,
  "columns": [
    { "header": "System Service", "key": "service" },
    { "header": "Server Node", "key": "node", "align": "center" },
    { "header": "Status", "key": "status", "align": "end" }
  ],
  "rows": "[{\"service\": \"Auth Endpoint\", \"node\": \"EU-West\", \"status\": \"Online\"}, {\"service\": \"Payment API\", \"node\": \"US-East\", \"status\": \"Degraded\"}, {\"service\": \"File Storage\", \"node\": \"APAC-South\", \"status\": \"Online\"}]"
}

3. Acciones de desplazamiento de fila (Row Hover Actions)

Pasa hoverActions para renderizar controles adicionales (por ejemplo, un botón "Ver detalles") en una celda de ancho cero al final de la fila. Esta celda permanece oculta hasta que se pasa el cursor sobre su fila o uno de sus controles recibe el foco del teclado. Está posicionada absolutamente sobre el final de la fila, por lo que nunca ensancha la tabla; puede cubrir visualmente las últimas columnas mientras se muestra.

hoverActions es una función de renderizado (como column.render), no un campo serializable en el CMS — no está expuesta en el esquema del bloque table de Sveltia CMS.

Hidratación y limitaciones interactivas de hoverActions

Al utilizar hoverActions en una tabla que es total o parcialmente interactiva (por ejemplo, cuando los encabezados son ordenables con sortable o la tabla se hidrata a través de un contenedor island principal), existen consideraciones arquitectónicas importantes con respecto al estado del lado del cliente:

1. Renderizado de marcado estático: La función hoverActions se ejecuta durante el renderizado del lado del servidor (SSR). Si la tabla tiene habilitada la ordenación o se somete a hidratación en el cliente, cualquier escuchador de eventos interactivo (como onClick o componentes island interactivos) anidado directamente dentro de hoverActions puede perderse durante la clonación y la hidratación del DOM.
2. Patrón de delegación de clics recomendado: En lugar de incrustar islands de cliente complejas o hooks de eventos activos directamente dentro de la función de callback hoverActions:
   • Renderiza activadores estáticos o elementos HTML estándar con atributos de datos descriptivos (por ejemplo, <button type="button" data-action="delete" data-id={row.id}>Eliminar</button>).
   • Monta una única island de controlador con estado fuera del componente Table.
   • Escucha los eventos globalmente (o delégalos en el elemento padre) para capturar los clics en esos atributos de datos y activar los modales, drawers o llamadas API correspondientes.

Props

Propiedades de la lista Column (columns)

Cada entrada en la lista columns acepta los siguientes campos:

Architecture Notes

• Conversión optimizada de cadenas JSON: Dado que las estructuras de fila varían dinámicamente por bloque, Sveltia CMS entrega las filas como una cadena de arreglo JSON escapada en el campo rows. Se parsea de forma segura en el render, garantizando un tamaño de bundle óptimo.
• Higiene de diseño CSS puro: Encabezados, contornos y franjas cebra usan variables utilitarias ligeras de Panda CSS, eliminando saltos de diseño y renderizando al instante en móviles.
• Fijado de scroll: stickyHeader usa position: sticky estándar en encabezados dentro de un contenedor con overflow, evitando escuchadores de scroll costosos.