L’instantané v3.1.0 correspond aux exemples de cette documentation ; seuls les instantanés plus anciens, comme v3.0.0, précèdent la consultation de fiches et le Gantt dérivé des lignes de la table. Voir compatibilité. Le registre Vue installe les sources et styles copiés ; @yayaw/table-vue est un package privé du workspace, pas le chemin d’installation public.

Installation

Yayaw Table est distribué via une registry Shadcn. La CLI copie le code complet dans votre projet, vous gardez donc une maîtrise locale totale.

Choisissez votre framework ci-dessous, puis suivez son guide de démarrage.

Prérequis

• Un projet déjà configuré avec Shadcn UI

• Un components.json avec l'alias ui configuré (recommandé : "ui": "@/components/ui")

• Un client TanStack Query partagé unique, via QueryClientProvider en React ou VueQueryPlugin en Vue

• Un build ESM ciblant ES2022 ou une version plus récente pour TanStack Table 9

Installation avec la CLI Shadcn

Depuis la racine de votre projet :

npx shadcn@latest add https://table.yayaw.app/r/yayaw-table.json

npx shadcn-vue@latest add https://table.yayaw.app/r/yayaw-table-vue.json

Pour cibler une version précise, utilisez un snapshot de release :

npx shadcn@latest add https://table.yayaw.app/r/v3.9.4/yayaw-table.json

Si votre projet a le namespace registry Yayaw configuré (@yayaw), vous pouvez aussi lancer :

npx shadcn@latest add @yayaw/yayaw-table

La CLI va :

• Ajouter les composants Shadcn manquants dont nous dépendons

• Copier les fichiers Yayaw Table sous votre alias ui (exemple : @/components/ui/yayaw-table)

• Installer les dépendances npm nécessaires (@tanstack/react-table, jotai, lucide-react, etc.)

Migrer depuis TanStack Table 8

Les registres Yayaw Table actuels utilisent TanStack Table 9.2.4. Réinstallez le registre afin de mettre à jour ensemble l'adaptateur local components/ui/yayaw-table/tanstack.ts et la dépendance.

Importez depuis cet adaptateur les types TanStack liés à la table lorsque vous étendez les composants copiés. Si le code de l'application importe TanStack directement, migrez ces intégrations personnalisées vers l'API v9. TanStack 9 utilise start et end pour son état de pinning interne ; Yayaw Table continue de sérialiser left et right dans les vues enregistrées et les URLs. Les vues persistées existantes ne demandent donc aucune migration de données.

Mettre à jour les états vides

Le registre courant inclut la dépendance Shadcn empty. Réinstallez le registre pour récupérer les changements de la table et leurs dépendances ensemble. Si vous copiez les fichiers de la table manuellement, installez aussi Empty :

npx shadcn@latest add empty

Conservez le thème Shadcn et les extensions locales de votre application lors de la revue de mise à jour. Vue inclut ses composants Empty et leurs styles dans le registre shadcn-vue ; mettez les deux à jour ensemble. Cette mise à jour ne demande aucune migration des vues enregistrées.

Items CLI v4 optionnels

Pour les nouveaux projets qui veulent une base Shadcn prête pour Yayaw, installez l'item optionnel :

npx shadcn@latest add @yayaw/yayaw-table-base

Cet item configure base-vega, lucide, TypeScript, les React Server Components, la couleur de base neutral, le namespace registry @yayaw, la font Yayaw Sans optionnelle et Yayaw Table.

Vous pouvez aussi installer uniquement le preset de font :

npx shadcn@latest add @yayaw/font-yayaw-sans

Ces items sont additifs. Les projets existants peuvent continuer à installer yayaw-table directement.

Inspecter avant installation

La CLI shadcn v4 permet d'inspecter le payload registry avant d'écrire des fichiers :

npx shadcn@latest add https://table.yayaw.app/r/yayaw-table.json --dry-run

npx shadcn@latest add https://table.yayaw.app/r/yayaw-table.json --diff

npx shadcn@latest add https://table.yayaw.app/r/yayaw-table.json --view

Vous pouvez aussi inspecter ou découvrir les items de registry :

npx shadcn@latest view @yayaw/yayaw-table

npx shadcn@latest search @yayaw

npx shadcn@latest list @yayaw

Pour capturer le contexte du projet local pendant le debug ou les workflows avec agents :

npx shadcn@latest info --json

Premier usage

Suivez le démarrage React ou le démarrage Vue pour construire une table de produits complète et typée : enregistrements, configuration, action de liste et providers. Chaque guide fournit tous les fichiers locaux importés.

React demande un QueryClient partagé et l’adaptateur Nuqs correspondant à votre routeur. Vue utilise VueQueryPlugin. Placez ces providers à la racine de l’application lorsque vous affichez plusieurs tables.

Exigence QueryClient (breaking change)

Les détails suivants concernent React. Les providers et styles Vue sont décrits dans le démarrage Vue.

Yayaw Table ne crée plus automatiquement de QueryClient interne.

Vous devez maintenant fournir exactement un client partagé :

• soit via votre QueryClientProvider au niveau app,

• soit via la prop queryClient (la même instance que le provider si vous utilisez les deux).

Si aucun QueryClient n'est disponible, Yayaw Table lève une erreur développeur explicite au runtime.

CSS / Tailwind

Yayaw Table utilise Tailwind CSS. Vérifiez que Tailwind est bien configuré dans votre projet.

TypeScript

Yayaw Table est entièrement typé et fournit des helpers de configuration type-safe dans le code copié.