export interface GroupRow {
type: 'group';
id: string;
name: string;
path: string[];
}
export interface RoomRow {
type: 'room';
id: string;
name: string;
path: string[];
}
export interface DeviceRow {
type: 'device';
id: string;
name: string;
status: string;
model: string;
path: string[];
}
export type Row = GroupRow | RoomRow | DeviceRow;
export const rows: Row[] = [
{
type: 'group',
id: 'group-1',
name: 'All devices',
path: []
},
{
type: 'room',
id: 'room-1',
name: 'Auditorium',
path: ['All devices']
},
{
type: 'device',
id: 'device-1',
name: 'Auditorium MXA920',
status: 'online',
model: 'MXA920',
path: ['All devices', 'Auditorium']
},
{
type: 'device',
id: 'device-2',
name: 'Auditorium IMX',
status: 'online',
model: 'IMX Room',
path: ['All devices', 'Auditorium']
},
{
type: 'room',
id: 'room-2',
name: 'Boardroom',
path: ['All devices']
},
{
type: 'device',
id: 'device-3',
name: 'Boardroom MXA920',
status: 'offline',
model: 'MXA920',
path: ['All devices', 'Boardroom']
},
{
type: 'device',
id: 'device-4',
name: 'Boardroom IMX',
status: 'online',
model: 'IMX Room',
path: ['All devices', 'Boardroom']
},
{
type: 'device',
id: 'device-5',
name: 'MXA901-xxxxx',
status: 'online',
model: 'MXA901',
path: ['All devices']
},
]
import '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
import {
RowGroupingModule,
RowGroupingPanelModule,
GroupFilterModule,
TreeDataModule,
MasterDetailModule,
} from 'ag-grid-enterprise';
import { AppComponent } from './app.component';
ModuleRegistry.registerModules([
AllCommunityModule,
RowGroupingModule,
RowGroupingPanelModule,
GroupFilterModule,
TreeDataModule,
MasterDetailModule,
]);
if ((window as any).ENABLE_PROD_MODE) {
enableProdMode();
}
const app = bootstrapApplication(AppComponent, {
providers: [provideHttpClient()],
});
/** TEAR DOWN START **/
app.then((appRef) => {
(window as any).tearDownExample = () => appRef.destroy();
}).catch((err) => {
console.error('Error during bootstrap:', err);
});
/** TEAR DOWN END **/
import { Component } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular';
import { DeviceRow, GroupRow, RoomRow, Row, rows } from './data';
import { ColDef, GridApi, GridReadyEvent, IDetailCellRendererParams, RowHeightParams, themeBalham } from 'ag-grid-community';
@Component({
selector: 'my-app',
imports: [AgGridAngular],
template: `
<main style="height: 100vh; width: 100%; overflow: hidden; padding: 24px">
<div style="margin: auto; width: 100%; max-width: 1200px">
<div style="padding: 12px 0; display: flex; gap: 8px">
<input type="text" placeholder="Search..." (input)="search($event)" />
<button (click)="export()">Export</button>
</div>
<ag-grid-angular
style="height: 600px"
[theme]="theme"
[getRowHeight]="getRowHeight"
[rowData]="rowData"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[autoGroupColumnDef]="autoGroupColumnDef"
[treeData]="true"
[getDataPath]="getDataPath"
[groupDefaultExpanded]="1"
[masterDetail]="true"
[detailCellRendererParams]="detailCellRendererParams"
[isRowMaster]="isRowMaster"
[rowSelection]="{ mode: 'multiRow', enableClickSelection: true }"
(gridReady)="onGridReady($event)"
/>
</div>
</main>
`
})
export class AppComponent {
private gridApi!: GridApi<Row>;
title = 'ag-grid-sandbox';
theme = themeBalham.withParams({ accentColor: '#007bff' });
rowData = rows.filter(row => row.type !== 'device');
columnDefs: ColDef[] = [
{
field: 'type',
headerName: 'Entity type',
minWidth: 250
}
];
defaultColDef: ColDef = {
flex: 1
};
autoGroupColumnDef: ColDef = {
field: 'name',
headerName: 'Name',
minWidth: 250,
cellRendererParams: {
suppressCount: true
}
};
detailCellRendererParams: Partial<IDetailCellRendererParams<GroupRow | RoomRow, DeviceRow>> = {
detailGridOptions: {
columnDefs: [
{
field: 'name',
headerName: 'Name',
minWidth: 250
},
{
field: 'status',
headerName: 'Network',
minWidth: 250
},
{
field: 'model',
headerName: 'Model',
minWidth: 250
}
],
defaultColDef: {
flex: 1
},
rowSelection: {
mode: 'multiRow',
enableClickSelection: true,
}
},
getDetailRowData: (params) => {
params.successCallback(this.getChildDevices(params.data));
},
};
onGridReady(event: GridReadyEvent) {
this.gridApi = event.api;
}
getDataPath = (row: Row): string[] => {
return [...row.path, row.name];
}
getRowHeight = (params: RowHeightParams<Row>): number | undefined => {
if (!params.node.detail || !params.data) {
return undefined;
}
const childDevices = this.getChildDevices(params.data as GroupRow | RoomRow);
const rowsHeight = childDevices.length * 28;
/**
* FORMULA:
* rows height (28/each) + header row height (32) + detail panel padding (15 * 2) + borders where
* borders = detail panel top/bottom borders (2) + detail grid top/bottom borders (2)
* + header row bottom border (1) + internal row borders (row count - 1)
*/
return rowsHeight + 32 + 30 + 5 + childDevices.length - 1; // rows + header row + padding + borders
}
isRowMaster = (row: Row): boolean => {
return this.getChildDevices(row as GroupRow | RoomRow).length > 0;
}
export() {
this.gridApi.exportDataAsCsv();
}
search(event: Event) {
const searchTerm = (event.target as HTMLInputElement).value;
this.gridApi.setGridOption('quickFilterText', searchTerm);
}
private getChildDevices(row: GroupRow | RoomRow): DeviceRow[] {
return rows.filter((r) => r.type === 'device' && r.path.join('/') === [...row.path, row.name].join('/')) as DeviceRow[];
}
}
if (typeof window !== 'undefined') {
var waitSeconds = 100;
var head = document.getElementsByTagName('head')[0];
var isWebkit = !!window.navigator.userAgent.match(/AppleWebKit\/([^ ;]*)/);
var webkitLoadCheck = function (link, callback) {
setTimeout(function () {
for (var i = 0; i < document.styleSheets.length; i++) {
var sheet = document.styleSheets[i];
if (sheet.href == link.href) {
return callback();
}
}
webkitLoadCheck(link, callback);
}, 10);
};
var cssIsReloadable = function cssIsReloadable(links) {
// Css loaded on the page initially should be skipped by the first
// systemjs load, and marked for reload
var reloadable = true;
forEach(links, function (link) {
if (!link.hasAttribute('data-systemjs-css')) {
reloadable = false;
link.setAttribute('data-systemjs-css', '');
}
});
return reloadable;
};
var findExistingCSS = function findExistingCSS(url) {
// Search for existing link to reload
var links = head.getElementsByTagName('link');
return filter(links, function (link) {
return link.href === url;
});
};
var noop = function () {};
var loadCSS = function (url, existingLinks) {
const stylesUrl = url.includes('styles.css') || url.includes('style.css');
return new Promise((outerResolve, outerReject) => {
setTimeout(
() => {
new Promise(function (resolve, reject) {
var timeout = setTimeout(function () {
reject('Unable to load CSS');
}, waitSeconds * 1000);
var _callback = function (error) {
clearTimeout(timeout);
link.onload = link.onerror = noop;
setTimeout(function () {
if (error) {
reject(error);
outerReject(error);
} else {
resolve('');
outerResolve('');
}
}, 7);
};
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = url;
link.setAttribute('data-systemjs-css', '');
if (!isWebkit) {
link.onload = function () {
_callback();
};
} else {
webkitLoadCheck(link, _callback);
}
link.onerror = function (event) {
_callback(event.error || new Error('Error loading CSS file.'));
};
if (existingLinks.length) {
head.insertBefore(link, existingLinks[0]);
} else {
head.appendChild(link);
}
})
// Remove the old link regardless of loading outcome
.then(
function (result) {
forEach(existingLinks, function (link) {
link.parentElement.removeChild(link);
});
return result;
},
function (err) {
forEach(existingLinks, function (link) {
link.parentElement.removeChild(link);
});
throw err;
}
);
},
stylesUrl ? 5 : 0
);
});
};
exports.fetch = function (load) {
// dont reload styles loaded in the head
var links = findExistingCSS(load.address);
if (!cssIsReloadable(links)) {
return '';
}
return loadCSS(load.address, links);
};
} else {
var builderPromise;
function getBuilder(loader) {
if (builderPromise) {
return builderPromise;
}
return (builderPromise = System['import']('./css-plugin-base.js', module.id).then(function (CSSPluginBase) {
return new CSSPluginBase(function compile(source, address) {
return {
css: source,
map: null,
moduleSource: null,
moduleFormat: null,
};
});
}));
}
exports.cssPlugin = true;
exports.fetch = function (load, fetch) {
if (!this.builder) {
return '';
}
return fetch(load);
};
exports.translate = function (load, opts) {
if (!this.builder) {
return '';
}
var loader = this;
return getBuilder(loader).then(function (builder) {
return builder.translate.call(loader, load, opts);
});
};
exports.instantiate = function (load, opts) {
if (!this.builder) {
return;
}
var loader = this;
return getBuilder(loader).then(function (builder) {
return builder.instantiate.call(loader, load, opts);
});
};
exports.bundle = function (loads, compileOpts, outputOpts) {
var loader = this;
return getBuilder(loader).then(function (builder) {
return builder.bundle.call(loader, loads, compileOpts, outputOpts);
});
};
exports.listAssets = function (loads, opts) {
var loader = this;
return getBuilder(loader).then(function (builder) {
return builder.listAssets.call(loader, loads, opts);
});
};
}
// Because IE8?
function filter(arrayLike, func) {
var arr = [];
forEach(arrayLike, function (item) {
if (func(item)) {
arr.push(item);
}
});
return arr;
}
// Because IE8?
function forEach(arrayLike, func) {
for (var i = 0; i < arrayLike.length; i++) {
func(arrayLike[i]);
}
}
(function (global) {
const urlParams = new URLSearchParams(window.location.search);
const config = {
version: urlParams.get('version') ?? '20.0.0',
prod: urlParams.get('prod') === 'false' ? false : urlParams.get('prod') ?? true,
};
process = { env: { NODE_ENV: 'development' } };
var ANGULAR_VERSION = config.version;
window.ENABLE_PROD_MODE = config.prod;
System.config({
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
typescriptOptions: {
target: 'es2020',
emitDecoratorMetadata: true,
experimentalDecorators: true,
},
meta: {
typescript: {
exports: 'ts',
},
'*.css': { loader: 'css' },
},
paths: {
// paths serve as alias
'npm:': 'https://cdn.jsdelivr.net/npm/',
...systemJsPaths,
},
// map tells the System loader where to look for things
map: {
'@angular/compiler': 'npm:@angular/compiler@' + ANGULAR_VERSION + '/fesm2022/compiler.mjs',
'@angular/platform-browser-dynamic':
'npm:@angular/platform-browser-dynamic@' + ANGULAR_VERSION + '/fesm2022/platform-browser-dynamic.mjs',
'@angular/core': 'npm:@angular/core@' + ANGULAR_VERSION + '/fesm2022/core.mjs',
'@angular/core/primitives/di': 'npm:@angular/core@' + ANGULAR_VERSION + '/fesm2022/primitives/di.mjs',
'@angular/core/primitives/signals':
'npm:@angular/core@' + ANGULAR_VERSION + '/fesm2022/primitives/signals.mjs',
'@angular/core/primitives/event-dispatch':
'npm:@angular/core@' + ANGULAR_VERSION + '/fesm2022/primitives/event-dispatch.mjs',
'@angular/common': 'npm:@angular/common@' + ANGULAR_VERSION + '/fesm2022/common.mjs',
'@angular/common/http': 'npm:@angular/common@' + ANGULAR_VERSION + '/fesm2022/http.mjs',
'@angular/platform-browser':
'npm:@angular/platform-browser@' + ANGULAR_VERSION + '/fesm2022/platform-browser.mjs',
'@angular/platform-browser/animations':
'npm:@angular/platform-browser@' + ANGULAR_VERSION + '/fesm2022/animations.mjs',
'@angular/forms': 'npm:@angular/forms@' + ANGULAR_VERSION + '/fesm2022/forms.mjs',
'@angular/animations': 'npm:@angular/animations@' + ANGULAR_VERSION + '/fesm2022/animations.mjs',
'@angular/animations/browser': 'npm:@angular/animations@' + ANGULAR_VERSION + '/fesm2022/browser.mjs',
rxjs: 'npm:rxjs@7.8.1/dist/bundles/rxjs.umd.min.js',
'rxjs/operators': 'npm:rxjs@7.8.1/dist/bundles/rxjs.umd.min.js',
css: (boilerplatePath.length === 0 ? `./` : `${boilerplatePath}/`) + 'css.js',
ts: 'npm:plugin-typescript@8.0.0/lib/plugin.js',
tslib: 'npm:tslib@2.3.1/tslib.js',
typescript: 'npm:typescript@4.4/lib/typescript.min.js',
// our app is within the app folder, appLocation comes from index.html
app: appLocation,
...systemJsMap,
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
css: {}, // Stop css.js from defaulting to apps .ts extension
app: {
main: './main.ts',
defaultExtension: 'ts',
},
'ag-grid-community': {
main: './dist/package/main.cjs.js',
defaultExtension: 'js',
format: 'cjs',
},
'ag-grid-enterprise': {
main: './dist/package/main.cjs.js',
defaultExtension: 'js',
format: 'cjs',
},
'ag-grid-angular': {
main: './fesm2022/ag-grid-angular.mjs',
defaultExtension: 'mjs',
},
'ag-charts-core': {
defaultExtension: 'js',
format: 'cjs',
},
'ag-charts-community': {
defaultExtension: 'js',
format: 'cjs',
},
'ag-charts-enterprise': {
defaultExtension: 'js',
format: 'cjs',
},
'@ag-grid-community/locale': {
format: 'cjs',
},
},
});
window.addEventListener('error', (e) => {
console.error('ERROR', e.message, e.filename);
});
System.import(startFile).catch(function (err) {
document.body.innerHTML =
'<div class="example-error" style="background:#fdb022;padding:1rem;">' + 'Example Error: ' + err + '</div>';
console.error(err);
});
})(this);
{
"name": "ag-grid-example",
"dependencies": {
"@angular/core": "20.0.0",
"@angular/common": "20.0.0",
"@angular/forms": "20.0.0",
"@angular/platform-browser": "20.0.0",
"ag-grid-angular": "35.0.0",
"ag-grid-community": "35.0.0",
"ag-grid-enterprise": "35.0.0"
},
"devDependencies": {
"@types/node": "^22"
}
}
<!doctype html>
<html lang="en">
<head>
<title>
Angular Example - Master Detail Other - Tree Data Master Detail
</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<style media="only screen">
:root,
body,
my-app {
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
html {
position: absolute;
top: 0;
left: 0;
padding: 0;
overflow: auto;
font-family: -apple-system, "system-ui", "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
}
body {
padding: 16px;
overflow: auto;
background-color: transparent;
}
</style>
</head>
<body>
<my-app></my-app>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="https://cdn.jsdelivr.net/npm/core-js-bundle@3.6.5/minified.js"></script>
<script src="https://cdn.jsdelivr.net/npm/zone.js@0.14.3/bundles/zone.umd.min.js"></script>
<script>
var appLocation = "";
var boilerplatePath = "";
var startFile = "main.ts";
var systemJsMap = {
"@ag-grid-community/styles":
"https://cdn.jsdelivr.net/npm/@ag-grid-community/styles@35.0.0",
"ag-grid-angular":
"https://cdn.jsdelivr.net/npm/ag-grid-angular@35.0.0/",
"ag-grid-community":
"https://cdn.jsdelivr.net/npm/ag-grid-community@35.0.0",
"ag-grid-enterprise":
"https://cdn.jsdelivr.net/npm/ag-grid-enterprise@35.0.0/",
};
var systemJsPaths = {
"@ag-grid-community/locale":
"https://cdn.jsdelivr.net/npm/@ag-grid-community/locale@35.0.0/dist/package/main.cjs.js",
"ag-charts-community":
"https://cdn.jsdelivr.net/npm/ag-charts-community@13.0.0/dist/package/main.cjs.js",
"ag-charts-core":
"https://cdn.jsdelivr.net/npm/ag-charts-core@13.0.0/dist/package/main.cjs.js",
"ag-charts-enterprise":
"https://cdn.jsdelivr.net/npm/ag-charts-enterprise@13.0.0/dist/package/main.cjs.js",
"ag-charts-types":
"https://cdn.jsdelivr.net/npm/ag-charts-types@13.0.0/",
};
</script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.6/dist/system.js"></script>
<script src="systemjs.config.js"></script>
</body>
</html>