Shadcn Data Grid
View docsBrowse 29 production-ready shadcn data grid components built on TanStack Table v8 and TanStack Virtual. Covers pagination, sorting, column resizing, drag-and-drop rows and columns, row and column pinning, infinite scroll, CRUD, expandable rows, footer aggregates, and virtualized rendering: fully compatible with Shadcn Create style tokens.
Data grid with pagination
Data grid with cell border
Data grid with dense layout
Data grid without table borders
Data grid with striped rows
Data grid with auto width table layout
Data grid with row selection
Data grid with expandable rows
Data grid with sub table
Data grid with column icons
Data grid with sortable columns
Data grid with movable columns
Data grid with draggable columns
Data grid with draggable rows
Data grid with column resizing
Data grid with pinnable columns
Data grid with sticky header
Data grid with column controls
Data grid with card container
Data grid with column visibility controls
Data grid with loading skeleton
Data grid with CRUD features
Data grid with CRUD in frame container
Data grid with column totals footer
Data grid with summary stats footer
Data grid with per-column aggregate footer
Data grid with local infinite scroll
Data grid with remote infinite scroll
Data grid with row pinning support
Shadcn Data Grid: TanStack Table, Virtual, and DnD
ReUI Data Grid is built on TanStack Table v8 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 29 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 v8 for state management and TanStack Virtual for row and column virtualization. It exposes the full TanStack Table API: columnDef, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, 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 v8 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 v8. Full access to getSortedRowModel, getFilteredRowModel, getPaginationRowModel, getGroupedRowModel, and getCoreRowModel: 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 10+ 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.