Pewter Logistics Data Table
A no-nonsense data table block for logistics and supply chain management dashboards.
Features
- Summary stats — 4 KPI cards at the top (active shipments, in transit, avg delivery, destinations)
- Full data table — 7 columns: Tracking ID, Origin, Destination, Carrier, Status, ETA, Weight
- Status badges — Color-coded: blue (in transit), green (delivered), amber (pending), red (delayed)
- Sortable columns — Sort buttons on Tracking ID, Status, and ETA
- Search & filter — Search input and filter button in header
- Pagination — Page numbers with prev/next navigation
- Monospace numbers — Tabular numerics for IDs, dates, and weights
- Responsive — Horizontal scroll on mobile, stacked stats
Dependencies
@/components/vue-ui/table — Shadcn-Vue Table components@/components/vue-ui/badge — Shadcn-Vue Badge@/components/vue-ui/button — Shadcn-Vue Button@/components/vue-ui/input — Shadcn-Vue Input@/components/vue-ui/card — Shadcn-Vue Card
Customization
- Data: Replace shipments array with real tracking data
- Columns: Add or remove columns by editing table headers and cells
- Status colors: Modify statusClasses map for different status types
- Stats: Update summaryStats with your logistics KPIs
