Data Grid
A powerful data grid component built on top of TanStack Table v8 with features like sorting, filtering, pagination, and drag & drop support.
Installation
pnpm dlx shadcn@latest add @toui/data-grid
Examples
Cell Border
Dense Table
Light
Striped
Auto Width
Row Selection
Expandable Row
Sub Data Grid
Column Icons
Sortable Columns
Movable Columns
Draggable Columns
Draggable Rows
Resizable Columns
Pinnable Columns
Sticky Header
Column Controls
Card Container
Column Visibility
Loading Skeleton
CRUD
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:
| Prop | Type | Default |
|---|---|---|
className | ||
table | ||
recordCount | ||
children | ||
onRowClick | ||
isLoading | ||
loadingMode | ||
loadingMessage | ||
emptyMessage | ||
tableLayout | See below | |
tableClassNames | See below |
Table Layout Props - tableLayout
| Prop | Type | Default |
|---|---|---|
dense | ||
cellBorder | ||
rowBorder | ||
rowRounded | ||
stripped | ||
headerBackground | ||
headerBorder | ||
headerSticky | ||
width | ||
layout | object | |
columnsVisibility | ||
columnsResizable | ||
columnsPinnable | ||
columnsMovable | ||
columnsDraggable | ||
rowsDraggable |
Table Class Names - tableClassNames
| Prop | Type | Default |
|---|---|---|
base | ||
header | ||
headerRow | ||
headerSticky | ||
body | ||
bodyRow | ||
footer | ||
edgeCell |
DataGridColumnFilter
This component provides filtering capabilities for data grid columns. It utilizes TanStack Table Columns for column management and filtering.
| Prop | Type | Default |
|---|---|---|
column | ||
title | ||
options |
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.
| Prop | Type | Default |
|---|---|---|
column | ||
title | ||
icon | ||
filter |
DataGridColumnVisibility
This component provides controls for toggling the visibility of data grid columns. It utilizes TanStack Table Column Visibility for managing column visibility.
| Prop | Type | Default |
|---|---|---|
table | ||
trigger |
DataGridPagination
This component provides pagination controls for the data grid. It is built on top of TanStack Table Pagination for efficient data management.
| Prop | Type | Default |
|---|---|---|
sizes | ||
sizesLabel | ||
sizesDescription | ||
sizesInfo | ||
sizesSkeleton | ||
more | ||
moreLimit | ||
info | ||
infoSkeleton | ||
className | ||
rowsPerPageLabel | ||
previousPageLabel | ||
nextPageLabel | ||
ellipsisText |
DataGridTableDnd
This component provides drag-and-drop functionality for data grid rows and columns using Dnd Kit.
| Prop | Type | Default |
|---|---|---|
handleDragEnd |
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.
| Prop | Type | Default |
|---|---|---|
children |
ColumnMeta Interface
This interface is used to define custom metadata for columns in the data grid. It is built on top of ColumnMeta.
| Prop | Type | Default |
|---|---|---|
headerTitle | ||
headerClassName | ||
cellClassName | ||
skeleton | ||
expandedContent |
Credits
- Built with TanStack Table.
- Built with DndKit.