Pro Components

Base Components

Data Table 5

Data table for large datasets with fixed-height scroll, sortable columns, row selection, and row action menus.

Example

Data Table With virtualisation

A data table with virtualised rows to display large set of data. Scroll to load more and check the console to see which rows render.

Loading orders…
PurchasedOrder StatusPayment Status
Loading orders…

Introduction

Data Table 5 is built for many rows:
  • Fixed height: Scrollable body with sticky header.
  • Sortable columns: Click headers to sort.
  • Row selection: Checkbox column.
  • Row actions: Three-dot menu per row (Edit, View, Copy ID).
For true virtualization (only visible rows in the DOM), add @tanstack/react-virtual and render rows in a virtualizer. Uses Table, Button, Checkbox, DropdownMenu, Badge, and TanStack Table.

Usage

import { DataTable27 } from "@/components/ui/data-table27";

<DataTable27 data={records} />;

On this page