CustomerPurchaseOrders Container

Displays purchase orders created by the currently authenticated customer with management controls.

Version: 1.0.0-beta3

Configuration

The CustomerPurchaseOrders container provides the following configuration options:

Parameter	Type	Req?	Description
initialPageSize	PageSizeListProps[]	Yes	The initial number of items to display per page in the approval rules table. Use to control default pagination based on screen size or user preferences.
routePurchaseOrderDetails	function	No	Function to generate the URL for navigating to the purchase order details. Use to implement custom routing logic or add query parameters.
setColumns	function	No	Function to customize the table columns displayed. Receives default columns and returns modified columns. Use to show/hide columns, reorder them, or add custom column definitions based on user roles or preferences.
setRowsData	function	No	Function to transform or filter the row data before display. Receives default rows and returns modified rows. Use to add custom data processing, formatting, or filtering logic.
className	string	No	Additional CSS classes to apply to the container for custom styling.
withHeader	boolean	No	When true, displays the header section. Set to false when embedding the container within a layout that provides its own header.
withWrapper	boolean	No	When true, wraps the container in a styled wrapper. Set to false for custom styling or when the container is embedded within another styled component.
skeletonRowCount	number	No	Number of skeleton rows to display while loading data. Use to provide visual feedback during data fetching and improve perceived performance.

Slots

This container does not expose any customizable slots.

Usage

The following example demonstrates how to use the CustomerPurchaseOrders container:

import { render as provider } from '@dropins/storefront-purchase-order/render.js';
import { CustomerPurchaseOrders } from '@dropins/storefront-purchase-order/containers/CustomerPurchaseOrders.js';

await provider.render(CustomerPurchaseOrders, {
  initialPageSize: [],
  routePurchaseOrderDetails: routePurchaseOrderDetails,
  setColumns: setColumns,
})(block);