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

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.