Orders table

Search, payment and fulfillment filters, export and pages; ship selected orders and the rows update in place.

$ pnpm dlx shadcn@latest add @dashral/orders-table

When to use

A store's orders: search, payment and fulfillment filters, sorting, export, pages and bulk actions.
Shops and marketplaces; any table of records that move through statuses.

When not to use

Records without statuses or bulk actions: a Data Table on its own is enough.
Work people move between stages by hand: Kanban board.

Usage

Orders table with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { OrdersTable } from "@/components/dashral/blocks/orders-table"
2
3<OrdersTable
4  orders={orders}
5  currency="EUR"
6  onUpdate={(ids, change) => api.orders.update(ids, change)}
7  onCreate={() => router.push("/orders/new")}
8/>

API reference

OrdersTable

A store's orders: search, payment and fulfillment filters, sorting, columns, export, and pages. Select rows to ship or deliver them together; each row's menu does the same for one order, and the table updates in place. Your orders come in as orders (a new list replaces what's shown), and every change goes to onUpdate first in the table, undone with its message if it throws.

Prop	Type	Default
`title`	`React.ReactNode`	`"Orders"`
`orders`	`Order[]`	`sample`
`currency`	`string`	`"USD"`
`locale`	`string`	`"en-US"`
`onUpdate`	`(ids: string[], change: Partial<Pick<Order, "fulfillment" \| "payment">>) => Promise<void> \| void` Ships, delivers or refunds orders, by id.	—
`onCreate`	`() => void`	—

type Payment

= "paid" | "pending" | "refunded" | "failed"

type Fulfillment

= "unfulfilled" | "shipped" | "delivered"

type Order

Prop	Type	Default
`id`	`string`	—
`date`	`string`	—
`customer`	`string`	—
`email`	`string`	—
`avatar`	`string`	—
`items`	`number`	—
`total`	`number`	—
`payment`	`Payment`	—
`fulfillment`	`Fulfillment`	—