Shadcn Data Grid
Browse 34 production-ready shadcn data grid components built on TanStack Table v9 and TanStack Virtual. Sorting, filtering, pagination, pinning, column resizing, drag and drop, tree rows, CRUD, infinite scroll, row and column virtualization, spreadsheet cell selection with clipboard and inline editing, and localized labels through one i18n prop.
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
When to use
- Admin and back office tables that sort, filter, paginate and select rows
- Spreadsheet style editing with cell selection, clipboard and inline edits
- Large record sets that need virtualized rows, columns or infinite scroll
When not to use
- A short static list of rows with no sorting or paging: use the Table component
- Records moved as cards between status columns: use the Kanban component
- A folder or category hierarchy with no columns of data: use the Tree component
Agent notes
- With
manualPagination, pass the server total touseTableasrowCountas well asrecordCount, or the page buttons never render - Give
useTablea stablegetRowIdwhenever rows can be pinned, reordered or virtualized - Swap
DataGridTableforDataGridTableVirtualwhen rows need virtualization or infinite scroll
Third-party API docs
- TanStack Table v9: API reference, docs
- TanStack Virtual v3: API reference, docs
- dnd kit v6: API reference, docs (these are the Legacy docs; dndkit.com's default docs cover the newer @dnd-kit/react, a different API)
- Base UI v1: API reference, docs, llms.txt
- Sonner v2: API reference, docs, used by 4 of 34 examples
- date-fns v4: docs, used by 1 of 34 examples
- React DayPicker v9: API reference, docs, used by 1 of 34 examples
- Class Variance Authority: API reference, docs, used by 1 of 34 examples
https://web.dev.reui.io/components/data-grid.mdget_component("data-grid")npx shadcn@latest add @reui/data-gridShadcn Data Grid: TanStack Table, Virtual, and DnD
ReUI Data Grid is built on TanStack Table v9 and TanStack Virtual: the headless table and virtualization engines trusted by thousands of production React apps. It handles sorting, filtering, pagination, column sizing, pinning, selection, grouping, and virtual row rendering without dictating markup.
Components cover 34 real layouts including drag-and-drop rows and columns via @dnd-kit, local and remote infinite scroll, CRUD with Sonner feedback, expandable rows, sub-tables, footer aggregates, and dense or borderless visual variants.
ReUI shows every data grid component inside realistic dashboards and frame containers so you can evaluate density, sticky headers, and column controls next to real chrome: not an isolated sandbox. The sections below cover architecture, features, and integration guidance.
What is Shadcn Data Grid?
ReUI Data Grid is a custom shadcn component built on TanStack Table v9 for state management and TanStack Virtual for row and column virtualization. It exposes the full TanStack Table API: columnDef, the dataGridFeatures bundle, createSortedRowModel, createFilteredRowModel, createPaginatedRowModel, and more: while wrapping the markup in Tailwind-styled, accessible table primitives that follow shadcn conventions.
Components range from simple paginated lists to full CRUD interfaces with drag-and-drop column reordering via @dnd-kit/sortable, pinned rows and columns, expandable sub-tables, aggregate footers, loading skeletons, and both local and server-driven infinite scroll. Every layout is shown inside a realistic frame or dashboard container so you judge composition in context.
Why Use Shadcn Data Grid?
Admin panels, analytics dashboards, CRM tables, audit logs, and billing history all need a table that scales with data. TanStack Table v9 handles thousands of rows without re-rendering the entire DOM: TanStack Virtual extends that to tens of thousands by only mounting visible rows. Together they let you ship a fast, accessible table without building sort state, filter logic, or pagination from scratch.
The DnD Kit integration adds drag-and-drop column reordering and row reordering that works with keyboard and pointer devices. Pair with Shadcn Filters for faceted search, Shadcn Pagination for standalone controls, and Sonner for async feedback on CRUD operations.
Libraries and ReUI Data Grid Primitives
ReUI Data Grid imports @tanstack/react-table for the headless table engine, @tanstack/react-virtual for row virtualization, @dnd-kit/core and @dnd-kit/sortable for drag-and-drop, and Sonner for toast feedback. class-variance-authority handles variant styling across dense, bordered, striped, and borderless layouts.
The ScrollArea primitive wraps the table for overflow control. Frame containers group data grid components with toolbars, filter bars, and pagination into shippable dashboard blocks rather than bare table demos.
Shadcn Data Grid Features
- TanStack Table Core. Powered by TanStack Table v9. Full access to createSortedRowModel, createFilteredRowModel, createPaginatedRowModel, and the rest of the dataGridFeatures bundle: headless, typed, and framework-agnostic state.
- TanStack Virtual Row Virtualization. TanStack Virtual renders only visible rows in the DOM. Handles tens of thousands of rows without layout shift, supports overscan, and works with both fixed and dynamic row heights.
- Drag and Drop Rows and Columns. Built on @dnd-kit/core and @dnd-kit/sortable. Reorder rows or move columns with pointer and keyboard. Drag overlays prevent layout jump during active drags.
- Column Pinning. Pin columns to the left or right so identity columns (name, ID) and action columns (edit, delete) stay visible while users scroll wide datasets horizontally.
- Row Pinning. Sticky row support keeps summary rows, totals, or selected records fixed at the top or bottom of the visible viewport across scroll.
- Column Resizing. Drag column edges to resize width. Respects min and max constraints and persists across re-renders through TanStack Table column sizing state.
- Sortable Columns. Click-to-sort with multi-column sort support, directional indicators, and controlled or uncontrolled sort state. Integrates cleanly with server-side sort APIs via manualSorting.
- Column Visibility Controls. Show or hide columns at runtime via a dropdown panel. State is serializable for URL persistence with nuqs or localStorage, enabling shareable filtered views.
- Pagination and Infinite Scroll. Switch between client-side pagination, local infinite scroll, and remote infinite scroll. The remote component integrates with SWR, React Query, or Next.js Server Actions for cursor-based APIs.
- Row Selection and CRUD. Single and multi-row selection with indeterminate checkbox states. Full CRUD components with inline editing, confirm dialogs, row action menus, and Sonner toast feedback for async save and delete.
- Expandable Rows and Sub-Tables. Expand rows to reveal nested detail panels or full sub-tables: useful for order lines, log entries, invoice items, or hierarchical entity relationships.
- Footer Aggregates. Column totals, summary stats, and per-column aggregate footers for financial tables, inventory dashboards, and reporting views.
- Loading Skeleton. Column-aware skeleton state renders placeholder rows while data loads. Matches real row density to prevent layout shift and signal correct table structure before data arrives.
- Dense, Striped, and Borderless Layouts. Variant system built with class-variance-authority. Switch between default, dense, borderless, striped, and card-container layouts to match audit logs, dashboards, or data-heavy admin views.
- Sticky Header. Header row stays visible as users scroll through long datasets. Works with column pinning and column visibility controls for maximum navigability in wide tables.
ReUI Data Grid: In-House Custom Shadcn Component
ReUI Data Grid is an in-house component built and maintained by the ReUI team as part of the ReUI open-source library. It is designed to integrate seamlessly into any shadcn/ui project: following the same copy-and-own installation model. The component source lands directly in your repository; you own it, extend it, and style it with your Tailwind CSS tokens. ReUI Data Grid is a comprehensive custom component not available in base shadcn/ui. It is built on @tanstack/react-table for headless table state, @tanstack/react-virtual for row virtualization, and @dnd-kit/core with @dnd-kit/sortable for accessible drag-and-drop. The component ships as 10 composable sub-files covering the table, DnD rows, DnD columns, virtual table, scroll area, column header, column filter, column visibility, and pagination: each independently importable.
The component is available in two API flavors to match your primitive stack: a Radix UI version for teams using Radix-based shadcn primitives, and a Base UI version for teams on @base-ui/react. Both versions share identical visual output and Tailwind CSS styling: only the underlying headless primitive differs. ReUI maintains 22 such in-house components, all available in both Radix and Base UI versions, each with dedicated documentation covering the full component API, usage examples, and prop references.
Integrating With Other Components
Pair data grid with Shadcn Filters to add a faceted filter panel above the table. Filters integrates with TanStack Table's column filter API and supports URL state via nuqs, so users can share filtered views.
Use Shadcn Pagination as a standalone control below the table when you need custom pagination UI beyond the built-in component, and Shadcn Select for page-size pickers. Shadcn Button and Shadcn Dropdown Menu wire naturally into row action columns.
Wrap data grid in a Shadcn Frame to get a toolbar, filter bar, and pagination row as a single shippable dashboard block. Use Shadcn Sonner for CRUD feedback and Shadcn Skeleton or the built-in loading skeleton for data fetch states.
Data Grid Blocks in ReUI Pro
The free data grid examples above cover focused, single purpose patterns. ReUI Pro extends them with 47 production ready data grid blocks, complete sections that compose the same primitives into full screens. Browse them by category:
- Base (8 blocks)Complete table screens with toolbar filters and pagination for CRM, support, team, project, and pricing data.
- Advanced (8 blocks)Analytics grids with in-cell charts, KPI rollups, a tree view and an SLO chart, plus a review queue, a stock mix sheet, a pro forma and a visit planner.
- Columns (5 blocks)Column visibility, pinning, resizing, density, and settings controls.
- Drag & Drop (4 blocks)Drag-and-drop row and column reordering with sortable handles.
- Editing (6 blocks)Inline create, edit, and delete cells for full CRUD workflows.
- Expansion (3 blocks)Expandable parent rows with nested sub-rows and master-detail panels.
- Filtering (4 blocks)Search, faceted filters, filter builders, and status tab toolbars.
- Grouping (7 blocks)Rows grouped into banded sections with stage and category headers.
- Virtualization (2 blocks)Virtualized rendering for large datasets with smooth scrolling.
Frequently Asked Questions
Does ReUI Data Grid support TanStack Virtual?
Which table library does ReUI Data Grid use?
Can I drag and drop columns and rows in the data grid?
How does infinite scroll work with a remote API?
Can I pin rows and columns at the same time?
How do I persist column visibility and sort state in the URL?
Does data grid work with Next.js App Router and Server Actions?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.