Implementing Tan Stack virtualizer with Flowbite table.

// import type { unlinkedProductData } from "@/helpers/getData";
import { useVirtualizer } from "@tanstack/react-virtual";
import { Table } from "flowbite-react";
import React, { useRef } from "react";

export type unlinkedProductData =
  | {
      product_id: number | null;
      sku: string | null;
      name: string | null;
      packaging_type: string | null;
      unit_container_type: string | null;
      objectID: string | null;
      link_id: number | null;
      classification_id: number | null;
    }[]
  | undefined;

export type UnlinkedProduct = Exclude<unlinkedProductData, undefined>[number];

interface VirtualizedTableProps {
  data: unlinkedProductData | undefined;
  allSelected: boolean;
  columns: { key: keyof UnlinkedProduct; title: string }[];
  handleSelectAll: () => void;
}

const VirtualizedTable: React.FC<VirtualizedTableProps> = ({
  data,
  columns,
  allSelected,
  handleSelectAll,
}) => {
  const parentRef = useRef<HTMLDivElement>(null);

  const rowVirtualizer = useVirtualizer({
    count: data?.length ?? 0,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 35,
    overscan: 5,
    gap: 4,
    lanes: 4,
  });

  if (!data || data.length === 0) {
    return <div>No Data</div>;
  }

  return (
    <div ref={parentRef} className="h-[80vh] overflow-auto">
      <Table>
        <Table.Head>
          <Table.HeadCell key="header">
            {columns.map((column) => (
              <Table.HeadCell key={column.key}>{column.title}</Table.HeadCell>
            ))}
          </Table.HeadCell>
        </Table.Head>
        <Table.Body className="divide-y">
          <div
            style={{
              height: `${rowVirtualizer.getTotalSize()}px`,
              width: "100%",
              position: "relative",
            }}
          >
            {rowVirtualizer.getVirtualItems().map((virtualRow) => (
              <Table.Row
                key={virtualRow.key}
                className="bg-white dark:border-gray-700 dark:bg-gray-800"
                style={{
                  position: "absolute",
                  top: 0,
                  left: 0,
                  width: "100%",
                  height: `${virtualRow.size}px`,
                  transform: `translateY(${virtualRow.start}px)`,
                }}
              >
                {columns.map((column) => (
                  <Table.Cell
                    key={column.key}
                    className="whitespace-nowrap font-medium text-gray-900 dark:text-white"
                  >
                    {data[virtualRow.index][column.key]}
                  </Table.Cell>
                ))}
              </Table.Row>
            ))}
          </div>
        </Table.Body>
      </Table>
    </div>
  );
};

export default VirtualizedTable;

// import type { unlinkedProductData } from "@/helpers/getData";
import { useVirtualizer } from "@tanstack/react-virtual";
import { Table } from "flowbite-react";
import React, { useRef } from "react";

export type unlinkedProductData =
  | {
      product_id: number | null;
      sku: string | null;
      name: string | null;
      packaging_type: string | null;
      unit_container_type: string | null;
      objectID: string | null;
      link_id: number | null;
      classification_id: number | null;
    }[]
  | undefined;

export type UnlinkedProduct = Exclude<unlinkedProductData, undefined>[number];

interface VirtualizedTableProps {
  data: unlinkedProductData | undefined;
  allSelected: boolean;
  columns: { key: keyof UnlinkedProduct; title: string }[];
  handleSelectAll: () => void;
}

const VirtualizedTable: React.FC<VirtualizedTableProps> = ({
  data,
  columns,
  allSelected,
  handleSelectAll,
}) => {
  const parentRef = useRef<HTMLDivElement>(null);

  const rowVirtualizer = useVirtualizer({
    count: data?.length ?? 0,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 35,
    overscan: 5,
    gap: 4,
    lanes: 4,
  });

  if (!data || data.length === 0) {
    return <div>No Data</div>;
  }

  return (
    <div ref={parentRef} className="h-[80vh] overflow-auto">
      <Table>
        <Table.Head>
          <Table.HeadCell key="header">
            {columns.map((column) => (
              <Table.HeadCell key={column.key}>{column.title}</Table.HeadCell>
            ))}
          </Table.HeadCell>
        </Table.Head>
        <Table.Body className="divide-y">
          <div
            style={{
              height: `${rowVirtualizer.getTotalSize()}px`,
              width: "100%",
              position: "relative",
            }}
          >
            {rowVirtualizer.getVirtualItems().map((virtualRow) => (
              <Table.Row
                key={virtualRow.key}
                className="bg-white dark:border-gray-700 dark:bg-gray-800"
                style={{
                  position: "absolute",
                  top: 0,
                  left: 0,
                  width: "100%",
                  height: `${virtualRow.size}px`,
                  transform: `translateY(${virtualRow.start}px)`,
                }}
              >
                {columns.map((column) => (
                  <Table.Cell
                    key={column.key}
                    className="whitespace-nowrap font-medium text-gray-900 dark:text-white"
                  >
                    {data[virtualRow.index][column.key]}
                  </Table.Cell>
                ))}
              </Table.Row>
            ))}
          </div>
        </Table.Body>
      </Table>
    </div>
  );
};

export default VirtualizedTable;