Patterns · 04
Table Component Library
A comprehensive guide to Kiosklix's data presentation patterns. Engineered for clarity, interaction, and responsive adaptability.
01
Filter & Search Toolbar
Sticky bar with search, range select, category select, and apply button.
02
Standard Variant (Comfortable Density)
Stitch's default — multi-select, customer cell, progress bar, status badge, actions.
| Customer | Transaction | Progress | Amount | Status | Actions | |
|---|---|---|---|---|---|---|
S Sarah Miller sarah.m@shopey.com | Electricity Token | 65% | Rp 124.500 +5% | Success | ||
J John Doe john.d@example.com | Internet Data | 35% | Rp 50.000 -2% | Pending | ||
R Robby Kurnia rob.kur@email.com | Water Bill (PDAM) | 90% | Rp 215.000 +12% | Success |
Showing 1–10 of 452 items
03
Mobile / Card variant
Stacked card per row.
E-Wallet Topup
TX-101948
Date
Oct 12, 2023
Amount
Rp 1.200.000
Cinema Tickets
TX-15402
Date
Oct 14, 2023
Amount
Rp 45.930
04
Compact High-Density
44px row, condensed padding.
| Code | Category | Trend | Ops |
|---|---|---|---|
| P-101 | Utilities | +12% | |
| P-103 | Groceries | -84% | |
| P-118 | Travel | 0% | |
| P-110 | Education | +88% |
Designer Note
High-density tables should always preserve key visual elements (status, change %) while compressing labels — keep header eyebrow tracking and avoid wrapping cell content.
05
Product Inventory (Switch + stock pill)
Real Kiosklix admin layout — name, provider dot, price + cost, stock pill, status switch.
| Product Name | Provider | Price | Stock | Status | |
|---|---|---|---|---|---|
Data 50GB Ultra SKU TEL-DATA-050 | Telkomsel | Rp 152.000 Cost: Rp 148.500 | 854 Units | ||
Token Listrik 100k SKU PLN-TK-100 | PLN | Rp 101.500 Cost: Rp 100.200 | 12 Units | ||
Freedom Internet 10GB SKU IND-DATA-010 | Indosat | Rp 45.000 Cost: Rp 43.000 | 0 Units | ||
XL Xtra Combo 20GB SKU XL-DATA-020 | XL Axiata | Rp 89.000 Cost: Rp 86.400 | 421 Units |