Enterprise-Grade Data Table Component with TanStack and Shadcn/ui

This is a highly configurable Advanced Data Table Component that uses Shadcn UI components and TanStack Table to deliver a feature-rich experience. It’s built for applications that require sophisticated data handling and server-side processing.

This component integrates with Hono.js for the backend, Drizzle ORM for database interactions, and PostgreSQL as the database. You can use it to build enterprise-grade interfaces for displaying and managing large datasets.

Features

Use Cases

• Admin Dashboards: Display and manage application data such as users, products, or logs with advanced filtering and sorting.
• E-commerce Platforms: Manage orders, customers, and inventory with server-side processing for large catalogs.
• CRM Systems: Handle contact lists, company information, and sales activities with custom row actions and bulk updates.
• Data Analysis Tools: Present large datasets with options for users to filter, sort, and export specific views for reporting.
• Content Management Systems: Organize and edit articles, pages, or other content types with a flexible table interface.

Installation

Prerequisites:

• Next.js 13+ (App Router)
• React 18+
• TypeScript 5+
• Tailwind CSS
• Shadcn UI components
• Hono.js (for server API)
• Drizzle ORM (for database interaction)
• PostgreSQL (database)

1. Add TanStack Table, React Query, Zod, React Hook Form Resolvers, Sonner (for toasts), and date-fns to your project.

# Using bun
bun add @tanstack/react-table @tanstack/react-query zod @hookform/resolvers sonner date-fns

2. Copy the core data table components (e.g., data-table.tsx, column-header.tsx, pagination.tsx, toolbar.tsx) into your project, typically under a /components/data-table directory.

3. Develop API endpoints using Hono.js to handle fetch, add, delete operations. These endpoints will interact with your PostgreSQL database via Drizzle ORM. Refer to the server implementation details for specific request/response formats.

4. Use Zod to define data schemas for your entities. This aids in type validation for API requests and responses.

5. Create the necessary files for your specific table implementation, including column definitions, row actions, and toolbar customizations.

Basic Usage

1. Create a schema for your data structure and API response.

// src/app/(section)/entity-table/schema/entity-schema.ts
import { z } from "zod";
export const entitySchema = z.object({
id: z.number(),
name: z.string(),
email: z.string().email(),
created_at: z.string(),
});
export type Entity = z.infer<typeof entitySchema>;
export const entitiesResponseSchema = z.object({
success: z.boolean(),
data: z.array(entitySchema),
pagination: z.object({
  page: z.number(),
  limit: z.number(),
  total_pages: z.number(),
  total_items: z.number(),
}),
});

2. Implement a function to fetch data from your Hono.js backend.

// src/api/entity/fetch-entities.ts
// (Example structure, adapt to your Hono.js setup)
import { entitiesResponseSchema } from "@/app/(section)/entity-table/schema";
export async function fetchEntities(params: { /* query params */ }) {
const queryParams = new URLSearchParams(params as any).toString();
const response = await fetch(`/api/entities?${queryParams}`); // Your Hono.js endpoint
if (!response.ok) {
  throw new Error('Failed to fetch entities');
}
const data = await response.json();
return entitiesResponseSchema.parse(data);
}

3. Specify how each column should look and behave.

// src/app/(section)/entity-table/components/columns.tsx
import { ColumnDef } from "@tanstack/react-table";
import { Entity } from "../schema";
import { DataTableColumnHeader } from "@/components/data-table/column-header"; // Core component
export const getColumns = (): ColumnDef<Entity>[] => [
{
  accessorKey: "name",
  header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
},
{
  accessorKey: "email",
  header: ({ column }) => <DataTableColumnHeader column={column} title="Email" />,
},
// ... other columns
];

4. Use the main DataTable component with your configurations.

// src/app/(section)/entity-table/index.tsx
"use client";
import { DataTable } from "@/components/data-table/data-table"; // Core component
import { getColumns } from "./components/columns";
import { useEntitiesData } from "./utils/data-fetching"; // Your React Query hook
import { Entity } from "./schema";
export default function EntityTable() {
return (
  <DataTable<Entity, any>
    getColumns={getColumns}
    fetchDataFn={useEntitiesData} // Your data fetching hook
    idField="id"
    // ... other props like exportConfig, renderToolbarContent, config
  />
);
}

Related Resources

• 📜 TanStack Table (React Table v8): The core library for table logic. Official Documentation
• 🎨 Shadcn UI: A collection of re-usable components built with Radix UI and Tailwind CSS. Website
• ⚡ Hono.js: A small, simple, and ultrafast web framework for the Edge. Official Documentation
• 💧 Drizzle ORM: A TypeScript ORM that talks to SQL databases. Official Documentation
• 🐘 PostgreSQL: A powerful, open source object-relational database system. Official Documentation
• 🔄 React Query (TanStack Query): Data synchronization library for server state. Official Documentation

FAQs

Q: How are server-side operations like pagination and sorting handled?
A: The component sends requests with parameters (page, limit, sort_by, sort_order, search terms) to your backend API (built with Hono.js). The server then queries the PostgreSQL database (using Drizzle ORM) accordingly and returns the paginated, sorted, and filtered data.

Q: Can I customize the appearance of the table?
A: Yes, the table uses Tailwind CSS via Shadcn UI components. You can customize styles by modifying Tailwind classes or overriding component styles. The DataTable component also accepts className props for further styling.

Q: Is it possible to add custom actions to each row or the toolbar?
A: Yes. You define row actions in your columns.tsx file (e.g., an “actions” column with a dropdown menu). For toolbar customization, you use the renderToolbarContent prop on the DataTable component to inject your custom buttons or filters.

Q: How does the component handle large datasets?
A: Performance with large datasets is managed primarily through server-side operations. The client only receives and renders the data for the current view (page), minimizing client-side processing. Consider virtualization for extremely large views if needed.

Q: What is the role of Zod in this component?
A: Zod is used for schema definition and validation. It ensures that data exchanged between the client and server (e.g., API responses, form submissions) conforms to predefined structures and types, improving data integrity.

Preview