Development · Web app

tablecn Data Grid

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

Visit tablecn.com ↗

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.

What it's 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
Topic
UI Components
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: 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

    Copy-paste React UI components built with Tailwind CSS and Radix primitives.

  • Efferd

    Pre-built, responsive shadcn/ui blocks and layouts for React applications

  • Motion

    Open-source animation library for React, Vue, and vanilla JavaScript

  • React Bits

    Open-source animated and interactive React UI components and backgrounds

  • 21st.dev

    Curated directory of crafted React, Tailwind, and shadcn UI components.

  • lucide-animated

    Open-source animated React icons built with Lucide and Motion

All 114 in UI Components →

Updated