feat(AnalyticalTable): horizontal virtualization of table cells (#640)

Author: Lukas742

packages/main/package.json

@@ -37,7 +37,7 @@
     "react-content-loader": "5.1.0",
     "react-jss": "10.1.1",
     "react-table": "7.5.0",
-    "react-virtual": "2.2.1"
+    "react-virtual": "2.2.4"
   },
   "peerDependencies": {
     "@ui5/webcomponents": "1.0.0-rc.8",

packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.mdx

@@ -101,7 +101,8 @@ import { DefaultNoDataComponent } from './defaults/NoDataComponent';
     LoadingComponent: DefaultLoadingComponent,
     scaleWidthMode: TableScaleWidthMode.Default,
     selectionMode: TableSelectionMode.SINGLE_SELECT,
-    selectionBehavior: TableSelectionBehavior.ROW
+    selectionBehavior: TableSelectionBehavior.ROW,
+    overscanCountHorizontal: 5
   }}
   argTypes={{
     ref: { type: null },
@@ -153,6 +154,7 @@ import { DefaultNoDataComponent } from './defaults/NoDataComponent';
           infiniteScrollThreshold={args.infiniteScrollThreshold}
           onLoadMore={args.onLoadMore}
           selectionBehavior={args.selectionBehavior}
+          overscanCountHorizontal={args.overscanCountHorizontal}
         />
       </div>
     )}

packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx

@@ -289,29 +289,54 @@ describe('AnalyticalTable', () => {
     const UsingTable = (props) => {
       tableRef = useRef(null);
       return (
-        <AnalyticalTable ref={tableRef} title="Table Title" data={data} columns={columns} visibleRows={1} minRows={1} />
+        <AnalyticalTable
+          style={{ width: '170px' }}
+          ref={tableRef}
+          title="Table Title"
+          data={data}
+          columns={columns}
+          visibleRows={1}
+          minRows={1}
+        />
       );
     };
 
-    render(<UsingTable />);
+    const { getByRole } = render(<UsingTable />);
 
     // Check existence + type
     expect(typeof tableRef.current.scrollTo).toBe('function');
     expect(typeof tableRef.current.scrollToItem).toBe('function');
+    expect(typeof tableRef.current.horizontalScrollTo).toBe('function');
+    expect(typeof tableRef.current.horizontalScrollToItem).toBe('function');
 
     // call functions
-    const tableInnerRef = tableRef.current.querySelector("div[class^='AnalyticalTable-table'] > div");
+    const tableBodyRef = tableRef.current.querySelector("div[class^='AnalyticalTable-tbody']");
+    const tableContainerRef = getByRole('grid', { hidden: true });
+
     act(() => {
       tableRef.current.scrollToItem(1, 'start');
     });
 
-    expect(tableInnerRef.scrollTop).toBe(44);
+    expect(tableBodyRef.scrollTop).toBe(44);
 
     act(() => {
       tableRef.current.scrollTo(2);
     });
 
-    expect(tableInnerRef.scrollTop).toBe(2);
+    expect(tableBodyRef.scrollTop).toBe(2);
+
+    screen.debug(tableContainerRef, 9999999);
+    act(() => {
+      tableRef.current.horizontalScrollToItem(1, 'start');
+    });
+
+    expect(tableContainerRef.scrollLeft).toBe(150);
+
+    act(() => {
+      tableRef.current.horizontalScrollTo(2);
+    });
+
+    expect(tableContainerRef.scrollLeft).toBe(2);
   });
 
   test('with highlight row', () => {

packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts

@@ -56,7 +56,6 @@ const styles = {
     boxSizing: 'border-box',
     display: 'flex',
     willChange: 'transform',
-    height: CssSizeVariables.sapWcrAnalyticalTableRowHeight,
     '&:hover': {
       backgroundColor: ThemingParameters.sapList_Hover_Background
     },

packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx

@@ -0,0 +1,101 @@
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
+import React, { useCallback } from 'react';
+import { createUseStyles } from 'react-jss';
+import { useVirtual, VirtualItem } from 'react-virtual';
+import { ColumnHeader } from './index';
+
+const styles = {
+  resizer: {
+    display: 'inline-block',
+    width: '3px',
+    height: '100%',
+    position: 'absolute',
+    bottom: 0,
+    top: 0,
+    transform: 'translateX(-50%)',
+    zIndex: 1,
+    cursor: 'col-resize',
+    willChange: 'transform',
+    '&:hover, &:active': {
+      backgroundColor: ThemingParameters.sapContent_DragAndDropActiveColor
+    }
+  }
+};
+
+const useStyles = createUseStyles(styles);
+
+export const ColumnHeaderContainer = (props) => {
+  const {
+    headerProps,
+    headerGroup,
+    onSort,
+    onGroupByChanged,
+    onDragStart,
+    onDragOver,
+    onDrop,
+    onDragEnter,
+    onDragEnd,
+    dragOver,
+    tableRef,
+    visibleColumnsWidth,
+    overscanCountHorizontal,
+    resizeInfo,
+    reactWindowRef
+  } = props;
+  const columnVirtualizer = useVirtual({
+    size: visibleColumnsWidth.length,
+    parentRef: tableRef,
+    estimateSize: useCallback(
+      (index) => {
+        return visibleColumnsWidth[index];
+      },
+      [visibleColumnsWidth]
+    ),
+    horizontal: true,
+    overscan: overscanCountHorizontal
+  });
+
+  reactWindowRef.current = {
+    ...reactWindowRef.current,
+    horizontalScrollToOffset: columnVirtualizer.scrollToOffset,
+    horizontalScrollToIndex: columnVirtualizer.scrollToIndex
+  };
+
+  const classes = useStyles();
+
+  return (
+    <div {...headerProps} role="rowgroup" style={{ width: `${columnVirtualizer.totalSize}px` }}>
+      {columnVirtualizer.virtualItems.map((virtualColumn: VirtualItem) => {
+        const column = headerGroup.headers[virtualColumn.index];
+        const isLastColumn = !column.disableResizing && virtualColumn.index + 1 === headerGroup.headers.length;
+        return (
+          <>
+            {column.canResize && column.getResizerProps && (
+              <div
+                {...column.getResizerProps()}
+                data-resizer
+                className={classes.resizer}
+                style={{ left: `${column.totalFlexWidth + column.totalLeft - (isLastColumn ? 3 : 0)}px` }}
+              />
+            )}
+            <ColumnHeader
+              {...column.getHeaderProps()}
+              onSort={onSort}
+              onGroupBy={onGroupByChanged}
+              onDragStart={onDragStart}
+              onDragOver={onDragOver}
+              onDrop={onDrop}
+              onDragEnter={onDragEnter}
+              onDragEnd={onDragEnd}
+              dragOver={column.id === dragOver}
+              isDraggable={column.canReorder && !resizeInfo.isResizingColumn}
+              virtualColumn={virtualColumn}
+            >
+              {column.render('Header')}
+            </ColumnHeader>
+          </>
+        );
+      })}
+    </div>
+  );
+};

packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx

@@ -17,6 +17,7 @@ import React, {
   useMemo,
   useRef
 } from 'react';
+import { VirtualItem } from 'react-virtual';
 import { Ui5PopoverDomRef } from '../../../interfaces/Ui5PopoverDomRef';
 import { ColumnType } from '../types/ColumnType';
 import { ColumnHeaderModal } from './ColumnHeaderModal';
@@ -41,6 +42,7 @@ export interface ColumnHeaderProps {
   isDraggable: boolean;
   role: string;
   isLastColumn: boolean;
+  virtualColumn: VirtualItem;
 }
 
 const styles = {
@@ -79,20 +81,6 @@ const styles = {
     color: ThemingParameters.sapContent_IconColor,
     right: getRTL() === false ? '0.5rem' : undefined,
     left: getRTL() === true ? '0.5rem' : undefined
-  },
-  resizer: {
-    display: 'inline-block',
-    width: '3px',
-    height: '100%',
-    position: 'absolute',
-    bottom: 0,
-    top: 0,
-    transform: 'translateX(-50%)',
-    zIndex: 1,
-    cursor: 'col-resize',
-    '&:hover, &:active': {
-      backgroundColor: ThemingParameters.sapContent_DragAndDropActiveColor
-    }
   }
 };
 
@@ -117,7 +105,7 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
     isDraggable,
     dragOver,
     role,
-    isLastColumn
+    virtualColumn
   } = props;
 
   const isFiltered = column.filterValue && column.filterValue.length > 0;
@@ -159,9 +147,16 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
   );
 
   if (!column) return null;
-
   return (
-    <>
+    <div
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: `${virtualColumn.size}px`,
+        transform: `translateX(${virtualColumn.start}px)`
+      }}
+    >
       <div
         id={id}
         className={className}
@@ -197,14 +192,6 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
         </div>
         {hasPopover && <ColumnHeaderModal column={column} onSort={onSort} onGroupBy={onGroupBy} ref={popoverRef} />}
       </div>
-      {column.canResize && column.getResizerProps && (
-        <div
-          {...column.getResizerProps()}
-          data-resizer
-          className={classes.resizer}
-          style={{ left: `${column.totalLeft + column.totalFlexWidth - (isLastColumn ? 3 : 0)}px` }}
-        />
-      )}
-    </>
+    </div>
   );
 };