Data TableData Table

"use client";

// Function props (formatters, cells) need a client module; a Server Component can render this one.
import { DataTable, StatusCell, type DataColumn } from "@/components/ui/notchset/data-table";

type Run = { id: string; agent: string; status: "ok" | "fail"; cost: number };

const columns: DataColumn<Run>[] = [
  { key: "id", header: "RUN", width: "110px" },
  { key: "agent", header: "AGENT", width: "minmax(110px,1fr)", sortable: true },
  { key: "status", header: "STATUS", width: "96px", cell: (r) => <StatusCell status={r.status} /> },
  { key: "cost", header: "COST", width: "90px", align: "end", sortable: true, cell: (r) => `$${r.cost.toFixed(4)}` },
];
const runs: Run[] = [
  { id: "run_8f3a1", agent: "Planner", status: "ok", cost: 0.0021 },
  { id: "run_8f3a2", agent: "Triage", status: "fail", cost: 0.0007 },
];

export function RunsTable() {
  return <DataTable columns={columns} rows={runs} defaultSort={{ key: "cost", dir: -1 }} />;
}