feat(manager-react-components): add tanstack virtualization component

ref: #MANAGER-19373

Signed-off-by: Alex Boungnaseng <[email protected]>

Author: aboungnaseng-ovhcloud

packages/manager-react-components/src/components/datagrid/Datagrid.component.tsx

@@ -3,6 +3,7 @@ import { Table } from '@ovhcloud/ods-react';
 import { TableBody } from './table/table-body/TableBody.component';
 import { TableHeaderContent } from './table/table-head/table-header-content/TableHeaderContent.component';
 import { FooterActions } from './table/table-footer/footer-actions/FooterActions.component';
+import { useContainerHeight } from './useContainerHeight';
 import { useDatagrid } from './useDatagrid';
 import { DatagridProps } from './Datagrid.props';
 import './translations';
@@ -29,20 +30,36 @@ export const Datagrid = <T extends Record<string, unknown>>({
   });
 
   const rowModel = getRowModel();
+  const { rows } = rowModel;
   const headerGroups = getHeaderGroups();
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+  const containerHeight = useContainerHeight({ tableContainerRef });
 
   return (
     <>
-      <Table>
-        <TableHeaderContent<T>
-          headerGroups={headerGroups}
-          onSortChange={onSortChange}
-          sorting={sorting}
-          headerRefs={headerRefs.current}
-          contentAlignLeft={contentAlignLeft}
-        />
-        <TableBody rowModel={rowModel} />
-      </Table>
+      <div
+        ref={tableContainerRef}
+        style={{
+          overflow: 'auto', //our scrollable table container
+          position: 'relative', //needed for sticky header
+          height: rows?.length > 6 ? containerHeight : '100%',
+        }}
+      >
+        {/* Even though we're still using semantic table tags, we must use CSS grid and flexbox for dynamic row heights */}
+        <Table className="w-full" style={{ display: 'grid' }}>
+          <TableHeaderContent<T>
+            headerGroups={headerGroups}
+            onSortChange={onSortChange}
+            sorting={sorting}
+            headerRefs={headerRefs.current}
+            contentAlignLeft={contentAlignLeft}
+          />
+          <TableBody
+            rowModel={rowModel}
+            tableContainerRef={tableContainerRef}
+          />
+        </Table>
+      </div>
       <FooterActions
         hasNextPage={hasNextPage}
         onFetchAllPages={onFetchAllPages}

packages/manager-react-components/src/components/datagrid/table/table-body/TableBody.component.tsx

@@ -1,18 +1,70 @@
-import { flexRender } from '@tanstack/react-table';
+import { flexRender, Row } from '@tanstack/react-table';
 import { TableBodyProps } from './TableBody.props';
+import { useVirtualizer } from '@tanstack/react-virtual';
+
+export const TableBody = <T,>({
+  rowModel,
+  tableContainerRef,
+}: TableBodyProps<T>) => {
+  const { rows } = rowModel;
+
+  const rowVirtualizer = useVirtualizer({
+    count: rows.length,
+    estimateSize: () => 33, //estimate row height for accurate scrollbar dragging
+    getScrollElement: () => tableContainerRef.current,
+    //measure dynamic row height, except in firefox because it measures table border height incorrectly
+    measureElement:
+      typeof window !== 'undefined' &&
+      navigator.userAgent.indexOf('Firefox') === -1
+        ? (element) => element?.getBoundingClientRect().height
+        : undefined,
+    overscan: 30,
+  });
 
-export const TableBody = <T,>({ rowModel }: TableBodyProps<T>) => {
   return (
-    <tbody>
-      {rowModel?.rows.map((row) => (
-        <tr key={row.id}>
-          {row.getVisibleCells().map((cell) => (
-            <td key={cell.id}>
-              {flexRender(cell.column.columnDef.cell, cell.getContext())}
-            </td>
-          ))}
-        </tr>
-      ))}
+    <tbody
+      style={{
+        display: 'grid',
+        height: `${rowVirtualizer.getTotalSize()}px`, //tells scrollbar how big the table is
+        position: 'relative', //needed for absolute positioning of rows
+      }}
+    >
+      {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+        const row = rows[virtualRow.index] as Row<T>;
+        return (
+          <tr
+            data-index={virtualRow.index} //needed for dynamic row height measurement
+            ref={(node) => rowVirtualizer.measureElement(node)} //measure dynamic row height
+            key={row.id}
+            style={{
+              display: 'flex',
+              position: 'absolute',
+              // transform: `translateY(${virtualRow.start}px)`,
+              width: '100%',
+            }}
+          >
+            {row.getVisibleCells().map((cell) => (
+              <td
+                key={cell.id}
+                className="overflow-hidden"
+                style={{
+                  display: 'flex',
+                  flex: 1,
+                  minWidth: 0,
+                  ...(cell?.column?.columnDef?.maxSize && {
+                    maxWidth: cell?.column?.columnDef?.maxSize,
+                  }),
+                  ...(cell?.column?.columnDef?.minSize && {
+                    minWidth: cell?.column?.columnDef?.minSize,
+                  }),
+                }}
+              >
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </td>
+            ))}
+          </tr>
+        );
+      })}
     </tbody>
   );
 };

packages/manager-react-components/src/components/datagrid/table/table-body/TableBody.props.ts

@@ -1,5 +1,7 @@
+import { RefObject } from 'react';
 import { RowModel } from '@tanstack/react-table';
 
 export type TableBodyProps<T> = {
   rowModel: RowModel<T>;
+  tableContainerRef: RefObject<HTMLDivElement>;
 };

packages/manager-react-components/src/components/datagrid/table/table-head/table-header-content/TableHeaderContent.component.tsx

@@ -10,21 +10,33 @@ const TableHeaderContentComponent = <T,>({
   headerRefs,
 }: TableHeaderContentProps<T>) => {
   return (
-    <thead>
+    <thead
+      style={{
+        display: 'grid',
+        position: 'sticky',
+        top: 0,
+        zIndex: 1,
+      }}
+    >
       {headerGroups?.map((headerGroup) => (
-        <tr key={headerGroup.id}>
+        <tr key={headerGroup.id} style={{ display: 'flex', width: '100%' }}>
           {headerGroup.headers.map((header) => (
             <th
               key={header.id}
-              ref={(el) => {
-                if (headerRefs && el) {
-                  // eslint-disable-next-line no-param-reassign
-                  headerRefs[header?.id ?? ''] = el;
-                }
-              }}
               className={`${
                 contentAlignLeft ? 'text-left pl-4' : 'text-center'
-              } h-11 whitespace-nowrap `}
+              } h-11 whitespace-nowrap overflow-hidden`}
+              style={{
+                display: 'flex',
+                flex: 1,
+                minWidth: 0,
+                ...(header?.column?.columnDef?.maxSize && {
+                  maxWidth: header?.column?.columnDef?.maxSize,
+                }),
+                ...(header?.column?.columnDef?.minSize && {
+                  minWidth: header?.column?.columnDef?.minSize,
+                }),
+              }}
             >
               {!header.isPlaceholder &&
                 (onSortChange ? (

packages/manager-react-components/src/components/datagrid/table/table-head/table-header-sorting/TableHeaderSorting.component.tsx

@@ -14,7 +14,8 @@ export const TableHeaderSorting = <T,>({
   return (
     <div {...attrs} data-testid={`header-${header.id}`}>
       <span>
-        {flexRender(header.column.columnDef.header, header.getContext())}
+        {flexRender(header.column.columnDef.header, header.getContext())} width
+        : {header.getSize()}
       </span>
       <span className="align-middle inline-block pl-1 -mt-1">
         <Icon

packages/manager-react-components/src/components/datagrid/useContainerHeight.ts

@@ -0,0 +1,47 @@
+import { useState, useEffect, RefObject } from 'react';
+
+export const useContainerHeight = ({
+  tableContainerRef,
+}: {
+  tableContainerRef: RefObject<HTMLDivElement>;
+}) => {
+  const [containerHeight, setContainerHeight] = useState('100%');
+
+  useEffect(() => {
+    const calculateHeight = () => {
+      if (!tableContainerRef.current) return;
+
+      const { current } = tableContainerRef;
+      const container = current;
+      const { parentElement } = container;
+
+      if (!parentElement) return;
+
+      // Get the parent element's position relative to viewport
+      const parentRect = parentElement.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+
+      // Calculate available height (viewport height minus parent's top position)
+      const availableHeight = viewportHeight - parentRect.top;
+
+      // Set a minimum height of 200px and maximum of 80vh
+      const calculatedHeight = Math.max(
+        200,
+        Math.min(availableHeight, viewportHeight * 0.8),
+      );
+
+      setContainerHeight(`${calculatedHeight - 120}px`);
+    };
+
+    // Calculate initial height
+    calculateHeight();
+
+    // Add resize listener
+    window.addEventListener('resize', calculateHeight);
+
+    // Cleanup
+    return () => window.removeEventListener('resize', calculateHeight);
+  }, []);
+
+  return containerHeight;
+};