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 Stock | Available 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 |
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.
Usage
import { DataTable20 } from "@/components/ui/data-table20";
<DataTable20 data={inventoryRows} />;