Introduction

Try it: search, click a header to sort, go to another page, or click Filter and add a condition like Status is Paid. Then look at the address bar: everything that decides which rows you see is in the URL, so you can reload or share the link and get the same view.

Now drag a header to move it, resize a column, or open Columns to pin, hide or color one. That's the column layout. It's saved in your browser, so it's still there on your next visit.

What is tablecn?Copy Anchor Link

tablecn is the data table every admin panel ends up needing, built on TanStack Table and shadcn/ui:

• A table with search, sorting, pages, row selection, and columns users can arrange.
• A filter builder that lets users combine conditions like Status is Paid and Amount is at least 10.
• One URL that holds the search, the filter, the sort and the page, and a request builder that turns it into what your API expects.

It follows the shadcn/ui way of working:

• The UI is copied into your project by the shadcn CLI, so you can restyle or rewrite any of it. It comes in three versions: Radix UI, Base UI and React Aria.
• The logic is on npm under the @querycn scope: typed, tested, and updated like any dependency.

FeaturesCopy Anchor Link

• Filter builder: 8 field types, 15 operators, AND / OR, and options loaded from your API as users type.
• Search across columns, ignoring case and accents: nguyen finds "Nguyễn".
• Sorting by one or several columns, and pages with a rows-per-page picker.
• Shareable URLs like ?q=nguyen&status__eq=paid&sort=-amount&page=2. Back / Forward work, and a new filter goes back to page 1.
• Client or server data. Give it every row and it does the work in the browser, or give it one page and let it build the request for JSON:API-style APIs, django-filter or PostgREST.
• A layout users own: show, hide, reorder, pin, resize and color columns, saved per table.
• Row selection with a bar for bulk actions, plus loading, empty and error states.
• Inline editing: double-click or press Enter on a cell, save it to your API, and show its errors under the cell.
• Virtualization for pages with thousands of rows.
• Accessible from the keyboard and with screen readers, and translatable (English and Vietnamese included).

How you get itCopy Anchor Link

Two blocks from the shadcn registry, data-table and filter-builder, copy the UI into your project. They bring the logic along as npm packages under @querycn, so one command installs everything. See Installation, and Packages for what each one does.

Next stepsCopy Anchor Link