Server-side Mode — সার্ভার থেকে ডেটা

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

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

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

  // মোট কত row আছে (API থেকে)
  rowCount: data?.total ?? -1,

  // ⚠️ শুধু core — বাকি model দিলে কাজ হবে না
  getCoreRowModel: getCoreRowModel(),
});

export function ProductsTable() {
  const [sorting, setSorting] = useState<SortingState>([
    { id: "createdAt", desc: true },   // নতুনগুলো আগে
  ]);
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 10,
  });
  const [search, setSearch] = useState("");
  const [category, setCategory] = useState<string | undefined>();

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

  // ② params → ডেটা
  const { data, isPending, isFetching } = useProducts(params);

  // ③ ডেটা → table
  const table = useReactTable({
    data: data?.items ?? [],
    columns,
    getCoreRowModel: getCoreRowModel(),
    getRowId: (row) => row.id,
    state: { sorting, pagination, globalFilter: search, columnFilters: … },
    onSortingChange: setSorting,
    onPaginationChange: setPagination,
    onGlobalFilterChange: setSearch,
    manualSorting: true,
    manualFiltering: true,
    manualPagination: true,
    rowCount: data?.total ?? -1,
  });
}

// API call
const productKeys = {
  all: ["products"] as const,
  list: (params: ProductQueryParams) =>
    [...productKeys.all, "list", params] as const,
};

export function useProducts(params: ProductQueryParams) {
  return useQuery({
    queryKey: productKeys.list(params),
    queryFn: ({ signal }) =>
      axios
        .get<ProductsResponse>("/api/products", {
          params,
          signal,          // ← request বাতিল হলে query-ও বাতিল
        })
        .then((res) => res.data),
    placeholderData: keepPreviousData,  // ← পরের পেজ আসা পর্যন্ত পুরোনো দেখায়
  });
}

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

const sortKey = sorting[0]?.id;
const sortDir = sorting[0]?.desc;

useEffect(() => {
  setPagination((old) =>
    old.pageIndex === 0 ? old : { ...old, pageIndex: 0 },
  );
}, [search, category, sortKey, sortDir]); // ✅ পরিষ্কার

import { useEffect, useState } from "react";

export function useDebouncedValue<T>(value: T, delay = 300): T {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debounced;
}

const [searchInput, setSearchInput] = useState("");
const search = useDebouncedValue(searchInput, 350);

// query-তে debounced মান যায়
const params = { …, search: search || undefined };

// input-এ তাৎক্ষণিক মান বসে — দ্রুত টাইপ feel হয়
<Input
  value={searchInput}
  onChange={(e) => setSearchInput(e.target.value)}
/>

// input লিখছে, request যাচ্ছে ৩৫০ms পরে
setSearchInput("lap")   // ← তাৎক্ষণিক: input দেখায়
                        // ← ৩৫০ms পরে: search = "lap" → queryKey বদলায়
                        // ← "laptop" লিখলে আগের timer বাতিল

"use client";

import { useQueryState } from "nuqs/sticky";
import type { SortingState } from "@tanstack/react-table";

export function ProductsTable() {
  const [page, setPage] = useQueryState("page", {
    parse: Number,
    defaultValue: 1,
  });
  const [sort, setSort] = useQueryState("sort");
  const [q, setQ] = useQueryState("q");

  // URL → table state
  const [sorting, setSorting] = useState<SortingState>(() =>
    sort ? [{ id: sort.split(":")[0], desc: sort.endsWith(":desc") }] : [],
  );
  const [pagination, setPagination] = useState({
    pageIndex: page - 1,
    pageSize: 10,
  });

  // table state → URL
  const handleSortingChange = (updater: OnChangeFn<SortingState>) => {
    setSorting((old) => {
      const next = typeof updater === "function" ? updater(old) : updater;
      const first = next[0];
      setSort(first ? `${first.id}:${first.desc ? "desc" : "asc"}` : null);
      return next;
    });
  };

// ✅ মোট ঠিক জানা আছে
rowCount: data?.total ?? -1,

// ⚠️ ফিল্টার বদলালে total নতুন — loading চলাকালীন পুরোনো total থাকে
rowCount: data?.total ?? 0,   // ← 0 হলে getPageCount() = 0 হয়ে UI ভাঙে

const isPageCountSafe = !isPending && data?.total != null;

// পেজ কন্ট্রোল loading-এর সময় hide করা নিরাপদ
{isPageCountSafe && (
  <TablePagination table={table} />
)}

const rows = table.getRowModel().rows;
const colCount = table.getVisibleLeafColumns().length;

<TableBody>
  {isPending ? (
    // প্রথমবার — পুরো স্কেলেটন
    Array.from({ length: 5 }).map((_, i) => (
      <TableRow key={i}>
        {Array.from({ length: colCount }).map((_, j) => (
          <TableCell key={j}>
            <Skeleton className="h-4 w-full" />
          </TableCell>
        ))}
      </TableRow>
    ))
  ) : rows.length === 0 ? (
    // ফলাফল নেই
    <TableRow>
      <TableCell colSpan={colCount} className="h-32 text-center">
        <SearchX className="mx-auto mb-2 size-8 text-muted-foreground" />
        <p className="font-medium">কোনো পণ্য পাওয়া যায়নি</p>
        <p className="text-sm text-muted-foreground">
          ফিল্টার বদলে দেখুন
        </p>
      </TableCell>
    </TableRow>
  ) : (
    rows.map((row) => (
      <TableRow
        key={row.id}
        data-state={row.getIsSelected() && "selected"}
        className={isFetching ? "opacity-60 transition-opacity" : undefined}
      >
        {row.getVisibleCells().map((cell) => (
          <TableCell key={cell.id}>
            {flexRender(cell.column.columnDef.cell, cell.getContext())}
          </TableCell>
        ))}
      </TableRow>
    ))
  )}
</TableBody>

import { keepPreviousData, useQuery } from "@tanstack/react-query";

type ProductSortField = "name" | "price" | "stock" | "createdAt";
type SortOrder = "asc" | "desc";

type ProductQueryParams = {
  page: number;
  pageSize: number;
  search?: string;
  category?: string;
  sortBy?: ProductSortField;
  sortOrder?: SortOrder;
};

type ProductsResponse = {
  items: Product[];
  total: number;
  page: number;
  pageSize: number;
};

// Next.js route handler
export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const page = Math.max(1, Number(searchParams.get("page") ?? 1));
  const pageSize = Math.min(100, Number(searchParams.get("pageSize") ?? 10));
  const search = searchParams.get("search") ?? undefined;
  const sortBy = (searchParams.get("sortBy") ?? "createdAt") as ProductSortField;
  const sortOrder = (searchParams.get("sortOrder") ?? "desc") as SortOrder;

  const where = search
    ? { name: { contains: search, mode: "insensitive" } }
    : {};

  const [total, items] = await Promise.all([
    prisma.product.count({ where }),
    prisma.product.findMany({
      where,
      skip: (page - 1) * pageSize,
      take: pageSize,
      orderBy: { [sortBy]: sortOrder },
    }),
  ]);

  return Response.json({ items, total, page, pageSize });
}

const totalMatching = data?.total ?? 0;
const onThisPage = table.getRowModel().rows.length;

// পরের পেজেও বেছে থাকবে কিনা
const isSelectingAll = table.getIsAllRowsSelected();

// "সব ১২৮৪টি বেছে নিন" লিংক দেখাতে
{!table.getIsAllPageRowsSelected() && totalMatching > onThisPage && (
  <Button
    variant="link"
    onClick={() => table.toggleAllRowsSelected(true)}
  >
    সব {totalMatching}টি বেছে নিন
  </Button>
)}