TanStack Table — গভীরে (Explore)

data (raw)
  ↓  getCoreRowModel      → মূল row তৈরি
  ↓  getFilteredRowModel  → search/filter মেরে বাকি
  ↓  getSortedRowModel    → সাজানো
  ↓  getPaginationRowModel → কয়টি row দেখাবে
table.getRowModel().rows

"use client";

import { useState } from "react";
import {
  flexRender,
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable,
  type SortingState,
} from "@tanstack/react-table";

export function ProductTable({ data, columns }: ProductTableProps) {
  // যেসব state আমরা চাই, ওগুলো এখানে ধরে দিই
  const [sorting, setSorting] = useState<SortingState>([
    { id: "price", desc: true },
  ]);
  const [globalFilter, setGlobalFilter] = useState("");

  const table = useReactTable({
    data,
    columns,
    getRowId: (row) => row.id,
    state: { sorting, globalFilter },
    onSortingChange: setSorting,
    onGlobalFilterChange: setGlobalFilter,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    initialState: { pagination: { pageSize: 10 } },
  });
}

<Table>
  <TableHeader>
    {table.getHeaderGroups().map((headerGroup) => (
      <TableRow key={headerGroup.id}>
        {headerGroup.headers.map((header) => (
          <TableHead key={header.id}>
            {header.isPlaceholder
              ? null
              : flexRender(
                  header.column.columnDef.header,
                  header.getContext()
                )}
          </TableHead>
        ))}
      </TableRow>
    ))}
  </TableHeader>
  <TableBody>
    {table.getRowModel().rows.map((row) => (
      <TableRow key={row.id}>
        {row.getVisibleCells().map((cell) => (
          <TableCell key={cell.id}>
            {flexRender(
              cell.column.columnDef.cell,
              cell.getContext()
            )}
          </TableCell>
        ))}
      </TableRow>
    ))}
  </TableBody>
</Table>

const table = useReactTable({
  data: data?.items ?? [],
  columns: productColumns,
  getRowId: (row) => row.id,

  // state table-এর, কিন্তু খোলা (controlled)
  state: { sorting, pagination },
  onSortingChange: setSorting,
  onPaginationChange: setPagination,

  // "আমি নিজে transform করব না" — শুধু state রাখব
  manualSorting: true,
  manualFiltering: true,
  manualPagination: true,

  // মোট কত row আছে (API থেকে) — page count হিসাবের জন্য
  rowCount: data?.total ?? -1,

  // এখন শুধু core যথেষ্ট — বাকি model দিলে কাজ হতো না
  getCoreRowModel: getCoreRowModel(),
});

const [sorting, setSorting] = useState<SortingState>([
  { id: "createdAt", desc: true },
]);
const [pagination, setPagination] = useState<PaginationState>({
  pageIndex: 0,
  pageSize: 10,
});

// table-এর 0-based pageIndex → API-র 1-based page
const params: ProductQueryParams = {
  page: pagination.pageIndex + 1,
  pageSize: pagination.pageSize,
  search: search || undefined,
  sortBy: sorting[0]?.id as ProductQueryParams["sortBy"],
  sortOrder: sorting[0]?.desc ? "desc" : "asc",
};

const { data, isPending, isFetching } = useProducts(params);

useEffect(() => {
  setPagination((old) =>
    old.pageIndex === 0 ? old : { ...old, pageIndex: 0 },
  );
}, [search, category, status, sorting]);

// ছাড়া: row.id = "0", "1", "2"  → সাজালেই বদলে যায়
getRowId: (row) => row.id,   // "p-01" — অপরিবর্তনীয়

export function ColumnVisibility({ table }: { table: Table<unknown> }) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" size="sm" />}>
        কলাম
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        {table
          .getAllLeafColumns()
          .filter((column) => column.getCanHide())
          .map((column) => (
            <DropdownMenuCheckboxItem
              key={column.id}
              checked={column.getIsVisible()}
              onCheckedChange={(checked) =>
                column.toggleVisibility(checked)
              }
            >
              {column.id}
            </DropdownMenuCheckboxItem>
          ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

{
  id: "select",
  header: ({ table }) => {
    const all = table.getIsAllPageRowsSelected();
    const some = table.getIsSomePageRowsSelected();
    return (
      <Checkbox
        aria-label="সব row নির্বাচন"
        checked={all}
        indeterminate={!all && some}
        onCheckedChange={(checked) =>
          table.toggleAllPageRowsSelected(checked)
        }
      />
    );
  },
  cell: ({ row }) => (
    <Checkbox
      aria-label={`${row.original.name} নির্বাচন`}
      checked={row.getIsSelected()}
      onCheckedChange={(checked) => row.toggleSelected(checked)}
    />
  ),
  enableSorting: false,
  enableHiding: false,
}

// নির্বাচিত row-এর কাজ (bulk delete ইত্যাদি)
const selectedIds = Object.keys(table.getState().rowSelection);
const selectedRows = table.getSelectedRowModel().rows;

{rows.length === 0 ? (
  <TableRow>
    <TableCell
      colSpan={table.getVisibleLeafColumns().length}
      className="h-24 text-center text-muted-foreground"
    >
      কোনো product মেলেনি।
    </TableCell>
  </TableRow>
) : (
  rows.map((row) => <TableRow key={row.id}>…</TableRow>)
)}

{isPending
  ? Array.from({ length: 5 }, (_, i) => (
      <TableRow key={i}>
        {table.getVisibleLeafColumns().map((column) => (
          <TableCell key={column.id}>
            <Skeleton className="h-4 w-full" />
          </TableCell>
        ))}
      </TableRow>
    ))
  : rows.map((row) => …)}