Sortable table

import { useState } from "react"
import { SortableTable } from "@/components/ui/sortable-table"

const projects = [
  { id: "atlas", name: "Atlas platform", owner: "Mara Chen", status: "Active", budget: 48000 },
  { id: "harbour", name: "Harbour redesign", owner: "Noor Haddad", status: "In review", budget: 21000 },
  { id: "notes", name: "Release notes", owner: "Ivo Petrov", status: "Active", budget: 6500 },
  { id: "wayfinder", name: "Wayfinder", owner: "Sana Okafor", status: "Paused", budget: 33000 },
];

export function ProjectTable() {
  const [selection, setSelection] = useState<string[]>([]);
  return (
    <div className="w-full max-w-2xl">
      <SortableTable
        caption="Projects"
        rows={projects}
        getRowId={(row) => row.id}
        selection={selection}
        onSelectionChange={setSelection}
        defaultSort={{ id: "name", direction: "asc" }}
        columns={[
          { id: "name", header: "Project", cell: (row) => row.name, sortValue: (row) => row.name },
          { id: "owner", header: "Owner", cell: (row) => row.owner, sortValue: (row) => row.owner },
          { id: "status", header: "Status", cell: (row) => row.status, sortValue: (row) => row.status },
          { id: "budget", header: "Budget", cell: (row) => `$${row.budget.toLocaleString("en-US")}`, sortValue: (row) => row.budget, align: "end" },
        ]}
      />
    </div>
  );
}