Pro Components

Base Components

Data Table 1

Fixed-height data table with sticky header, vertical and horizontal scrolling, sortable columns, and availability badges.

Example

Data Table With Sticky Header

Fixed-height table with vertical and horizontal scrolling, featuring a sticky header that remains visible during scroll. Perfect for displaying large datasets in limited space.

In StockAvailable In
TC-001
Tablet Case
Electronics
Yes
$83.24
In storeOnline
SW-002
Smart Watch
Electronics
Yes
$246.27
In storeOnline
WS-003
Wool Sweater
Accessories
Yes
$168.27
In store
WE-004
Wireless Earbuds
Electronics
Yes
$107.75
In storeOnline
LS-005
Laptop Sleeve
Electronics
Yes
$248.02
In storeOnline
RS-006
Running Shoes
Footwear
Yes
$208.26
In store
WJ-007
Winter Jacket
Clothing
Yes
$148.06
In store
PC-008
Phone Case
Accessories
Yes
$298.08
In storeOnline
FT-009
Fitness Tracker
Clothing
Yes
$222.09
In store
SG-010
Sunglasses
Accessories
Yes
$60.17
In store

← Swipe to see more columns →

Introduction

Data Table 1 is a sticky-header data table:
  • Sticky header: Header row stays pinned while scrolling rows.
  • Fixed height: Constrained height with vertical (and horizontal) scroll.
  • Sortable columns: Click headers to sort; arrow indicators show direction.
  • Badges: Stock and availability shown as pills/badges.
  • Mobile: Swipe hint on small screens.
Uses Table, Button, Badge, and TanStack Table.

Usage

import { DataTable5 } from "@/components/ui/data-table5";

<DataTable5 data={inventoryRows} />
Pass your own data array matching the InventoryRow type (sku, name, type, stock, price, availability).

On this page

ExampleIntroductionInstallationUsage