Data Grid

The current data-grid package ships the shared grid context, table renderers, pagination, column controls, drag-and-drop helpers, virtualization, infinite scroll, footer helpers, and row-pinning support. Footer components (DataGridTableFoot, DataGridTableFootRow, DataGridTableFootRowCell) and the DataGridTableRowPin toggle are exported from data-grid-table.tsx.

In the base build, data-grid-scroll-area.tsx is also included and exports DataGridScrollArea for dedicated scroll handling around sticky-header or wide tables.

Installation

pnpm dlx shadcn@latest add @spaceui/components-spaceui-data-grid

React Compiler

'use client'
'use no memo' // required only when React Compiler is enabled

export function MyTable() {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  })

  return (
    <DataGrid table={table} recordCount={data.length}>
      {/* ... */}
    </DataGrid>
  )
}

Prefer excluding a whole directory over a per-file directive? Configure it in your compiler setup instead (Vite example):

babel({
  presets: [reactCompilerPreset()],
  exclude: ['**/components/spaceui/data-grid/**', '**/your-tables/**'],
})

On Next.js, prefer the per-file "use no memo" directive, since its SWC compiler exclusion is more limited.

Usage

import {
  DataGrid,
  DataGridContainer,
  DataGridPagination,
  DataGridTable,
  DataGridTableFootRow,
  DataGridTableFootRowCell,
} from '@/components/spaceui/data-grid'

export default function SpaceUI() {
  const footer = (
    <DataGridTableFootRow>
      <DataGridTableFootRowCell colSpan={columns.length}>Showing {data.length} rows</DataGridTableFootRowCell>
    </DataGridTableFootRow>
  )

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  })

  return (
    <DataGrid table={table} recordCount={data.length} tableLayout={{ rowsPinnable: true }}>
      <DataGridContainer>
        <DataGridTable footerContent={footer} />
      </DataGridContainer>
      <DataGridPagination />
    </DataGrid>
  )
}

Use DataGridTableRowPin inside a column definition to let users pin rows, swap in DataGridTableVirtual when you need virtualization or infinite scroll, and wrap sticky-header tables with DataGridScrollArea when you want the dedicated base scroll wrapper. When rows can be pinned or virtualized, provide a stable getRowId so row identity stays intact across reordering.

Examples

Cell Border

Dense Table

Light Table

Striped Table

Auto Width

Row Selection

For the full set of variations — expandable rows, sub-grids, sortable / movable / draggable / resizable / pinnable columns, sticky header, column controls and visibility, loading skeleton, CRUD in frame, footer totals / summary / aggregates, infinite scroll, and row pinning — browse the Data Grid components.

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.

DataGridScrollArea

Dedicated scroll wrapper for wide grids and sticky headers.

DataGridTable

The component that renders the actual HTML table. It automatically handles data rendering, loading states (skeletons/spinners), empty states, footer rows, and pinned rows when rowsPinnable is enabled on the parent DataGrid.

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 with optional footer rendering.

DataGridTableDndRows

Used for enabling row drag-and-drop reordering with optional footer rendering.

DataGridTableVirtual

A virtualized table renderer using @tanstack/react-virtual for row virtualization, infinite scroll, optional footer rows, and pinned rows when rowsPinnable is enabled. The wrapper manages row count and the scroll element for you, while virtualizerOptions lets you customize the underlying TanStack Virtual instance. Set scrollToRowIndex to reveal a controlled center row; "auto" alignment keeps already-visible rows in place and accounts for sticky headers.

DataGridTableRowPin

A pin/unpin toggle button for use in column definitions to enable row pinning.

DataGridTableFoot

Wrapper component for the table footer (<tfoot>).

DataGridTableFootRow

A row inside the table footer.

DataGridTableFootRowCell

A cell inside a footer row.

DOM Attributes

Data rows carry these attributes so you can target them from queries, tests, and styles. They are applied by the shared row renderer, so they appear on standard, virtualized, pinned, and draggable rows alike. Spacer, skeleton, empty, and expanded-detail rows are rendered separately and carry none of them.

All 29 variations

Data grid with expandable rows

Data grid with sub table

Data grid with column icons

Data grid with sortable columns

Data grid with movable columns

Data grid with draggable columns

Data grid with draggable rows

Data grid with column resizing

Data grid with pinnable columns

Data grid with sticky header

Data grid with column controls

Data grid with card container

Data grid with column visibility controls

Data grid with loading skeleton

Data grid with CRUD features

Data grid with CRUD in frame container

Data grid with column totals footer

Data grid with summary stats footer

Data grid with per-column aggregate footer

Data grid with local infinite scroll

Data grid with remote infinite scroll

Data grid with row pinning support