Installation

Learn how to install and set up the Advanced Data Table Component in your Next.js application.

Prerequisites

Before installing, ensure your project meets these requirements:

Next.js 15+ with App Router
React 19+
TypeScript 5+
Tailwind CSS configured in your project
Shadcn UI initialized

Installation Methods

You can install the data table component in two ways:

Using Shadcn Registry

The easiest and recommended way to install the component.

Step 1: Install Shadcn UI Components

# Initialize Shadcn UI (if not already done)
npx shadcn@latest init

# Install required UI components
npx shadcn@latest add button checkbox input select popover calendar dropdown-menu separator table command

Step 2: Install Data Table Component

# Install the complete data-table component
npx shadcn@latest add https://tnks-data-table.vercel.app/r/data-table.json

# Install the calendar-date-picker (required dependency)
npx shadcn@latest add https://tnks-data-table.vercel.app/r/calendar-date-picker.json

What Gets Installed

The registry installation automatically:

✅ Installs all required npm dependencies
✅ Copies all data-table components and utilities
✅ Sets up the calendar-date-picker component
✅ Configures proper import paths

Development Mode (Local Registry)

For local development or testing:

# Clone the repository
git clone https://github.com/jacksonkasi1/tnks-data-table.git
cd tnks-data-table

# Install dependencies
pnpm install

# Build the registry
pnpm run registry:build

# Start development server
pnpm run dev

# In your project directory
npx shadcn@latest add http://localhost:3000/r/data-table.json
npx shadcn@latest add http://localhost:3000/r/calendar-date-picker.json

Manual Installation

Follow these steps for manual installation.

Step 1: Install Dependencies

pnpm add @tanstack/react-table @tanstack/react-query @hookform/resolvers react-hook-form zod sonner date-fns date-fns-tz exceljs class-variance-authority clsx tailwind-merge lucide-react

npm install @tanstack/react-table @tanstack/react-query @hookform/resolvers react-hook-form zod sonner date-fns date-fns-tz exceljs class-variance-authority clsx tailwind-merge lucide-react

yarn add @tanstack/react-table @tanstack/react-query @hookform/resolvers react-hook-form zod sonner date-fns date-fns-tz exceljs class-variance-authority clsx tailwind-merge lucide-react

bun add @tanstack/react-table @tanstack/react-query @hookform/resolvers react-hook-form zod sonner date-fns date-fns-tz exceljs class-variance-authority clsx tailwind-merge lucide-react

Step 2: Install Radix UI Components

pnpm add @radix-ui/react-avatar @radix-ui/react-checkbox @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-icons @radix-ui/react-label @radix-ui/react-popover @radix-ui/react-select @radix-ui/react-separator @radix-ui/react-slot react-day-picker cmdk

Step 3: Create Utility Functions

src/lib/utils.ts

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Step 4: Copy Data Table Components

Clone the repository and copy these directories to your project:

column-header.tsx

data-export.tsx

data-table-resizer.tsx

data-table.tsx

expand-icon.tsx

pagination.tsx

subrow-columns.tsx

toolbar.tsx

view-options.tsx

use-table-column-resize.ts

case-utils.ts

column-sizing.ts

conditional-state.ts

date-format.ts

deep-utils.ts

export-utils.ts

index.ts

keyboard-navigation.ts

search.ts

table-config.ts

table-state-handlers.ts

url-state.ts

Step 5: Install Shadcn UI Components

npx shadcn@latest add alert avatar badge button calendar checkbox command dialog dropdown-menu form input label popover select separator skeleton sonner table

Step 6: Copy Calendar Date Picker

Copy the calendar-date-picker.tsx component from the repository to /components/calendar-date-picker.tsx.

Post-Installation Setup

After installation, set up the required providers and configurations.

1. Set Up React Query Provider

Add React Query provider to your root layout:

src/app/layout.tsx

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { useState } from "react";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const [queryClient] = useState(() => new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 60 * 1000, // 1 minute
        retry: false,
      },
    },
  }));

  return (
    <html lang="en">
      <body>
        <QueryClientProvider client={queryClient}>
          {children}
        </QueryClientProvider>
      </body>
    </html>
  );
}

2. Add Toast Notifications

Include the Sonner toaster component:

src/app/layout.tsx

import { Toaster } from "@/components/ui/sonner";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <QueryClientProvider client={queryClient}>
          {children}
          <Toaster />
        </QueryClientProvider>
      </body>
    </html>
  );
}

3. Verify Tailwind Configuration

Ensure your tailwind.config.ts includes the necessary content paths:

tailwind.config.ts

import type { Config } from "tailwindcss"

const config = {
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
  ],
  // ... rest of config
} satisfies Config

export default config

Package Overview

Here's what each major dependency does:

Package	Purpose
`@tanstack/react-table`	Core table functionality, sorting, filtering
`@tanstack/react-query`	Data fetching, caching, and synchronization
`@hookform/resolvers`	Form validation integration
`react-hook-form`	Form state management
`zod`	Runtime type validation and schemas
`sonner`	Toast notifications
`date-fns`	Date manipulation and formatting
`exceljs`	Excel export functionality
`class-variance-authority`	CSS class utilities
`lucide-react`	Icon library
`react-day-picker`	Date picker component
`cmdk`	Command palette functionality

Verify Installation

Test that everything is installed correctly:

# Run TypeScript check
pnpm typecheck

# Run the development server
pnpm dev

If there are no errors, you're ready to create your first data table!

Troubleshooting

Missing Dependencies

If you see errors about missing packages:

pnpm install

TypeScript Errors

Ensure all @types/* packages are installed:

pnpm add -D @types/node @types/react @types/react-dom

Style Issues

Verify Tailwind CSS is configured correctly and includes all necessary content paths.

Import Errors

Check that your tsconfig.json has the correct path aliases:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Next Steps

Quick Start Guide - Build your first table
File Structure - Understand the organization
Basic Usage - Learn the fundamentals

How is this guide?

Installation

On this page