refactor(AnalyticalTable): replace react-window with react-virtual (#502)

Author: MarcusNotheis

.storybook/preview.js

@@ -10,6 +10,7 @@ import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity';
 import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider';
 import { Themes } from '@ui5/webcomponents-react/lib/Themes';
 import '@ui5/webcomponents/dist/Assets';
+import '@ui5/webcomponents-react/dist/Assets';
 import '@ui5/webcomponents/dist/features/InputElementsFormSupport';
 import React, { useEffect } from 'react';
 import 'react-app-polyfill/ie11';

package.json

@@ -50,6 +50,7 @@
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
     "@storybook/storybook-deployer": "^2.8.5",
+    "@testing-library/react": "^10.0.4",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^25.2.1",
     "@types/react": "^16.9.34",

packages/main/package.json

@@ -37,7 +37,7 @@
     "react-content-loader": "^5.0.4",
     "react-jss": "10.1.1",
     "react-table": "7.0.4",
-    "react-window": "^1.8.5"
+    "react-virtual": "2.1.7"
   },
   "peerDependencies": {
     "@ui5/webcomponents": "1.0.0-rc.7",

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

@@ -57,7 +57,7 @@ const columns = [
   }
 ];
 
-const data = generateData(200);
+const data = generateData(10_000);
 const dataTree = generateData(20, true);
 
 export const defaultTable = () => {
@@ -72,7 +72,7 @@ export const defaultTable = () => {
         alternateRowColor={boolean('alternateRowColor', false)}
         sortable={boolean('sortable', true)}
         filterable={boolean('filterable', true)}
-        visibleRows={number('visibleRows', 5)}
+        visibleRows={number('visibleRows', 15)}
         minRows={number('minRows', 5)}
         groupable={boolean('groupable', true)}
         selectionMode={select<TableSelectionMode>(

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

@@ -1,9 +1,9 @@
 import { createPassThroughPropsTest } from '@shared/tests/utils';
+import { act, render } from '@testing-library/react';
 import { AnalyticalTable } from '@ui5/webcomponents-react/lib/AnalyticalTable';
-import { AnalyticalTableScrollMode } from '@ui5/webcomponents-react/lib/AnalyticalTableScrollMode';
+import { TableSelectionBehavior } from '@ui5/webcomponents-react/lib/TableSelectionBehavior';
 import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode';
 import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
-import { TableSelectionBehavior } from '@ui5/webcomponents-react/lib/TableSelectionBehavior';
 import { mount } from 'enzyme';
 import React, { useRef } from 'react';
 
@@ -271,19 +271,29 @@ describe('AnalyticalTable', () => {
     let tableRef;
     const UsingTable = (props) => {
       tableRef = useRef(null);
-      return <AnalyticalTable ref={tableRef} title="Table Title" data={data} columns={columns} />;
+      return (
+        <AnalyticalTable ref={tableRef} title="Table Title" data={data} columns={columns} visibleRows={1} minRows={1} />
+      );
     };
 
-    mount(<UsingTable />);
+    render(<UsingTable />);
 
     // Check existence + type
     expect(typeof tableRef.current.scrollTo).toBe('function');
     expect(typeof tableRef.current.scrollToItem).toBe('function');
 
     // call functions
-    const tableInnerRef = tableRef.current.querySelector("div[class^='AnalyticalTable-table'] > div > div");
-    tableRef.current.scrollToItem(2, AnalyticalTableScrollMode.end);
-    tableRef.current.scrollTo(2);
+    const tableInnerRef = tableRef.current.querySelector("div[class^='AnalyticalTable-table'] > div");
+    act(() => {
+      tableRef.current.scrollToItem(1, 'start');
+    });
+
+    expect(tableInnerRef.scrollTop).toBe(44);
+
+    act(() => {
+      tableRef.current.scrollTo(2);
+    });
+
     expect(tableInnerRef.scrollTop).toBe(2);
   });
 

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

@@ -2,27 +2,25 @@ import { CssSizeVariables } from '@ui5/webcomponents-react-base/lib/CssSizeVaria
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
 
 const styles = {
-  tableContainer: {
-    width: '100%',
-    height: `calc(100% - ${CssSizeVariables.sapWcrAnalyticalTableRowHeight})`,
-    minHeight: '3rem'
-  },
   table: {
     position: 'relative',
     width: '100%',
     maxWidth: '100%',
-    overflowX: 'auto'
+    overflowX: 'auto',
+    height: `calc(100% - ${CssSizeVariables.sapWcrAnalyticalTableRowHeight})`,
+    minHeight: '3rem',
+    fontFamily: ThemingParameters.sapFontFamily,
+    fontSize: ThemingParameters.sapFontSize,
+    fontWeight: 'normal'
   },
   tableHeaderRow: {
-    boxShadow: 'none !important',
     height: CssSizeVariables.sapWcrAnalyticalTableRowHeight,
-    position: 'relative'
+    position: 'relative',
+    display: 'inline-flex'
   },
   th: {
     backgroundColor: ThemingParameters.sapList_HeaderBackground,
     height: CssSizeVariables.sapWcrAnalyticalTableRowHeight,
-    fontFamily: ThemingParameters.sapFontFamily,
-    fontSize: ThemingParameters.sapFontSize,
     fontWeight: 'normal',
     color: ThemingParameters.sapList_HeaderTextColor,
     borderTop: `1px solid ${ThemingParameters.sapList_BorderColor}`,
@@ -43,22 +41,27 @@ const styles = {
     position: 'relative',
     zIndex: 0,
     backgroundColor: ThemingParameters.sapList_Background,
-    overflowX: 'hidden !important',
-    overflowY: 'auto !important'
+    overflowX: 'hidden',
+    overflowY: 'auto'
   },
   alternateRowColor: {
     backgroundColor: ThemingParameters.sapList_HeaderBackground
   },
   emptyRow: {},
   tr: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
     zIndex: 0,
     color: ThemingParameters.sapList_TextColor,
+    borderBottom: `1px solid ${ThemingParameters.sapList_BorderColor}`,
     boxSizing: 'border-box',
+    display: 'flex',
+    height: CssSizeVariables.sapWcrAnalyticalTableRowHeight,
     '&[data-is-selected]': {
-      backgroundColor: `${ThemingParameters.sapList_SelectionBackgroundColor} !important`,
-      '& $tableCell': {
-        borderBottom: `1px solid ${ThemingParameters.sapList_SelectionBorderColor}`
-      }
+      borderBottom: `1px solid ${ThemingParameters.sapList_SelectionBorderColor}`,
+      backgroundColor: `${ThemingParameters.sapList_SelectionBackgroundColor} !important`
     },
     '&[data-is-selected]:hover': {
       backgroundColor: `${ThemingParameters.sapList_Hover_SelectionBackground} !important`
@@ -93,22 +96,18 @@ const styles = {
   selectionModeRowSelector: {},
   tableCell: {
     height: CssSizeVariables.sapWcrAnalyticalTableRowHeight,
-    fontFamily: ThemingParameters.sapFontFamily,
-    fontSize: ThemingParameters.sapFontSize,
-    fontWeight: 'normal',
-    borderBottom: `1px solid ${ThemingParameters.sapList_BorderColor}`,
     boxSizing: 'border-box',
     borderRight: `1px solid ${ThemingParameters.sapList_BorderColor}`,
-    display: 'flex',
+    display: 'inline-flex',
     padding: '0 0.5rem',
     '&:first-child': {
       borderLeft: `1px solid ${ThemingParameters.sapList_BorderColor}`
     },
     overflow: 'hidden',
-    position: 'relative',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     alignItems: 'center',
+    position: 'relative',
     '&:focus': {
       outlineOffset: '-2px',
       outline: `1px dotted ${ThemingParameters.sapContent_FocusColor}`

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

@@ -155,9 +155,6 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
     if (dragOver) {
       modifiedStyles.borderLeft = `3px solid ${ThemingParameters.sapSelectedColor}`;
     }
-    if (column.id === '__ui5wcr__internal_highlight_column' || column.id === '__ui5wcr__internal_selection_column') {
-      modifiedStyles.padding = 0;
-    }
     return modifiedStyles;
   }, [dragOver, hasPopover]);