Mise en page et colonnes

Choisissez un préréglage pour une interface d’administration, un catalogue ou un aperçu compact. Ajustez ensuite les comportements utiles à votre produit.

Barre d'outils responsive

La barre d'outils sépare le sélecteur de vues, à gauche, des Réglages de la vue et du bouton Données, à droite. Desktop conserve une ligne : onglets de vues (ou le déclencheur nommé, avec son icône, le nom de la vue et le chevron), recherche, actions de l'application, Réglages de la vue, Données et ajout. actionsAsIcons contrôle les libellés des actions de l'application ; le menu de débordement disparaît sur desktop. Sous 768px, ou si le conteneur ne peut plus tenir sur une ligne, la barre devient vue · + · … : le déclencheur de vue se réduit à un bouton à icône seule — nom accessible et point de changements non enregistrés seulement, sans libellé ni chevron — pour laisser la place à la recherche sur la ligne, qui se replie en un bouton ouvrant le champ. Archives est un exemple fourni par l'application, pas une action native.

Les Réglages de la vue ne portent que sur la présentation — mise en page, densité, propriétés, filtre, tri, groupement, calculs de pied et réglages de carte — sans section Données à l'intérieur. Exporter, Connecter et Partager vivent dans leur propre menu Données, ouvert depuis un bouton à icône de base de données à côté des Réglages de la vue : une ligne Exporter ›, une ligne Connecter › (destinations de connexion personnalisées, masquée sans elles) et une ligne Partager › (un écran listant « Copier le lien » suivi des destinations de partage personnalisées, ou une action directe de copie sans elles), toutes deux déclarées dans actions.destinations. En mode compact, le menu Données liste aussi les actions de la barre d'outils de l'application ; il n'y a plus de panneau des actions séparé. Sur les grands écrans, ces actions de l'application restent des boutons de la barre d'outils avant les Réglages de la vue, dont le bouton icône porte un badge comptant les filtres et tris actifs.

Les réglages utilisent un panneau ancré sur desktop et un panneau modal défilant en présentation compacte. Les cibles mobiles font au moins 44px. La mise en page et la densité sont des lignes affichant leur valeur courante qui ouvrent une liste de choix, comme les propriétés, le filtre, le tri et le groupement ; ces écrans possèdent un retour. Les filtres rapides configurés rejoignent Filtres en mode compact. La barre desktop conserve ses contrôles de 32px ; la densité ne redimensionne que les données.

Mode et densité sont accessibles directement dans le menu de la vue. Les deux utilisent un libellé visible et une rangée de boutons régulièrement espacés, avec le choix sélectionné mis en évidence. Les flags et les capacités des colonnes peuvent masquer d'autres réglages. Un changement de présentation préserve les réglages inactifs. Les raccourcis de filtres et de tri depuis les en-têtes restent disponibles.

Les filtres numériques avancés conservent un brouillon local jusqu’à Entrée ou au bouton de validation (Terminé en React, Appliquer en Vue). Saisir 24 conserve les résultats actuels jusqu’à la validation : 2 et 4 ne sont jamais appliqués séparément. Zéro, les nombres négatifs et les décimales sont acceptés. Les deux bornes d’un intervalle doivent être complètes avant validation. Échap annule les modifications en cours. Les filtres utilisent des lignes de menu et des champs simples, sans cartes imbriquées ni curseur implicite de 0 à 100. L’exemple Vue active enableAdvancedFilters pour tester ce parcours avec le tri et le groupement.

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 layoutConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    layoutPreset: "admin",
    density: "small",
    actionsAsIcons: false,
    enableViews: true,
    allowViewSave: true,
    enableColumnDnd: true,
    enableColumnDragDropByDefault: false,
    enableColumnResizing: true,
    enableColumnPinning: true,
    emptyState: {
      title: "No products match",
      description: "Clear filters or try another name.",
    },
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const layoutConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    layoutPreset: "admin",
    density: "small",
    actionsAsIcons: false,
    enableViews: true,
    allowViewSave: true,
    enableColumnDnd: true,
    enableColumnDragDropByDefault: false,
    enableColumnResizing: true,
    enableColumnPinning: true,
    emptyState: {
      title: "No products match",
      description: "Clear filters or try another name.",
    },
  },
});

Rendre les ajustements réversibles

L’ordre, la visibilité, la largeur et l’épinglage sont des états utilisateur. Les colonnes obligatoires restent disponibles. Conservez les identifiants lors d’un changement de libellé pour préserver les vues. enableColumnDnd expose la fonctionnalité ; enableColumnDragDropByDefault contrôle son activation initiale.

Prévoir les petits écrans

Utilisez le thème Shadcn de l’application et un conteneur pouvant rétrécir (min-width: 0). Testez les longues valeurs, un écran étroit, le menu d’actions groupées et un résultat vide. Masquer la barre d’outils peut supprimer les contrôles permettant de sortir d’un ancien filtre enregistré.

Le panneau reprend les couleurs de popover, bordures et arrondis du thème Shadcn de l'application. Sa hauteur suit son contenu ; une seule zone de défilement intervient lorsque la hauteur disponible est dépassée. Le groupement conserve l'ordre des colonnes, y compris la sélection, pour aligner les en-têtes de groupe et les cellules des lignes.

Les exemples exécutables React et Vue proposent Custom onBulkEdit : sélectionnez plusieurs lignes, ouvrez l'édition groupée et appliquez un statut à ces lignes. Lorsque l'option est désactivée, le formulaire généré du catalogue gère l'édition groupée. Dans un handler React personnalisé, invalidez les requêtes tableData et tableColumnCalculations après l'écriture pour actualiser ensemble les lignes filtrées et les totaux.

En React, getTableActions().list doit appliquer la recherche globale, les filtres de colonnes, les filtres avancés et le tri avant la pagination. La barre d'outils modifie la requête ; renvoyer les mêmes lignes ne les filtre ni ne les trie. L'exemple responsive cherche dans chaque colonne de données, y compris les statuts, nombres et booléens. L'exemple Vue sur données locales applique la même requête avant la pagination.

Afficher les libellés sur desktop

Gardez les actions desktop libellées. En largeur compacte, la barre passe au déclencheur de vue à icône seule, à un bouton de recherche, aux Réglages de la vue et à Ajouter ; les entrées des menus restent lisibles.

Copiez cette configuration complète à côté de product-config.ts. Utilisez () => exampleConfig pour getTableConfig en React, ou :config="exampleConfig" en Vue.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    actionsAsIcons: false,
    density: "medium",
    enableViews: false,
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    actionsAsIcons: false,
    density: "medium",
    enableViews: false,
  },
});

Utiliser des icônes et une table plus dense

Le flag d’icônes concerne les actions desktop. La densité appartient à la vue courante et n’est proposée qu’en mode tableau.

Copiez cette configuration complète à côté de product-config.ts. Utilisez () => exampleConfig pour getTableConfig en React, ou :config="exampleConfig" en Vue.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    actionsAsIcons: true,
    density: "small",
    displayModes: ["table", "kanban", "gallery"],
    kanban: { groupBy: "status", titleColumn: "name" },
    gallery: { titleColumn: "name" },
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    actionsAsIcons: true,
    density: "small",
    displayModes: ["table", "kanban", "gallery"],
    kanban: { groupBy: "status", titleColumn: "name" },
    gallery: { titleColumn: "name" },
  },
});