Data Table

import {
  type ColumnDef,
  type SortingState,
  getCoreRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table";
import { useState } from "react";
import { DataTable } from "@/components/ui/hiip-ui/data-table";

type DemoRow = { creator: string; platform: string; stage: string };

// ⚠️ Module scope, NOT inside the component, and this is not a style choice.
// `useReactTable` compares `columns` and `data` BY REFERENCE. Rebuilt on every
// render, the first sort click sets state, the re-render hands the table two
// fresh arrays, the table re-resolves and schedules another render — and the
// tab locks up with no error in the console. Stable identities break the loop.
const DEMO_COLUMNS: ColumnDef<DemoRow>[] = [
  { accessorKey: "creator", header: "Creator" },
  {
    accessorKey: "platform",
    header: "Platform",
    // A custom cell renderer, to show the shell does not care what a cell
    // holds. Kept self-contained: a demo that reaches for another registry
    // item ties two items' lifetimes together.
    cell: (ctx) => (
      <span className="rounded-md bg-muted px-1.5 py-0.5 font-mono text-xs">
        {ctx.row.original.platform}
      </span>
    ),
  },
  { accessorKey: "stage", header: "Stage" },
];

// Placeholders, not invented people: a docs demo that puts plausible names on
// screen reads as real data the moment it is screenshotted into a deck.
const DEMO_ROWS: DemoRow[] = [
  { creator: "Creator 01", platform: "tiktok", stage: "Negotiating" },
  { creator: "Creator 02", platform: "whatsapp", stage: "Replied" },
  { creator: "Creator 03", platform: "viber", stage: "Closed" },
];

function DataTableDemo() {
  // The shell renders a sort control for every column that CAN sort, so the
  // caller owes it a sorted row model and somewhere to keep the state — with
  // neither, the header is a button that does nothing.
  const [sorting, setSorting] = useState<SortingState>([]);
  const table = useReactTable({
    data: DEMO_ROWS,
    columns: DEMO_COLUMNS,
    state: { sorting },
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
  });
  return (
    <div className="w-full">
      <DataTable table={table} rowKey={(r) => r.creator} autoHeight />
    </div>
  );
}