@orchestrator-ui/orchestrator-ui-components 7.0.1 → 7.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "7.0.1",
+    "version": "7.1.0",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {
@@ -44,6 +44,7 @@
         "@emotion/react": "^11.11.4",
         "@monaco-editor/react": "^4.7.0",
         "@rtk-query/graphql-request-base-query": "^2.3.1",
+        "@tanstack/react-virtual": "^3.13.13",
         "graphql-request": "^6.1.0",
         "invariant": "^2.2.4",
         "lodash": "^4.17.21",

package/src/components/WfoTable/WfoTable/WfoTable.tsx

@@ -1,9 +1,10 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import type { CSSProperties, ReactNode } from 'react';
 
 import { useTranslations } from 'next-intl';
 
 import { EuiSpacer, EuiTablePagination, useEuiScrollBar } from '@elastic/eui';
+import { useVirtualizer } from '@tanstack/react-virtual';
 
 import { useWithOrchestratorTheme } from '@/hooks';
 
@@ -28,6 +29,10 @@ export type Pagination = {
     onChangePage?: (pageIndex: number) => void;
 };
 
+export type LocalColumnWidths = {
+    [key: string]: string;
+};
+
 export enum ColumnType {
     DATA = 'data',
     CONTROL = 'control',
@@ -102,11 +107,11 @@ export type WfoTableProps<T extends object> = {
     onUpdateDataSearch?: (updatedDataSearch: WfoDataSearch<T>) => void;
     appendFillerColumn?: boolean;
     className?: string;
+    isVirtualized?: boolean;
+    height?: number;
 };
 
-export type LocalColumnWidths = {
-    [key: string]: string;
-};
+const ROW_HEIGHT = 44;
 
 export const WfoTable = <T extends object>({
     data,
@@ -123,10 +128,14 @@ export const WfoTable = <T extends object>({
     onRowClick,
     appendFillerColumn = true,
     className,
+    isVirtualized = false,
+    height,
 }: WfoTableProps<T>) => {
     const [localColumnWidths, setLocalColumnWidths] =
         useState<LocalColumnWidths>(getColumnWidthsFromConfig(columnConfig));
 
+    const parentRef = useRef<HTMLDivElement>(null);
+
     const columnConfigWithFiller: WfoTableColumnConfig<T> = appendFillerColumn
         ? {
               ...columnConfig,
@@ -181,9 +190,31 @@ export const WfoTable = <T extends object>({
         return mergedConfig;
     }, {} as WfoTableColumnConfig<T>);
 
+    const rowVirtualizer = useVirtualizer({
+        count: data.length,
+        getScrollElement: () => parentRef.current,
+        estimateSize: () => ROW_HEIGHT,
+        overscan: 10,
+    });
+
+    const virtualItems = rowVirtualizer.getVirtualItems();
+    const totalSize = rowVirtualizer.getTotalSize();
+    const lastVirtualItemEnd =
+        virtualItems.length > 0 ? virtualItems[virtualItems.length - 1].end : 0;
+    const virtualTrHeight = virtualItems[0]?.start ?? 0;
+    const bottomSpacerHeight = totalSize - lastVirtualItemEnd;
+
     return (
         <>
-            <div css={[tableContainerStyle, useEuiScrollBar()]}>
+            <div
+                ref={parentRef}
+                css={[tableContainerStyle, useEuiScrollBar()]}
+                style={
+                    isVirtualized && height
+                        ? { maxHeight: height, overflow: 'auto' }
+                        : {}
+                }
+            >
                 <table className={className} css={tableStyle}>
                     {overrideHeader ? (
                         overrideHeader(sortedVisibleColumns)
@@ -213,6 +244,33 @@ export const WfoTable = <T extends object>({
                                 </td>
                             </tr>
                         </tbody>
+                    ) : isVirtualized && height ? (
+                        <tbody>
+                            <tr
+                                style={{
+                                    height: virtualTrHeight,
+                                }}
+                            />
+
+                            {virtualItems.map((virtualRow) => (
+                                <WfoTableDataRows
+                                    key={virtualRow.key}
+                                    data={[data[virtualRow.index]]}
+                                    columnConfig={configWithLocalWidths}
+                                    hiddenColumns={hiddenColumns}
+                                    columnOrder={columnOrder}
+                                    rowExpandingConfiguration={
+                                        rowExpandingConfiguration
+                                    }
+                                    onRowClick={onRowClick}
+                                />
+                            ))}
+                            <tr
+                                style={{
+                                    height: bottomSpacerHeight,
+                                }}
+                            />
+                        </tbody>
                     ) : (
                         <tbody css={isLoading && bodyLoadingStyle}>
                             <WfoTableDataRows

package/src/components/WfoTable/WfoTable/WfoVirtualizedTableBody.tsx

@@ -0,0 +1,62 @@
+import React, { useRef } from 'react';
+
+import { useVirtualizer } from '@tanstack/react-virtual';
+
+type Props<T> = {
+    data: T[];
+    height: number;
+    renderRow: (row: T, index: number) => React.ReactNode;
+};
+
+const ESTIMATED_ROW_HEIGHT = 44;
+const OVERSCAN_COUNT = 10;
+
+export const WfoVirtualizedTableBody = <T,>({
+    data,
+    height,
+    renderRow,
+}: Props<T>) => {
+    const parentRef = useRef<HTMLDivElement>(null);
+
+    const rowVirtualizer = useVirtualizer({
+        count: data.length,
+        getScrollElement: () => parentRef.current,
+        estimateSize: () => ESTIMATED_ROW_HEIGHT,
+        overscan: OVERSCAN_COUNT,
+    });
+
+    const virtualItems = rowVirtualizer.getVirtualItems();
+    const totalSize = rowVirtualizer.getTotalSize();
+
+    const lastVirtualItemEnd =
+        virtualItems.length > 0 ? virtualItems[virtualItems.length - 1].end : 0;
+    const virtualTopSpacerHeight = virtualItems[0]?.start ?? 0;
+    const bottomSpacerHeight = totalSize - lastVirtualItemEnd;
+
+    return (
+        <div
+            ref={parentRef}
+            style={{
+                height,
+                overflowY: 'auto',
+                overflowX: 'hidden',
+            }}
+        >
+            <table style={{ width: '100%' }}>
+                <tbody style={{ position: 'relative' }}>
+                    <tr style={{ height: virtualTopSpacerHeight }} />
+
+                    {virtualItems.map((virtualRow) =>
+                        renderRow(data[virtualRow.index], virtualRow.index),
+                    )}
+
+                    <tr
+                        style={{
+                            height: bottomSpacerHeight,
+                        }}
+                    />
+                </tbody>
+            </table>
+        </div>
+    );
+};

package/src/components/WfoTable/WfoTable/styles.ts

@@ -41,9 +41,13 @@ export const getWfoTableStyles = ({ theme, isDarkThemeActive }: WfoTheme) => {
     });
 
     const headerStyle = css({
+        position: 'sticky',
+        top: 0,
+        zIndex: 3,
         backgroundColor: theme.colors.lightShade,
         fontSize: theme.size.m,
         textAlign: 'left',
+
         'tr>:first-child': {
             borderTopLeftRadius: radius,
         },
@@ -85,7 +89,7 @@ export const getWfoTableStyles = ({ theme, isDarkThemeActive }: WfoTheme) => {
 
     const sortableHeaderCellStyle = css({
         paddingRight: 0,
-        [`&:hover`]: {
+        '&:hover': {
             [`.${SORTABLE_ICON_CLASS}`]: {
                 visibility: 'visible',
             },

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '7.0.1';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '7.1.0';