Orders Table

Usage

OrdersTable is a ready-to-use block. Rendered on its own it shows a built-in seeded sample dataset, so you can drop it in and see the full experience right away.

import { OrdersTable } from "@blakeui-pro/react";

function App() {
  return <OrdersTable />;
}

Your own data

Pass an orders array to render real data. Each order matches the exported Order type.

import { OrdersTable, type Order } from "@blakeui-pro/react";

const orders: Order[] = [
  {
    id: "ORD-1001",
    customer: "Acme Corp",
    status: "Delivered",
    date: "2026-04-12",
    amount: 1299.0,
    email: "orders@acme.example.com",
    items: 3,
    paymentMethod: "Credit Card",
    channel: "Online Store",
    trackingNumber: "TRK-000123456",
    updatedAt: "2026-04-12T14:30:00",
    updatedBy: "Jane Cooper",
  },
  // ...
];

function App() {
  return <OrdersTable orders={orders} />;
}

Need a quick dataset to prototype with? The built-in sample is exported too:

import { OrdersTable, ordersTableSampleData } from "@blakeui-pro/react";

// Also available as OrdersTable.sampleData
<OrdersTable orders={ordersTableSampleData} />;

Loading & error states

OrdersTable is fully controlled. Drive isLoading and isError from your data fetching, and respond to the retry affordance with onRetry.

function OrdersPage() {
  const { data, isLoading, isError, refetch } = useOrders();

  return (
    <OrdersTable
      orders={data}
      isError={isError}
      isLoading={isLoading}
      onRetry={refetch}
    />
  );
}

• isLoading — renders shimmer skeleton rows.
• isError — renders an inline Alert with a Retry button that calls onRetry.

Actions

Row-level buttons (view, edit, delete) and the bulk Selected Actions menu report through a single onAction callback. Export selected and the toolbar Export button are handled internally and download a CSV — they do not fire onAction.

<OrdersTable
  onAction={(action, orderIds) => {
    // action: "view" | "edit" | "delete" | "mark-shipped"
    //       | "print-invoices" | "cancel-orders"
    console.log(action, orderIds);
  }}
/>

Props

All other div props (className, style, id, …) are forwarded to the root element.

Features

• Search across order ID, customer, and status.
• Filter by one or more statuses and sort by any column (toolbar menu or column headers).
• Column management — toggle visibility and drag to reorder; resizable columns.
• Row selection with a contextual toolbar, including a "select all matching" affordance across pages.
• Density toggle (comfortable / compact).
• CSV export of all rows or just the current selection, respecting visible columns.
• Pagination with a results summary.
• States for loading (skeletons), error (with retry), and empty (clear-filters).

Icons

The toolbar and row actions use Material Icons (Two Tone) from the ic set via @iconify/react, with the secondary layer dimmed to match the BlakeUI two-tone look. Only the glyphs the component needs are bundled, so there is no icon-library install step on your side.