GSTableCard
Table encadrée : encapsule la composition « table dans une carte » en un seul encadré — #toolbar en haut (recherche + filtres + colonnes), la table au centre, #footer en bas (pagination, actions groupées) avec un compteur de sélection. La table est un passthrough complet de GSTable (data, columns, loading, v-model:sorting, v-model:row-selection, ui et tous ses slots). Sans #toolbar, seule la table est encadrée (cas où la barre d'outils vit dans le GSSpaceHeader de la page).
GSTableCard = GSTable + son cadre. Besoin juste du tableau (pas de carte, layout géré ailleurs) → GSTable. Besoin du tableau encadré avec toolbar et footer de sélection (tables paginées d'admin surtout) → GSTableCard.
1 — Table encadrée (sans toolbar)
Sans slot #toolbar, aucune ligne haute n'est rendue : la table est simplement encadrée. Le slot #footer accueille ici la pagination. Cas audience : la barre d'outils est portée par le GSSpaceHeader de la page, la table n'a plus qu'à être encadrée.
| Utilisateur | Rôle | Statut | |
|---|---|---|---|
| Alice Martin | alice.martin@example.com | Admin | Actif |
| Bob Nguyen | bob.nguyen@example.com | Éditeur | Actif |
| Clara Schmidt | clara.schmidt@example.com | Lecteur | Inactif |
| David Okafor | david.okafor@example.com | Éditeur | Actif |
| Eva Rossi | eva.rossi@example.com | Lecteur | En attente |
| Frank Dubois | frank.dubois@example.com | Admin | Actif |
2 — Avec toolbar intégrée
Le slot #toolbar ajoute une ligne haute séparée par border-b : recherche (largeur contenue w-full max-w-xs), filtres et sélecteur de colonnes. Cas administration : tout l'outillage vit dans la carte de la table.
| Utilisateur | Rôle | Statut | |
|---|---|---|---|
| Alice Martin | alice.martin@example.com | Admin | Actif |
| Bob Nguyen | bob.nguyen@example.com | Éditeur | Actif |
| Clara Schmidt | clara.schmidt@example.com | Lecteur | Inactif |
| David Okafor | david.okafor@example.com | Éditeur | Actif |
| Eva Rossi | eva.rossi@example.com | Lecteur | En attente |
| Frank Dubois | frank.dubois@example.com | Admin | Actif |
3 — Sélection + footer compteur
Avec v-model:row-selection et une colonne select, le footer affiche un compteur de sélection à gauche dès qu'une ligne est cochée. Le libellé est fourni par le consumer (prop selection-label) — le DS reste agnostique i18n. La pagination reste dans le slot #footer à droite.
| Utilisateur | Rôle | Statut | ||
|---|---|---|---|---|
| Alice Martin | alice.martin@example.com | Admin | Actif | |
| Bob Nguyen | bob.nguyen@example.com | Éditeur | Actif | |
| Clara Schmidt | clara.schmidt@example.com | Lecteur | Inactif | |
| David Okafor | david.okafor@example.com | Éditeur | Actif | |
| Eva Rossi | eva.rossi@example.com | Lecteur | En attente | |
| Frank Dubois | frank.dubois@example.com | Admin | Actif |
4 — Chargement & vide
loading et le slot #empty sont des passthrough de GSTable.
| Utilisateur | Rôle | Statut | |
|---|---|---|---|
| No data | |||
| Utilisateur | Rôle | Statut | |
|---|---|---|---|
Aucune donnée | |||
API — GSTableCard
dataobject[]? — lignes du tableau (passthrough GSTable)columnsTableColumn[]? — définition des colonnes (passthrough GSTable)loadingboolean? — état de chargementsorting{ id, desc }[]? — tri (v-model:sorting)rowSelectionRecord<string, boolean>? — sélection des lignes (v-model:row-selection)selectionLabel(selected, total) => string — libellé du compteur de sélection (alternative au slot #selection)uiobject? — fusionné et transmis à GSTable#toolbarLigne haute (recherche + filtres + colonnes), séparée par border-b. Absente → aucune ligne rendue#footerZone basse droite (pagination, actions groupées), séparée par border-t#selectionCompteur de sélection (zone basse gauche) — reçoit { selected, total } pour un rendu riche#cell-*, #empty…Tous les slots de GSTable sont re-forwardés