> For the complete documentation index, see [llms.txt](https://developer.firmhouse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.firmhouse.com/sdks/headless-react/components/orderedproductlist.md).

# OrderedProductList

The `OrderedProductsList` component is a list component that displays the products that the user has ordered. You can use this component to show the products that the user has added to their cart.

### Props <a href="#props-2" id="props-2"></a>

#### **filter `((orderedProduct: FirmhouseOrderedProduct) => boolean)?`**

A function that is used to filter the ordered products that are displayed in the list. This prop is optional, and it defaults to include all ordered products.

#### **groupBy `((orderedProduct: FirmhouseOrderedProduct, t?: TranslationFunction) => string)?`**

A function that is used to group the ordered products in the list. This prop is optional, and it defaults to not grouping the ordered products. The `t` parameter is a translation function that you can use to translate the group names.

#### **onlyOneTimeProducts `boolean?`**

A boolean that determines whether only one-time products are displayed in the list. This prop is optional, and it defaults to `false`.

#### **onlyRecurringProducts `boolean?`**

A boolean that determines whether only recurring products are displayed in the list. This prop is optional, and it defaults to `false`.

#### **className `string?`**

The class name that is applied to the list element. This prop is optional, and it defaults to an empty string.

#### **itemClassName `string?`**

The class name that is applied to the list items in the list. This prop is optional, and it defaults to an empty string.

#### **header `React.ReactNode?`**

A header component that is displayed at the top of the list only if there are ordered products that match the filter. This prop is optional, and it defaults to `null`.

#### **fallback `React.ReactNode?`**

A fallback component that is shown while the data is loading. This prop is optional, and it defaults to `null`.

#### **OrderedProductComponent `React.ComponentType<`**[**OrderedProductProps**](https://github.com/firmhouse/firmhouse-sdk/blob/alpha/packages/headless-react/src/lib/components/ordered-product.tsx#L10-L24)**`>?`**

A custom component that is used to render the ordered products in the list. This prop is optional, and it defaults to the [`OrderedProduct`](https://github.com/firmhouse/firmhouse-sdk/blob/alpha/packages/headless-react/src/lib/components/ordered-product.tsx)

#### **OrderedProductsGroupComponent `React.ComponentType<`**[**OrderedProductsGroupProps**](https://github.com/firmhouse/firmhouse-sdk/blob/alpha/packages/headless-react/src/lib/components/ordered-products-group.tsx#L1-L5)**`>?`**

A custom component that is used to render the ordered product groups in the list. This prop is optional, and it defaults to the [`OrderedProductsGroup`](https://github.com/firmhouse/firmhouse-sdk/blob/alpha/packages/headless-react/src/lib/components/ordered-products-group.tsx) component.

### Example <a href="#example" id="example"></a>

```jsx
<OrderedProductsList
  onlyRecurringProducts
  header={<h3>Recurring</h3>}
  groupBy={(op, t) => t?.(
      `opGroups.${op.product.intervalUnitOfMeasure?.toLocaleLowerCase()}`,
      { count: op.product.interval ?? 0 }
    ) ?? ""
  }
/>
```