Integrating shadcn/ui with Tanstack Table for server-side actions

The inspiration for this project came from the Tasks table component of shadcn/ui. It is built with TanStack/react-table, but it lacks server-side sorting, filtering, and pagination. This project aims to integrate shadcn/ui with TanStack/react-table to provide a robust table component with server-side actions. The project is bootstrapped with create-t3-app.

Tech Stack

This project is built on a robust stack that includes:

• Next.js for the framework, providing server-side rendering and static site generation capabilities.
• Tailwind CSS for styling, offering a utility-first approach to design.
• shadcn/ui for UI components, ensuring a sleek and modern user interface.
• TanStack/react-table for the table package, enabling flexible and extensible tables.
• Neon for the database, offering scalable POSTGRESSQL-compatible databases.
• Drizzle ORM for object-relational mapping, simplifying database interactions.
• Zod for validation, ensuring data integrity through TypeScript-first schema definition.
• million for the optimizing compiler, enhancing performance and efficiency.

Key Features

The integration of shadcn/ui with Tanstack Table boasts several advanced features:

• Server-Side Actions: Pagination, sorting, and filtering are handled server-side, reducing the load on the client and improving performance.
• Customizable Columns: Users can define columns as per their requirements, ensuring flexibility.
• Dynamic Inputs: Search and filters are debounced and faceted, respectively, enhancing the user experience by reducing lag and providing relevant filtering options.
• Advanced Filtering: An optional Notion-like filtering feature allows for complex query building.
• Row selection Actions: Selected rows can trigger actions such as deletion, with an optional floating bar for context-specific operations.
• Reusability: The reusable useDataTable hook can be used to quickly build tables with server-side actions.

Getting Started

To run this project locally:

1. Clone the repository

   git clone https://github.com/sadmann7/shadcn-table
   Copy to clipboard

2. Install dependencies using pnpm

   pnpm install
   Copy to clipboard

3. Copy the .env.example to .env and update the variables.

   cp .env.example .env
   Copy to clipboard

4. Start the development server

   pnpm run dev
   Copy to clipboard

5. Push the database schema

   pnpm run db:push
   Copy to clipboard

Codebase and Deployment

A comprehensive overview of the codebase is available on YouTube.

Follow the deployment guides for Vercel, Netlify, and Docker for more information.

Conclusion

I'm really grateful to Kavin Desi Valli for creating the dynamic filtering function for the table using drizzle-orm. Make sure to check out his YouTube channel for more amazing content on web development.