tablecn is an open-source data table component for shadcn/ui, built on TanStack Table, with advanced filtering capabilities available.

Problems Solved

Almost every admin panel has to recreate the same list page: table, search box, filters, pagination. Then users ask: "Can you send me the link to this exact screen?". With tablecn, everything that determines which row is displayed is in the URL, for example ?q=nguyen&status__eq=paid&sort=-amount&page=2. Reloading the page, sharing the link, or clicking Back keeps that screen intact.

Main Features

- The filters read like a sentence: "Status is Paid and Amount from 10 to 50". There are 8 field types, 15 operators, AND / OR, and an option to load from the API while typing.

- Data can be on the client or server: filter directly in the browser, or convert the URL into parameters for the backend (JSON:API, Django REST framework, PostgREST).

- Users can sort columns themselves: drag to reorder, pin, resize, hide, color, and have it saved.

- Edit directly in the cell: double-click to edit, save via API, and receive error messages right below the cell.

- Virtualization for thousands of rows, support for RTL, and usable with keyboard and screen readers.

Who Should Use It

React / Next.js developers using shadcn/ui to create admin pages, dashboards, CRMs, ERPs, or internal tools with many lists that need filtering and sharing.

Getting Started

Platform: web (React 18/19; Next.js App Router, Vite or react-router; Tailwind CSS v4). Install with a single command:

npx shadcn@latest add @tablecn/data-table @tablecn/filter-builder

Then declare the columns and filter fields according to the instructions at https://table-cn.vercel.app/docs.

Key Differences

- Unlike packaged table libraries: the interface code is copied directly into the project (as per shadcn/ui), giving you full rights to modify. The logic part is an npm package with TypeScript types.

- There are fully 3 versions: Radix UI, Base UI, and React Aria.