Wholesale
PriceTierTable
Volume-based pricing tier table for B2B/wholesale products.
PriceTierTable
Displays quantity-based pricing tiers in a table format. Highlights the currently active tier based on the selected quantity.
Preview
| Quantity | Price / Unit | Tier |
|---|---|---|
| 1 – 9 | $29.99 | Retail |
| 10 – 49 | $24.99 | Small Wholesale |
| 50 – 199 | $19.99 | Wholesale |
| 200+ | $14.99 | Bulk |
Usage
<CPriceTierTable :tiers="product.priceTiers" :current-quantity="qty" />
Example Data
const tiers = [
{ minQuantity: 1, maxQuantity: 9, unitPrice: { amount: 50, formatted: 'SAR 50.00' } },
{ minQuantity: 10, maxQuantity: 49, unitPrice: { amount: 45, formatted: 'SAR 45.00' }, label: 'Silver' },
{ minQuantity: 50, maxQuantity: 99, unitPrice: { amount: 40, formatted: 'SAR 40.00' }, label: 'Gold' },
{ minQuantity: 100, unitPrice: { amount: 35, formatted: 'SAR 35.00' }, label: 'Platinum' },
]
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tiers | PriceTier[] | required | Pricing tiers |
currentQuantity | number | 0 | Active quantity (highlights matching tier) |
ui | Partial<{...}> | — | Per-instance theme overrides |
Features
- Active tier highlighting: The row matching current quantity is highlighted with primary color
- Flexible ranges: Shows
min – maxfor bounded tiers,min+for open-ended - Optional labels: Shows a "Tier" column if any tier has a label