[EuiDataGrid] Give rows actual positions/dimensions

src/components/datagrid/_data_grid_data_row.scss

@@ -169,7 +169,7 @@
 
 // Row stripes
 @include euiDataGridStyles(stripes) {
-  .euiDataGridRow:nth-child(odd) {
+  .euiDataGridRow--striped {
     @include euiDataGridRowCellActions($definedHeight: true) {
       background-color: $euiColorLightestShade;
     }

src/components/datagrid/body/data_grid_cell.tsx

@@ -695,6 +695,7 @@ export class EuiDataGridCell extends Component<
           content,
           rowManager.getRow(
             rowIndex,
+            visibleRowIndex,
             style!.top as string, // comes in as a `{float}px` string from react-window
             style!.height as number // comes in as an integer from react-window
           )

src/components/datagrid/body/data_grid_row_manager.test.ts

@@ -24,17 +24,32 @@ describe('row manager', () => {
       });
 
       it('creates a row DOM element', () => {
-        const row = rowManager.getRow(0, mockTop, mockHeight);
+        const row = rowManager.getRow(0, 0, mockTop, mockHeight);
         expect(row).toMatchInlineSnapshot(`
           <div
             class="euiDataGridRow"
-            data-gridrow-index="0"
+            data-grid-row-index="0"
+            data-grid-visible-row-index="0"
             role="row"
             style="position: absolute; left: 0px; right: 0px; top: 15px; height: 30px;"
           />
         `);
       });
 
+      it('adds a striped class if the visible row index is odd', () => {
+        const row = rowManager.getRow(1, 1, mockTop, mockHeight);
+        expect(row).toMatchInlineSnapshot(`
+          <div
+            class="euiDataGridRow euiDataGridRow--striped"
+            data-grid-row-index="1"
+            data-grid-visible-row-index="1"
+            role="row"
+            style="position: absolute; left: 0px; right: 0px; top: 15px; height: 30px;"
+          />
+        `);
+        mockContainerRef.current.removeChild(row);
+      });
+
       it('sets the parent innerGrid container to position relative', () => {
         expect(mockContainerRef.current.style.position).toEqual('relative');
       });
@@ -46,16 +61,17 @@ describe('row manager', () => {
 
     describe('when the row DOM element already exists', () => {
       it('does not create a new DOM element but fetches the existing one', () => {
-        rowManager.getRow(0, mockTop, mockHeight);
+        rowManager.getRow(0, 0, mockTop, mockHeight);
         expect(mockContainerRef.current.children).toHaveLength(1);
       });
 
       it("updates the row's top and height values", () => {
-        const row = rowManager.getRow(0, '100px', 200);
+        const row = rowManager.getRow(0, 0, '100px', 200);
         expect(row).toMatchInlineSnapshot(`
           <div
             class="euiDataGridRow"
-            data-gridrow-index="0"
+            data-grid-row-index="0"
+            data-grid-visible-row-index="0"
             role="row"
             style="position: absolute; left: 0px; right: 0px; top: 100px; height: 200px;"
           />

src/components/datagrid/body/data_grid_row_manager.ts

@@ -15,14 +15,17 @@ export const makeRowManager = (
   const rowIdToElements = new Map<number, HTMLDivElement>();
 
   return {
-    getRow(rowIndex, top, height) {
+    getRow(rowIndex, visibleRowIndex, top, height) {
       let rowElement = rowIdToElements.get(rowIndex);
 
       if (rowElement == null) {
         rowElement = document.createElement('div');
         rowElement.setAttribute('role', 'row');
-        rowElement.setAttribute('data-gridrow-index', String(rowIndex));
+        rowElement.dataset.gridRowIndex = String(rowIndex); // Row index from data, affected by sorting/pagination
+        rowElement.dataset.gridVisibleRowIndex = String(visibleRowIndex); // Affected by sorting/pagination
         rowElement.classList.add('euiDataGridRow');
+        const isOddRow = visibleRowIndex % 2 !== 0;
+        if (isOddRow) rowElement.classList.add('euiDataGridRow--striped');
         rowElement.style.position = 'absolute';
         rowElement.style.left = '0';
         rowElement.style.right = '0';

src/components/datagrid/data_grid_types.ts

@@ -832,5 +832,10 @@ export interface EuiDataGridRowHeightsOptions {
 }
 
 export interface EuiDataGridRowManager {
-  getRow(rowIndex: number, top: string, height: number): HTMLDivElement;
+  getRow(
+    rowIndex: number,
+    visibleRowIndex: number,
+    top: string,
+    height: number
+  ): HTMLDivElement;
 }