ApprovalRulesList Container

Displays a list of purchase order approval rules with options to create, edit, and view rule details.

Version: 1.0.0-beta3

Configuration

The ApprovalRulesList container provides the following configuration options:

Parameter	Type	Req?	Description
initialPageSize	PageSizeListProps[]	No	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.
routeCreateApprovalRule	function	No	Function to generate the URL for creating a new approval rule. Use to implement custom routing or add context parameters for rule creation.
routeEditApprovalRule	function	No	Function to generate the URL for editing an approval rule. Receives the rule ID. Use to implement custom routing or add context parameters.
routeApprovalRuleDetails	function	No	Function to generate the URL for viewing approval rule details. Receives the rule ID. Use to implement custom routing or add context 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 ApprovalRulesList container:

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

await provider.render(ApprovalRulesList, {
  initialPageSize: [],
  routeCreateApprovalRule: routeCreateApprovalRule,
  routeEditApprovalRule: routeEditApprovalRule,
})(block);