Kanban

Le Kanban utilise les mêmes lignes, requêtes et actions de modification que le tableau. Groupez par un statut à valeurs finies et n’affichez que les propriétés utiles sur les cartes.

Réglages des cartes

Ouvrez Vue → Réglages des cartes pour sélectionner le titre et les propriétés visibles. Les propriétés et les libellés utilisent des cases à cocher qui restent ouvertes pour plusieurs modifications. Le champ de regroupement reste dans Vue → Grouper. Sur mobile, les choix restent dans le tiroir de la vue et Retour rétablit le contrôle d’origine. Les menus courts n’imposent pas de barre de défilement ; les longues listes restent accessibles par défilement.

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 pipelineConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    displayModes: ["table", "kanban"],
    defaultDisplayMode: "kanban",
    allowEdit: true,
    enableColumnFilters: true,
    enableAdvancedFilters: true,
    enableViews: true,
    allowViewSave: true,
    allowInlineEdit: true,
    enableGrouping: true,
    kanban: {
      groupBy: "status",
      titleColumn: "name",
      cardColumnIds: ["price", "stock"],
      showCardLabels: true,
    },
  },
});

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

export const pipelineConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    displayModes: ["table", "kanban"],
    defaultDisplayMode: "kanban",
    allowEdit: true,
    enableColumnFilters: true,
    enableAdvancedFilters: true,
    enableViews: true,
    allowViewSave: true,
    allowInlineEdit: true,
    enableGrouping: true,
    kanban: {
      groupBy: "status",
      titleColumn: "name",
      cardColumnIds: ["price", "stock"],
      showCardLabels: true,
    },
  },
});

Enregistrer le déplacement d’une carte

Déplacer une carte entre des colonnes modifiables met à jour le champ de groupement via update(id, patch). Fournissez cette action et les autorisations d’édition. Le serveur doit valider les transitions et renvoyer un échec lorsqu’il en refuse une. Utilisez des valeurs stables comme draft, active et archived ; leurs libellés peuvent être traduits.

Garder un tableau lisible

titleColumn fournit le titre et cardColumnIds les propriétés ; sans lui, toutes les propriétés de données sauf le titre et la colonne regroupée sont affichées. Recherche, filtres et vues enregistrées restent applicables. Des données serveur paginées ne représentent que les lignes récupérées ; ne présentez pas un compteur de colonne comme un total global sans contrat serveur adapté. Consultez la recette pipeline.

Créer un tableau par statut

Utilisez les trois statuts comme colonnes et affichez seulement le titre et le stock. Branchez editableActions pour que déplacer une carte enregistre son statut.

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,
    displayModes: ["table", "kanban"],
    defaultDisplayMode: "kanban",
    allowEdit: true,
    allowInlineEdit: true,
    enableGrouping: true,
    kanban: {
      groupBy: "status",
      titleColumn: "name",
      cardColumnIds: ["stock"],
      showCardLabels: false,
    },
  },
});

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

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    displayModes: ["table", "kanban"],
    defaultDisplayMode: "kanban",
    allowEdit: true,
    allowInlineEdit: true,
    enableGrouping: true,
    kanban: {
      groupBy: "status",
      titleColumn: "name",
      cardColumnIds: ["stock"],
      showCardLabels: false,
    },
  },
});

Afficher les libellés sur des cartes détaillées

Exposez le prix et le stock avec leurs libellés pour la revue des produits. La densité et les calculs de pied de tableau sont masqués en Kanban.

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,
    displayModes: ["table", "kanban"],
    defaultDisplayMode: "kanban",
    allowEdit: true,
    allowInlineEdit: true,
    enableGrouping: true,
    kanban: {
      groupBy: "status",
      titleColumn: "name",
      cardColumnIds: ["price", "stock"],
      showCardLabels: true,
    },
  },
});

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

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    displayModes: ["table", "kanban"],
    defaultDisplayMode: "kanban",
    allowEdit: true,
    allowInlineEdit: true,
    enableGrouping: true,
    kanban: {
      groupBy: "status",
      titleColumn: "name",
      cardColumnIds: ["price", "stock"],
      showCardLabels: true,
    },
  },
});

Colonnes chargées sur le serveur

Pour un tableau de suivi complet en consultation, configurez table.kanban.server. groups(signal) renvoie { value, label, totalCount }[] avec des compteurs sur toute la requête autorisée. rows(group, cursor, signal) renvoie { rows, nextCursor } ; null termine la colonne. Le premier curseur vaut null. Chaque colonne se charge séparément et conserve ses lignes et son curseur après un échec.

queryKey représente les filtres, la recherche, le tri, le compte et la révision d’actualisation. Capturez cette requête dans les callbacks et respectez AbortSignal. Changer la clé remplace le tableau précédent. Le serveur contrôle les droits sur les compteurs comme sur les pages ; les compteurs ne sont jamais déduits des seules lignes chargées.

getRowId(row) utilise par défaut String(row.id). onActivate(row) gère la navigation. labels traduit loading, retry, loadMore et empty. Dans React et Vue, ce mode sert à la consultation : déplacement, sélection, commandes groupées et pagination de la grille ne s’appliquent pas aux colonnes incomplètes. Utilisez la grille pour les opérations groupées. Le Kanban local conserve son fonctionnement existant.