Stripe large table rows by visible order

components/data-display.html

@@ -334,11 +334,19 @@
           return compareValues(leftValue, rightValue, state.direction);
         });
 
+        let visibleIndex = 0;
         sortedRows.forEach((row) => {
           table.appendChild(row);
           const isVisible = rowMatchesQuery(row, state.query);
           row.classList.toggle('sg-large-table__row--hidden', !isVisible);
           row.setAttribute('aria-hidden', isVisible ? 'false' : 'true');
+          row.classList.remove('sg-large-table__row--striped-light');
+          if (isVisible && visibleIndex % 2 === 0) {
+            row.classList.add('sg-large-table__row--striped-light');
+          }
+          if (isVisible) {
+            visibleIndex += 1;
+          }
         });
 
         if (loadMoreRow) {

styles/42-components-data-display.css

@@ -97,7 +97,7 @@
   background: var(--color-medium-grey);
 }
 
-.sg-large-table > .sg-large-table__row:nth-child(odd) {
+.sg-large-table__row--striped-light {
   background: var(--color-light-grey);
 }