TableCN is a Next.js project that demonstrates the creation of a customizable table component using Tanstack Table v8. It showcases advanced features like sorting, filtering, and pagination, all implemented with a clean and modern UI using Tailwind CSS and Radix UI primitives.

Pros

• Implements a highly customizable and feature-rich table component
• Uses modern technologies like Next.js, Tanstack Table v8, and Tailwind CSS
• Provides a clean and accessible UI with Radix UI primitives
• Demonstrates best practices for state management and component architecture

Cons

• Limited documentation for customization and advanced usage
• May have a steeper learning curve for developers unfamiliar with Tanstack Table
• Requires understanding of multiple libraries and frameworks
• Not a standalone library, but rather a project showcase

Code Examples

1. Basic table setup:

import { useReactTable, getCoreRowModel } from "@tanstack/react-table";

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
});

2. Adding sorting functionality:

import { getSortedRowModel } from "@tanstack/react-table";

const table = useReactTable({
  // ... other options
  getSortedRowModel: getSortedRowModel(),
});

3. Implementing pagination:

import { getPaginationRowModel } from "@tanstack/react-table";

const table = useReactTable({
  // ... other options
  getPaginationRowModel: getPaginationRowModel(),
});

Getting Started

To use this project as a reference or starting point:

1. Clone the repository:

   git clone https://github.com/sadmann7/tablecn.git
   

2. Install dependencies:

   cd tablecn
   npm install
   

3. Run the development server:

   npm run dev
   

4. Open http://localhost:3000 in your browser to see the table component in action.