feat(AnalyticalTable): always show scrollbars if needed (#706)

closes #698

Author: Lukas742

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

@@ -12,16 +12,27 @@ const styles = {
     minHeight: '3rem',
     fontFamily: ThemingParameters.sapFontFamily,
     fontSize: ThemingParameters.sapFontSize,
-    fontWeight: 'normal'
+    fontWeight: 'normal',
+    backgroundColor: ThemingParameters.sapList_Background
   },
   tableHeaderRow: {
     height: CssSizeVariables.sapWcrAnalyticalTableRowHeight,
     display: 'inline-flex'
   },
-  th: {
+  tableHeaderBackgroundElement: {
+    boxSizing: 'border-box',
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    height: CssSizeVariables.sapWcrAnalyticalTableRowHeight,
     backgroundColor: ThemingParameters.sapList_HeaderBackground,
+    borderTop: `1px solid ${ThemingParameters.sapList_BorderColor}`,
+    borderBottom: `1px solid ${ThemingParameters.sapList_BorderColor}`
+  },
+  th: {
     height: CssSizeVariables.sapWcrAnalyticalTableRowHeight,
     color: ThemingParameters.sapList_HeaderTextColor,
+    backgroundColor: ThemingParameters.sapList_HeaderBackground,
     borderTop: `1px solid ${ThemingParameters.sapList_BorderColor}`,
     borderBottom: `1px solid ${ThemingParameters.sapList_BorderColor}`,
     borderRight: `1px solid ${ThemingParameters.sapList_BorderColor}`,
@@ -39,9 +50,13 @@ const styles = {
   },
   tbody: {
     position: 'relative',
-    backgroundColor: ThemingParameters.sapList_Background,
     overflowX: 'hidden',
-    overflowY: 'auto'
+    overflowY: 'auto',
+    scrollBarWidth: 'none !important',
+    '&::-webkit-scrollbar': {
+      width: 0,
+      height: 0
+    }
   },
   alternateRowColor: {
     backgroundColor: ThemingParameters.sapList_AlternatingBackground

packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBodyContainer.tsx

@@ -1,6 +1,5 @@
 import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { GlobalStyleClasses } from '@ui5/webcomponents-react/lib/GlobalStyleClasses';
 
 export const VirtualTableBodyContainer = (props) => {
   const {
@@ -13,7 +12,8 @@ export const VirtualTableBodyContainer = (props) => {
     infiniteScrollThreshold,
     onLoadMore,
     rows,
-    internalRowHeight
+    internalRowHeight,
+    handleExternalScroll
   } = props;
   const [isMounted, setIsMounted] = useState(false);
 
@@ -23,13 +23,14 @@ export const VirtualTableBodyContainer = (props) => {
     }
   }, [parentRef.current]);
 
-  const classNames = StyleClassHelper.of(classes.tbody, GlobalStyleClasses.sapScrollBar).className;
+  const classNames = StyleClassHelper.of(classes.tbody).className;
 
   const lastScrollTop = useRef(0);
   const firedInfiniteLoadEvents = useRef(new Set());
 
   const onScroll = useCallback(
     (event) => {
+      handleExternalScroll();
       const scrollOffset = event.target.scrollTop;
       const isScrollingDown = lastScrollTop.current < scrollOffset;
       if (isScrollingDown && infiniteScroll) {
@@ -54,7 +55,8 @@ export const VirtualTableBodyContainer = (props) => {
       rows.length,
       internalRowHeight,
       firedInfiniteLoadEvents,
-      lastScrollTop
+      lastScrollTop,
+      handleExternalScroll
     ]
   );