QuotesListTable Container

Paginated table of quotes with view actions and customizable columns.

Version: 1.0.0-beta5

Configuration

The QuotesListTable 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 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.
onViewQuote	function	No	Callback when viewing a quote. Receives quote ID, name, and status.
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
QuoteName	SlotProps	No	Customize quote name cell.
Created	SlotProps	No	Customize created date cell.
CreatedBy	SlotProps	No	Customize created by (buyer name) cell.
Status	SlotProps	No	Customize status cell.
LastUpdated	SlotProps	No	Customize last updated date cell.
QuoteTemplate	SlotProps	No	Customize quote template reference cell.
QuoteTotal	SlotProps	No	Customize quote total amount cell.
Actions	function	No	Customize actions cell (view button).
EmptyQuotes	SlotProps	No	Customize empty state message when no quotes 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 QuotesListTable container:

import { render as provider } from '@dropins/storefront-quote-management/render.js';
import { QuotesListTable } from '@dropins/storefront-quote-management/containers/QuotesListTable.js';

await provider.render(QuotesListTable, {
  pageSize: 0,
  showItemRange: true,
  showPageSizePicker: true,
  slots: {
    // Add custom slot implementations here
  }
})(block);