Pro Components
Base Components
Data Table 9
Data table with expandable rows revealing order details (shipping, tracking, warehouse, assigned), sortable columns, and row actions.
Example
Data Table With Expanded row
A data table with expanded row that is bounded by the parent column width
| Product | Status | |||||
|---|---|---|---|---|---|---|
#301456 | Leather Jacket | Ready for pickup | $243.40 | |||
#789123 | Blue Sneakers | Fulfilled | $119.96 | |||
#654321 | Red Hoodie | Fulfilled | $354.63 | |||
#987654 | Black Sunglasses | Unfulfilled | $119.73 | |||
#432187 | Green Backpack | Fulfilled | $359.28 | |||
#567890 | Silver Watch | Ready for pickup | $381.57 | |||
#234567 | Gray Scarf | Fulfilled | $398.12 | |||
#876543 | Purple Dress | Unfulfilled | $337.01 | |||
#345678 | White Hat | Ready for pickup | $277.54 | |||
#456789 | Brown Boots | Fulfilled | $377.76 |
Introduction
Data Table 9 uses expandable rows:- Expand: Chevron on each row toggles a detail panel below (shipping, tracking, warehouse, assigned).
- Row selection: Checkbox column.
- Sortable: Click headers to sort.
- Row actions: Three-dot menu per row.
Usage
import { DataTable16 } from "@/components/ui/data-table16";
<DataTable16 data={orderRows} />;