Data grid 0.1 · TanStack Table v9 · shadcn/ui on Base UI · MIT
The data grid your power users keep asking for.
Sorting, faceted filters, grouping, 50,000 virtualized rows, inline editing, keyboard ranges and clipboard, saved views. Typed end to end. One command copies the source into your project, so the code is yours.
npx shadcn@latest add @kadal/data-grid Live. Sort, filter, group, drag a column, double-click a cell, press ⌘C.
Every feature, documented →| Yuki Khan | yuki.khan@mail.test | Churned | Team | Growth | Director | $0.00 | 21 | 74.6% | Sep 2, 2023 | May 5, 2025, 10:52 PM | nps-9 | Japan | — | |||
| Mateo Rossi | mateo.rossi@corp.example | Invited | Free | Platform | PM | $0.00 | 1 | 6.2% | Oct 21, 2024 | Jul 7, 2026, 9:33 PM | — | Germany | Renewal in Q1. | |||
| Aarav Sharma | aarav.sharma@example.com | Churned | Pro | Support | Lead | $0.00 | 2 | 24.5% | Feb 6, 2026 | May 4, 2026, 8:56 PM | — | France | — | |||
| Vihaan Tanaka | vihaan.tanaka@corp.example | Churned | Pro | Finance | Manager | $0.00 | 2 | 92.8% | Oct 14, 2023 | Aug 27, 2024, 3:51 AM | — | India | Renewal in Q1. | |||
| Mia Menon | mia.menon@example.com | Active | Free | Finance | Director | $0.00 | 1 | 27.8% | May 19, 2024 | Jul 27, 2025, 2:01 PM | nps-9 | Canada | — | |||
| Mateo Nguyen | mateo.nguyen@corp.example | Active | Enterprise | Design | Manager | $2,449.00 | 31 | 29.5% | Feb 27, 2025 | Sep 15, 2026, 11:14 AM | apac | Brazil | Speaks at meetups. | |||
| Theo Silva | theo.silva@team.dev | Active | Pro | Research | Engineer | $36.00 | 3 | 47.5% | Feb 19, 2024 | May 29, 2024, 11:16 AM | — | Australia | — | |||
| Theo Sharma | theo.sharma@example.com | Paused | Team | Finance | Director | $406.00 | 14 | 32.6% | Nov 9, 2023 | Feb 2, 2025, 6:06 PM | apac | Canada | — | |||
| Diya Silva | diya.silva@corp.example | Active | Free | Data | Designer | $0.00 | 1 | 4.7% | Oct 29, 2025 | Jun 23, 2026, 7:48 AM | churn-riskeu | Canada | Asked about invoices. | |||
| Saanvi Patel | saanvi.patel@corp.example | Active | Free | Design | Analyst | $0.00 | 1 | 43.4% | Oct 23, 2026 | Oct 31, 2026, 5:04 AM | vip | Brazil | — |
How it ships
Not a dependency. Your code.
Kadal UI is a shadcn registry.
The command above copies twenty-one TypeScript files into components/ui/data-grid/,
pulls the shadcn primitives it uses, and adds TanStack Table and TanStack Virtual to your package.json. From then on it is
your component: rename a label, swap an icon, delete a feature, add a column kind. Updates arrive as a diff you review, not a
version bump you hope for.
- React 19, TypeScript 7, Tailwind v4
- shadcn/ui on Base UI, the new default
- TanStack Table v9: tree-shaken features, store-based state
- Works with Next.js, Vite, Astro, Remix, TanStack Start
-
kadal-ui diffshows what changed upstream - MIT, no licence keys, no enterprise tier
$ npx shadcn@latest add @kadal/data-grid
✔ Checking registry.
✔ Installing dependencies.
@tanstack/react-table@^9.3.1 @tanstack/react-virtual@^3.14.26
@dnd-kit/react@^0.5.3 lucide-react
✔ Created 34 files:
src/components/ui/data-grid/data-grid.tsx
src/components/ui/data-grid/use-data-grid.tsx
src/components/ui/data-grid/data-grid-columns.tsx
src/components/ui/data-grid/data-grid-filters.tsx
…
src/components/ui/button.tsx src/components/ui/popover.tsx
src/components/ui/select.tsx src/components/ui/tooltip.tsx
Docs: https://ui.kadal.cc/docs/data-grid/What you get
Everything a grid needs on day one. Each one a page in the docs.
- Typed columns A column builder that knows your row type: keys, values, editors and formats all typed.
- Sorting Click to sort, shift-click to add a second key, each key numbered in the header.
- Filters by type Facets with counts, text operators, number and date ranges, booleans, chips to clear.
- Fuzzy search One box over every column, ranked so the best matches come first.
- 50,000 rows Virtualized rows with the sticky header and pinning intact, or a pager when you'd rather.
- Selection and bulk actions Checkboxes, shift-click ranges, select all on the page, and a bar for what happens next.
- Pin, reorder, resize Pin columns to either end, drag headers into place, drag edges or double-click to fit.
- Group and aggregate Group by any column; sums, means, counts and ranges in the group rows, formatted like the column.
- Tree data Nested rows with an expander column, indentation and selection that follows the tree.
- Inline editing Enter or double-click to edit; text, number, select, checkbox, date and textarea editors; validation.
- Keyboard and clipboard Arrow keys, Home/End, PageUp/Down, Shift to extend a range, ⌘A, ⌘C as tab-separated text.
- Export CSV and JSON of what's on screen, or the selected rows, with the values as you see them.
- Saved views and URL state The user's columns, sort and density remembered; filters and the page shareable in the URL.
- Server-side ready Hand it a page and a row count; sort and filter state comes back for your query.
- Accessible A real grid: roles, aria-sort, roving focus, live announcements, 40 px targets on touch.
- Yours to change Every label translatable, every part composable, every file in your repo. No prop-drilling into a black box.
const col = createDataGridColumns<Order>()
export const columns = col.columns([
col.select(),
col.text("customer", { header: "Customer", editable: true }),
col.enum("status", { options: STATUS, editable: true }),
col.currency("total", { currency: "EUR" }),
col.percent("margin"),
col.date("placedAt", { header: "Placed" }),
col.tags("labels"),
col.actions(({ row }) => <OrderMenu order={row.original} />),
])
<DataGrid data={orders} columns={columns}
onCellEdit={({ row, columnId, value }) => save(row.id, columnId, value)} />Type safety
Columns that know your rows.
col.currency("total") only accepts a key of
Order, including nested paths. Its
format, validate and
onEdit see a number.
The kind picks the sort function, the filter UI, the editor, the aggregation and the export format, so most columns are one line
and none of them need a global type augmentation. Under it all is TanStack Table v9's feature-typed API: every method on the
table instance exists because its feature is registered.
Built for the keyboard
Spreadsheet hands welcome.
Click a cell and it's focused. Drag or hold Shift and you have a range. Press ⌘C and the range lands in a spreadsheet as tab-separated text, formatted the way the grid shows it. Every action the mouse can take has a key, and a screen reader hears what changed.
All the shortcuts- ↑ ↓ ← →
- Move the focused cell
- Shift + arrows
- Extend the selection
- Home / End
- First / last column
- ⌘ Home / ⌘ End
- First / last row
- PageUp / PageDown
- A screen at a time
- Enter / F2
- Edit the cell
- Space
- Select the row
- ⌘ A
- Select every cell
- ⌘ C
- Copy as tab-separated text
- Esc
- Clear the selection
Free, and funded by you
MIT for everyone. Sponsors keep the issues answered.
There is no paid tier of Kadal UI and there won't be one. Sponsorships pay for time on bugs, docs, new components and the features you ask for, and put your name or logo in the README and on this site. Companies can pay by invoice.
Add it to your project now.
Five minutes from install to a grid with your data. Questions go to Discussions or the Discord; bugs and ideas have templates.
npx shadcn@latest add @kadal/data-grid