fix(AnalyticalTable): fixed alternateRowColor sort bug (#316)

Author: TobiasKoehler

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

@@ -5,7 +5,7 @@ const ROW_SELECTION_ATTRIBUTE = 'data-is-selected';
 
 export const useTableRowStyling = (hooks) => {
   hooks.getRowProps.push((passedRowProps, { instance, row }) => {
-    const { classes, selectionMode, onRowSelected, alternateRowColor } = instance.webComponentsReactProperties;
+    const { classes, selectionMode, onRowSelected } = instance.webComponentsReactProperties;
     const isEmptyRow = row.original?.emptyRow;
     let className = classes.tr;
     if (row.isGrouped) {
@@ -16,10 +16,6 @@ export const useTableRowStyling = (hooks) => {
       className += ` ${classes.emptyRow}`;
     }
 
-    if (alternateRowColor && row.index % 2 !== 0) {
-      className += ` ${classes.alternateRowColor}`;
-    }
-
     const rowProps: any = {
       ...passedRowProps,
       className,

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

@@ -50,6 +50,7 @@ export const VirtualTableBody = (props) => {
     return {
       rows,
       additionalProps: {
+        alternateRowColor,
         isTreeTable,
         classes,
         columns

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

@@ -3,15 +3,21 @@ import React from 'react';
 export const VirtualTableRow = (props) => {
   const { style, index, data } = props;
   const { additionalProps, rows } = data;
-  const { isTreeTable } = additionalProps;
+  const { isTreeTable, classes, alternateRowColor } = additionalProps;
   const row = rows[index];
 
   if (!row) {
     return null;
   }
 
+  const rowProps = row.getRowProps();
+
+  if (alternateRowColor && index % 2 !== 0) {
+    rowProps.className += ` ${classes.alternateRowColor}`;
+  }
+
   return (
-    <div {...row.getRowProps()} style={style} aria-rowindex={index}>
+    <div {...rowProps} style={style} aria-rowindex={index}>
       {row.cells.map((cell) => {
         if (row.original?.emptyRow) return <div {...cell.getCellProps()} />;
         let contentToRender = 'Cell';