Tablecn

Overview

tablecn is a data table and filter builder for shadcn/ui, built on TanStack Table, where filters, sorting and pagination are all stored in the URL. Sharing a link, pressing back or reloading returns the same rows, and adding a filter resets to page one in the same navigation.

Every block comes in Radix UI, Base UI and React Aria versions with the same props, so it fits whichever primitive library a project already uses. A single useDataTable hook returns a TanStack table with the URL state, filters and column layout wired in, and the components only need that table. Each piece is copied into the project as a file that can be restyled or rewritten.

Features

• Filter builder: Eight field types, fifteen operators, AND / OR groups and options loaded as the user types.
• URL as state: Filters, sort and page share one URL through one adapter.
• Column layout: Users can drag, pin, resize, hide and color columns, saved in the browser under a storageKey.
• Client or server data: Filter in the browser or send the URL to JSON:API, django-filter, PostgREST or a custom backend.
• Virtualization: 10,000 rows render with about 30 in the DOM, keeping the sticky header and pinned columns.
• Accessibility: Sort, move and resize columns from the keyboard with every step announced, in English and Vietnamese.

Tech stack

• React, shadcn/ui, TanStack Table
• Radix UI, Base UI or React Aria

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @tablecn/component-name