Comprendre les catalogues, les actions, les formulaires et l’identité des instances.

Une table fonctionnelle relie une configuration à une source de données. Gardez cette liaison simple et stable : les mêmes catalogues peuvent servir plusieurs instances sans mélanger leurs états.

Les trois catalogues

Catalogue	Responsabilité	Contenu habituel
`getTableConfig(tableType)`	Ce que propose l’interface	Colonnes, tri initial, modes d’affichage, autorisations, disposition du formulaire
`getTableActions(tableType)`	Comment charger et modifier les données	`list`, `create`, `update`, `delete`, méthodes groupées et vues sauvegardées
`getFormConfig(formType, context)`	Comment éditer un enregistrement	Champs, validation, conditions, sections et options asynchrones

React résout ces catalogues depuis DataTable. Vue accepte aussi une prop config directe. Gardez les fonctions de résolution stables au lieu de recréer leur contenu à chaque rendu.

Une configuration complète

Ce point de départ en lecture seule active la navigation habituelle et désactive les mutations tant que leurs handlers ne sont pas fournis. Le guide de démarrage associé fournit l’action de liste.

product-config.ts

import { defineTableConfig } from "@/components/ui/yayaw-table";

export const productConfig = defineTableConfig({
  id: "products",
  translations: { namespace: "products", keys: {} },
  columns: {
    definitions: [
      { id: "name", header: "Name", type: "text" },
      { id: "price", header: "Price", type: "number" },
      { id: "stock", header: "Stock", type: "number" },
      {
        id: "status",
        header: "Status",
        type: "select",
        options: [
          { label: "Draft", value: "draft" },
          { label: "Active", value: "active" },
          { label: "Archived", value: "archived" },
        ],
      },
    ],
    order: ["name", "price", "stock", "status"],
    visible: ["name", "price", "stock", "status"],
    mandatory: ["name"],
    sort: [{ id: "name", desc: false }],
  },
  table: {
    allowCreate: false,
    allowEdit: false,
    allowDelete: false,
    allowDuplicate: false,
    allowBulkEdit: false,
    allowBulkDelete: false,
    enableRowSelection: false,
    enableViews: false,
    syncUrl: false,
    defaultPageSize: 10,
  },
});

export const getTableConfig = (tableType: string) =>
  tableType === "products" ? productConfig : undefined;

product-config.ts

import { defineTableConfig } from "@/components/ui/yayaw-table-vue";

export const productConfig = defineTableConfig({
  id: "products",
  translations: { namespace: "products", keys: {} },
  columns: {
    definitions: [
      { id: "name", header: "Name", type: "text" },
      { id: "price", header: "Price", type: "number" },
      { id: "stock", header: "Stock", type: "number" },
      {
        id: "status",
        header: "Status",
        type: "select",
        options: [
          { label: "Draft", value: "draft" },
          { label: "Active", value: "active" },
          { label: "Archived", value: "archived" },
        ],
      },
    ],
    order: ["name", "price", "stock", "status"],
    visible: ["name", "price", "stock", "status"],
    mandatory: ["name"],
    sort: [{ id: "name", desc: false }],
  },
  table: {
    allowCreate: false,
    allowEdit: false,
    allowDelete: false,
    allowDuplicate: false,
    allowBulkEdit: false,
    allowBulkDelete: false,
    enableRowSelection: false,
    enableViews: false,
    syncUrl: false,
    defaultPageSize: 10,
  },
});

export const getTableConfig = (tableType: string) =>
  tableType === "products" ? productConfig : undefined;

defineTableConfig fusionne les valeurs par défaut. Les valeurs explicitement définies à false restent désactivées. La forme structurée range les comportements dans table ; les anciennes configurations React à plat restent compatibles, mais les nouveaux exemples utilisent le catalogue structuré.

Des identifiants distincts

Identifiant	Rôle	Exemple
`tableType`	Choisir les catalogues de configuration et d’actions	`products`
`tableId`	Isoler URL, sélection, vues et cache d’une instance	`warehouse-products`
`formType`	Choisir un catalogue de formulaire	`product-editor`
ID de ligne	Identifier un enregistrement entre les pages et mutations	`product-42`

Fournissez des identifiants de ligne stables avec getRowId. Des index de position ne permettent pas de suivre une sélection entre plusieurs pages serveur. Deux tables indépendantes sur une page nécessitent des tableId distincts, même si elles partagent un tableType.

Circulation des données

Une interaction modifie l’état de la requête. La table appelle list avec une pagination commençant à un, le tri, la recherche et les filtres. L’action renvoie la page demandée et les totaux. Une mutation persiste le changement, puis la table se rafraîchit via le cache Query partagé.

React utilise une liste chargée par actions. Vue accepte aussi des data locales, sur lesquelles son moteur applique la requête. Avec une source distante, les deux éditions comptent sur le backend pour appliquer la requête complète avant la pagination.

Valeurs initiales, état courant et vues sauvegardées

La configuration définit l’interface initiale. L’URL et les vues sauvegardées représentent l’organisation courante de l’utilisateur : modifier une valeur par défaut ne remplace pas une organisation déjà sauvegardée. Les callbacks et les fonctions de rendu restent dans le code de l’application ; les snapshots de vues contiennent un état sérialisable.

Personnaliser le bon niveau

Utilisez les métadonnées d’une colonne pour son formatage, un champ de formulaire pour l’édition, une fonction de rendu ou un slot Vue pour la présentation et une action pour la persistance. Évitez une seconde source d’état de requête extérieure à la table. Consultez l’intégration Query, les formulaires et le contrat d’actions avant d’ajouter un workflow.

Concepts