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\"}]"
}

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\"}]"
}

3. Ações de foco da linha (Row Hover Actions)

Passe hoverActions para renderizar controles adicionais (por exemplo, um botão "Ver detalhes") em uma célula de extremidade de largura zero que permanece oculta até que sua linha correspondente seja focada/passada pelo cursor ou um de seus controles receba o foco do teclado. Está posicionada de maneira absolutamente sobre o final da linha, de modo que nunca alarga a tabela — ela pode ocultar visualmente a última ou as últimas colunas quando revelada.

hoverActions é uma função de renderização (como column.render), não um campo serializável do CMS — ela não é exposta no esquema do bloco table do Sveltia CMS.

Hidratação e limitações interativas de hoverActions

Ao usar hoverActions em uma tabela que é totalmente ou parcialmente interativa (por exemplo, quando os cabeçalhos são ordenáveis via sortable ou a tabela se hidrata por meio de um contêiner island pai), existem considerações arquitetônicas importantes em relação ao estado do lado do cliente:

1. Renderização de marcação estática: A função hoverActions é executada durante a renderização do lado do servidor (SSR). Se a tabela tiver ordenação ativada ou passar por hidratação no cliente, quaisquer ouvintes de eventos interativos (como onClick ou componentes island com estado) aninhados diretamente em hoverActions podem ser descartados durante a clonagem e hidratação do DOM.
2. Padrão de delegação de clique recomendado: Em vez de incorporar islands de cliente complexas ou hooks de eventos ativos diretamente no callback hoverActions:
   • Renderize acionadores estáticos ou elementos HTML padrão com atributos de dados descritivos (por exemplo, <button type="button" data-action="delete" data-id={row.id}>Excluir</button>).
   • Monte uma única island de controlador com estado fora do componente Table.
   • Ouça eventos globalmente (ou delegue-os no elemento pai) para capturar cliques nesses atributos de dados e acionar caixas de diálogo modais, gavetas (drawers) ou chamadas de API apropriadas.

Props

Propriedades da lista Column (columns)

Cada entrada na lista columns aceita os seguintes campos:

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: stickyHeader usa position: sticky padrão em cabeçalhos dentro de um wrapper com overflow, evitando ouvintes de scroll caros.