CommerceOrderHistory
Customer order history table: each row is an order with id, date, total, status, and an optional link to the order detail page. Renders an empty-state when orders is []. Distinct from commerce-order-summary (a single order's detail card). Presentational and theme-driven.
Installation
pnpm dlx @hex-core/cli add commerce-order-historyUsage
import { CommerceOrderHistory } from "@/components/ui/commerce-order-history"Order history table
Three past orders with status badges and links to detail.
import { CommerceOrderHistory, Badge } from "@hex-core/components";
<CommerceOrderHistory
title="Order history"
orders={[
{ id: "#1042", date: "May 23, 2026", total: "$104", status: <Badge>Confirmed</Badge>, href: "/orders/1042" },
{ id: "#1037", date: "May 12, 2026", total: "$76", status: <Badge variant="secondary">Delivered</Badge>, href: "/orders/1037" },
]}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
ordersrequired | object | — | ReadonlyArray<{ id; date; total; status; href? }>. Orders newest-first by convention. Set href to make each row's 'View' link navigate to the order detail. |
title | ReactNode | — | Optional section heading. |
description | ReactNode | — | Optional subcopy under the heading. |
emptyState | ReactNode | — | Optional empty-state node, rendered when orders is empty. |
className | string | — | Additional classes applied to the root wrapper. |
AI Guidance
When to use
Use on a customer-account 'Order history' page. For a single order's detail, use commerce-order-summary. Sort orders newest-first; pair with pagination if the list is long.
When not to use
Don't use for admin order management (use app-data-table — needs sortable columns, filters). Don't show line items here — that's commerce-order-summary's job on the per-order page.
Common mistakes
- Putting line-item rows here — this is a list of orders, not a list of items.
- Missing the View link's accessible name — the schema renders 'View' visually + 'order {id}' in sr-only text. Keep that pattern when customizing.
- Forgetting an empty-state — first-time customers see this; either pass `emptyState` or rely on the default copy.
Accessibility
Renders a semantic <table> with <thead>/<tbody>; column headers have scope='col'. The View link's accessible name includes 'order {id}' via sr-only text so screen-reader users can tell which row's link they're activating.
Related components
Token budget: 891
Verified against @hex-core/components@1.14.0