Integration Manual

How to Integrate TanStack Table & Shadcn UI

Learn how to scaffold your custom data table component files, install required dependencies, and implement sorting, filters, and row selection in 5 minutes.

Step 1: Install Package Dependencies

First, make sure you have the core packages for TanStack Table, Lucide Icons, and standard Radix components installed in your project:

# Core libraries
npm install @tanstack/react-table lucide-react

# Shadcn Table CLI components
npx shadcn@latest add table dropdown-menu checkbox button input

Step 2: Add columns.tsx File

Create a file named columns.tsx inside your features or components folder (e.g. components/columns.tsx) and paste the code from the generator's columns.tsx tab.

This file defines your TypeScript types and sets up column cells, custom currency layout formatters, date representations, and action lists.

Step 3: Create the data-table.tsx Shell Component

Next, create data-table.tsx. This component receives the column schemas and data arrays and sets up states for sorting, global search queries, and row checkbox selection. Paste the code from the data-table.tsx tab.

Import Directory Warning Ensure all UI components (e.g. Checkbox, Input, Button) are imported from the correct shadcn folder paths, typically mapped under aliases like @/components/ui/.... If your structure uses a different directory, adjust the imports.

Step 4: Load Data & Render Page

Finally, create your router or page (e.g., Next.js App Router app/page.tsx) and render the DataTable. Paste the code structure from the page.tsx tab.

import { columns } from "./columns";
import { DataTable } from "./data-table";

// ... Inside your page rendering:
return <DataTable columns={columns} data={yourDataArray} />;

Frequently Asked Questions

Can I feed server-side sorted or paginated data into this table?

Yes! The generated table uses client-side sorting and filtering by default. For large databases (10,000+ entries), you can easily transition to server-side query parameters by binding TanStack state handlers (`onSortingChange`, `onPaginationChange`) to React states that reload server props.

How do I customize the search filter property?

In data-table.tsx, look for the column ID specified in the table.getColumn("...") filter call. You can change this to search across names, descriptions, or ticket titles as desired.