siemens · danielleroux · Aug 13, 2026 · Aug 12, 2026 · Aug 13, 2026
@@ -0,0 +1,5 @@
+---
+"@siemens/ix-aggrid": patch
+---
+
+AG Grid theme defaults to uniform row background. Examples for striped rows are added to be shown in documentation.
@@ -25,7 +25,7 @@ export const aggridIxThemeParams = {
   borderColor: `var(--theme-color-x-weak-bdr)`,
   headerBackgroundColor: `var(--theme-color-2)`,
   tooltipBackgroundColor: `var(--theme-color-2)`,
-  oddRowBackgroundColor: `var(--theme-color-ghost-alt)`,
+  oddRowBackgroundColor: `var(--theme-color-2)`,
   sideBarBackgroundColor: `var(--theme-color-2)`,
   invalidColor: `var(--theme-color-alarm)`,
   checkboxUncheckedBorderColor: `var(--theme-color-contrast-bdr)`,
@@ -98,7 +98,6 @@ export const aggridIxThemeParams = {
   sideButtonsBarBackgroundColor: `var(--theme-color-2)`,
   sideButtonHoverBackgroundColor: `var(--theme-color-ghost--hover)`,
   checkboxCheckedShapeColor: `var(--theme-color-primary--contrast)`,
-  OddRowBackgroundColor: `var(--theme-color-ghost-alt)`,
   tabBackgroundColor: `rgba(255, 255, 255, 0)`,
   tabBorderColor: `rgba(24, 29, 31, 0.15)`,
   tabHoverBackgroundColor: `rgba(255, 255, 255, 0)`,

@@ -73,6 +73,13 @@ regressionTest.describe('aggrid', () => {
     ).toMatchSnapshot();
   });
 
+  regressionTest('striped rows', async ({ page }) => {
+    await page.goto('striped/striped.html');
+    expect(
+      await page.screenshot({ fullPage: true, animations: 'disabled' })
+    ).toMatchSnapshot();
+  });
+
   regressionTest.describe('header checkbox', () => {
     regressionTest('should be unchecked', async ({ page }) => {
       await page.goto('basic/basic.html');

@@ -0,0 +1,34 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import {
+  AllCommunityModule,
+  createGrid,
+  GridOptions,
+  ModuleRegistry,
+} from 'ag-grid-community';
+import '@siemens/ix/dist/siemens-ix/siemens-ix.css';
+import { getIxTheme } from '@siemens/ix-aggrid';
+import * as agGridCommunity from 'ag-grid-community';
+import { COLUMN_DEFS, ROW_DATA } from '../utils/test/basic.const';
+
+ModuleRegistry.registerModules([AllCommunityModule]);
+
+const stripedTheme = getIxTheme(agGridCommunity).withParams({
+  oddRowBackgroundColor: 'var(--theme-color-1)',
+});
+
+const gridOptions = {
+  columnDefs: COLUMN_DEFS,
+  rowData: ROW_DATA,
+  suppressCellFocus: true,
+  theme: stripedTheme,
+} satisfies GridOptions;
+
+const gridElement = document.querySelector('#testGrid') as HTMLElement;
+createGrid(gridElement, gridOptions);
@@ -0,0 +1,21 @@
+<!--
+SPDX-FileCopyrightText: 2026 Siemens AG
+
+SPDX-License-Identifier: MIT
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<!DOCTYPE html>
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AG Grid striped rows</title>
+  </head>
+  <body>
+    <div style="height: 500px" id="testGrid"></div>
+    <script src="../utils/test/runtime/main.ts" type="module"></script>
+    <script src="./setup-striped.ts" type="module"></script>
+  </body>
+</html>
@@ -34,6 +34,8 @@ export const routePaths: IxPreviewRoutes = {
     import('../preview-examples/add-icons').then((m) => m.default),
   'preview/aggrid': () =>
     import('../preview-examples/aggrid').then((m) => m.default),
+  'preview/aggrid-striped': () =>
+    import('../preview-examples/aggrid-striped').then((m) => m.default),
   'preview/application': () =>
     import('../preview-examples/application').then((m) => m.default),
   'preview/application-advanced': () =>

@@ -0,0 +1,133 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { getIxTheme } from '@siemens/ix-aggrid';
+import { AgGridAngular } from 'ag-grid-angular';
+import {
+  GridOptions,
+  AllCommunityModule,
+  ModuleRegistry,
+} from 'ag-grid-community';
+import * as agGrid from 'ag-grid-community';
+
+ModuleRegistry.registerModules([AllCommunityModule]);
+
+@Component({
+  selector: 'app-example',
+  imports: [AgGridAngular, CommonModule],
+  templateUrl: './aggrid.html',
+})
+export default class AGGridStriped implements OnInit {
+  gridOptions: GridOptions | null = null;
+
+  ngOnInit() {
+    const ixTheme = getIxTheme(agGrid).withParams({
+      oddRowBackgroundColor: 'var(--theme-color-1)',
+    });
+
+    this.gridOptions = {
+      theme: ixTheme,
+      rowDragManaged: true,
+      tooltipShowDelay: 500,
+      rowSelection: {
+        mode: 'multiRow',
+        checkboxes: true,
+        headerCheckbox: true,
+        selectAll: 'filtered',
+      },
+      columnDefs: [
+        {
+          field: 'type',
+          headerName: 'Type',
+          resizable: true,
+          rowDrag: true,
+          tooltipField: 'type',
+        },
+        {
+          field: 'status',
+          headerName: 'Status',
+          resizable: true,
+          sortable: true,
+          filter: true,
+          tooltipValueGetter: (params) => {
+            return `Status: ${params.value} - Type: ${params.data.type}`;
+          },
+        },
+        {
+          field: 'hwVersion',
+          headerName: 'HW version',
+          resizable: true,
+          tooltipValueGetter: (params) => {
+            if (params.value === 'N/A') {
+              return 'Hardware version not available';
+            }
+            return `Hardware Version ${params.value}`;
+          },
+        },
+      ],
+      autoSizeStrategy: {
+        type: 'fitGridWidth',
+      },
+      rowData: [
+        {
+          type: 'Equipment',
+          status: 'Normal',
+          hwVersion: '2.0',
+        },
+        {
+          type: 'Positioner',
+          status: 'Maintenance',
+          hwVersion: '1.0',
+        },
+        {
+          type: 'Pressure sensor',
+          status: 'Unknown',
+          hwVersion: 'N/A',
+        },
+        {
+          type: 'Flow meter',
+          status: 'Normal',
+          hwVersion: '3.1',
+        },
+        {
+          type: 'Temperature sensor',
+          status: 'Warning',
+          hwVersion: '2.2',
+        },
+        {
+          type: 'Valve',
+          status: 'Normal',
+          hwVersion: '1.5',
+        },
+        {
+          type: 'Actuator',
+          status: 'Maintenance',
+          hwVersion: '2.0',
+        },
+        {
+          type: 'Controller',
+          status: 'Normal',
+          hwVersion: '4.0',
+        },
+        {
+          type: 'Safety relay',
+          status: 'Unknown',
+          hwVersion: 'N/A',
+        },
+        {
+          type: 'Power supply',
+          status: 'Normal',
+          hwVersion: '1.8',
+        },
+      ],
+      suppressCellFocus: true,
+    };
+  }
+}
@@ -15,6 +15,7 @@ import AboutAndLegalLegacy from '../preview-examples/about-and-legal-legacy';
 import ActionCard from '../preview-examples/action-card';
 import AddIcons from '../preview-examples/add-icons';
 import AgGrid from '../preview-examples/aggrid';
+import AgGridStriped from '../preview-examples/aggrid-striped';
 import ApplicationExample from '../preview-examples/application';
 import ApplicationAdvancedExample from '../preview-examples/application-advanced';
 import ApplicationAppSwitchExample from '../preview-examples/application-app-switch';
@@ -330,6 +331,10 @@ const routes: Routes = [
         path: 'aggrid',
         component: AgGrid,
       },
+      {
+        path: 'aggrid-striped',
+        component: AgGridStriped,
+      },
       {
         path: 'avatar-image',
         component: AvatarImage,

@@ -24,6 +24,7 @@ import AboutAndLegalLegacy from '../preview-examples/about-and-legal-legacy';
 import ActionCard from '../preview-examples/action-card';
 import AddIcons from '../preview-examples/add-icons';
 import AgGrid from '../preview-examples/aggrid';
+import AgGridStriped from '../preview-examples/aggrid-striped';
 import ApplicationExample from '../preview-examples/application';
 import ApplicationAdvancedExample from '../preview-examples/application-advanced';
 import ApplicationAppSwitchExample from '../preview-examples/application-app-switch';
@@ -289,6 +290,7 @@ import WorkflowVertical from '../preview-examples/workflow-vertical';
     ActionCard,
     AddIcons,
     AgGrid,
+    AgGridStriped,
     ApplicationExample,
     ApplicationAdvancedExample,
     ApplicationBreakpointExample,