Retour aux composants

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.

UtilisateurEmailRôleStatut
Alice Martinalice.martin@example.comAdminActif
Bob Nguyenbob.nguyen@example.comÉditeurActif
Clara Schmidtclara.schmidt@example.comLecteurInactif
David Okafordavid.okafor@example.comÉditeurActif
Eva Rossieva.rossi@example.comLecteurEn attente
Frank Duboisfrank.dubois@example.comAdminActif

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.

UtilisateurEmailRôleStatut
Alice Martinalice.martin@example.comAdminActif
Bob Nguyenbob.nguyen@example.comÉditeurActif
Clara Schmidtclara.schmidt@example.comLecteurInactif
David Okafordavid.okafor@example.comÉditeurActif
Eva Rossieva.rossi@example.comLecteurEn attente
Frank Duboisfrank.dubois@example.comAdminActif

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.

UtilisateurEmailRôleStatut
Alice Martinalice.martin@example.comAdminActif
Bob Nguyenbob.nguyen@example.comÉditeurActif
Clara Schmidtclara.schmidt@example.comLecteurInactif
David Okafordavid.okafor@example.comÉditeurActif
Eva Rossieva.rossi@example.comLecteurEn attente
Frank Duboisfrank.dubois@example.comAdminActif

4 — Chargement & vide

loading et le slot #empty sont des passthrough de GSTable.

loading
UtilisateurEmailRôleStatut
No data
empty
UtilisateurEmailRôleStatut
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