QuoteTemplatesListTable Container
Paginated table of quote templates with view and generate actions.
Version: 1.0.0-beta5
Configuration
The QuoteTemplatesListTable container provides the following configuration options:
| Parameter | Type | Req? | Description |
|---|---|---|---|
pageSize | number | No | Sets the number of items displayed per page for pagination. Controls how many quote template items appear in each page view. Use to optimize display for different screen sizes or match user preferences. |
showItemRange | boolean | No | Shows item range indicator when true. |
showPageSizePicker | boolean | No | Shows page size selector when true. |
showPagination | boolean | No | Shows pagination controls when true. |
onViewQuoteTemplate | function | No | Callback when viewing a template. Receives template ID, name, and status. |
onGenerateQuoteFromTemplate | function | No | Callback when generating quote from template. Receives template and quote IDs. |
onPageSizeChange | function | No | Callback when page size changes. |
onPageChange | function | No | Callback when page changes. |
Slots
This container exposes the following slots for customization:
| Slot | Type | Required | Description |
|---|---|---|---|
Name | SlotProps | No | Customize template name cell. |
State | SlotProps | No | Customize state cell (active/inactive). |
Status | SlotProps | No | Customize status cell. |
ValidUntil | SlotProps | No | Customize valid until date cell. |
MinQuoteTotal | SlotProps | No | Customize minimum quote total cell. |
OrdersPlaced | SlotProps | No | Customize orders placed count cell. |
LastOrdered | SlotProps | No | Customize last ordered date cell. |
Actions | function | No | Customize actions cell (view, generate quote buttons). |
EmptyTemplates | SlotProps | No | Customize empty state message when no templates exist. |
ItemRange | SlotProps | No | Customize item range display (for example ‘1-10 of 50’). |
PageSizePicker | function | No | Customize page size selector. |
Pagination | function | No | Customize pagination controls. |
Usage
The following example demonstrates how to use the QuoteTemplatesListTable container:
import { render as provider } from '@dropins/storefront-quote-management/render.js';import { QuoteTemplatesListTable } from '@dropins/storefront-quote-management/containers/QuoteTemplatesListTable.js';
await provider.render(QuoteTemplatesListTable, { pageSize: 0, showItemRange: true, showPageSizePicker: true, slots: { // Add custom slot implementations here }})(block);