Introduction

Le composant Table est un élément de mise en page robuste qui restitue clairement des structures de jeux de données tabulaires complexes sur les pages client. Avec un support complet pour les modèles responsives sans JS et les schémas de configuration CMS pilotés par données, il offre un enroulement de défilement vertical, un alignement dynamique des colonnes et des surbrillances au survol.

Usage

Vous pouvez facilement mapper les données et styliser les tableaux depuis le tableau de bord.

1. Tableau texte simple avec alignement personnalisé

Une liste texte standard avec la variante plain et des prix alignés à droite pour faciliter la lecture.

{
  "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. Tableau interactif à bandes zébrées (variante Surface)

Avec des lignes alternées ombrées (zèbre), surbrillance au survol et bordures structurelles.

{
  "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. Actions au survol de ligne (Row Hover Actions)

Passez hoverActions pour restituer des commandes supplémentaires (par exemple, un bouton "Détails") dans une cellule de fin de largeur nulle qui reste masquée jusqu'à ce que sa ligne soit survolée ou que l'une de ses commandes reçoive le focus du clavier. Elle est positionnée de manière absolue sur la fin de la ligne, de sorte qu'elle n'élargit jamais le tableau — elle peut masquer visuellement la ou les dernières colonnes lorsqu'elle est révélée.

hoverActions est une fonction de rendu (comme column.render), pas un champ sérialisable du CMS — elle n'est pas exposée dans le schéma du bloc table de Sveltia CMS.

Hydratation et limitations interactives de hoverActions

Lors de l'utilisation de hoverActions sur un tableau entièrement ou partiellement interactif (par exemple, lorsque les en-têtes sont triables via sortable ou que le tableau s'hydrate via un conteneur island parent), il existe des considérations architecturales importantes concernant l'état côté client :

1. Rendu du balisage statique : La fonction hoverActions est exécutée lors du rendu côté serveur (SSR). Si le tri du tableau est activé ou fait l'objet d'une hydratation côté client, tous les écouteurs d'événements interactifs (comme onClick ou les composants island avec état) imbriqués directement dans hoverActions peuvent être ignorés lors du clonage et de l'hydratation du DOM.
2. Modèle de délégation de clic recommandé : Au lieu d'intégrer des islands clientes complexes ou des hooks d'événements actifs directement dans le callback hoverActions :
   • Restituez des déclencheurs statiques ou des éléments HTML standard avec des attributs de données descriptifs (par exemple, <button type="button" data-action="delete" data-id={row.id}>Supprimer</button>).
   • Montez une seule island de contrôleur avec état en dehors du composant Table.
   • Écoutez les événements globalement (ou déléguez-les sur l'élément parent) pour capturer les clics sur ces attributs de données et déclencher les fenêtres modales, les tiroirs (drawers) ou les appels d'API appropriés.

Props

Propriétés de la liste Column (columns)

Chaque entrée de la liste columns accepte les champs suivants :

Architecture Notes

• Conversion optimisée de chaînes JSON : Comme les structures de lignes varient dynamiquement par bloc, Sveltia CMS livre les lignes comme chaîne de tableau JSON échappée dans le champ rows. Elle est parsée sans risque au rendu, garantissant un bundle minimal.
• Hygiène de mise en page CSS pure : En-têtes, contours et bandes zébrées s'appuient sur des variables utilitaires Panda CSS légères, éliminant les décalages et rendant instantanément sur mobile.
• Épinglage au défilement : stickyHeader utilise un position: sticky standard sur les en-têtes dans un wrapper en débordement, évitant les écouteurs de scroll coûteux.