Iron Data Grid
An industrial-themed logistics data table built for shipment tracking and fleet management.
Features
- 10 rows of realistic shipment data with ID, Origin, Destination, Status, ETA, and Weight columns
- Color-coded status badges — green (Delivered), amber (In Transit), red (Delayed), orange (Customs Hold), gray (Processing)
- Search and filter bar for quick shipment lookup
- Sortable column headers with visual indicators
- Pagination controls at the bottom
- Summary stat cards showing Active Shipments, Delivered Today, Delayed, and Total Weight
- Alternating row colors for improved readability
- IBM Plex Sans typography for utilitarian clarity
- Full light/dark mode support with WCAG AA contrast compliance
Dependencies
lucide-react for icons (Truck, Package, Search, Filter, etc.)- Shadcn UI components: Badge, Button, Card, Input, Separator
Customization
- Data: Replace the
shipmentData array with your own logistics data
- Columns: Add or remove columns in the
columns array
- Colors: Adjust the iron gray palette (
#434343, #6B6B6B) to match your brand
- Status Badges: Modify
getStatusStyle() for different status types
- Pagination: Wire up real pagination logic with state management
