Installez YaYaw Table, la table de donnees React open source pour Shadcn UI et TanStack Table, via la registry Shadcn

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.

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 exposé via QueryClientProvider

Installation avec la CLI Shadcn

Depuis la racine de votre projet :

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

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

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

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

npx shadcn@latest add @yayaw/yayaw-table

Avec la CLI shadcn v4, l'URL racine du site fonctionne aussi grâce à la négociation de contenu :

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

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.)

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

Importez depuis votre code local copié :

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 const MyTable = () => (
  <QueryClientProvider client={queryClient}>
    <DataTable
      tableType="products"
      getTableConfig={getTableConfig}
      getTableActions={getTableActions}
    />
  </QueryClientProvider>
);

Pour l'état URL Next.js, ajoutez NuqsAdapter dans app/layout.tsx. Voir Provider & Setup et URL state (Nuqs).

Exigence QueryClient (breaking change)

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é.

On this page