Table

"use client";

import { Table } from "@/ui";

interface Task {
  title: string;
  owner: string;
  priority: "high" | "medium" | "low";
  points: number;
  done: boolean;
}

const tasks: Task[] = [
  { title: "Design review", owner: "Ada", priority: "high", points: 3, done: true },
  { title: "API integration", owner: "Linus", priority: "medium", points: 8, done: false },
  { title: "Write tests", owner: "Grace", priority: "high", points: 5, done: false },
  { title: "Release notes", owner: "Ada", priority: "low", points: 1, done: true },
];

export default function Demo() {
  return (
    <div className="w-full max-w-xl">
      <Table
        data={tasks}
        getKey={(row) => row.title}
        columns={[
          { key: "title", header: "Task", sortable: true },
          { key: "owner", header: "Owner", width: "7rem" },
          {
            key: "priority",
            header: "Priority",
            sortable: true,
            width: "7rem",
            render: (row) => (
              <span
                className={
                  row.priority === "high"
                    ? "font-medium text-danger"
                    : row.priority === "medium"
                      ? "text-warning"
                      : "text-muted-foreground"
                }
              >
                {row.priority}
              </span>
            ),
          },
          { key: "points", header: "Points", sortable: true, width: "6rem" },
          { key: "done", header: "Done", width: "5rem", render: (row) => (row.done ? "✓" : "—") },
        ]}
      />
    </div>
  );
}

"use client";

import * as React from "react";
import { Table, useRemoteSort } from "@/ui";

interface Product {
  name: string;
  category: string;
  price: number;
  stock: number;
}

const allProducts: Product[] = [
  { name: "Mechanical keyboard", category: "Peripherals", price: 129, stock: 42 },
  { name: "Wireless mouse", category: "Peripherals", price: 49, stock: 120 },
  { name: "4K monitor", category: "Displays", price: 349, stock: 18 },
  { name: "USB-C hub", category: "Accessories", price: 39, stock: 200 },
  { name: "Laptop stand", category: "Accessories", price: 29, stock: 75 },
];

export default function Demo() {
  const remote = useRemoteSort<keyof Product>({
    sortableKeys: ["name", "price", "stock"],
    onSortChange: (sort) => {
      // In production: refetch with ?sortKey=...&sortOrder=...
      console.log("query:", `?sortKey=${sort.key}&sortOrder=${sort.direction}`);
    },
  });

  const sorted = React.useMemo(() => {
    const active = remote.sort;
    if (!active) return allProducts;
    const { key, direction } = active;
    return [...allProducts].sort((a, b) => {
      const cmp = a[key] > b[key] ? 1 : a[key] < b[key] ? -1 : 0;
      return direction === "asc" ? cmp : -cmp;
    });
  }, [remote.sort]);

  return (
    <div className="flex w-full max-w-xl flex-col gap-2">
      <Table
        data={sorted}
        sort={remote.sort}
        onSortChange={remote.setSort}
        columns={[
          {
            key: "name",
            header: "Name",
            sortable: true,
            render: (row) => <span className="font-medium">{row.name}</span>,
          },
          { key: "category", header: "Category" },
          { key: "price", header: "Price", sortable: true, width: "7rem", render: (row) => `$${row.price}` },
          { key: "stock", header: "Stock", sortable: true, width: "6rem" },
        ]}
      />
      <p className="text-xs text-muted-foreground">
        Remote mode: sorting is delegated to the database via{" "}
        <code className="rounded bg-muted px-1">{remote.queryString || "(unsorted)"}</code>
      </p>
    </div>
  );
}

"use client";import { Table } from "@/ui";interface Task {  title: string;  owner: string;  priority: "high" | "medium" | "low";  done: boolean;}const titles = [  "Design review", "API integration", "Write tests", "Release notes",  "Fix flaky test", "Update docs", "Refactor hooks", "Optimize bundle",  "Add telemetry", "Rotate keys", "Patch CVE", "Migrate config",];const owners = ["Ada", "Linus", "Grace", "Edsger"];const priorities = ["high", "medium", "low"] as const;const tasks: Task[] = titles.map((title, i) => ({  title,  owner: owners[i % owners.length],  priority: priorities[i % priorities.length],  done: i % 3 === 0,}));export default function Demo() {  return (    <div className="w-full max-w-xl">      <Table        data={tasks}        getKey={(row) => row.title}        classNames={{ body: "h-48" }}        columns={[          { key: "title", header: "Task", sortable: true },          { key: "owner", header: "Owner", sortable: true },          { key: "priority", header: "Priority" },        ]}      />    </div>  );}