Installation

Prerequisites

Ada requires a project with shadcn already initialized. If you haven't set it up yet, run:

npx shadcn@latest init

CLI Installation

The recommended way to install Ada is via the shadcn CLI:

npx shadcn@latest add https://ada-table.vercel.app/r/data-table.json

This will install the data table components and all required dependencies, including:

• @tanstack/react-table — Headless table engine
• @tanstack/react-pacer — Debouncing for filter inputs
• @phosphor-icons/react — Icons
• @base-ui/react — Unstyled UI primitives
• date-fns — Date formatting
• react-day-picker — Date picker component
• zod — Schema validation for search state

It also installs the required shadcn components (button, table, dropdown-menu, select, skeleton, toggle-group, popover, calendar, input, separator, slider) and the autocomplete and button-group registry dependencies automatically.

Adapter Installation

Ada's data table needs a search state adapter to persist filters, sorting, and pagination to the URL. Choose the adapter that matches your framework:

nuqs (Next.js)

For Next.js projects using nuqs for URL state management:

npx shadcn@latest add https://ada-table.vercel.app/r/nuqs-adapter.json

This installs nuqs and the useNuqsSearchAdapter hook with dataTableParsers. See nuqs Adapter for setup details.

TanStack Router

For projects using TanStack Router:

npx shadcn@latest add https://ada-table.vercel.app/r/tanstack-router-adapter.json

This installs the useTanstackRouterSearchAdapter hook and dataTableSearchSchema. No additional packages needed beyond @tanstack/react-router. See TanStack Router Adapter for setup details.

Custom Adapter

You can implement the SearchStateAdapter interface for any framework. See Custom Adapter for the interface details.

ORM Filters (Optional)

Ada includes zero-dependency ORM filter builders. Install only the one you need:

Prisma

npx shadcn@latest add https://ada-table.vercel.app/r/prisma-filter.json

buildPrismaWhere() generates Prisma where clauses. See Prisma Filters.

Drizzle

npx shadcn@latest add https://ada-table.vercel.app/r/drizzle-filter.json

buildFilterCondition() generates Drizzle SQL conditions. See Drizzle Filters.

Project Structure

After installation, you'll find the following files in your project:

src/
├── components/
│   └── data-table/
│       ├── components/          # Filter UI, toolbar, pagination
│       │   ├── active-filters.tsx
│       │   ├── column-header.tsx
│       │   ├── data-table.tsx
│       │   ├── filter-selector.tsx
│       │   ├── filters/         # Per-type filter inputs
│       │   ├── pagination.tsx
│       │   └── toolbar.tsx
│       ├── core/                # TanStack Table integration
│       │   └── tanstack-table.ts
│       ├── hooks/               # Main hooks
│       │   ├── use-data-table.ts
│       │   └── use-data-table-filters.ts
│       ├── utils/               # Search state, helpers
│       │   ├── search-state.ts
│       │   └── search-schema.ts
│       ├── config.ts            # Operator configurations
│       ├── index.ts             # Barrel exports
│       └── types.ts             # Type definitions
├── components/ui/
│   ├── autocomplete.tsx         # Combobox component
│   └── button-group.tsx         # Button group component
└── lib/
    └── utils.ts                 # clsx + tailwind-merge utility

Adapter and ORM filter files are added to data-table/integrations/ when you install them separately (e.g., integrations/nuqs.ts, integrations/tanstack-router.ts, integrations/prisma.ts, integrations/drizzle.ts).