ReUI
Components

Data Grid

A powerful data grid component built on top of TanStack Table v8 with features like sorting, filtering, pagination, and drag & drop support.

@tanstack/react-table@dnd-kit/core

Installation

pnpm dlx shadcn@latest add https://reui.io/r/data-grid.json

Examples

Default

Loading

Cell Border

Loading

Dense Table

Loading

Light

Loading

Striped

Loading

Auto Width

Loading

Row Selection

Loading

Expandable Row

Loading

Column Icons

Loading

Sortable Columns

Loading

Movable Columns

Loading

Draggable Columns

Loading

Draggable Rows

Loading

Resizable Columns

Loading

Pinnable Columns

Loading

Sticky Header

Loading

Column Controls

Loading

Card Container

Loading

Column Visibility

Loading Skeleton

Loading

CRUD

Loading

API Reference

This section provides a comprehensive overview of the data grid components, detailing their custom props and linking to relevant documentation.

DataGrid

This component is based on the DataGrid from TanStack Table and includes the following custom props:

PropTypeDefault
className string
table Table<TData>
recordCount number
children ReactNode
onRowClick (row: TData) => void
isLoading booleanfalse
loadingMode enum skeleton
loadingMessage ReactNode | string
emptyMessage ReactNode | string"No data available"
tableLayout objectSee below
tableClassNames objectSee below

Table Layout Props - tableLayout

PropTypeDefault
dense booleanfalse
cellBorder booleanfalse
rowBorder booleantrue
rowRounded booleanfalse
stripped booleanfalse
headerBackground booleantrue
headerBorder booleantrue
headerSticky booleanfalse
width 'auto' | 'fixed''fixed'
layout object'fixed'
columnsVisibility booleanfalse
columnsResizable booleanfalse
columnsPinnable booleanfalse
columnsMovable booleanfalse
columnsDraggable booleanfalse
rowsDraggable booleanfalse

Table Class Names - tableClassNames

PropTypeDefault
base string
header string
headerRow string
headerSticky string"sticky top-0 z-10 bg-background/90 backdrop-blur-xs"
body string
bodyRow string
footer string
edgeCell string

DataGridColumnFilter

This component provides filtering capabilities for data grid columns. It utilizes TanStack Table Columns for column management and filtering.

PropTypeDefault
column Column<TData, TValue>
title string
options Array

DataGridColumnHeader

This component provides a header for data grid columns, including sorting and pinning controls. It is built on top of TanStack Table Header for efficient data management.

PropTypeDefault
column Column<TData, TValue>
title string
icon ReactNode
filter ReactNode

DataGridColumnVisibility

This component provides controls for toggling the visibility of data grid columns. It utilizes TanStack Table Column Visibility for managing column visibility.

PropTypeDefault
table Table<TData>
trigger ReactNode

DataGridPagination

This component provides pagination controls for the data grid. It is built on top of TanStack Table Pagination for efficient data management.

PropTypeDefault
sizes number[][5, 10, 25, 50, 100]
sizesLabel string"Show"
info string"{from} - {to} of {count}"

DataGridTableDnd

This component provides drag-and-drop functionality for data grid rows and columns using Dnd Kit.

PropTypeDefault
handleDragEnd (event: DragEndEvent) => void

DataGridTable

This component provides the table structure for the data grid, including headers, rows, and cells. It is built on top of TanStack Table for efficient data management.

PropTypeDefault
children ReactNode

ColumnMeta Interface

This interface is used to define custom metadata for columns in the data grid. It is built on top of ColumnMeta.

PropTypeDefault
headerTitle string
headerClassName string
cellClassName string
skeleton ReactNode
expandedContent (row: TData) => ReactNode
PreviouseComboboxNextDate Picker