{
"name": "ag-grid-packages",
"description": "NOTE: This package.json file is solely used by Plunker to look up type definitions.",
"dependencies": {
"@angular/core": "^14",
"@angular/platform-browser": "^14",
"ag-grid-angular": "^30.0.2",
"ag-grid-community": "^30.0.2",
"ag-grid-enterprise": "^30.0.2"
}
}
import { Component } from '@angular/core';
import { ColDef, GridReadyEvent } from 'ag-grid-community';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import { TotalValueRenderer } from './total-value-renderer.component';
@Component({
selector: 'my-app',
template: `<ag-grid-angular
style="width: 100%; height: 100%;"
class="ag-theme-alpine"
[columnDefs]="columnDefs"
[rowDragManaged]="true"
[rowBuffer]="0"
[defaultColDef]="defaultColDef"
[rowData]="rowData"
(gridReady)="onGridReady($event)"
></ag-grid-angular> `,
})
export class AppComponent {
public columnDefs: ColDef[] = [
{field: 'index', rowDrag: true, width: 5, suppressSizeToFit: true },
{ field: 'details', minWidth: 1000, cellRenderer: TotalValueRenderer, autoHeight:true},
];
public defaultColDef: ColDef = {
editable: true,
sortable: true,
flex: 1,
minWidth: 100,
filter: true,
resizable: true,
};
public rowData = [];
getSubTableDetails(index: number) {
let arr = [];
for(let i = index; i > -1; i--){
arr.push({
age: index - i,
year: 2000 - i
});
}
return arr;
}
constructor() {
for (let i = 0; i < 100; i++) {
this.rowData.push({
index: i,
header: 'table header #' + i,
details: this.getSubTableDetails(i)
});
}
}
onGridReady(event){
}
}
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AgGridModule } from 'ag-grid-angular';
import { AppComponent } from './app.component';
import { TotalValueRenderer } from './total-value-renderer.component';
@NgModule({
imports: [BrowserModule, HttpClientModule, AgGridModule],
declarations: [AppComponent, TotalValueRenderer],
bootstrap: [AppComponent],
})
export class AppModule {}
import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { ICellRendererParams } from 'ag-grid-community';
@Component({
selector: 'total-value-component',
template: `
<span>{{tableHeader}}</span>
<ag-grid-angular
[ngStyle]="{ 'width': '800px', 'height': getTableHeight() + 'px' }"
[columnDefs]="columnDefs"
[rowDragManaged]="true"
[rowHeight]=30
[rowData]="rowData"
></ag-grid-angular>
`,
})
export class TotalValueRenderer implements ICellRendererAngularComp {
public cellValue!: string;
columnDefs = [
{ field: 'age', rowDrag: true },
{ field: 'year' },
];
tableHeader = '';
rowData = [];
// gets called once before the renderer is used
agInit(params: ICellRendererParams): void {
// this.cellValue = this.getValueToDisplay(params);
this.tableHeader = params.data.header;
this.rowData = params.data.details;
}
getTableHeight(){
return Math.min(400, this.rowData.length * 30 + 40);
}
// gets called whenever the user gets the cell to refresh
refresh(params: ICellRendererParams) {
// set value into cell again
this.cellValue = this.getValueToDisplay(params);
return true;
}
buttonClicked() {
alert(`${this.cellValue} medals won!`);
}
getValueToDisplay(params: ICellRendererParams) {
return params.valueFormatted ? params.valueFormatted : params.value;
}
}
// Angular entry point file
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from 'app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
/**
* WEB ANGULAR VERSION
* (based on systemjs.config.js from the angular tutorial - https://angular.io/tutorial)
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;
module.exports.translate = function(load) {
if (load.source.indexOf('moduleId') != -1) return load;
var url = document.createElement('a');
url.href = load.address;
var basePathParts = url.pathname.split('/');
basePathParts.pop();
var basePath = basePathParts.join('/');
var baseHref = document.createElement('a');
baseHref.href = this.baseURL;
baseHref = baseHref.pathname;
if (!baseHref.startsWith('/base/')) { // it is not karma
basePath = basePath.replace(baseHref, '');
}
load.source = load.source
.replace(templateUrlRegex, function(match, quote, url) {
var resolvedUrl = url;
if (url.startsWith('.')) {
resolvedUrl = basePath + url.substr(1);
}
return 'templateUrl: "' + resolvedUrl + '"';
})
.replace(stylesRegex, function(match, relativeUrls) {
var urls = [];
while ((match = stringRegex.exec(relativeUrls)) !== null) {
if (match[2].startsWith('.')) {
urls.push('"' + basePath + match[2].substr(1) + '"');
} else {
urls.push('"' + match[2] + '"');
}
}
return "styleUrls: [" + urls.join(', ') + "]";
});
return load;
};
(function (global) {
var ANGULAR_VERSION = "14.2.6";
var ANGULAR_CDK_VERSION = "14.2.6";
var ANGULAR_MATERIAL_VERSION = "14.2.6";
System.config({
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: "ts",
typescriptOptions: {
// Copy of compiler options in standard tsconfig.json
target: "es5",
module: "system", //gets rid of console warning
moduleResolution: "node",
sourceMap: true,
emitDecoratorMetadata: true,
experimentalDecorators: true,
lib: ["es2015", "dom"],
noImplicitAny: true,
suppressImplicitAnyIndexErrors: true
},
meta: {
typescript: {
exports: "ts"
},
'*.css': { loader: 'css' }
},
paths:
{
// paths serve as alias
"npm:": "https://cdn.jsdelivr.net/npm/",
...systemJsPaths
},
// RxJS makes a lot of requests to jsdelivr. This guy addressed it:
// https://github.com/OasisDigital/rxjs-system-bundle.
bundles: {
"npm:rxjs-system-bundle@6.3.3/Rx.system.min.js": [
"rxjs",
"rxjs/*",
"rxjs/operator/*",
"rxjs/operators/*",
"rxjs/observable/*",
"rxjs/scheduler/*",
"rxjs/symbol/*",
"rxjs/add/operator/*",
"rxjs/add/observable/*",
"rxjs/util/*"
]
},
// map tells the System loader where to look for things
map: {
// Angular bundles in System.register format via esm-bundle
// Cell renderers only work with the esm-bundle version
// TemplateUrls only works with platform-browser-dynamic from esm-bundle
'@angular/compiler': 'npm:@esm-bundle/angular__compiler@' + ANGULAR_VERSION + '/system/es2015/ivy/angular-compiler.min.js',
'@angular/platform-browser-dynamic': 'npm:@esm-bundle/angular__platform-browser-dynamic@' + ANGULAR_VERSION + '/system/es2015/ivy/angular-platform-browser-dynamic.min.js',
'@angular/core': 'npm:@angular/core@' + ANGULAR_VERSION + '/fesm2015/core.mjs',
'@angular/common': 'npm:@angular/common@' + ANGULAR_VERSION + '/fesm2015/common.mjs',
'@angular/common/http': 'npm:@angular/common@' + ANGULAR_VERSION + '/fesm2015/http.mjs',
'@angular/platform-browser': 'npm:@angular/platform-browser@' + ANGULAR_VERSION + '/fesm2015/platform-browser.mjs',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser@' + ANGULAR_VERSION + '/fesm2015/animations.mjs',
'@angular/forms': 'npm:@angular/forms@' + ANGULAR_VERSION + '/fesm2015/forms.mjs',
'@angular/router': 'npm:@angular/router@' + ANGULAR_VERSION + '/fesm2015/router.mjs',
'@angular/animations': 'npm:@angular/animations@' + ANGULAR_VERSION + '/fesm2015/animations.mjs',
'@angular/animations/browser': 'npm:@angular/animations@' + ANGULAR_VERSION + '/fesm2015/browser.mjs',
// material design
"@angular/material/core": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/fesm2015/core.mjs",
"@angular/material/card": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/fesm2015/card.mjs",
"@angular/material/radio": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/fesm2015/radio.mjs",
"@angular/material/card": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/fesm2015/card.mjs",
"@angular/material/slider": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/fesm2015/slider.mjs",
"@angular/material/select": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/fesm2015/select.mjs",
"@angular/material/progress-spinner": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/fesm2015/progress-spinner.mjs",
"@angular/material/input": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/fesm2015/input.mjs",
"@angular/material/icon": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/fesm2015/icon.mjs",
"@angular/material/form-field": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/fesm2015/form-field.mjs",
"@angular/material/checkbox": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/fesm2015/checkbox.mjs",
"@angular/material/button-toggle": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/fesm2015/button-toggle.mjs",
"@angular/cdk": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/fesm2015/cdk.mjs",
"@angular/cdk/platform": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/fesm2015/platform.mjs",
"@angular/cdk/layout": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/fesm2015/layout.mjs",
"@angular/cdk/bidi": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/fesm2015/bidi.mjs",
"@angular/cdk/coercion": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/fesm2015/coercion.mjs",
"@angular/cdk/keycodes": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/fesm2015/keycodes.mjs",
"@angular/cdk/a11y": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/fesm2015/a11y.mjs",
"@angular/cdk/overlay": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/fesm2015/overlay.mjs",
"@angular/cdk/portal": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/fesm2015/portal.mjs",
"@angular/cdk/observers": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/fesm2015/observers.mjs",
"@angular/cdk/collections": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/fesm2015/collections.mjs",
"@angular/cdk/scrolling": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/fesm2015/scrolling.mjs",
"@angular/cdk/text-field": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/fesm2015/text-field.mjs",
css: 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.3.5/lib/typescript.min.js",
// our app is within the app folder, appLocation comes from index.html
app: appLocation + "app",
...systemJsMap
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: "./main.ts",
defaultExtension: "ts",
meta: {
"./*.ts": {
loader: boilerplatePath + "systemjs-angular-loader.js"
}
}
},
'ag-grid-angular': {
main: './fesm2015/ag-grid-angular.js',
defaultExtension: 'js'
},
'ag-grid-community': {
main: './dist/ag-grid-community.cjs.min.js',
defaultExtension: 'js'
},
'ag-grid-enterprise': {
main: './dist/ag-grid-enterprise.cjs.min.js',
defaultExtension: 'js'
},
"@ag-grid-community/angular": {
main: "./fesm2015/ag-grid-community-angular.js",
defaultExtension: "js"
},
rxjs: {
defaultExtension: false
}
}
});
})(this);
window.addEventListener('error', e => {
console.error('ERROR', e.message, e.filename)
});
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])
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Angular example</title>
<meta charSet="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style media="only screen">
html, body, #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;
}
body {
padding: 1rem;
overflow: auto;
}
</style>
</head>
<body>
<div id="app">
<my-app>
</my-app>
</div>
<svg id="loading-spinner" style="position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(2)" class="logomark" width="64" height="48" viewBox="0 0 64 48">
<style>
.logomark .aqua {
fill: #55b4c8;
}
.logomark .orange {
fill: #ff8c00;
}
.logomark .red {
fill: #f00;
}
.logomark .grey {
fill: #b4bebe;
}
rect {
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-play-state: paused;
}
rect[class*='right'] {
animation-name: logo-mark-bounce-right;
animation-duration: 1.25s;
animation-play-state: running;
}
rect[class*='left'] {
animation-name: logo-mark-bounce-left;
animation-duration: 1.25s;
animation-play-state: running;
}
.right-2 {
animation-delay: calc(1.25s / 6);
}
.right-3 {
animation-delay: calc(1.25s / 6 * 2);
}
.left-3 {
animation-delay: calc(1.25s / 6 * 3);
}
.left-2 {
animation-delay: calc(1.25s / 6 * 4);
}
.left-1 {
animation-delay: calc(1.25s / 6 * 5);
}
@keyframes logo-mark-bounce-right {
0% {
transform: translateX(0%);
}
16.6666% {
transform: translateX(3px);
}
33.3333% {
transform: translateX(0);
}
}
@keyframes logo-mark-bounce-left {
0% {
transform: translateX(0%);
}
16.6666% {
transform: translateX(-3px);
}
33.3333% {
transform: translateX(0);
}
}
</style>
<rect class="aqua right-1" x="51" y="10" width="7" height="8">
</rect>
<path class="aqua right-1" d="M58,10l-17,0l-8,8l25,0l0,-8Z">
</path>
<rect class="orange right-2" x="36" y="22" width="7" height="8">
</rect>
<path class="orange right-2" d="M43,30l0,-7.995l-14,-0l-8.008,7.995l22.008,0Z">
</path>
<rect class="red right-3" x="24" y="34" width="7" height="8">
</rect>
<path class="red right-3" d="M13,38.01l4,-4.01l14,0l0,8l-18,0l0,-3.99Z">
</path>
<rect class="grey left-1" x="11" y="6" width="7" height="8">
</rect>
<path class="grey left-1" d="M41,10l-4,4l-26,0l0,-8l30,0l0,4Z">
</path>
<rect class="grey left-2" x="16" y="18" width="7" height="8">
</rect>
<path class="grey left-2" d="M16,26l9,0l8,-8l-17,-0l0,8Z">
</path>
<rect class="grey left-3" x="6" y="30" width="7" height="8">
</rect>
<path class="grey left-3" d="M6,37.988l7,0.012l7.992,-8l-14.992,-0.047l-0,8.035Z">
</path>
</svg>
<script id="loading-script">const cleanupLoading = () => {
if (document.querySelector('.ag-root-wrapper, .ag-chart-wrapper')) {
document.querySelector('#loading-spinner').remove();
document.querySelector('#loading-script').remove();
} else {
requestAnimationFrame(() => cleanupLoading());
}
};
cleanupLoading();</script>
<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.11.2/dist/zone.min.js">
</script>
<script>
var appLocation = './';
var boilerplatePath = '';
var systemJsMap = {
"@ag-grid-community/angular": "https://cdn.jsdelivr.net/npm/@ag-grid-community/angular@30.0.2/",
"@ag-grid-community/styles": "https://cdn.jsdelivr.net/npm/@ag-grid-community/styles@30.0.2",
"ag-grid-angular": "https://cdn.jsdelivr.net/npm/ag-grid-angular@30.0.2/",
"ag-grid-community": "https://cdn.jsdelivr.net/npm/ag-grid-community@30.0.2",
"ag-grid-enterprise": "https://cdn.jsdelivr.net/npm/ag-grid-enterprise@30.0.2/"
};
var systemJsPaths = {
"@ag-grid-community/client-side-row-model": "https://cdn.jsdelivr.net/npm/@ag-grid-community/client-side-row-model@30.0.2/dist/client-side-row-model.cjs.min.js",
"@ag-grid-community/core": "https://cdn.jsdelivr.net/npm/@ag-grid-community/core@30.0.2/dist/core.cjs.min.js",
"@ag-grid-community/csv-export": "https://cdn.jsdelivr.net/npm/@ag-grid-community/csv-export@30.0.2/dist/csv-export.cjs.min.js",
"@ag-grid-community/infinite-row-model": "https://cdn.jsdelivr.net/npm/@ag-grid-community/infinite-row-model@30.0.2/dist/infinite-row-model.cjs.min.js"
};
</script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.6/dist/system.js">
</script>
<script src="systemjs.config.js">
</script>
<script>System.import('main.ts').catch(function(err) { console.error(err); });</script>
</body>
</html>