Advanced Features — grouping, expanding, virtualizing

const [grouping, setGrouping] = useState<GroupingState>([]);

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  getSortedRowModel: getSortedRowModel(),
  getGroupedRowModel: getGroupedRowModel(),   // ← এটা ছাড়া grouping হবে না
  getExpandedRowModel: getExpandedRowModel(),
  state: { grouping, expanded },
  onGroupingChange: setGrouping,
  onExpandedChange: setExpanded,
});

// group করা শুরু
table.setGrouping([{ id: "category" }]);

// aggregate
column.getAggregationFn();
row.getValue(columnId);   // group row-এ এটাই গণনীত মান

{
  accessorKey: "price",
  aggregationFn: "sum",        // built-in: sum, min, max, mean, count…
  header: "মোট মূল্য",
  cell: ({ getValue, row }) => {
    // group header row-এ aggregate দেখায়
    if (row.getIsGrouped()) {
      return (
        <span className="font-semibold">
          {formatPrice(getValue<number>())}
        </span>
      );
    }
    return formatPrice(row.original.price);
  },
}

// group header row দেখানো
table.getRowModel().rows.map((row) => {
  if (row.getIsGrouped()) {
    return (
      <TableRow className="bg-muted/50 hover:bg-muted/50">
        {row.getVisibleCells().map((cell) => (
          <TableCell key={cell.id}>
            {flexRender(cell.column.columnDef.cell, cell.getContext())}
          </TableCell>
        ))}
      </TableRow>
    );
  }

  return (
    <TableRow className={row.getIsSubRow() ? "pl-6" : undefined}>
      {/* … */}
    </TableRow>
  );
})}

// ① sub-row ডেটা দরকার
type Order = {
  id: string;
  total: number;
  items: { id: string; name: string; qty: number }[];
};

// ② expanded state
const [expanded, setExpanded] = useState<ExpandedState>({});
// { "o-01": true, "o-05": true }

const table = useReactTable({
  data: orders,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getExpandedRowModel: getExpandedRowModel(),
  state: { expanded },
  onExpandedChange: setExpanded,

  // তিনটি জিনিস লাগে
  getSubRows: (row) => row.items,   // sub-row কোথা
  expandRows: true,                 // rendering-এ খোলা সারি
});

// একটা row খুলে বন্ধ করা
row.toggleExpanded();
row.getIsExpanded();
row.getCanExpand();
row.getLeafRows();        // সব স্তরের শেষ পর্যন্ত শুধু leaf
row.getParentRow();

// পুরোটা খুলে/বন্ধ
table.getIsAllRowsExpanded();
table.toggleAllRowsExpanded();
table.getCanExpandRows();   // একটা sub-row আছে কিনা

// expand করার বোতাম
cell: ({ row }) =>
  row.getCanExpand() ? (
    <Button
      variant="ghost"
      size="icon-sm"
      onClick={row.getToggleExpandedHandler()}
      aria-label={row.getIsExpanded() ? "ভাঙুন" : "খুলুন"}
    >
      {row.getIsExpanded()
        ? <ChevronDown className="size-4" />
        : <ChevronRight className="size-4" />}
    </Button>
  ) : (
    <span className="w-8" />   // ← সারিগুলো align না হলে ঝাঁপায়
  )

<TableCell style={{ paddingLeft: `${row.depth * 24 + 16}px` }}>
  …
</TableCell>

const table = useReactTable({
  // …
  getFilteredRowModel: getFilteredRowModel(),
  getFacetedRowModel: getFacetedRowModel(),   // ← এটা ছাড়া কাজ হবে না
  getFacetedUniqueValues: getFacetedUniqueValues(),
  getFacetedMinMaxValues: getFacetedMinMaxValues(),

  manualFiltering: true,   // অন্য filter manual হলে এগুলো নিজে থেকেই হবে
  state: { columnFilters },
  onColumnFiltersChange: setColumnFilters,
});

// কোন কলামে কোন অপশন বাকি আছে
table.getColumn("category")?.getFacetedUniqueValues();
// Map { electronics: 4, clothing: 3, books: 5 }

// অন্য filter বাদ দিয়ে সংখ্যা
table.getColumn("price")?.getFacetedMinMaxValues();
// [0, 200000]

pnpm add @tanstack/react-virtual

"use client";

import { useRef } from "react";
import { useVirtualizer } from "@tanstack/react-virtual";

export function VirtualizedTable({ table }: { table: Table<Product> }) {
  const parentRef = useRef<HTMLDivElement>(null);

  const rows = table.getRowModel().rows;

  const rowVirtualizer = useVirtualizer({
    count: rows.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 44,        // এক row-এর আনুমানিক উচ্চতা (px)
    overscan: 10,                  // উপরে-নিচে ১০টা extra row রেন্ডার
  });

  return (
    <div
      ref={parentRef}
      className="h-[600px] overflow-auto"   // ← উচ্চতা দরকার
    >
      <table className="w-full" style={{
        // ⚠️ <table> ব্যবহার করলে এটা সবসময় লাগবে
        display: "grid",
      }}>
        <tbody style={{
          height: `${rowVirtualizer.getTotalSize()}px`,
          position: "relative",
        }}>
          {rowVirtualizer.getVirtualItems().map((virtualRow) => {
            const row = rows[virtualRow.index];

            return (
              <tr
                key={row.id}
                style={{
                  display: "flex",
                  position: "absolute",
                  transform: `translateY(${virtualRow.start}px)`,
                  width: "100%",
                }}
              >
                {row.getVisibleCells().map((cell) => (
                  <td key={cell.id} className="flex-1 px-4 py-2">
                    {flexRender(
                      cell.column.columnDef.cell,
                      cell.getContext(),
                    )}
                  </td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

<TableHeader className="sticky top-0 z-20 bg-background">
  {table.getHeaderGroups().map((group) => (
    <TableRow key={group.id}>
      {group.headers.map((header) => (
        <TableHead key={header.id}>
          …
        </TableHead>
      ))}
    </TableRow>
  ))}
</TableHeader>

<table>
  {/* টেবিলের একটি বর্ণনা */}
  <caption className="sr-only">
    পণ্যের তালিকা, মোট {total}টি
  </caption>

  {/* sortable header-এ state ঘোষণা */}
  <th
    aria-sort={
      column.getIsSorted() === "asc"
        ? "ascending"
        : column.getIsSorted() === "desc"
          ? "descending"
          : "none"
    }
  >
    …
  </th>

  {/* পেজ কন্ট্রোলে বর্তমান অবস্থা */}
  <span aria-live="polite">
    পেজ {pageIndex + 1}, মোট {pageCount}টির মধ্যে
  </span>
</table>

// row selection বোঝানো
<TableRow aria-selected={row.getIsSelected() || undefined}>
  …
</TableRow>

// filter-এর ফলাফল live ঘোষণা
<div role="status" aria-live="polite">
  {filteredCount}টির মধ্যে {filteredCount}টি পাওয়া গেছে
</div>

// ১. default sort রাখতে
initialState: {
  sorting: [{ id: "createdAt", desc: true }],
}

// ২. sort-এর অবস্থা URL-এ
useEffect(() => {
  const first = sorting[0];
  const value = first ? `${first.id}:${first.desc ? "desc" : "asc"}` : null;
  setSort(value, { scroll: false });
}, [sorting]);

// ৩. মাত্র ১০টা কলামের বেশি sort বন্ধ
maxMultiSortColCount: 3,

// ৪. যাচাই না করে দেখানো
enableSortingRemoval: true,   // ৩য় ক্লিকে sort সরে যাবে

// একটি মুছে ফেললে last page-এ একটাই row বাকি থাকতে পারে
const mutation = useMutation({
  mutationFn: (id: string) => api.delete(`/products/${id}`),
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: productKeys.all });

    // শেষ পেজে শূন্য হয়ে গেলে এক পেজ পিছনে
    const remaining = table.getRowModel().rows.length - 1;
    if (remaining === 0 && pagination.pageIndex > 0) {
      setPagination((old) => ({ ...old, pageIndex: old.pageIndex - 1 }));
    }
  },
});