makersclaw 0.2.0 → 0.3.1

package/registry/blocks/data-table/demo.jsx

@@ -0,0 +1,588 @@
+"use client";
+
+// The DataTable over sixty invoices in memory — the gallery's and the
+// smoke test's surface. Not installed into apps: `makersclaw add
+// data-table` lays index.js, data-table.jsx and model.js only.
+import { useMemo, useState } from "react";
+import { Badge, Button, Card, Image, Kbd, Sheet, Stat, StatGroup, ToggleGroup, Tooltip, toast } from "../components/ui";
+import { DataTable } from "../components/blocks/data-table";
+
+const CUSTOMERS = [
+  ["Northwind Traders", "Maya Okafor"],
+  ["Acme Logistics", "Leon Brandt"],
+  ["Globex Studio", "Priya Raman"],
+  ["Initech Labs", "Tomás Ferreira"],
+  ["Umbrella Health", "Hana Sato"],
+  ["Hooli Partners", "Grace Mensah"],
+  ["Vandelay Imports", "Art Kowalski"],
+  ["Pied Piper Media", "Dinah Laurent"],
+  ["Stark Kitchens", "Noah Whitfield"],
+  ["Wayne Freight", "Ines Albrecht"],
+  ["Cyberdyne Retail", "Kofi Asante"],
+  ["Soylent Foods", "Ruth Adeyemi"],
+  ["Tyrell Design", "Oskar Lind"],
+  ["Monarch Dental", "Lucía Romero"],
+  ["Bluth Properties", "Sam Carter"],
+];
+const OWNERS = ["Maya", "Leon", "Priya", "Tomás"];
+const METHODS = ["Card", "Bank transfer", "Direct debit"];
+const TODAY = "2026-09-23";
+
+const ascii = (s) => s.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+
+function day(offset) {
+  const d = new Date(Date.UTC(2026, 4, 20) + offset * 86400000);
+  return d.toISOString().slice(0, 10);
+}
+
+// Sixty invoices, the same every render: a small seeded generator, so the
+// gallery shot does not change between runs.
+function makeInvoices() {
+  let seed = 7;
+  const rnd = () => {
+    seed = (seed * 16807) % 2147483647;
+    return seed / 2147483647;
+  };
+  return Array.from({ length: 60 }, (_, i) => {
+    const [customer, contact] = CUSTOMERS[Math.floor(rnd() * CUSTOMERS.length)];
+    const issued = day(i * 2 + Math.floor(rnd() * 2));
+    const due = new Date(Date.parse(issued) + 30 * 86400000).toISOString().slice(0, 10);
+    const r = rnd();
+    const status = i > 55 && r < 0.6 ? "draft" : r < 0.55 ? "paid" : due < TODAY ? (r < 0.8 ? "overdue" : "paid") : "pending";
+    return {
+      id: `inv-${2041 + i}`,
+      number: `INV-${2041 + i}`,
+      customer,
+      email: `${ascii(contact.split(" ")[0])}@${customer.split(" ")[0].toLowerCase()}.com`,
+      status,
+      amount: Math.round((200 + rnd() * 9800) / 5) * 5,
+      issued,
+      due,
+      owner: OWNERS[Math.floor(rnd() * OWNERS.length)],
+      method: METHODS[Math.floor(rnd() * METHODS.length)],
+    };
+  }).reverse();
+}
+
+const STATUS = {
+  paid: { label: "Paid", tone: "success" },
+  pending: { label: "Pending", tone: "info" },
+  overdue: { label: "Overdue", tone: "danger" },
+  draft: { label: "Draft", tone: "neutral" },
+};
+const money = (n) => `$${Number(n).toLocaleString("en-US", { minimumFractionDigits: 2 })}`;
+const date = (s) => new Date(`${s}T00:00:00Z`).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" });
+
+const COLUMNS = [
+  { key: "number", header: "Invoice", sortable: true, width: "8rem", hideable: false, cell: (r) => <span className="font-medium">{r.number}</span> },
+  {
+    key: "customer",
+    header: "Customer",
+    sortable: true,
+    searchValue: (r) => `${r.customer} ${r.email}`,
+    cell: (r) => (
+      <span className="block leading-tight">
+        <span className="block">{r.customer}</span>
+        <span className="block text-xs text-muted-foreground">{r.email}</span>
+      </span>
+    ),
+  },
+  {
+    key: "status",
+    header: "Status",
+    sortable: true,
+    sortValue: (r) => ["overdue", "pending", "draft", "paid"].indexOf(r.status),
+    searchValue: (r) => STATUS[r.status].label,
+    cell: (r) => <Badge tone={STATUS[r.status].tone}>{STATUS[r.status].label}</Badge>,
+  },
+  { key: "amount", header: "Amount", sortable: true, align: "end", cell: (r) => money(r.amount) },
+  { key: "issued", header: "Issued", sortable: true, cell: (r) => date(r.issued) },
+  { key: "due", header: "Due", sortable: true, cell: (r) => date(r.due) },
+  { key: "owner", header: "Owner", sortable: true },
+  { key: "method", header: "Method", hidden: true },
+];
+
+const FACETS = [
+  { key: "status", label: "Status", options: Object.entries(STATUS).map(([value, s]) => ({ value, label: s.label })) },
+  { key: "owner", label: "Owner" },
+];
+
+// A budget: line items filed under departments, six months wide — wider
+// than the window, so it scrolls sideways under a sticky first column.
+const MONTHS = ["jan", "feb", "mar", "apr", "may", "jun"];
+const BUDGET = [
+  ["Engineering", "Cloud hosting", 4200, 180],
+  ["Engineering", "Contractors", 9000, -400],
+  ["Engineering", "Dev tools", 1300, 40],
+  ["Marketing", "Paid search", 6000, 350],
+  ["Marketing", "Events", 2500, 900],
+  ["Marketing", "Content", 1800, 0],
+  ["Operations", "Office", 3100, 0],
+  ["Operations", "Insurance", 900, 0],
+  ["Operations", "Legal", 1500, 250],
+].map(([department, item, base, step], i) => {
+  const months = Object.fromEntries(MONTHS.map((m, j) => [m, base + step * j]));
+  return { id: `b${i}`, department, item, ...months, total: MONTHS.reduce((s, m) => s + months[m], 0) };
+});
+const whole = (n) => `$${Number(n).toLocaleString("en-US")}`;
+const sumOf = (rows, key) => rows.reduce((s, r) => s + r[key], 0);
+const sums = (rows) => Object.fromEntries([...MONTHS, "total"].map((k) => [k, whole(sumOf(rows, k))]));
+const BUDGET_COLUMNS = [
+  { key: "item", header: "Line item", sortable: true, hideable: false, cell: (r) => <span className="font-medium">{r.item}</span> },
+  ...MONTHS.map((m) => ({ key: m, header: m.charAt(0).toUpperCase() + m.slice(1), align: "end", sortable: true, cell: (r) => whole(r[m]) })),
+  { key: "total", header: "Six months", align: "end", sortable: true, cell: (r) => <span className="font-medium">{whole(r.total)}</span> },
+];
+
+function Budget() {
+  return (
+    <DataTable
+      label="Budget"
+      noun="line item"
+      rows={BUDGET}
+      columns={BUDGET_COLUMNS}
+      searchable={false}
+      paginate={false}
+      keyboard
+      stickyFirstColumn
+      groupBy="department"
+      groupOrder={["Engineering", "Marketing"]}
+      groupSummary={(rows) => `${whole(sumOf(rows, "total"))} over six months`}
+      groupFooter={sums}
+      totals={sums}
+      defaultSort={[{ key: "total", dir: "desc" }]}
+    />
+  );
+}
+
+// Tasks with their actions as buttons in the row: what a task can do
+// depends on its state, each press may take a moment, and one can fail.
+const TASK_STATUS = {
+  todo: { label: "To do", tone: "warning" },
+  doing: { label: "In progress", tone: "info" },
+  done: { label: "Done", tone: "success" },
+  blocked: { label: "Blocked", tone: "danger" },
+};
+const TASKS = [
+  { id: "T-118", title: "Move billing to usage pricing", assignee: "Priya Raman", status: "doing", due: "2026-09-29", notes: "Metering is live on staging; the invoice template still shows seats." },
+  { id: "T-121", title: "Redesign the onboarding checklist", assignee: "Leon Brandt", status: "done", due: "2026-09-18", notes: "Shipped behind a flag to a tenth of new workspaces." },
+  { id: "T-124", title: "Cut cold start on the report page", assignee: "Hana Sato", status: "todo", due: "2026-10-02", notes: "Cache the chart queries per workspace for five minutes." },
+  { id: "T-127", title: "Write tests for the export job", assignee: "Tomás Ferreira", status: "doing", due: "2026-10-06", notes: "Cover the CSV and the PDF paths, and a job that times out." },
+  { id: "T-130", title: "Rotate the warehouse credentials", assignee: "Grace Mensah", status: "blocked", due: "2026-09-26", notes: "Waiting on the vendor to issue a second key." },
+  { id: "T-133", title: "Update the API changelog", assignee: "Oskar Lind", status: "todo", due: "2026-10-09", notes: "Three new endpoints and the pagination change." },
+];
+const wait = (ms) => new Promise((r) => setTimeout(r, ms));
+
+function Tasks() {
+  const [tasks, setTasks] = useState(TASKS);
+  const set = (id, status) => setTasks((all) => all.map((t) => (t.id === id ? { ...t, status } : t)));
+  return (
+    <DataTable
+      label="Tasks"
+      noun="task"
+      rows={tasks}
+      columns={[
+        { key: "title", header: "Task", sortable: true, hideable: false, cell: (r) => <span className="font-medium">{r.title}</span> },
+        { key: "assignee", header: "Assignee", sortable: true },
+        {
+          key: "status",
+          header: "Status",
+          sortable: true,
+          sortValue: (r) => ["blocked", "doing", "todo", "done"].indexOf(r.status),
+          cell: (r) => <Badge tone={TASK_STATUS[r.status].tone}>{TASK_STATUS[r.status].label}</Badge>,
+        },
+        { key: "due", header: "Due", sortable: true, cell: (r) => date(r.due) },
+        {
+          key: "notes",
+          header: "Notes",
+          searchable: true,
+          cell: (r) => (
+            <Tooltip label={r.notes}>
+              <span tabIndex={0} className="block max-w-56 truncate text-muted-foreground">
+                {r.notes}
+              </span>
+            </Tooltip>
+          ),
+        },
+      ]}
+      facets={[{ key: "status", label: "Status", options: Object.entries(TASK_STATUS).map(([value, s]) => ({ value, label: s.label })) }]}
+      paginate={false}
+      mobile="cards"
+      rowActions={(r) => [
+        (r.status === "todo" || r.status === "blocked") && {
+          label: "Start",
+          icon: "play",
+          inline: true,
+          onSelect: async () => {
+            await wait(600);
+            set(r.id, "doing");
+          },
+        },
+        r.status === "doing" && {
+          label: "Pause",
+          icon: "pause",
+          inline: true,
+          onSelect: async () => {
+            await wait(600);
+            set(r.id, "todo");
+          },
+        },
+        r.status === "doing" && {
+          label: "Complete",
+          icon: "check",
+          inline: true,
+          onSelect: async () => {
+            await wait(600);
+            set(r.id, "done");
+            toast.success(`${r.id} done`);
+          },
+        },
+        {
+          label: "Delete",
+          icon: "trash",
+          tone: "danger",
+          inline: true,
+          onSelect: async () => {
+            await wait(600);
+            if (r.status === "doing") return { ok: false, error: "pause it before deleting it." };
+            setTasks((all) => all.filter((t) => t.id !== r.id));
+            return { ok: true };
+          },
+        },
+        { label: "Copy ID", icon: "copy", onSelect: () => toast(`${r.id} copied`) },
+        { type: "separator" },
+        { label: "Open details", icon: "file", onSelect: () => toast(`Opening ${r.id}`) },
+      ]}
+      emptyTitle="No tasks"
+    />
+  );
+}
+
+// One order and its items: a summary above, the items as rows with a
+// View button in each (a demo of the table, not a new prop).
+const ORDER = { number: "#40318", placed: "2026-09-14", total: 1265 };
+const ORDER_ITEMS = [
+  { id: "oi-1", product: "Walnut standing desk", variant: "140 × 70 cm", amount: 690, status: "delivered", date: "2026-09-17" },
+  { id: "oi-2", product: "Mesh task chair", variant: "Graphite", amount: 385, status: "shipped", date: "2026-09-19" },
+  { id: "oi-3", product: "Monitor arm", variant: "Dual, black", amount: 140, status: "processing", date: "2026-09-22" },
+  { id: "oi-4", product: "Felt desk mat", variant: "Large, stone", amount: 50, status: "returned", date: "2026-09-18" },
+];
+const ORDER_STATUS = {
+  delivered: { label: "Delivered", tone: "success" },
+  shipped: { label: "Shipped", tone: "info" },
+  processing: { label: "Processing", tone: "neutral" },
+  returned: { label: "Returned", tone: "warning" },
+};
+
+function Orders() {
+  const [open, setOpen] = useState(null);
+  return (
+    <section className="grid gap-4">
+      <div>
+        <h2 className="text-lg font-semibold">Order history</h2>
+        <p className="mt-1 text-sm text-muted-foreground">Your recent orders, and the invoice for each.</p>
+      </div>
+      <Card padding="none" className="flex flex-wrap items-center justify-between gap-4 p-4">
+        <StatGroup variant="divided" columns={3} className="min-w-0 flex-1">
+          <Stat label="Order" value={ORDER.number} size="sm" />
+          <Stat label="Placed" value={date(ORDER.placed)} size="sm" />
+          <Stat label="Total" value={money(ORDER.total)} size="sm" />
+        </StatGroup>
+        <Button variant="primary" icon="download" onClick={() => toast(`Invoice for ${ORDER.number} downloaded`)}>
+          View invoice
+        </Button>
+      </Card>
+      <DataTable
+        label={`Items in order ${ORDER.number}`}
+        noun="item"
+        rows={ORDER_ITEMS}
+        searchable={false}
+        paginate={false}
+        mobile="cards"
+        columns={[
+          {
+            key: "product",
+            header: "Product",
+            hideable: false,
+            sortable: true,
+            cell: (r) => (
+              <span className="flex items-center gap-3">
+                <Image alt="" ratio="square" className="size-12 shrink-0" />
+                <span className="min-w-0 leading-tight">
+                  <span className="block font-medium">{r.product}</span>
+                  <span className="block text-xs text-muted-foreground">{r.variant}</span>
+                </span>
+              </span>
+            ),
+          },
+          { key: "amount", header: "Amount", align: "end", sortable: true, cell: (r) => money(r.amount) },
+          { key: "status", header: "Status", sortable: true, cell: (r) => <Badge tone={ORDER_STATUS[r.status].tone}>{ORDER_STATUS[r.status].label}</Badge> },
+          { key: "date", header: "Updated", sortable: true, cell: (r) => date(r.date) },
+        ]}
+        inlineActions={1}
+        rowActions={(r) => [
+          { label: "View", onSelect: () => setOpen(r) },
+          r.status === "shipped" && { label: "Track parcel", icon: "truck", onSelect: () => toast(`Tracking ${r.product}`) },
+          r.status === "delivered" && { label: "Return item", icon: "repeat", onSelect: () => toast(`Return started for ${r.product}`) },
+          { label: "Buy again", icon: "shopping-cart", onSelect: () => toast(`${r.product} added to cart`) },
+        ]}
+        totals={{ amount: money(ORDER_ITEMS.reduce((n, r) => n + r.amount, 0)) }}
+      />
+      <Sheet open={Boolean(open)} onClose={() => setOpen(null)} title={open?.product} description={open?.variant}>
+        {open ? (
+          <dl className="grid grid-cols-2 gap-3 text-sm">
+            <dt className="text-muted-foreground">Amount</dt>
+            <dd data-nums>{money(open.amount)}</dd>
+            <dt className="text-muted-foreground">Status</dt>
+            <dd>
+              <Badge tone={ORDER_STATUS[open.status].tone}>{ORDER_STATUS[open.status].label}</Badge>
+            </dd>
+            <dt className="text-muted-foreground">Updated</dt>
+            <dd>{date(open.date)}</dd>
+          </dl>
+        ) : null}
+      </Sheet>
+    </section>
+  );
+}
+
+export default function DataTableDemo() {
+  const [view, setView] = useState("invoices");
+  const views = (
+    <ToggleGroup
+      size="sm"
+      aria-label="Example"
+      value={view}
+      onChange={setView}
+      items={[
+        { value: "invoices", label: "Invoices" },
+        { value: "tasks", label: "Tasks" },
+        { value: "orders", label: "Orders" },
+      ]}
+    />
+  );
+  if (view === "tasks") {
+    return (
+      <div className="grid gap-4">
+        {views}
+        <Tasks />
+      </div>
+    );
+  }
+  if (view === "orders") {
+    return (
+      <div className="grid gap-4">
+        {views}
+        <Orders />
+      </div>
+    );
+  }
+  return (
+    <div className="grid gap-4">
+      {views}
+      <Invoices />
+    </div>
+  );
+}
+
+function Invoices() {
+  const [rows, setRows] = useState(makeInvoices);
+  const [state, setState] = useState("data");
+  const [mobile, setMobile] = useState("scroll");
+  const [open, setOpen] = useState(null);
+  const [group, setGroup] = useState("none");
+
+  const outstanding = useMemo(() => rows.filter((r) => r.status === "pending" || r.status === "overdue").reduce((s, r) => s + r.amount, 0), [rows]);
+
+  function markPaid(list) {
+    const ids = new Set(list.map((r) => r.id));
+    setRows((all) => all.map((r) => (ids.has(r.id) ? { ...r, status: "paid" } : r)));
+  }
+  function remove(list) {
+    const ids = new Set(list.map((r) => r.id));
+    setRows((all) => all.filter((r) => !ids.has(r.id)));
+  }
+
+  return (
+    <div className="grid gap-4">
+      <div className="flex flex-wrap items-center gap-2">
+        <ToggleGroup
+          size="sm"
+          aria-label="Demo state"
+          value={state}
+          onChange={setState}
+          items={[
+            { value: "data", label: "Invoices" },
+            { value: "loading", label: "Loading" },
+            { value: "empty", label: "Empty" },
+          ]}
+        />
+        <ToggleGroup
+          size="sm"
+          aria-label="On a phone"
+          value={mobile}
+          onChange={setMobile}
+          items={[
+            { value: "scroll", label: "Phone: scroll" },
+            { value: "cards", label: "Phone: cards" },
+          ]}
+        />
+        <ToggleGroup
+          size="sm"
+          aria-label="Group by"
+          value={group}
+          onChange={setGroup}
+          items={[
+            { value: "none", label: "No groups" },
+            { value: "status", label: "By status" },
+            { value: "owner", label: "By owner" },
+          ]}
+        />
+      </div>
+      <p className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
+        <span className="inline-flex items-center gap-1">
+          <Kbd>↑</Kbd>
+          <Kbd>↓</Kbd> move
+        </span>
+        <span className="inline-flex items-center gap-1">
+          <Kbd>Space</Kbd> select
+        </span>
+        <span className="inline-flex items-center gap-1">
+          <Kbd>→</Kbd>
+          <Kbd>←</Kbd> details
+        </span>
+        <span className="inline-flex items-center gap-1">
+          <Kbd>Enter</Kbd> open
+        </span>
+        <span className="inline-flex items-center gap-1">
+          <Kbd>Esc</Kbd> clear
+        </span>
+      </p>
+
+      <DataTable
+        label="Invoices"
+        noun="invoice"
+        rows={state === "empty" ? [] : rows}
+        loading={state === "loading"}
+        columns={COLUMNS}
+        facets={FACETS}
+        searchPlaceholder="Search invoices…"
+        defaultSort={[{ key: "issued", dir: "desc" }]}
+        mobile={mobile}
+        keyboard
+        stickyFirstColumn
+        groupBy={group === "none" ? undefined : group}
+        groupOrder={group === "status" ? ["overdue", "pending", "draft", "paid"] : undefined}
+        groupLabel={group === "status" ? (v) => STATUS[v]?.label ?? v : undefined}
+        groupSummary={(list) => money(sumOf(list, "amount"))}
+        groupFooter={(list) => ({ amount: money(sumOf(list, "amount")) })}
+        totals={(list) => ({ number: `${list.length} invoices`, amount: money(sumOf(list, "amount")) })}
+        defaultExpanded={["inv-2100"]}
+        renderExpanded={(r) => (
+          <dl className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm sm:grid-cols-4">
+            <div>
+              <dt className="text-xs text-muted-foreground">Billing email</dt>
+              <dd className="truncate">{r.email}</dd>
+            </div>
+            <div>
+              <dt className="text-xs text-muted-foreground">Method</dt>
+              <dd>{r.method}</dd>
+            </div>
+            <div>
+              <dt className="text-xs text-muted-foreground">Owner</dt>
+              <dd>{r.owner}</dd>
+            </div>
+            <div>
+              <dt className="text-xs text-muted-foreground">Terms</dt>
+              <dd>Net 30</dd>
+            </div>
+          </dl>
+        )}
+        rowTone={(r) => (r.status === "overdue" ? "warning" : null)}
+        onRowClick={setOpen}
+        rowActions={(r) => [
+          { label: "Open", icon: "eye", onSelect: () => setOpen(r) },
+          r.status !== "paid" && r.status !== "draft" && { label: "Mark paid", icon: "check", onSelect: () => markPaid([r]) },
+          { label: "Copy number", icon: "copy", onSelect: () => toast(`${r.number} copied`) },
+          { type: "separator" },
+          { label: "Delete", icon: "trash", tone: "danger", onSelect: () => remove([r]) },
+        ]}
+        bulkActions={[
+          {
+            label: "Mark paid",
+            icon: "check",
+            onSelect: async (list) => {
+              await new Promise((r) => setTimeout(r, 400));
+              const drafts = list.filter((r) => r.status === "draft");
+              if (drafts.length) return { ok: false, error: `${drafts.map((d) => d.number).join(", ")} ${drafts.length === 1 ? "is a draft" : "are drafts"}; send before marking paid.` };
+              markPaid(list);
+              toast.success(`${list.length} marked paid`);
+              return { ok: true };
+            },
+          },
+          { label: "Export", icon: "download", keepSelection: true, onSelect: (list) => toast(`${list.length} invoices exported`) },
+          {
+            label: "Delete",
+            icon: "trash",
+            tone: "danger",
+            onSelect: (list) => {
+              remove(list);
+              toast(`${list.length} deleted`);
+            },
+          },
+        ]}
+        toolbar={
+          <Button
+            variant="primary"
+            icon="plus"
+            onClick={() => {
+              const n = 2041 + rows.length + Math.floor(Math.random() * 1000);
+              setRows((all) => [
+                { id: `inv-${n}`, number: `INV-${n}`, customer: "New customer", email: "billing@example.com", status: "draft", amount: 0, issued: TODAY, due: TODAY, owner: "Maya", method: "Card" },
+                ...all,
+              ]);
+            }}
+          >
+            New invoice
+          </Button>
+        }
+        footer={
+          state === "data" ? (
+            <p data-nums className="text-sm text-muted-foreground">
+              Outstanding across all invoices: <span className="font-medium text-foreground">{money(outstanding)}</span>
+            </p>
+          ) : null
+        }
+        emptyTitle="No invoices yet"
+        emptyBody="Invoices you send will be listed here."
+        emptyAction={
+          <Button variant="primary" icon="plus" onClick={() => setState("data")}>
+            New invoice
+          </Button>
+        }
+      />
+
+      <Budget />
+
+      <Sheet open={Boolean(open)} onClose={() => setOpen(null)} title={open?.number} description={open?.customer}>
+        {open ? (
+          <dl className="grid grid-cols-2 gap-3 text-sm">
+            <dt className="text-muted-foreground">Status</dt>
+            <dd>
+              <Badge tone={STATUS[open.status].tone}>{STATUS[open.status].label}</Badge>
+            </dd>
+            <dt className="text-muted-foreground">Amount</dt>
+            <dd data-nums>{money(open.amount)}</dd>
+            <dt className="text-muted-foreground">Issued</dt>
+            <dd>{date(open.issued)}</dd>
+            <dt className="text-muted-foreground">Due</dt>
+            <dd>{date(open.due)}</dd>
+            <dt className="text-muted-foreground">Owner</dt>
+            <dd>{open.owner}</dd>
+            <dt className="text-muted-foreground">Billing email</dt>
+            <dd className="truncate">{open.email}</dd>
+          </dl>
+        ) : null}
+      </Sheet>
+    </div>
+  );
+}

package/registry/blocks/data-table/index.js

@@ -0,0 +1,5 @@
+// The DataTable block — `makersclaw add data-table`. Fixed: compose it
+// through its props (README.md beside this file); a table it cannot be is
+// your own component in components/, built from the kit's Table parts.
+export { DataTable } from "./data-table";
+export { useControllable, processRows, sortRows, searchRows, filterRows, facetOptions, nextSort, groupRows, groupValueOf } from "./model";