Data Grid

"use client"

import { useMemo, useState } from "react"

Installation

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

Usage

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

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
})
 
return (
  <DataGrid table={table} recordCount={data.length}>
    <DataGridContainer>
      <DataGridTable />
    </DataGridContainer>
    <DataGridPagination />
  </DataGrid>
)

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"

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.

DataGridTable

The component that renders the actual HTML table. It automatically handles data rendering, loading states (skeletons/spinners), and empty states based on the parent DataGrid configuration.

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.

DataGridTableDndRows

Used for enabling row drag-and-drop reordering.