Skip to content
aq-ui
Back to ComponentsComponent

Data Grid

Virtualized TanStack data grid with sorting, filtering, resizing, pinning, visibility, and row selection.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Loading interactive preview…

Installation

pnpm dlx aq-ui@alpha add data-grid

API reference

Client module

Import the parts you need, then jump to an export for its contract.

View full source

Quick start

"use client"

import { DataGrid } from "@/components/ui/data-grid"

<DataGrid />

DataGrid

constSource L430

Virtualized TanStack data grid with sorting, filtering, resizing, pinning, visibility, and row selection.

const DataGrid = DataGridForwardRef as DataGridComponent
<DataGrid />

DataGridProps

interfaceSource L25

Type contract for DataGridProps.

interface DataGridProps<TData, TValue> extends Omit< React.ComponentPropsWithoutRef<"div">, "children" >

Members

NameType
columnsColumnDef<TData, TValue>[]
dataTData[]
height?number | string
estimateRowHeight?number
overscan?number
emptyMessage?React.ReactNode
className?string
enableRowSelection?boolean
getRowId?(row: TData, index: number) => string
toolbar?(table: TanStackTable<TData>) => React.ReactNode
onRowSelectionChange?(selection: RowSelectionState) => void

Registry dependencies

button, utils

Package dependencies

@tanstack/react-table@^8.21.3, @tanstack/react-virtual@^3.13.12, lucide-react@^1.31.0

Files

  • components/ui/data-grid.tsx

Source