Data Table

"use client";
import { DataTable, type DataTableColumn } from "@/components/ui/data-table";

interface Order {
  id: string;
  order: string;
  customer: string;
  total: number;
  status: string;
}

const data: Order[] = Array.from({ length: 24 }, (_, i) => ({
  id: `ord-${i + 1}`,
  order: `#${String(2400 + i)}`,
  customer: ["Alex Kim", "Sara Chen", "Jordan Lee", "Maya Patel"][i % 4],
  total: Math.round((i * 53.7 + 24) * 100) / 100,
  status: ["Paid", "Pending", "Refunded"][i % 3],
}));

const columns: DataTableColumn<Order>[] = [
  { id: "order", header: "Order", accessor: (row) => row.order },
  { id: "customer", header: "Customer", accessor: (row) => row.customer },
  { id: "total", header: "Total", accessor: (row) => row.total, cell: (row) => `$${row.total.toFixed(2)}`, align: "right" },
  { id: "status", header: "Status", accessor: (row) => row.status },
];

export default function Example() {
  return (
    <div className="w-full p-6">
      <DataTable
        data={data}
        columns={columns}
        getRowId={(row) => row.id}
        preset="advanced"
        pageSize={8}
        border
        renderExpanded={(row) => (
          <div className="text-xs opacity-80">
            Order {row.order} for {row.customer} — status {row.status}.
          </div>
        )}
        theme="dark"
      />
    </div>
  );
}

"use client";
import { useMemo } from "react";
import { DataTable, type DataTableColumn } from "@/components/ui/data-table";

interface EventRow {
  id: string;
  event: string;
  service: string;
  latency: number;
  status: string;
}

const columns: DataTableColumn<EventRow>[] = [
  { id: "event", header: "Event", accessor: (row) => row.event },
  { id: "service", header: "Service", accessor: (row) => row.service },
  { id: "latency", header: "Latency (ms)", accessor: (row) => row.latency, align: "right" },
  { id: "status", header: "Status", accessor: (row) => row.status },
];

export default function Example() {
  const data = useMemo<EventRow[]>(
    () =>
      Array.from({ length: 10000 }, (_, i) => ({
        id: `evt-${i}`,
        event: `Event ${i + 1}`,
        service: ["api", "web", "worker", "cron"][i % 4],
        latency: ((i * 37) % 900) + 12,
        status: i % 13 === 0 ? "error" : "ok",
      })),
    []
  );
  return (
    <div className="w-full p-6">
      <DataTable
        data={data}
        columns={columns}
        getRowId={(row) => row.id}
        preset="enterprise"
        maxHeight={400}
        rowHeight={44}
        theme="dark"
      />
    </div>
  );
}

"use client";
import { DataTable, type DataTableColumn } from "@/components/ui/data-table";

interface Person {
  id: string;
  name: string;
  team: string;
  region: string;
  oncall: string;
}

const data: Person[] = [
  { id: "1", name: "Alex Kim", team: "Platform", region: "West", oncall: "Yes" },
  { id: "2", name: "Maya Patel", team: "Platform", region: "West", oncall: "No" },
  { id: "3", name: "Sam Rivera", team: "Platform", region: "East", oncall: "No" },
  { id: "4", name: "Sara Chen", team: "Product", region: "East", oncall: "Yes" },
  { id: "5", name: "Ryan Wu", team: "Product", region: "Central", oncall: "No" },
  { id: "6", name: "Jordan Lee", team: "Growth", region: "Central", oncall: "No" },
];

const columns: DataTableColumn<Person>[] = [
  { id: "team", header: "Team", accessor: (row) => row.team },
  { id: "name", header: "Name", accessor: (row) => row.name },
  { id: "region", header: "Region", accessor: (row) => row.region, rowSpan: true },
  { id: "oncall", header: "On call", accessor: (row) => row.oncall },
];

export default function Example() {
  return (
    <div className="w-full p-6">
      <DataTable data={data} columns={columns} getRowId={(row) => row.id} groupBy="team" border theme="dark" />
    </div>
  );
}

"use client";
import { DataTable, type DataTableColumn } from "@/components/ui/data-table";

interface ReportRow {
  id: string;
  name: string;
  q1: number;
  q2: number;
  q3: number;
  q4: number;
  owner: string;
}

const data: ReportRow[] = [
  { id: "1", name: "Alex Kim", q1: 42, q2: 51, q3: 48, q4: 60, owner: "Platform" },
  { id: "2", name: "Sara Chen", q1: 38, q2: 47, q3: 52, q4: 58, owner: "Product" },
  { id: "3", name: "Jordan Lee", q1: 51, q2: 44, q3: 47, q4: 63, owner: "Growth" },
];

const columns: DataTableColumn<ReportRow>[] = [
  { id: "name", header: "Name", accessor: (row) => row.name, freeze: "left", width: 140 },
  {
    id: "h1",
    header: "H1",
    accessor: () => null,
    columns: [
      { id: "q1", header: "Q1", accessor: (row) => row.q1, align: "right" },
      { id: "q2", header: "Q2", accessor: (row) => row.q2, align: "right" },
    ],
  },
  {
    id: "h2",
    header: "H2",
    accessor: () => null,
    columns: [
      { id: "q3", header: "Q3", accessor: (row) => row.q3, align: "right" },
      { id: "q4", header: "Q4", accessor: (row) => row.q4, align: "right" },
    ],
  },
  { id: "owner", header: "Owner", accessor: (row) => row.owner },
];

export default function Example() {
  return (
    <div className="w-full p-6">
      <DataTable data={data} columns={columns} getRowId={(row) => row.id} sortable border theme="dark" />
    </div>
  );
}