fix(AnalyticalTable): apply alternate row color correctly on sorted rows (#4691)

Fixes #4690 

Note: Doesn't work with `nth-child` because of virtualization.

Author: Lukas742

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

@@ -1106,22 +1106,28 @@ describe('AnalyticalTable', () => {
     const alternatingRowColor = cssVarToRgb(ThemingParameters.sapList_AlternatingBackground);
     cy.mount(<AnalyticalTable data={data} columns={columns} alternateRowColor minRows={7} />);
     cy.get('[data-component-name="AnalyticalTableContainer"]').should('have.css', 'background-color', standardRowColor);
-    for (let i = 1; i <= 4; i++) {
-      if (i % 2) {
-        // no color set
-        cy.get(`[aria-rowindex="${i}"]`).should('have.css', 'background-color', 'rgba(0, 0, 0, 0)');
-      } else {
-        cy.get(`[aria-rowindex="${i}"]`).should('have.css', 'background-color', alternatingRowColor);
+    function testAlternateRowColor() {
+      for (let i = 1; i <= 4; i++) {
+        if (i % 2) {
+          // no color set
+          cy.get(`[aria-rowindex="${i}"]`).should('have.css', 'background-color', 'rgba(0, 0, 0, 0)');
+        } else {
+          cy.get(`[aria-rowindex="${i}"]`).should('have.css', 'background-color', alternatingRowColor);
+        }
       }
+      cy.get('[data-empty-row="true"]').each(($emptyRow, i) => {
+        if ((i + 1) % 2) {
+          // no color set
+          cy.wrap($emptyRow).should('have.css', 'background-color', 'rgba(0, 0, 0, 0)');
+        } else {
+          cy.wrap($emptyRow).should('have.css', 'background-color', alternatingRowColor);
+        }
+      });
     }
-    cy.get('[data-empty-row="true"]').each(($emptyRow, i) => {
-      if ((i + 1) % 2) {
-        // no color set
-        cy.wrap($emptyRow).should('have.css', 'background-color', 'rgba(0, 0, 0, 0)');
-      } else {
-        cy.wrap($emptyRow).should('have.css', 'background-color', alternatingRowColor);
-      }
-    });
+    testAlternateRowColor();
+    cy.findByText('Name').click();
+    cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
+    testAlternateRowColor();
   });
 
   it('initial column order', () => {

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

@@ -157,7 +157,7 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
           lastNonEmptyRow.current = row;
         }
         prepareRow(row);
-        const rowProps = row.getRowProps();
+        const rowProps = row.getRowProps({ rowIndex: virtualRow.index });
         const isNavigatedCell = markNavigatedRow(row);
         const RowSubComponent = typeof renderRowSubComponent === 'function' ? renderRowSubComponent(row) : undefined;
 

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

@@ -42,7 +42,7 @@ const getHeaderProps = (columnProps, { instance, column }) => {
 
 const ROW_SELECTION_ATTRIBUTE = 'data-is-selected';
 
-const getRowProps = (rowProps, { instance, row }) => {
+const getRowProps = (rowProps, { instance, row, userProps }) => {
   const { webComponentsReactProperties } = instance;
   const { classes, selectionBehavior, selectionMode, alternateRowColor, subRowsKey } = webComponentsReactProperties;
   let className = classes.tr;
@@ -58,8 +58,7 @@ const getRowProps = (rowProps, { instance, row }) => {
   ) {
     className += ` ${classes.tableGroupHeader}`;
   }
-
-  if (alternateRowColor && row.index % 2 !== 0) {
+  if (alternateRowColor && userProps.rowIndex % 2 !== 0) {
     className += ` ${classes.alternateRowColor}`;
   }