Table Tabela
Data Display
Detecção automática inteligente
Introduction
O componente Table é um elemento de layout robusto que renderiza claramente estruturas de conjuntos de dados tabulares complexos em páginas do cliente. Com suporte completo a modelos responsivos sem JS e esquemas de configuração de CMS orientados a dados, oferece envoltura de rolagem vertical, alinhamento dinâmico de colunas e realce ao passar o cursor.
Usage
Você pode mapear dados e estilizar tabelas facilmente a partir do painel.
1. Tabela de texto simples com alinhamento personalizado
Uma lista de texto padrão com a variante plain e preços alinhados à direita para facilitar a leitura.
{
"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. Tabela interativa com listras zebrada (variante Surface)
Com linhas alternadas sombreadas em zebrado, realce interativo ao passar o cursor e bordas estruturais.
{
"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
| Propriedade | Tipo de campo CMS | Padrão | Descrição / opções suportadas |
|---|---|---|---|
Colunas (columns) | list | - | Lista ordenada de configurações de colunas (detalhes abaixo). |
Dados de linhas (rows) | text | - | String de array JSON serializada bruta das linhas (ex. "[{\"item\": \"Laptop\"}]"), parseada automaticamente na renderização. |
Variante (variant) | select | "plain" | Estilo geral de layout do contêiner. • Opções: "plain", "surface". |
Listras zebradas (striped) | boolean | false | Se true, sombreia linhas alternadas. |
Realce de linhas (interactive) | boolean | false | Ativa animação de fundo ao passar o cursor em células ativas. |
Bordas de coluna (columnBorder) | boolean | false | Renderiza separadores verticais entre colunas. |
Cabeçalho fixo (stickyHeader) | boolean | false | Fixa a linha de cabeçalho no topo do viewport durante a rolagem. |
Propriedades da lista Column (columns)
Cada entrada na lista columns aceita os seguintes campos:
| Sub-propriedade | Tipo | Obrigatório | Descrição / opções suportadas |
|---|---|---|---|
Texto de cabeçalho (header) | string | Sim | Título de coluna na linha de cabeçalho. |
Chave de item (key) | string | Sim | Chave de propriedade no objeto de linha para esta célula. |
Alinhamento de texto (align) | select | "start" | Alinhamento dos valores. • Opções: "start", "center", "end". |
Architecture Notes
- Conversão otimizada de strings JSON: Como as estruturas de linha variam dinamicamente por bloco, o Sveltia CMS entrega as linhas como uma string de array JSON escapada no campo
rows. Ela é parseada com segurança na renderização, garantindo um bundle mínimo. - Higiene de layout CSS puro: Cabeçalhos, contornos e listras zebradas usam variáveis utilitárias leves do Panda CSS, eliminando deslocamentos e renderizando instantaneamente no mobile.
- Fixação de rolagem:
stickyHeaderusaposition: stickypadrão em cabeçalhos dentro de um wrapper com overflow, evitando ouvintes de scroll caros.