Pro Components

Base Components

Data Table 3

Data table with multi-column sorting via popover, sort priority management, row selection, and optional pinned columns.

Example

Virtualized Data Table With Multi-Sort Controls

Use the Sort menu to stack multiple column sorts, reorder their priority, and reset defaults—plus Shift/Cmd/Ctrl-click headers to append sorts instead of replacing—while virtualized scrolling keeps large datasets smooth.

Loading orders…
Purchased
Loading orders…

Introduction

Data Table 3 supports multi-sort and row selection:
  • Sort popover: Add, remove, and reorder sort rules; toggle ascending/descending per rule.
  • Row selection: Checkbox column to select rows.
  • Apply: Sort rules applied when you click Apply in the popover.
Uses Table, Button, Checkbox, Popover, Badge, and TanStack Table.

Usage

import { DataTable32 } from "@/components/ui/data-table32";

<DataTable32 data={rows} />
Replace sample data with your own; extend the sort popover to support drag-and-drop priority if needed.

On this page