Add grid flag to stripe rows different colours

packages/frontend-core/src/components/grid/cells/DataCell.svelte

@@ -11,6 +11,7 @@
   export let selected
   export let rowFocused
   export let rowIdx
+  export let topRow = false
   export let focused
   export let selectedUser
   export let column
@@ -68,6 +69,7 @@
   {highlighted}
   {selected}
   {rowIdx}
+  {topRow}
   {focused}
   {selectedUser}
   {readonly}

packages/frontend-core/src/components/grid/cells/GridCell.svelte

@@ -6,6 +6,7 @@
   export let selectedUser = null
   export let error = null
   export let rowIdx
+  export let topRow = false
   export let defaultHeight = false
   export let center = false
   export let readonly = false
@@ -31,13 +32,14 @@
   class:readonly
   class:default-height={defaultHeight}
   class:selected-other={selectedUser != null}
+  class:alt={rowIdx % 2 === 1}
+  class:top={topRow}
   on:focus
   on:mousedown
   on:mouseup
   on:click
   on:contextmenu
   {style}
-  data-row={rowIdx}
 >
   {#if error}
     <div class="label">
@@ -70,6 +72,9 @@
     width: 0;
     --cell-color: transparent;
   }
+  .cell.alt {
+    --cell-background: var(--cell-background-alt);
+  }
   .cell.default-height {
     height: var(--default-row-height);
   }
@@ -98,8 +103,8 @@
   .cell.selected-other:not(.focused):after {
     border-radius: 0 2px 2px 2px;
   }
-  .cell[data-row="0"].error:after,
-  .cell[data-row="0"].selected-other:not(.focused):after {
+  .cell.top.error:after,
+  .cell.top.selected-other:not(.focused):after {
     border-radius: 2px 2px 2px 0;
   }
 
@@ -152,7 +157,7 @@
     overflow: hidden;
     user-select: none;
   }
-  .cell[data-row="0"] .label {
+  .cell.top .label {
     bottom: auto;
     top: 100%;
     border-radius: 0 2px 2px 2px;

packages/frontend-core/src/components/grid/cells/GutterCell.svelte

@@ -38,6 +38,7 @@
   highlighted={rowFocused || rowHovered}
   selected={rowSelected}
   {defaultHeight}
+  rowIdx={row?.__idx}
 >
   <div class="gutter">
     {#if $$slots.default}

packages/frontend-core/src/components/grid/layout/Grid.svelte

@@ -40,6 +40,7 @@
   export let allowExpandRows = true
   export let allowEditRows = true
   export let allowDeleteRows = true
+  export let stripeRows = false
 
   // Unique identifier for DOM nodes inside this instance
   const rand = Math.random()
@@ -54,6 +55,7 @@
     allowExpandRows,
     allowEditRows,
     allowDeleteRows,
+    stripeRows,
   })
 
   // Build up context
@@ -88,6 +90,7 @@
     allowExpandRows,
     allowEditRows,
     allowDeleteRows,
+    stripeRows,
   })
 
   // Set context for children to consume
@@ -105,6 +108,7 @@
   id="grid-{rand}"
   class:is-resizing={$isResizing}
   class:is-reordering={$isReordering}
+  class:stripe={$config.stripeRows}
   style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-height:{MaxCellRenderHeight}px; --max-cell-render-width-overflow:{MaxCellRenderWidthOverflow}px; --content-lines:{$contentLines};"
 >
   <div class="controls">
@@ -167,6 +171,7 @@
     /* Variables */
     --cell-background: var(--spectrum-global-color-gray-50);
     --cell-background-hover: var(--spectrum-global-color-gray-100);
+    --cell-background-alt: var(--cell-background);
     --cell-padding: 8px;
     --cell-spacing: 4px;
     --cell-border: 1px solid var(--spectrum-global-color-gray-200);
@@ -183,6 +188,9 @@
   .grid.is-reordering :global(*) {
     cursor: grabbing !important;
   }
+  .grid.stripe {
+    --cell-background-alt: var(--spectrum-global-color-gray-75);
+  }
 
   .grid-data-outer,
   .grid-data-inner {

packages/frontend-core/src/components/grid/layout/GridBody.svelte

@@ -36,7 +36,11 @@
 <div bind:this={body} class="grid-body">
   <GridScrollWrapper scrollHorizontally scrollVertically wheelInteractive>
     {#each $renderedRows as row, idx}
-      <GridRow {row} {idx} invertY={idx >= $rowVerticalInversionIndex} />
+      <GridRow
+        {row}
+        top={idx === 0}
+        invertY={idx >= $rowVerticalInversionIndex}
+      />
     {/each}
     {#if $config.allowAddRows && $renderedColumns.length}
       <div

packages/frontend-core/src/components/grid/layout/GridRow.svelte

@@ -3,7 +3,7 @@
   import DataCell from "../cells/DataCell.svelte"
 
   export let row
-  export let idx
+  export let top = false
   export let invertY = false
 
   const {
@@ -41,7 +41,8 @@
       invertX={columnIdx >= $columnHorizontalInversionIndex}
       highlighted={rowHovered || rowFocused || reorderSource === column.name}
       selected={rowSelected}
-      rowIdx={idx}
+      rowIdx={row.__idx}
+      topRow={top}
       focused={$focusedCellId === cellId}
       selectedUser={$selectedCellMap[cellId]}
       width={column.width}

packages/frontend-core/src/components/grid/layout/NewRow.svelte

@@ -167,7 +167,7 @@
           focused={$focusedCellId === cellId}
           width={$stickyColumn.width}
           {updateValue}
-          rowIdx={0}
+          topRow={offset === 0}
           {invertY}
         >
           {#if $stickyColumn?.schema?.autocolumn}
@@ -193,7 +193,7 @@
                 row={newRow}
                 focused={$focusedCellId === cellId}
                 width={column.width}
-                rowIdx={0}
+                topRow={offset === 0}
                 invertX={columnIdx >= $columnHorizontalInversionIndex}
                 {invertY}
               >

packages/frontend-core/src/components/grid/layout/StickyColumn.svelte

@@ -82,7 +82,8 @@
               {rowFocused}
               selected={rowSelected}
               highlighted={rowHovered || rowFocused}
-              rowIdx={idx}
+              rowIdx={row.__idx}
+              topRow={idx === 0}
               focused={$focusedCellId === cellId}
               selectedUser={$selectedCellMap[cellId]}
               width={$stickyColumn.width}