Galerie
Présenter les mêmes lignes sous forme de cartes illustrées.
La galerie convient aux produits et collections visuelles. Elle partage filtres, tri, sélection et actions avec le tableau.
Réglages des cartes
Ouvrez Vue → Réglages des cartes pour choisir l’image, le titre, les proportions, l’ajustement et la taille des cartes. Propriétés ouvre un écran de cases à cocher pour les champs des cartes et leurs libellés. Sur mobile, les réglages et les choix restent dans un seul tiroir en bas de l’écran ; Retour ramène au champ d’origine. Les panneaux défilent uniquement lorsque leur contenu dépasse la hauteur disponible.
Exemple de configuration
Partez du démarrage React ou du démarrage Vue. Le fichier suivant complète leur catalogue de produits. Passez cette configuration via getTableConfig en React ou config en Vue.
import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";
export const catalogConfig = defineTableConfig({
...productConfig,
table: {
...productConfig.table,
layoutPreset: "catalog",
displayModes: ["table", "gallery"],
defaultDisplayMode: "gallery",
export: true,
enableColumnFilters: true,
enableAdvancedFilters: true,
showFilterBar: true,
filterBarColumns: ["status"],
coloredTags: false,
gallery: {
imageColumn: "image",
titleColumn: "name",
cardColumnIds: ["price", "stock", "status"],
aspectRatio: "square",
imageFit: "cover",
cardSize: "medium",
previewSize: "medium",
showCardLabels: false,
media: { enabled: true },
},
},
});import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";
export const catalogConfig = defineTableConfig({
...productConfig,
table: {
...productConfig.table,
layoutPreset: "catalog",
displayModes: ["table", "gallery"],
defaultDisplayMode: "gallery",
export: true,
enableColumnFilters: true,
enableAdvancedFilters: true,
showFilterBar: true,
filterBarColumns: ["status"],
coloredTags: false,
gallery: {
imageColumn: "image",
titleColumn: "name",
cardColumnIds: ["price", "stock", "status"],
aspectRatio: "square",
imageFit: "cover",
cardSize: "medium",
previewSize: "medium",
showCardLabels: false,
media: { enabled: true },
},
},
});Images et contenu
Pointez imageColumn vers un champ URL et titleColumn vers un nom lisible. Choisissez contain pour voir le produit entier ou cover pour un cadrage régulier. Taille et ratio organisent les cartes ; ils ne transforment ni n’hébergent les images. Les URL doivent être accessibles au navigateur.
Conserver le parcours
Changer de mode conserve la requête courante. Les exports utilisent les valeurs des lignes, pas le HTML des cartes. Testez une image absente, un titre long et un résultat filtré vide dans la recette catalogue.
Présenter un catalogue visuel
Utilisez la propriété image des données partagées. Un cadrage carré cover harmonise les cartes ; l’URL d’image reste une donnée de l’application.
Copiez cette configuration complète à côté de product-config.ts. Utilisez () => exampleConfig pour getTableConfig en React, ou :config="exampleConfig" en Vue.
Données de démonstration. Les modifications restent dans cet aperçu.
import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";
export const exampleConfig = defineTableConfig({
...productConfig,
table: {
...productConfig.table,
displayModes: ["table", "gallery"],
defaultDisplayMode: "gallery",
coloredTags: false,
gallery: {
imageColumn: "image",
titleColumn: "name",
cardColumnIds: ["price", "status"],
aspectRatio: "square",
imageFit: "cover",
cardSize: "medium",
previewSize: "medium",
showCardLabels: false,
media: { enabled: true },
},
},
});Données de démonstration. Les modifications restent dans cet aperçu.
import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";
export const exampleConfig = defineTableConfig({
...productConfig,
table: {
...productConfig.table,
displayModes: ["table", "gallery"],
defaultDisplayMode: "gallery",
coloredTags: false,
gallery: {
imageColumn: "image",
titleColumn: "name",
cardColumnIds: ["price", "status"],
aspectRatio: "square",
imageFit: "cover",
cardSize: "medium",
previewSize: "medium",
showCardLabels: false,
media: { enabled: true },
},
},
});Utiliser des cartes sans image
Omettez imageColumn pour une collection textuelle compacte. Affichez le stock et le statut avec leurs libellés ; les filtres et le tri utilisent la même action list que le tableau.
Copiez cette configuration complète à côté de product-config.ts. Utilisez () => exampleConfig pour getTableConfig en React, ou :config="exampleConfig" en Vue.
Données de démonstration. Les modifications restent dans cet aperçu.
import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";
export const exampleConfig = defineTableConfig({
...productConfig,
table: {
...productConfig.table,
displayModes: ["table", "gallery"],
defaultDisplayMode: "gallery",
gallery: {
titleColumn: "name",
cardColumnIds: ["stock", "status"],
showCardLabels: true,
cardSize: "small",
},
},
});Données de démonstration. Les modifications restent dans cet aperçu.
import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";
export const exampleConfig = defineTableConfig({
...productConfig,
table: {
...productConfig.table,
displayModes: ["table", "gallery"],
defaultDisplayMode: "gallery",
gallery: {
titleColumn: "name",
cardColumnIds: ["stock", "status"],
showCardLabels: true,
cardSize: "small",
},
},
});Visionneuse native
Activez table.gallery.media.enabled: true pour séparer l’aperçu du média de la consultation de sa fiche, en React comme en Vue. Un clic sur le visuel ouvre la visionneuse ; un clic sur la description suit rowClickMode — le mode par défaut ouvre la vue enregistrement. Infos utilise une icône d’information, Aperçu un œil et Copier le lien un lien. Les menus s’élargissent selon leurs libellés traduits, dans la limite de l’écran.
// Inside table.gallery; use the same keys in React and Vue.
media: {
enabled: true,
urlColumn: "publicUrl",
typeColumn: "kind",
mimeTypeColumn: "mimeType",
posterColumn: "thumbnailPublicUrl",
hoverPreview: true,
},
previewSize: "medium",media.getMedia(row) peut aussi renvoyer { url, type, mimeType, poster, alt, tracks }. Les types acceptés sont image, video, audio, document (PDF intégré avec le MIME application/pdf) et file (ouverture du fichier). Les sources, affiches et pistes de sous-titres acceptent HTTP(S) et les chemins relatifs. L’application fournit les URL accessibles et les sous-titres ; le tableau ne stocke ni ne convertit les fichiers.
La visionneuse montre le média entier sans déformation, parcourt les éléments affichés avec Précédent/Suivant ou les flèches gauche/droite et propose Plein écran, Infos et Fermer. Début/Fin accèdent au premier/dernier élément. Les lecteurs audio/vidéo gardent leurs raccourcis natifs. Échap ferme la visionneuse et rend le focus. Un média indisponible conserve son lien Ouvrir le fichier. L’aperçu au survol, optionnel, lit cinq secondes de vidéo sans son et respecte la réduction des animations.
imageFit: "cover" remplit le visuel par recadrage sans étirement ; "contain" conserve l’image entière. previewSize accepte "small", "medium" ou "large" (S/M/L dans les réglages) et change la hauteur de l’aperçu indépendamment de cardSize, qui règle la largeur. Medium conserve les proportions choisies. Le ratio par défaut est "wide" dans les deux éditions ; indiquez "square" pour conserver l’ancien défaut Vue. La taille d’aperçu est enregistrée dans les vues. Les callbacks média et rendus personnalisés ne sont jamais sérialisés.
Pour un contenu métier, renderMedia(context) et renderProperties(context) reçoivent { row, title, source, imageFit, aspectRatio }. Renvoyez des nœuds React ou des VNodes Vue. Un rendu média personnalisé gère lui-même son ouverture ; omettez-le pour utiliser la visionneuse native.
Tags et sélection
table.coloredTags: false donne des tags neutres et discrets ; les couleurs sont actives par défaut. coloredTags sur une colonne prend priorité. tagColorMap et les couleurs automatiques utilisent les valeurs stockées : une traduction ne change pas la couleur. Les propriétés sans libellé se répartissent naturellement sur une même ligne.
La sélection apparaît au survol, au focus clavier, sur les cartes sélectionnées et sur les appareils tactiles. Ctrl/Cmd-clic bascule une carte sans l’ouvrir. Maj-clic sélectionne l’intervalle dans l’ordre affiché, bornes comprises. Ctrl/Cmd+A sélectionne les éléments autorisés sur toutes les pages du résultat. Voir sélection et portée des raccourcis.