Blitz UIBlitz UIAlpha
X

Data Grid

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

Package
shadcn/ui
API Reference 
"use client"

import { useMemo, useState } from "react"

Installation

pnpm dlx shadcn@latest add @blitz-ui/data-grid

Usage

import {
  DataGrid,
  DataGridContainer,
  DataGridPagination,
  DataGridTable,
} from "@/components/blitz-ui/r-data-grid/data-grid"
const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
})
 
return (
  <DataGrid table={table} recordCount={data.length}>
    <DataGridContainer>
      <DataGridTable />
    </DataGridContainer>
    <DataGridPagination />
  </DataGrid>
)

Examples

Cell Border

Dense Table

Light Table

Striped Table

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

Context Menu

Component p-data-grid-23 not found in registry.

API Reference

DataGrid

The root component that provides the table context.

PropTypeDefaultDescription
tableTable<TData>-Required. The TanStack Table instance.
recordCountnumber-Required. Total number of records.
isLoadingbooleanfalseWhether the table is in a loading state.
loadingMode"skeleton" | "spinner""skeleton"The visual style of the loading state.
loadingMessageReactNode | string"Loading..."Message to display when loadingMode is "spinner".
emptyMessageReactNode | string"No data available"Message to display when the table is empty.
onRowClick(row: TData) => void-Callback function triggered when a row is clicked.
tableLayoutDataGridTableLayout-Configuration for table layout and features.
tableClassNamesDataGridTableClassNames-Custom CSS classes for various table parts.
classNamestring-Additional CSS classes for the root grid component.

DataGridTableLayout

Configuration object for the table's behavior and appearance.

PropertyTypeDefaultDescription
densebooleanfalseWhether to use dense padding for cells.
cellBorderbooleanfalseWhether to show vertical borders between cells.
rowBorderbooleantrueWhether to show horizontal borders between rows.
rowRoundedbooleanfalseWhether to add rounded corners to rows.
strippedbooleanfalseWhether to use zebra-striping for rows.
headerBackgroundbooleantrueWhether to show a background color for the header.
headerBorderbooleantrueWhether to show a border below the header.
headerStickybooleanfalseWhether the header should be sticky during scroll.
width"auto" | "fixed""fixed"The table layout algorithm (table-auto vs table-fixed).
columnsVisibilitybooleanfalseEnables column visibility toggling.
columnsResizablebooleanfalseEnables column resizing.
columnsPinnablebooleanfalseEnables column pinning.
columnsMovablebooleanfalseEnables moving columns via menu.
columnsDraggablebooleanfalseEnables drag-and-drop for columns.
rowsDraggablebooleanfalseEnables drag-and-drop for rows.

DataGridTableClassNames

Custom CSS classes for different parts of the table.

PropertyTypeDefaultDescription
basestring-CSS classes for the <table> element.
headerstring-CSS classes for the <thead> element.
headerRowstring-CSS classes for header rows.
headerStickystring-CSS classes for sticky header state.
bodystring-CSS classes for the <tbody> element.
bodyRowstring-CSS classes for body rows.
footerstring-CSS classes for the <tfoot> element.
edgeCellstring-CSS classes for the first and last cells in a row.

DataGridContainer

A scrollable container for the table.

PropTypeDefaultDescription
borderbooleantrueWhether to show a border around the container.
classNamestring-Additional CSS classes for the container.

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.

PropTypeDefaultDescription
sizesnumber[][5, 10, 25, 50, 100]Array of available page sizes.
sizesLabelstring"Show"Label for the page size selector.
sizesDescriptionstring"per page"Description following the page size selector.
rowsPerPageLabelstring"Rows per page"Accessible label for the rows per page selector.
infostring"{from} - {to} of {count}"Template for displaying record info.
morebooleanfalseWhether to show ellipsis for more pages.
moreLimitnumber5The number of page buttons to show before truncating.
previousPageLabelstring"Go to previous page"Accessible label for the previous page button.
nextPageLabelstring"Go to next page"Accessible label for the next page button.
ellipsisTextstring"..."Text to display for the ellipsis button.
classNamestring-Additional CSS classes for the pagination container.

DataGridColumnHeader

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

PropTypeDefaultDescription
columnColumn<TData, TValue>-Required. The TanStack Column instance.
titlestring-The title to display in the header.
iconReactNode-Optional icon to display next to the title.
filterReactNode-Optional filter component to display in the header menu.
visibilitybooleanfalseWhether to include column visibility controls in the menu.

DataGridColumnFilter

A popover-based multi-select filter for columns.

PropTypeDefaultDescription
columnColumn<TData, TValue>-The TanStack Column instance to filter.
titlestring-The title for the filter trigger and placeholder.
optionsArray<{ label: string, value: string, icon?: ComponentType }>-Required. The list of options to filter by.

DataGridColumnVisibility

A dropdown component to toggle column visibility.

PropTypeDefaultDescription
tableTable<TData>-Required. The TanStack Table instance.
triggerReactElement-Required. The trigger element for the visibility menu.

DataGridTableDnd

Used for enabling column drag-and-drop reordering.

PropTypeDefaultDescription
handleDragEnd(event: DragEndEvent) => void-Required. Callback triggered when a column drag operation ends.

DataGridTableDndRows

Used for enabling row drag-and-drop reordering.

PropTypeDefaultDescription
dataIdsUniqueIdentifier[]-Required. Array of unique identifiers for the current page data.
handleDragEnd(event: DragEndEvent) => void-Required. Callback triggered when a row drag operation ends.