shadcn.io is not affiliated with official shadcn/ui
Order History Table Block for Solid
A shopper's order history table with a period select, items that open a popover listing each one, a status word with a three-step rule, a total, Track and Buy again, and a card list below the medium breakpoint.
Installation
Overview
Let shoppers find an order and act on it, with this order history table for Solid with Ark UI. A homeware shop's account page lists orders in a native table: the order number and date, the items as "Linen cushion + 2 more", a status with a three-step rule (ordered, shipped, delivered), the total, and two actions. The items text opens a Popover that lists every item with its quantity and price and the delivery charge, Track opens another with the order's events, and Buy again adds the items to the basket in this demo and says so. A Select at the header's end picks the period (Last 3 months, 2026, 2025, 2024), measured from a fixed as-of date; 2024 has no orders and shows the empty state. Items are names, not photos. Below the medium breakpoint the table becomes a list of cards that shares one render helper with it, and the list keeps its height in a scrolling region. It's built from Select, Popover, Badge, Button, Empty and Guides, with a CSS entrance only. For account pages, marketplaces and any shop with a returning customer.
FAQ
How does the period filter work?
"Last 3 months" keeps orders placed within 92 days of the typed as-of date, and a year keeps orders whose date starts with it. Changing the period swaps the rows in a region of fixed height and the status line says how many orders are showing. Nothing is measured from the visitor's clock.
How is status shown without colour?
As a word in an outline badge with a three-segment rule under it: one segment lit for Processing, two for Shipped, three for Delivered. The rule is decoration, the word carries the meaning.
What do the popovers hold?
The items popover lists each line as "2 × Beeswax candles, set of 3" with its price, then the delivery charge, and the Track popover lists the order's typed events with their dates, newest last. Both are non-modal, close on Escape and are named for the order, so the buttons read "Items in order BK-20418" and "Track order BK-20418".
What changes on a phone?
The table is replaced by a list of cards, one per order, with the number, date and total, the items link, the status and the two actions. Both layouts come from the same data and handlers, and only one is in the accessibility tree at a time.
Is it accessible?
The table has a caption, heads and row heads, the select is labelled "Show", every action is named for its order, and one polite status line reports the period and the Buy again result. The scrolling region is reachable by keyboard.
What stays local, and how do I wire it for real?
Everything: the ten orders are typed in ORDERS, Buy again only writes a sentence, and Track shows typed events. To wire it up, load the signed-in shopper's orders, call your basket API from buy, and fetch the tracking events for the order when its popover opens.