Pro Components

Base Components

Data Table 8

Data table with resizable columns via drag handles, sortable headers, and availability badges.

Example

Data Table with Resizable and sortable columns

A clean and simple data table with sorting capabilities and expandable columns width

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

Introduction

Data Table 8 supports resizable columns:
  • Resize handle: Drag the vertical handle on the right edge of a header to change column width.
  • Sortable: Click headers to sort.
  • Badges: Availability shown as secondary badges.
Uses Table, Button, Badge, and TanStack Table.

Usage

import { DataTable20 } from "@/components/ui/data-table20";

<DataTable20 data={inventoryRows} />;

On this page