Utiliser le même catalogue d’actions

Cet exemple complet utilise le démarrage et les fichiers communs des recettes. La référence ci-dessous détaille les options et les fragments d’intégration.

import type { TableActions } from "@/components/ui/yayaw-table/providers/table-provider";
import { productStore } from "../shared/store";
import { listRecords } from "./list-records";
import { viewActions } from "./view-actions";

export const editableActions: TableActions = {
  views: viewActions,
  list: (params) => listRecords(productStore.rows, params),
  update: (id, patch) => Promise.resolve(productStore.update(id, patch)),
  bulkUpdate: (ids, patch) =>
    Promise.resolve(productStore.bulkUpdate(ids, patch)),
};
export const getEditableActions = (tableType: string) =>
  tableType === "products" ? editableActions : undefined;

import type { TableActions } from "@/components/ui/yayaw-table-vue/types";
import { productStore } from "../shared/store";
import { listRecords } from "./list-records";
import { viewActions } from "./view-actions";

export const editableActions: TableActions = {
  views: viewActions,
  list: (params) => listRecords(productStore.rows, params),
  update: (id, patch) => Promise.resolve(productStore.update(id, patch)),
  bulkUpdate: (ids, patch) =>
    Promise.resolve(productStore.bulkUpdate(ids, patch)),
};
export const getEditableActions = (tableType: string) =>
  tableType === "products" ? editableActions : undefined;

Intégration Query

Les règles de client partagé ci-dessous concernent React. Vue possède son propre contrat, décrit en fin de page.

L’édition React requiert un QueryClient partagé.

Il n'existe plus de QueryClient interne implicite. Cela évite les caches isolés où les invalidations ne rafraîchissaient pas les données de la table.

Architecture requise

Utilisez exactement un client au niveau app :

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { DataTable } from "@/components/ui/yayaw-table";
import { getTableActions, getTableConfig } from "./table-config";

const queryClient = new QueryClient();

export default function ProductsPage() {
  return (
    <QueryClientProvider client={queryClient}>
      <DataTable
        tableType="products"
        getTableConfig={getTableConfig}
        getTableActions={getTableActions}
      />
    </QueryClientProvider>
  );
}

Ce que invalidate/refetch doit faire

Quand des actions de ligne ou bulk réussissent, Yayaw Table invalide :

["tableData", tableId]

Ensuite les queries actives se rafraîchissent et la table se met à jour avec des données serveur fraîches.

Invalidation correcte depuis du code custom

Quand vous exécutez des mutations custom en dehors de Yayaw Table, invalidez la même clé :

await queryClient.invalidateQueries({
  queryKey: ["tableData", "products"],
});

Garde-fous ajoutés par Yayaw Table

• Si aucun QueryClient n'est disponible : erreur runtime explicite.

• Si un provider et la prop queryClient sont tous deux définis avec des instances différentes : erreur runtime explicite.

• La duplication silencieuse de cache est empêchée.

Cache Vue et rafraîchissement après mutation

Vue crée un client Vue Query local par défaut et accepte un queryClient partagé. Ses clés commencent par ["yayaw-table", tableId] ; celles de React, ["tableData", tableId], ne sont pas interchangeables.

Les mutations Vue intégrées rafraîchissent la liste active. Son invalidation la recharge aussi ; invalider seulement un agrégat ou une ancienne page en cache ne la recharge pas. Un rafraîchissement explicite annule une requête de liste lancée avant la mutation. Si une suppression vide la dernière page serveur, Vue demande la précédente page valide ; la réduction des données locales recale également la pagination.

Les callbacks applicatifs gèrent leur persistance et leur rafraîchissement, sauf si leur contrat de résultat demande explicitement une intervention de la bibliothèque. Voir les actions groupées.

Exports complets et limites de pagination serveur

L'export de barre d'outils récupère tous les résultats avec la requête et l'ordre des colonnes capturés au départ. L'export groupé utilise la sélection. Les données locales suivent les mêmes filtres et tris. Le CSV intégré contient les colonnes de données visibles dans leur ordre ; les callbacks d'export conservent leurs signatures et leur priorité.

React et Vue partagent le collecteur de pages utilisé par l'export serveur et la sélection globale. Un plafond serveur ne tronque pas les résultats si meta.pageCount ou meta.totalCount décrit l'ensemble. Sans métadonnées, une page courte termine la collecte. Une requête en échec, une page vide incohérente ou la limite de 1 000 pages produit une erreur, sans export partiel silencieux. L'export reste désactivé pendant le chargement et peut être réessayé après erreur.