# tablecn Data Grid

> Open-source editable data grid built with shadcn/ui and TanStack Table

tablecn is an open-source React data grid and table collection created by sadmann7. It combines shadcn/ui components with TanStack Table to deliver inline editing, multi-column sorting, keyboard navigation, and multiplayer support out of the box. It solves the tricky implementation details of complex web spreadsheets without requiring paid enterprise libraries.

Website: https://tablecn.com/data-grid

## What it is for

- Build editable admin dashboards and spreadsheet-style interfaces in React or Next.js apps
- Implement multi-column filtering and sorting workflows for internal tools
- Study production-grade TanStack Table and shadcn/ui implementation patterns

## Features

- Inline cell editing with custom inputs like dropdowns and multi-select chips
- Sortable and resizable table columns with type-specific indicators
- Multi-column sorting and filtering controls
- Keyboard navigation and cell selection models
- Find and replace search with highlighted matches and match counts
- Row operations including cell context menus and quick add row footer
- Multiplayer and live collaborative grid variants powered by PartyKit

## Pricing

Open source. Free and open source

## Details

- Type: Web app
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- Open source: yes
- Platforms: Web, Code library
- For: React and Next.js developers building complex data-heavy applications or internal tools.
- Alternative to: AG Grid, Handsontable, MUI X Data Grid
- Tags: react, shadcn ui, datagrid, tanstack table, nextjs, data table

## Why it was saved

- [@sadmann17, 27 October 2025](https://x.com/sadmann17/status/1982818694435655875): A ready-made, polished data-grid implementation to study, fork, or drop into products; covers the hard parts of building tables (sorting, editing, find/replace, selection, context menus).

## Related

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 10 October 2026. Page: https://xiry.app/resources/tablecn-data-grid

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.