Order History List

ProNew

A list of past orders with status badges that carry text, totals, a tap target for the detail and a Reorder action, loading more on request. Use this when a shop app lists a person's orders on a phone and each one has a status and a follow-up action.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

hasMore

Guide and examples

When to use it

Use it when a shop app lists a person's orders on a phone and each one has a status and a follow-up action.

Do not use it for a single order's detail (use a detail screen) or for admin order tables.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`orders`	`Order[]`	`required`	`{ id, date, total, status, items }`.
`onOpen`	`(id: string) => void`	`-`	Open the detail.
`onReorder`	`(id: string) => void`	`-`	Reorder.
`hasMore`	`boolean`	`false`	Show a Load more button.
`onLoadMore`	`() => void`	`-`	Load more.

Accessibility

Status is text in a badge ("Delivered"), never only a colour; each row reads as order number, date, total and status.
Reorder is a separate button named "Reorder order 1042", not nested inside the row button.
Load more announces how many orders are shown.

Testing

The pattern ships with a Testing Library test (order-history-list.test.tsx) that drives it through roles and the keyboard.

Guide and examples

When to use it

Use it when a shop app lists a person's orders on a phone and each one has a status and a follow-up action.

Do not use it for a single order's detail (use a detail screen) or for admin order tables.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`orders`	`Order[]`	`required`	`{ id, date, total, status, items }`.
`onOpen`	`(id: string) => void`	`-`	Open the detail.
`onReorder`	`(id: string) => void`	`-`	Reorder.
`hasMore`	`boolean`	`false`	Show a Load more button.
`onLoadMore`	`() => void`	`-`	Load more.

Accessibility

Status is text in a badge ("Delivered"), never only a colour; each row reads as order number, date, total and status.
Reorder is a separate button named "Reorder order 1042", not nested inside the row button.
Load more announces how many orders are shown.

Testing

The pattern ships with a Testing Library test (order-history-list.test.tsx) that drives it through roles and the keyboard.