Shadcn Data Grid

"use client"

import { useMemo, useState } from "react"

The current data-grid package ships the shared grid context, table renderers, pagination, column controls, drag-and-drop helpers, virtualization, infinite scroll, footer helpers, and row-pinning support. Footer components (DataGridTableFoot, DataGridTableFootRow, DataGridTableFootRowCell) and the DataGridTableRowPin toggle are exported from data-grid-table.tsx.

In the base build, data-grid-scroll-area.tsx is also included and exports DataGridScrollArea for dedicated scroll handling around sticky-header or wide tables.

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @reui/data-grid
Copy

Usage

import {
  DataGrid,
  DataGridContainer,
  DataGridPagination,
  DataGridTable,
  DataGridTableFootRow,
  DataGridTableFootRowCell,
} from "@/components/reui/data-grid"

const footer = (
  <DataGridTableFootRow>
    <DataGridTableFootRowCell colSpan={columns.length}>
      Showing {data.length} rows
    </DataGridTableFootRowCell>
  </DataGridTableFootRow>
)
 
const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
})
 
return (
  <DataGrid
    table={table}
    recordCount={data.length}
    tableLayout={{ rowsPinnable: true }}
  >
    <DataGridContainer>
      <DataGridTable footerContent={footer} />
    </DataGridContainer>
    <DataGridPagination />
  </DataGrid>
)

Use DataGridTableRowPin inside a column definition to let users pin rows, swap in DataGridTableVirtual when you need virtualization or infinite scroll, and wrap sticky-header tables with DataGridScrollArea when you want the dedicated base scroll wrapper. When rows can be pinned or virtualized, provide a stable getRowId so row identity stays intact across reordering.

Examples

Cell Border

"use client"

import { useMemo, useState } from "react"

Dense Table

"use client"

import { useMemo, useState } from "react"

Light Table

"use client"

import { useMemo, useState } from "react"

Striped Table

"use client"

import { useMemo, useState } from "react"

Auto Width

"use client"

import { useMemo, useState } from "react"

Row Selection

"use client"

import { useEffect, useMemo, useState } from "react"

Expandable Row

"use client"

import { useMemo, useState } from "react"

Sub Data Grid

"use client"

import { useMemo, useState } from "react"

Column Icons

"use client"

import { useMemo, useState } from "react"

Sortable Columns

"use client"

import { useMemo, useState } from "react"

Movable Columns

"use client"

import { useMemo, useState } from "react"

Draggable Columns

"use client"

import { useMemo, useState } from "react"

Draggable Rows

"use client"

import { useMemo, useState } from "react"

Resizable Columns

"use client"

import { useMemo, useState } from "react"

Pinnable Columns

"use client"

import { useMemo, useState } from "react"

Sticky Header

"use client"

import { useMemo, useState } from "react"

Column Controls

"use client"

import { useMemo, useState } from "react"

Card Container

"use client"

import { useMemo, useState } from "react"

Column Visibility

"use client"

import { useMemo, useState } from "react"

Loading Skeleton

"use client"

import { useMemo, useState } from "react"

CRUD

"use client"

import { useMemo, useState } from "react"

CRUD in Frame

"use client"

import { useMemo, useState } from "react"

Footer Totals

"use client"

import { useMemo, useState } from "react"

Footer Summary

"use client"

import { useMemo, useState } from "react"

Footer Aggregates

"use client"

import { useMemo, useState } from "react"

Infinite Scroll (Local)

"use client"

import { useMemo, useState } from "react"

Infinite Scroll (Remote)

"use client"

import { useCallback, useEffect, useMemo, useRef, useState } from "react"

Row Pinning

"use client"

import { useMemo, useState } from "react"

API Reference

DataGrid

The root component that provides the table context.

DataGridTableLayout

Configuration object for the table's behavior and appearance.

DataGridTableClassNames

Custom CSS classes for different parts of the table.

DataGridContainer

A scrollable container for the table.

DataGridScrollArea

Dedicated scroll wrapper for wide grids and sticky headers.

DataGridTable

The component that renders the actual HTML table. It automatically handles data rendering, loading states (skeletons/spinners), empty states, footer rows, and pinned rows when rowsPinnable is enabled on the parent DataGrid.

DataGridPagination

The component for table pagination controls.

DataGridColumnHeader

A flexible column header component with built-in support for sorting, pinning, and moving columns.

DataGridColumnFilter

A popover-based multi-select filter for columns.

DataGridColumnVisibility

A dropdown component to toggle column visibility.

DataGridTableDnd

Used for enabling column drag-and-drop reordering with optional footer rendering.

DataGridTableDndRows

Used for enabling row drag-and-drop reordering with optional footer rendering.

DataGridTableVirtual

A virtualized table renderer using @tanstack/react-virtual for row virtualization, infinite scroll, optional footer rows, and pinned rows when rowsPinnable is enabled. The wrapper manages row count and the scroll element for you, while virtualizerOptions lets you customize the underlying TanStack Virtual instance.

DataGridTableRowPin

A pin/unpin toggle button for use in column definitions to enable row pinning.

DataGridTableFoot

Wrapper component for the table footer (<tfoot>).

DataGridTableFootRow

A row inside the table footer.

DataGridTableFootRowCell

A cell inside a footer row.