Pro Components
Base Components
Data Table 7
Data table with column header menus for sorting and hiding columns, plus availability badges.
Example
Data Table with Column Controls
A data table with comprehensive column controls including sorting, pinning, moving, and visibility management
SKU | Item | Type | In Stock | Price | 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 7 adds column management:- Header dropdown: Each column header has a menu with sort ascending/descending and hide/show column.
- Visibility: Toggle column visibility from the header menu.
- Sortable: Sort from the same menu or by clicking the header.
Usage
import { DataTable21 } from "@/components/ui/data-table21";
<DataTable21 data={inventoryRows} />;