Virtualization

.gitignore

@@ -27,4 +27,7 @@ coverage
 
 storybook-static
 .terraform
-terraform
+terraform
+
+# Ignore vs files
+.vs

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- `virtualization` features.
 - `pagingNavigationComponents` property to customize the paging navigation components
 
 ## [5.12.0] - 2025-09-15

package.json

@@ -51,6 +51,7 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@neolution-ch/react-pattern-ui": "^5.3.0",
     "@tanstack/react-table": "^8.12.0",
+    "@tanstack/react-virtual": "^3.13.12",
     "react-loading-skeleton": "^3.3.1"
   },
   "devDependencies": {

src/lib/ReactDataTable/ReactDataTableProps.ts

@@ -2,6 +2,7 @@
 import { CSSProperties } from "react";
 import { FilterModel } from "../types/TableState";
 import { DragAndDropOptions } from "./DragAndDropOptions";
+import { VirtualizationOptions } from "./VirtualizationOptions";
 import { PagingNavigationComponents } from "@neolution-ch/react-pattern-ui";
 
 /**
@@ -98,6 +99,11 @@ export interface ReactDataTableProps<TData, TFilter extends FilterModel> {
    */
   dragAndDropOptions?: DragAndDropOptions;
 
+  /**
+   * to define virtualizer options
+   */
+  virtualizerOptions?: VirtualizationOptions;
+
   /**
    * to override the default message in case no entries is found
    */

src/lib/ReactDataTable/TableBody.tsx

@@ -0,0 +1,99 @@
+import { DraggableRow, InternalTableRow } from "./TableRows";
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { Row, Table } from "@tanstack/react-table";
+import { CSSProperties, useMemo } from "react";
+import { FilterModel } from "../types/TableState";
+import { ReactDataTableProps } from "./ReactDataTableProps";
+import { Virtualizer } from "@tanstack/react-virtual";
+
+interface TableBodyProps<TData, TFilter extends FilterModel = Record<string, never>>
+  extends Pick<ReactDataTableProps<TData, TFilter>, "enableRowClick" | "onRowClick" | "subRowComponent"> {
+  enableDragAndDrop: boolean;
+  table: Table<TData>;
+  rowStyle?: (row: TData) => CSSProperties;
+  virtualizer?: Virtualizer<HTMLDivElement, Element>;
+}
+
+interface InternalRow<TData> {
+  row: Row<TData>;
+  rowStyle?: CSSProperties;
+}
+
+const TableBody = <TData, TFilter extends FilterModel = Record<string, never>>(props: TableBodyProps<TData, TFilter>) => {
+  const { enableDragAndDrop, table, rowStyle, enableRowClick, onRowClick, virtualizer, subRowComponent } = props;
+
+  if (enableDragAndDrop && !table.options.getRowId) {
+    throw new Error("You must provide 'getRowId()' to data-table options in order to use the drag-and-drop feature.");
+  }
+
+  const {
+    options: { enableRowSelection, enableExpanding, fullRowSelectable },
+  } = table;
+
+  const { rows } = table.getRowModel();
+
+  const virtualizerRows = virtualizer?.getVirtualItems();
+
+  const rowsToRender: InternalRow<TData>[] = useMemo(
+    () =>
+      virtualizerRows
+        ? virtualizerRows.map((virtualRow, index) => ({
+            row: rows[virtualRow.index],
+            rowStyle: {
+              height: `${virtualRow.size}px`,
+              transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
+            },
+          }))
+        : rows.map((row) => ({ row })),
+    [rows, virtualizerRows],
+  );
+
+  return enableDragAndDrop ? (
+    <SortableContext items={table.getRowModel().rows.map((row) => row.id)} strategy={verticalListSortingStrategy}>
+      {rowsToRender.map((x, index) => {
+        const { row } = x;
+        return (
+          <DraggableRow<TData, TFilter>
+            key={index}
+            row={row}
+            enableRowClick={enableRowClick as ReactDataTableProps<TData, TFilter>["enableRowClick"]}
+            onRowClick={onRowClick as ReactDataTableProps<TData, TFilter>["onRowClick"]}
+            enableRowSelection={enableRowSelection as boolean | ((row: Row<TData>) => boolean)}
+            enableExpanding={enableExpanding as boolean | ((row: Row<TData>) => boolean)}
+            rowStyle={{
+              ...(x.rowStyle ?? {}),
+              ...(rowStyle ? rowStyle(row.original) : {}),
+            }}
+            fullRowSelectable={fullRowSelectable}
+            subRowComponent={subRowComponent as ReactDataTableProps<TData, TFilter>["subRowComponent"]}
+          />
+        );
+      })}
+    </SortableContext>
+  ) : (
+    <>
+      {rowsToRender.map((x, index) => {
+        const { row } = x;
+        return (
+          <InternalTableRow<TData, TFilter>
+            key={index}
+            row={row}
+            enableRowClick={enableRowClick as ReactDataTableProps<TData, TFilter>["enableRowClick"]}
+            onRowClick={onRowClick as ReactDataTableProps<TData, TFilter>["onRowClick"]}
+            enableRowSelection={enableRowSelection as boolean | ((row: Row<TData>) => boolean)}
+            enableExpanding={enableExpanding as boolean | ((row: Row<TData>) => boolean)}
+            rowStyle={{
+              ...(x.rowStyle ?? {}),
+              ...(rowStyle ? rowStyle(row.original) : {}),
+            }}
+            fullRowSelectable={fullRowSelectable}
+            hasPinnedColumns={table.getIsSomeColumnsPinned()}
+            subRowComponent={subRowComponent as ReactDataTableProps<TData, TFilter>["subRowComponent"]}
+          />
+        );
+      })}
+    </>
+  );
+};
+
+export { TableBody };

src/lib/ReactDataTable/VirtualizationOptions.ts

@@ -0,0 +1,16 @@
+import { useVirtualizer } from "@tanstack/react-virtual";
+
+type VirtualizaterOptions = Omit<Parameters<typeof useVirtualizer<HTMLDivElement, Element>>[0], "getScrollElement" | "count" | "enabled">;
+
+export interface VirtualizationOptions extends VirtualizaterOptions {
+  /**
+   * indicates whether to enable virtualization
+   * @default false
+   */
+  enabled?: boolean;
+  /**
+   * indicates the height of the virtualized container
+   * @default 600
+   */
+  height?: number;
+}

yarn.lock

@@ -3029,11 +3029,23 @@
   dependencies:
     "@tanstack/table-core" "8.20.5"
 
+"@tanstack/react-virtual@^3.13.12":
+  version "3.13.12"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.13.12.tgz#d372dc2783739cc04ec1a728ca8203937687a819"
+  integrity sha512-Gd13QdxPSukP8ZrkbgS2RwoZseTTbQPLnQEn7HY/rqtM+8Zt95f7xKC7N0EsKs7aoz0WzZ+fditZux+F8EzYxA==
+  dependencies:
+    "@tanstack/virtual-core" "3.13.12"
+
 "@tanstack/table-core@8.20.5":
   version "8.20.5"
   resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.20.5.tgz#3974f0b090bed11243d4107283824167a395cf1d"
   integrity sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==
 
+"@tanstack/virtual-core@3.13.12":
+  version "3.13.12"
+  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz#1dff176df9cc8f93c78c5e46bcea11079b397578"
+  integrity sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==
+
 "@testing-library/dom@^8.0.0", "@testing-library/dom@^8.13.0", "@testing-library/dom@^8.3.0":
   version "8.20.0"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.20.0.tgz#914aa862cef0f5e89b98cc48e3445c4c921010f6"