From 85b89268775d5786c9e2a231cac25edb55e81fc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 4 Jun 2026 19:40:49 +0200
Subject: [PATCH] Stripe large table rows by visible order

---
 components/data-display.html          | 8 ++++++++
 styles/42-components-data-display.css | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/components/data-display.html b/components/data-display.html
index cccc309..cec3d9e 100644
--- a/components/data-display.html
+++ b/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) {
diff --git a/styles/42-components-data-display.css b/styles/42-components-data-display.css
index 87fc898..5bb263e 100644
--- a/styles/42-components-data-display.css
+++ b/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);
 }