Table Tabla
Data Display
Detección automática inteligente
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\"}]"
}
| Name | Category | Price |
|---|---|---|
| Laptop | Electronics | $999.00 |
| Coffee Mug | Home & Kitchen | $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\"}]"
}
| System Service | Server Node | Status |
|---|---|---|
| Auth Endpoint | EU-West | Online |
| Payment API | US-East | Degraded |
| File Storage | APAC-South | Online |
Props
| Propiedad | Tipo de campo CMS | Predeterminado | Descripción / opciones admitidas |
|---|---|---|---|
Columnas (columns) | list | - | Lista ordenada de configuraciones de columnas (ver detalles abajo). |
Datos de filas (rows) | text | - | Cadena de arreglo JSON serializada cruda de las filas (p. ej. "[{\"item\": \"Laptop\"}]"), parseada automáticamente en el render. |
Variante (variant) | select | "plain" | Estilo general de diseño del contenedor. • Opciones: "plain", "surface". |
Franjas cebra (striped) | boolean | false | Si es true, renderiza sombras sutiles en filas alternas. |
Resaltado de filas (interactive) | boolean | false | Activa animación de fondo al pasar el cursor en celdas activas. |
Bordes de columna (columnBorder) | boolean | false | Renderiza líneas divisivas verticales entre columnas. |
Encabezado fijo (stickyHeader) | boolean | false | Fija la fila de encabezado superior durante el desplazamiento. |
Propiedades de la lista Column (columns)
Cada entrada en la lista columns acepta los siguientes campos:
| Sub-propiedad | Tipo | Requerido | Descripción / opciones admitidas |
|---|---|---|---|
Texto de encabezado (header) | string | Sí | Título de columna en la fila de encabezado. |
Clave de ítem (key) | string | Sí | Clave de propiedad en el objeto de fila para esta celda. |
Alineación de texto (align) | select | "start" | Alineación de los valores. • Opciones: "start", "center", "end". |
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:
stickyHeaderusaposition: stickyestándar en encabezados dentro de un contenedor con overflow, evitando escuchadores de scroll costosos.