Angular data grid - Code

info

AG Grid is a third party library that provides a feature rich data grid implementation.

Its basic functionality is free and open source (distributed under the MIT license).

Please note that more advanced features like e.g. Row Grouping are only available with AG Grid Enterprise which is a commercial product.

More information can be found on the AG Grid licenses page.

Installation

• React: Follow the official AG Grid installation instructions for React.
• Angular: Follow the official AG Grid installation instructions for Angular.
• Vue: Follow the official AG Grid installation instructions for Vue.
• Javascript: Follow the official AG Grid installation instruction for JavaScript.

note

AG Grid version 33 or higher is required.

Siemens Industrial Experience theme for AG Grid

Install the @siemens/ix-aggrid package.

npm install @siemens/ix-aggrid

Import and configure the IX theme:

import { getIxTheme, getIxThemeAsync } from '@siemens/ix-aggrid';
import * as agGrid from 'ag-grid-community';

// Get iX theme based on your AG Grid module
const ixTheme = getIxTheme(agGrid);
// Alternative: Use async import
const ixTheme = await getIxThemeAsync(() => import('ag-grid-community'));

// Option 1: Set the theme per grid instance
const gridOptions = {
  theme: ixTheme,
  // ... other options
};

// Option 2: Set the theme globally for all grids
// Note: Must be called before initializing any grid instance
agGrid.provideGlobalGridOptions({
  theme: ixTheme,
});

Basic