The v3.1.0 snapshot matches the examples in this documentation; only older snapshots such as v3.0.0 predate record details and the Gantt derived from the table's own rows. See compatibility. The Vue registry installs copied source and styles; @yayaw/table-vue is a private workspace package, not the public installation path.

Installation

Yayaw Table is distributed through a Shadcn registry. The CLI copies the full code into your project, so you own and can edit it locally.

Choose the matching framework below, then continue with its quick start.

Prerequisites

• A project already set up with Shadcn UI

• A components.json with the ui alias configured (recommended: "ui": "@/components/ui")

• A single shared TanStack Query client, through QueryClientProvider in React or VueQueryPlugin in Vue

• An ESM build targeting ES2022 or newer for TanStack Table 9

Install with Shadcn CLI

From your project root:

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

To target a specific released version, use a registry snapshot:

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

If your project has the Yayaw registry namespace configured (@yayaw), you can also run:

npx shadcn@latest add @yayaw/yayaw-table

The CLI will:

• Add missing Shadcn components we depend on

• Copy Yayaw Table files under your ui alias (for example @/components/ui/yayaw-table)

• Install required npm dependencies (@tanstack/react-table, jotai, lucide-react, etc.)

Migrate from TanStack Table 8

Current Yayaw Table registries use TanStack Table 9.2.4. Reinstall the registry so the local components/ui/yayaw-table/tanstack.ts adapter and dependency are updated together.

Import table-bound TanStack types from that adapter when extending the copied components. If application code imports TanStack directly, update those custom integrations to the v9 API. TanStack 9 uses start and end for its internal pinning state; Yayaw Table continues to serialize left and right in saved views and URLs, so existing persisted views require no data migration.

Upgrade empty states

The current registry includes the Shadcn empty dependency. Reinstall the registry to receive the table changes and their dependencies together. If you copy the updated table files manually, also install Empty:

npx shadcn@latest add empty

Keep your application's Shadcn theme and any local table extensions when reviewing an update. Vue includes its Empty components and styles in the shadcn-vue payload; refresh both together. Existing saved views require no migration for this update.

Optional CLI v4 items

For new projects that want a Yayaw-ready Shadcn baseline, install the optional base item:

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

The base item configures base-vega, lucide, TypeScript, React Server Components, the neutral base color, the @yayaw registry namespace, the optional Yayaw Sans font, and Yayaw Table itself.

You can also install only the font preset:

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

These items are additive. Existing projects can keep installing yayaw-table directly.

Inspect before installing

The shadcn CLI v4 can inspect registry payloads before writing files:

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

You can also inspect or discover registry items:

npx shadcn@latest view @yayaw/yayaw-table

npx shadcn@latest search @yayaw

npx shadcn@latest list @yayaw

To capture local project context for debugging or agent workflows:

npx shadcn@latest info --json

First usage

Follow the React quick start or Vue quick start for a complete, typed product table: records, configuration, list action, and application providers. Each quick start includes every local file it imports.

React requires a shared QueryClient and the Nuqs adapter that matches your router. Vue uses VueQueryPlugin. Keep these providers at the application root when mounting several tables.

QueryClient requirement (breaking change)

The following provider and CLI preset details apply to React. Vue setup and styles are covered in the Vue quick start.

Yayaw Table no longer creates an internal QueryClient automatically.

You must now provide exactly one shared client:

• either from your app-level QueryClientProvider,

• or via the queryClient prop (must be the same instance as the app provider if both are used).

If no QueryClient is available, Yayaw Table throws an explicit developer error at runtime.

CSS / Tailwind

Yayaw Table uses Tailwind CSS. Ensure Tailwind is configured in your project.

Theme support

Yayaw Table follows the host Shadcn theme. The copied components use CSS variables such as background, foreground, muted, and border, plus dark: variants for the few places that need explicit dark styling.

For light, dark, and system modes, your app should map the active theme to the .dark class. In a Next.js app, the common setup is next-themes:

"use client";

import { ThemeProvider } from "next-themes";
import type { ReactNode } from "react";

export function Providers({ children }: { children: ReactNode }) {
  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="system"
      disableTransitionOnChange
      enableSystem
    >
      {children}
    </ThemeProvider>
  );
}

With Tailwind CSS v4, keep the Shadcn dark variant in your global CSS:

@custom-variant dark (&:is(.dark *));

With Tailwind CSS v3, use class-based dark mode in tailwind.config:

export default {
  darkMode: "class",
};

TypeScript

Yayaw Table is fully typed and ships type-safe configuration helpers in the copied source.