# salla-orders (https://docs.salla.dev/twilight/react/web-components/salla-orders)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

The logged-in customer's orders page: a table of orders (number, status, total, date) that loads more rows with a
"load more" button. Use it on the customer orders page of a theme.

It also shows filter buttons (all, awaiting review, and archived orders when the store has the `show-external-orders`
feature), a banner when some orders are waiting for a review, and a "leave review" button per eligible order that opens
a `salla-rating-modal`. The active filter is kept in the page URL as `?tab=waiting` or `?tab=archived`.
Each row links to the order page, and the order number has a copy-to-clipboard button.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-orders>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaOrders } from '@salla.sa/twilight-components-react/orders';
```

**Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

## Example [#example]

```tsx
import { SallaOrders } from '@salla.sa/twilight-components-react/orders';

export function Example() {
  return (
    <SallaOrders />
  );
}
```

```html
<salla-orders></salla-orders>
```

````ts
Filter by status ids
```html
<salla-orders params='{"status":[1,2]}' load-more-text="Show more"></salla-orders>
````

```

## Properties

| Property | Attribute | Description | Type | Default |
| --- | --- | --- | --- | --- |
| `loadMoreText` | `load-more-text` | Label of the "load more" button. Defaults to the translated `common.elements.load_more` text. | `string` |  |
| `params` | `params` | Extra query parameters sent with the orders request, as an object (or a JSON string in HTML) with the shape of `OrderQueryParameters`, for example `{ "status": [1, 2], "from_date": "2024-01-01", "per_page": 10 }`. Supported keys include `status` (array of status ids), `from_date`, `to_date`, `keyword`, `reference_id`, `payment_method`, `page` and `per_page`. The component always sets `format` to `light` and overrides `types`, `feedback_status` and (on the archived tab) `external_orders` itself. | `OrderQueryParameters` |  |

## Related

Renders: [`<salla-button>`](https://docs.salla.dev/twilight/react/web-components/salla-button), [`<salla-skeleton>`](https://docs.salla.dev/twilight/react/web-components/salla-skeleton), [`<salla-rating-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-rating-modal).
```