Pro Components

Base Components

Data Table 2

Data table with horizontal scrolling, sortable columns, custom cell styling, and mobile swipe hint.

Example

Minimal Responsive Table

Fully responsive table with horizontal scrolling, custom cell styling, and adaptive typography. Optimized for mobile devices with touch gestures and swipe hints.

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 →

Introduction

Data Table 2 is a responsive scrollable table:
  • Horizontal scroll: Full-width table in a scroll container with visible scrollbar.
  • Sortable columns: Header buttons with sort direction arrows.
  • Cell styling: SKU monospace, stock/availability badges, tabular price.
  • Mobile: Swipe hint below the table on small screens.
Uses Table, Button, Badge, and TanStack Table.

Usage

import { DataTable4 } from "@/components/ui/data-table4";

<DataTable4 data={inventoryRows} />

On this page

ExampleIntroductionInstallationUsage