Inventory Overview
Explore the inventory table, card view, search, filtering, and low stock alerts. All demos below are fully interactive.
Table View
The inventory table displays all your items with sortable columns. Each column header can be clicked to sort ascending or descending.
Sortable TableLive Preview
| Product Name | SKU | Quantity | Min Stock | Price |
|---|---|---|---|---|
ThinkPad X1 Carbon Gen 12 Laptops | LP-X1C-12 | 14 | 5 | $1,999.00 |
MacBook Air M3 15" Laptops | LP-MBA-M3 | 8 | 3 | $1,499.00 |
Dell Latitude 5550 Laptops | LP-DL-5550 | 5 | 4 | $1,249.00 |
USB-C Hub 7-in-1 Accessories | AC-HUB-7C | 2 | 5 | $49.99 |
Wireless Ergonomic Mouse Accessories | AC-MOUSE-ERG | 30 | 10 | $34.99 |
Sony WH-1000XM5 Audio | AU-SONY-XM5 | 12 | 4 | $349.99 |
AirPods Pro (2nd Gen) Audio | AU-APP-2 | 20 | 8 | $249.00 |
JBL Charge 5 Speaker Audio | AU-JBL-C5 | 7 | 3 | $179.95 |
Lightning Cable 1m Cables | CB-LTG-1M | 3 | 10 | $12.99 |
USB-C to USB-C 2m Cables | CB-CC-2M | 45 | 15 | $4.99 |
Try it
Click any column header to sort the table. Click again to reverse the sort direction.
Card View
On smaller screens the inventory switches to a card layout. Each card shows the item name, quantity badge, category, and field details at a glance.
Card LayoutLive Preview
ThinkPad X1 Carbon Gen 12
Laptops14
SKULP-X1C-12
Min Stock5
Price$1,999.00
Cost$1,450.00
ConditionNew
Date AddedSep 15, 2025
MacBook Air M3 15"
Laptops8
SKULP-MBA-M3
Min Stock3
Price$1,499.00
Cost$1,120.00
ConditionNew
Date AddedOct 1, 2025
Dell Latitude 5550
Laptops5
SKULP-DL-5550
Min Stock4
Price$1,249.00
Cost$890.00
ConditionRefurbished
Date AddedAug 20, 2025
Search & Filter
Quickly find items by searching across all fields, or narrow results by category.
Search & Category FilterLive Preview
10 items
| Product Name | SKU | Quantity | Min Stock | Price |
|---|---|---|---|---|
ThinkPad X1 Carbon Gen 12 Laptops | LP-X1C-12 | 14 | 5 | $1,999.00 |
MacBook Air M3 15" Laptops | LP-MBA-M3 | 8 | 3 | $1,499.00 |
Dell Latitude 5550 Laptops | LP-DL-5550 | 5 | 4 | $1,249.00 |
USB-C Hub 7-in-1 Accessories | AC-HUB-7C | 2 | 5 | $49.99 |
Wireless Ergonomic Mouse Accessories | AC-MOUSE-ERG | 30 | 10 | $34.99 |
Sony WH-1000XM5 Audio | AU-SONY-XM5 | 12 | 4 | $349.99 |
AirPods Pro (2nd Gen) Audio | AU-APP-2 | 20 | 8 | $249.00 |
JBL Charge 5 Speaker Audio | AU-JBL-C5 | 7 | 3 | $179.95 |
Lightning Cable 1m Cables | CB-LTG-1M | 3 | 10 | $12.99 |
USB-C to USB-C 2m Cables | CB-CC-2M | 45 | 15 | $4.99 |
Real-time updates
In production, your inventory updates in real time via WebSocket. When a team member adds, edits, or deletes an item, everyone sees the change immediately without refreshing the page.
Low Stock Alerts
Items whose quantity falls at or below their minimum stock threshold are automatically highlighted. This helps you reorder before running out.
Low Stock ItemsLive Preview
| Product Name | SKU | Quantity | Min Stock | Price |
|---|---|---|---|---|
USB-C Hub 7-in-1 Accessories | AC-HUB-7C | 2 | 5 | $49.99 |
Lightning Cable 1m Cables | CB-LTG-1M | 3 | 10 | $12.99 |
Setting minimum quantities
Define a "Min Stock" column with the minQuantity role in your schema. Any item whose quantity drops to or below this value will be flagged as low stock.