---
name: "@tablecn"
slug: "tablecn"
description: "Data table and filter builder blocks with search, sorting, pagination and URL-synced filters. Built for Radix UI, Base UI and React Aria."
category: "Blocks & sections (marketing/SaaS)"
tags: ["accessibility", "blocks", "navigation", "tables"]
framework: "react"
license: "MIT"
author: "minhduoc-tran"
website: "https://table-cn.vercel.app"
github: "https://github.com/minhduoc-tran/tablecn"
registry: "https://table-cn.vercel.app/r/registry/registry.json"
pro: false
pro_url: null
github_stars: 21
component_count: 2
generated_at: "2026-10-10T06:32:55.998Z"
---

# @tablecn

Data table and filter builder blocks with search, sorting, pagination and URL-synced filters. Built for Radix UI, Base UI and React Aria.

## Links

- Website: https://table-cn.vercel.app
- GitHub: https://github.com/minhduoc-tran/tablecn
- Registry JSON: https://table-cn.vercel.app/r/registry/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/tablecn
- This file: https://sh4dcn.vercel.app/md/tablecn.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://table-cn.vercel.app/r/registry/registry.json
pnpm dlx shadcn@latest add https://table-cn.vercel.app/r/registry/registry.json
bunx shadcn@latest add https://table-cn.vercel.app/r/registry/registry.json
# clone the source repo
git clone https://github.com/minhduoc-tran/tablecn.git
# fetch the raw registry index
curl -s https://table-cn.vercel.app/r/registry/registry.json
```

## Components (2)

| name | type | description | install |
| --- | --- | --- | --- |
| filter-builder | registry:block | A filter builder for data tables: field, operator and value rows applied to the URL, built on @querycn/filter-react. | `npx shadcn@latest add https://table-cn.vercel.app/r/{style}/filter-builder.json` |
| data-table | registry:block | A data table on TanStack Table v9: sorting and pages in the URL, a saved column layout, row selection and inline editing, built on @querycn/table-react. | `npx shadcn@latest add https://table-cn.vercel.app/r/{style}/data-table.json` |

## For AI agents

```text
You are adding components from @tablecn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/tablecn.md) for the component list.
2. Fetch the machine-readable index: https://table-cn.vercel.app/r/registry/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: tablecn).
```