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,7 +2,7 @@
 import { CSSProperties } from "react";
 import { FilterModel } from "../types/TableState";
 import { DragAndDropOptions } from "./DragAndDropOptions";
-import { PagingNavigationComponents } from "@neolution-ch/react-pattern-ui";
+import { VirtualizationsOptions } from "./VirtualizationOptions";
 
 /**
  * The props for the ReactDataTable component
@@ -98,6 +98,11 @@ export interface ReactDataTableProps<TData, TFilter extends FilterModel> {
    */
   dragAndDropOptions?: DragAndDropOptions;
 
+  /**
+   * to define virtualizer options
+   */
+  virtualizerOptions?: VirtualizationsOptions;
+
   /**
    * to override the default message in case no entries is found
    */
@@ -114,14 +119,4 @@ export interface ReactDataTableProps<TData, TFilter extends FilterModel> {
    * @default true
    */
   showClearSearchButton?: boolean;
-
-  /**
-   * A component to render as a sub-row for a specific row, this will be rendered additionally to the subrows.
-   */
-  subRowComponent?: (row: Row<TData>) => React.ReactNode;
-
-  /**
-   * Custom navigation components for the paging controls
-   */
-  pagingNavigationComponents?: PagingNavigationComponents;
 }

src/lib/ReactDataTable/TableBody.tsx

@@ -0,0 +1,95 @@
+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"> {
+  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 } = 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 rowsToRender: InternalRow<TData>[] = useMemo(
+    () =>
+      virtualizer
+        ? virtualizer.getVirtualItems().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, virtualizer],
+  );
+
+  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}
+          />
+        );
+      })}
+    </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()}
+          />
+        );
+      })}
+    </>
+  );
+};
+
+export { TableBody };

src/lib/ReactDataTable/TableRows.tsx

@@ -7,7 +7,7 @@ import { FilterModel } from "../types/TableState";
 import { ReactDataTableProps } from "./ReactDataTableProps";
 
 interface TableRowProps<TData, TFilter extends FilterModel = Record<string, never>>
-  extends Pick<ReactDataTableProps<TData, TFilter>, "onRowClick" | "enableRowClick" | "subRowComponent"> {
+  extends Pick<ReactDataTableProps<TData, TFilter>, "onRowClick" | "enableRowClick"> {
   row: Row<TData>;
   enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
   fullRowSelectable?: boolean;
@@ -27,43 +27,39 @@ const InternalTableRow = <TData, TFilter extends FilterModel = Record<string, ne
     onRowClick,
     enableRowClick,
     hasPinnedColumns,
-    subRowComponent,
   } = props;
   const isRowSelectionEnabled =
     (typeof enableRowSelection === "function" ? enableRowSelection(row) : enableRowSelection) && fullRowSelectable;
   const isRowClickable = typeof enableRowClick === "function" ? enableRowClick(row) : enableRowClick;
   return (
-    <>
-      <tr
-        key={row.id}
-        ref={setNodeRef}
-        onClick={async () => {
-          if (isRowSelectionEnabled) {
-            row.toggleSelected();
-          } else if (isRowClickable && onRowClick) {
-            await onRowClick(row);
-          } else {
-            // Nothing to execute
-          }
-        }}
-        className={isRowSelectionEnabled || isRowClickable ? "cursor-pointer" : undefined}
-        style={rowStyle}
-      >
-        {row.getVisibleCells().map((cell) => (
-          <td
-            key={cell.id}
-            style={{
-              ...cell.column.columnDef.meta?.cellStyle,
-              ...(hasPinnedColumns ? getCommonPinningStyles(cell.column) : {}),
-            }}
-            className={cell.column.columnDef.meta?.cellClassName}
-          >
-            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-          </td>
-        ))}
-      </tr>
-      {subRowComponent && row.getIsExpanded() && subRowComponent(row)}
-    </>
+    <tr
+      key={row.id}
+      ref={setNodeRef}
+      onClick={async () => {
+        if (isRowSelectionEnabled) {
+          row.toggleSelected();
+        } else if (isRowClickable && onRowClick) {
+          await onRowClick(row);
+        } else {
+          // Nothing to execute
+        }
+      }}
+      className={isRowSelectionEnabled || isRowClickable ? "cursor-pointer" : undefined}
+      style={rowStyle}
+    >
+      {row.getVisibleCells().map((cell) => (
+        <td
+          key={cell.id}
+          style={{
+            ...cell.column.columnDef.meta?.cellStyle,
+            ...(hasPinnedColumns ? getCommonPinningStyles(cell.column) : {}),
+          }}
+          className={cell.column.columnDef.meta?.cellClassName}
+        >
+          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+        </td>
+      ))}
+    </tr>
   );
 };
 

src/lib/ReactDataTable/VirtualizationOptions.ts

@@ -0,0 +1,3 @@
+import { useVirtualizer } from "@tanstack/react-virtual";
+
+export type VirtualizationsOptions = Omit<Parameters<typeof useVirtualizer<HTMLDivElement, Element>>[0], "getScrollElement">;

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"