feat(aggrid): add optional striped row theme configuration

.changeset/neat-grids-rest.md

@@ -0,0 +1,9 @@
+---
+"@siemens/ix-aggrid": minor
+---
+
+Add optional theme configuration to `getIxTheme` and `getIxThemeAsync` with `stripedRows` for API-based striped row styling.
+
+AG Grid now defaults to a uniform row background, while striped rows can be enabled with:
+
+`getIxTheme(agGridCommunity, { stripedRows: true })`

packages/aggrid/src/aggrid-ix-theme-params.ts

@@ -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)`,

packages/aggrid/src/index.ts

@@ -23,6 +23,16 @@ import {
 } from '@siemens/ix-icons/icons';
 
 const additionalThemeParams = { fontFamily: ['Siemens Sans', 'sans-serif'] };
+const stripedRowThemeParams = {
+  oddRowBackgroundColor: 'var(--theme-color-1)',
+};
+
+export type IxThemeOptions = {
+  /**
+   * Enables alternating row background colors.
+   */
+  stripedRows?: boolean;
+};
 
 // Flexible type for multiple versions
 type AgGridModule = {
@@ -41,11 +51,17 @@ function extractSvgFromDataUri(dataUri: string): string {
   return svgString.trim();
 }
 
-function createIxTheme(agModule: AgGridModule) {
+function createIxTheme(agModule: AgGridModule, options?: IxThemeOptions) {
   const { createPart, themeAlpine } = agModule;
-  const base = themeAlpine.withParams({
+
+  const themeParams = {
     ...aggridIxThemeParams,
     ...additionalThemeParams,
+    ...(options?.stripedRows ? stripedRowThemeParams : {}),
+  };
+
+  const base = themeAlpine.withParams({
+    ...themeParams,
   });
 
   const iconCSS = iconOverrides({
@@ -117,15 +133,16 @@ function createIxTheme(agModule: AgGridModule) {
   return theme;
 }
 
-const getIxTheme = (agModule: AgGridModule) => {
-  return createIxTheme(agModule);
+const getIxTheme = (agModule: AgGridModule, options?: IxThemeOptions) => {
+  return createIxTheme(agModule, options);
 };
 
 const getIxThemeAsync = async (
-  importModule: () => Promise<AgGridModule> | AgGridModule
+  importModule: () => Promise<AgGridModule> | AgGridModule,
+  options?: IxThemeOptions
 ) => {
   const agLib = await importModule();
-  return createIxTheme(agLib);
+  return createIxTheme(agLib, options);
 };
 
 export { getIxTheme, getIxThemeAsync };

packages/aggrid/tests/aggrid.e2e.ts

@@ -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');

packages/aggrid/tests/striped/setup-striped.ts

@@ -0,0 +1,32 @@
+/*
+ * 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, { stripedRows: true });
+
+const gridOptions = {
+  columnDefs: COLUMN_DEFS,
+  rowData: ROW_DATA,
+  suppressCellFocus: true,
+  theme: stripedTheme,
+} satisfies GridOptions;
+
+const gridElement = document.querySelector('#testGrid') as HTMLElement;
+createGrid(gridElement, gridOptions);

packages/aggrid/tests/striped/striped.html

@@ -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>

packages/angular-standalone-test-app/src/app/app.routes.ts

@@ -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': () =>

packages/angular-standalone-test-app/src/preview-examples/aggrid-striped.ts

@@ -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, {
+      stripedRows: true,
+    });
+
+    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,
+    };
+  }
+}

packages/angular-test-app/src/app/app-routing.module.ts

@@ -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,

packages/angular-test-app/src/app/app.module.ts

@@ -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,