Recent Orders Table Block React component
A store's recent orders: today's count and revenue, status tabs with counts, search across orders, customers and products, rows with product thumbnails, payment pills and a four-step fulfillment tracker, and an expandable panel with line items, totals, shipping steps and a button that moves the order to its next step. New orders slide in live.
About the Recent Orders Table Block component
Recent Orders Table Block is the orders panel of a store dashboard. Each order shows its number, how long ago it came in, who bought it and where, little thumbnails of what they bought, whether it is paid and how far along shipping is, with today's order count and revenue at the top.
Click an order to open it in place: line items with prices, the shipping cost and total, and a checklist from Unfulfilled to Delivered with the tracking number once it ships. One button moves the order to its next step. New orders slide in at the top with a soft highlight while the table is open.
When to use it
Use it in an e-commerce admin, a marketplace seller dashboard, a restaurant or delivery back office, or a client portal that shows purchases.
Keep the visible columns to what staff act on every day; put everything else in the expanded panel.
Installation
Add the Recent Orders Table Block component to your project with the shadcn CLI. It lands in components/recent-orders-table.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/recent-orders-tableOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<RecentOrdersTable /> accepts 9 props, all optional.
| Prop | Type | Default |
|---|---|---|
| title | string | "Recent orders" |
| orders | Order[] | — |
| incoming Orders that come in while the table is open (demo). | Order[] | DEFAULT_INCOMING |
| interval | number | 5000 |
| now | string | "2026-11-01T15:00:00Z" |
| currency | string | "$" |
| onAdvance | (id: string, to: Fulfillment) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- titlestringDefault: "Recent orders"
- ordersOrder[]
- incoming
Orders that come in while the table is open (demo).
Order[]Default: DEFAULT_INCOMING - intervalnumberDefault: 5000
- nowstringDefault: "2026-11-01T15:00:00Z"
- currencystringDefault: "$"
- onAdvance(id: string, to: Fulfillment) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Recent Orders Table Block FAQ
- How do I connect live orders?
- Push new orders into incoming, or replace the demo interval with your webhook or socket and prepend to orders. New ones get a 'New' badge and a highlight.
- What do the tabs count?
- To fulfill is paid or pending orders that are unfulfilled or packed, Unpaid is payment pending, Shipped is shipped or delivered. Refunded orders only appear under All.
- Why is Mark shipped disabled on some orders?
- Orders with payment pending can be packed but not shipped, and the panel says it is waiting for payment.
- Does it work on phones?
- Yes. Under about 880px the header row hides and each order becomes a two-line card with the same information and the same expandable panel.
- Is it accessible?
- Status filters are a tablist, each order row is a button with aria-expanded, the fulfillment tracker has a text label, step checklists announce which steps are done and the daily total updates politely.
