Table

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@tulip-systems/core/data-tables";

<Table>
  <TableCaption>A list of your recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[100px]">Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Method</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">INV001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>Credit Card</TableCell>
      <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
  </TableBody>
</Table>

"use client";

import type { TableColumnDef } from "@tulip-systems/core/data-tables";
import {
  createTableConfig,
  TableConfigProvider,
  useLocalStrategy,
} from "@tulip-systems/core/data-tables/client";

function CustomerLocalTableProvider({
  data,
  columns,
  children,
}: {
  data: { id: string; name: string }[];
  columns: TableColumnDef<{ id: string; name: string }>[];
  children: React.ReactNode;
}) {
  const strategy = useLocalStrategy({ total: data.length });

  const config = createTableConfig({
    queryData: data,
    columns,
    getRowId: (row) => row.id,
    strategy,
  });

  return <TableConfigProvider config={config}>{children}</TableConfigProvider>;
}