fix(AnalyticalTable): fix flickering background colors when alternateRowColors is active (#303)

Author: TobiasKoehler

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

@@ -41,14 +41,11 @@ const styles = ({ parameters }: JSSTheme) => ({
     backgroundColor: parameters.sapUiListBackground
   },
   alternateRowColor: {
-    '& $tr:nth-child(even)': {
-      backgroundColor: parameters.sapUiListHeaderBackground
-    }
+    backgroundColor: parameters.sapUiListHeaderBackground
   },
   emptyRow: {},
   tr: {
     zIndex: 0,
-    backgroundColor: parameters.sapUiListBackground,
     color: parameters.sapUiListTextColor,
     '&[data-is-selected]': {
       backgroundColor: `${parameters.sapUiListSelectionBackgroundColor} !important`

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

@@ -283,7 +283,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
         style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
-          class="AnalyticalTable--tbody- AnalyticalTable--alternateRowColor-"
+          class="AnalyticalTable--tbody-"
           style="height: 220px; width: 100%;"
         >
           <div
@@ -343,7 +343,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
           </div>
           <div
             aria-rowindex="1"
-            class="AnalyticalTable--tr-"
+            class="AnalyticalTable--tr- AnalyticalTable--alternateRowColor-"
             role="row"
             style="position: absolute; left: 0px; top: 44px; height: 44px; width: 100%;"
           >
@@ -445,7 +445,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
           </div>
           <div
             aria-rowindex="3"
-            class="AnalyticalTable--tr- AnalyticalTable--emptyRow-"
+            class="AnalyticalTable--tr- AnalyticalTable--emptyRow- AnalyticalTable--alternateRowColor-"
             role="row"
             style="position: absolute; left: 0px; top: 132px; height: 44px; width: 100%;"
           >
@@ -3057,7 +3057,7 @@ exports[`AnalyticalTable render without data 1`] = `
         style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
-          class="AnalyticalTable--tbody- AnalyticalTable--alternateRowColor-"
+          class="AnalyticalTable--tbody-"
           style="height: 220px; width: 100%;"
         >
           <div
@@ -3109,7 +3109,7 @@ exports[`AnalyticalTable render without data 1`] = `
           </div>
           <div
             aria-rowindex="1"
-            class="AnalyticalTable--tr- AnalyticalTable--emptyRow-"
+            class="AnalyticalTable--tr- AnalyticalTable--emptyRow- AnalyticalTable--alternateRowColor-"
             role="row"
             style="position: absolute; left: 0px; top: 44px; height: 44px; width: 100%;"
           >
@@ -3203,7 +3203,7 @@ exports[`AnalyticalTable render without data 1`] = `
           </div>
           <div
             aria-rowindex="3"
-            class="AnalyticalTable--tr- AnalyticalTable--emptyRow-"
+            class="AnalyticalTable--tr- AnalyticalTable--emptyRow- AnalyticalTable--alternateRowColor-"
             role="row"
             style="position: absolute; left: 0px; top: 132px; height: 44px; width: 100%;"
           >

packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts

@@ -4,19 +4,22 @@ import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionM
 const ROW_SELECTION_ATTRIBUTE = 'data-is-selected';
 
 export const useTableRowStyling = (hooks) => {
-
   hooks.getRowProps.push((passedRowProps, { instance, row }) => {
-    const { classes, selectionMode, onRowSelected } = instance.webComponentsReactProperties;
+    const { classes, selectionMode, onRowSelected, alternateRowColor } = instance.webComponentsReactProperties;
     const isEmptyRow = row.original?.emptyRow;
     let className = classes.tr;
     if (row.isGrouped) {
       className += ` ${classes.tableGroupHeader}`;
     }
 
-    if(isEmptyRow) {
+    if (isEmptyRow) {
       className += ` ${classes.emptyRow}`;
     }
 
+    if (alternateRowColor && row.index % 2 !== 0) {
+      className += ` ${classes.alternateRowColor}`;
+    }
+
     const rowProps: any = {
       ...passedRowProps,
       className,

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

@@ -52,7 +52,7 @@ import { TitleBar } from './TitleBar';
 import { VirtualTableBody } from './virtualization/VirtualTableBody';
 import { useDynamicColumnWidths } from './hooks/useDynamicColumnWidths';
 import { TableScaleWidthMode } from '../../enums/TableScaleWidthMode';
-import {useColumnsDependencies} from "./hooks/useColumnsDependencies";
+import { useColumnsDependencies } from './hooks/useColumnsDependencies';
 
 export interface ColumnConfiguration extends Column {
   accessor?: string;
@@ -181,7 +181,6 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
     return props.data;
   }, [props.data, minRows]);
 
-
   const {
     getTableProps,
     headerGroups,
@@ -205,6 +204,7 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
         onRowSelected,
         onRowExpandChange,
         isTreeTable,
+        alternateRowColor,
         // tableClientWidth,
         scaleWidthMode
       },
@@ -232,7 +232,7 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
   const updateTableClientWidth = useCallback(() => {
     requestAnimationFrame(() => {
       if (tableRef.current) {
-        dispatch({ type: 'TABLE_RESIZE', payload: { tableClientWidth: tableRef.current.clientWidth }});
+        dispatch({ type: 'TABLE_RESIZE', payload: { tableClientWidth: tableRef.current.clientWidth } });
       }
     });
   }, []);
@@ -326,7 +326,7 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
       {title && <TitleBar>{title}</TitleBar>}
       {typeof renderExtension === 'function' && <div>{renderExtension()}</div>}
       <div className={tableContainerClasses.valueOf()} ref={tableRef}>
-        {(
+        {
           <div {...getTableProps()} role="table" aria-rowcount={rows.length}>
             {headerGroups.map((headerGroup) => {
               let headerProps = {};
@@ -395,7 +395,7 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
               />
             )}
           </div>
-        )}
+        }
       </div>
     </div>
   );

packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx

@@ -33,9 +33,6 @@ export const VirtualTableBody = (props) => {
       if (selectionMode === TableSelectionMode.SINGLE_SELECT || selectionMode === TableSelectionMode.MULTI_SELECT) {
         innerDivRef.current.classList.add(classes.selectable);
       }
-      if (alternateRowColor) {
-        innerDivRef.current.classList.add(classes.alternateRowColor);
-      }
     }
   }, [
     innerDivRef.current,