import { Component, ViewChild, ElementRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import { Database } from './database';
@Component({
selector: 'my-app',
template: `
<button (click)="this.redrawGrid()">Redraw</button>
<div #root style="width: 100%; height: 100%;"><ag-grid-angular
style="width: 100%; height: 100%;"
class="ag-theme-alpine"
[columnDefs]="columnDefs"
[rowData]="rowData"
[rowHeight]="this.rowHeight"
[suppressCellSelection]="true"
[animateRows]="false"
[suppressAggFuncInHeader]="true"
[suppressLoadingOverlay]="true"
[suppressNoRowsOverlay]="true"
[suppressDragLeaveHidesColumns]="true"
[suppressRowTransform]="true"
[components]="components"
(gridReady)="onGridReady($event)"
></ag-grid-angular></div>`,
})
export class AppComponent {
private gridApi;
private gridColumnApi;
private columnDefs;
private defaultColDef;
private rowData: [];
private components = { yearCellRenderer: createYearCellRenderer() }
constructor(private http: HttpClient) {
this.rowData = Database.rowData;
this.columnDefs = [
{
headerName: '',
field: 'firstCol_001',
colId: 'year',
suppressSizeToFit: true,
width: 70,
pinned: 'left',
rowSpan: (params) => {
if (params.data.firstCol_001) {
return 5;
}
return 1;
},
cellRenderer: 'yearCellRenderer',
cellStyle: (params) => {
return {
backgroundColor: 'red',
};
},
},
{
headerName: '',
field: 'firstCol',
pinned: 'left',
width: 150,
suppressSizeToFit: true,
},
{
headerName: 'Apr',
field: 'MONTH_APR',
width: 100,
},
{
headerName: 'Aug',
field: 'MONTH_AUG',
width: 100,
},
];
}
@ViewChild("root", { static: false }) public root: ElementRef;
private readonly MIN_ROW_HEIGHT = 40;
private rowHeight = this.MIN_ROW_HEIGHT;
public getRowHeight() {
return this.rowHeight;
}
private calculateRowHeight() {
if (this.root == null) return ;
const agBodyViewport = this.root.nativeElement.querySelectorAll(".ag-body-viewport.ag-layout-normal.ag-row-no-animation");
if (agBodyViewport == null) return ;
const gridViewportHeight = agBodyViewport[0].offsetHeight;
let rowHeight = this.MIN_ROW_HEIGHT;
if (this.rowData != null) {
rowHeight = Math.floor( gridViewportHeight / this.rowData.length );
if (rowHeight < this.MIN_ROW_HEIGHT) {
rowHeight = this.MIN_ROW_HEIGHT;
}
}
this.rowHeight = rowHeight;
}
public redrawGrid() {
this.calculateRowHeight();
this.gridApi.resetRowHeights();
const redrawRowsParams: RefreshCellsParams = {
force: true
};
this.gridApi.redrawRows(redrawRowsParams);
this.autoSize();
this.sizeToFit();
}
private autoSize() {
setTimeout(() => this.gridColumnApi.autoSizeColumns(["firstCol", "firstCol_001"]), 0);
}
private sizeToFit() {
setTimeout(() => this.gridApi.sizeColumnsToFit(), 0);
}
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
this.redrawGrid();
}
public onFirstDataRendered(event: any) {
this.autoSize();
this.sizeToFit();
setTimeout(() => this.redrawGrid(), 1000);
}
}
function createYearCellRenderer() {
function ShowCellRenderer() {}
ShowCellRenderer.prototype.init = function (params) {
var cellBlank = !params.value;
if (cellBlank) {
return null;
}
this.ui = document.createElement('div');
this.ui.innerHTML =
'<div class="show-year">' +
params.value +
'' +
'</div>'
};
ShowCellRenderer.prototype.getGui = function () {
return this.ui;
};
return ShowCellRenderer;
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
// ag-grid
import { AgGridModule } from 'ag-grid-angular';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
AgGridModule.withComponents([]),
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
export class Database {
public static rowData = [
{
firstCol: 'CS AllHedge',
firstCol_001: '2021',
MONTH_APR: 0.0201038113,
MONTH_AUG: 0.0050592962,
MONTH_DEC: 0.0165882254,
MONTH_FEB: -0.0016497847,
MONTH_JAN: 0.0068623086,
MONTH_JUL: 0.0166416761,
MONTH_JUN: 0.0215026003,
MONTH_MAR: -0.0314205369,
MONTH_MAY: -0.000416329,
MONTH_NOV: 0.0138002742,
MONTH_OCT: -0.0159844052,
MONTH_SEP: -0.0057094905,
},
{
firstCol: 'Focus Opportunity',
MONTH_APR: -0.3230333906,
MONTH_AUG: 0.0049356765,
MONTH_DEC: 0.0148294613,
MONTH_FEB: 0.0069284976,
MONTH_JAN: -0.0043073889,
MONTH_JUL: 0.0043102693,
MONTH_JUN: 0.0103721707,
MONTH_MAR: -0.020985956,
MONTH_MAY: 0.0031900855,
MONTH_NOV: 0.0081041732,
MONTH_OCT: -0.0114422761,
MONTH_SEP: -0.0105623765,
},
{
firstCol: 'Model Portfolio 2',
MONTH_APR: 0.0432889485,
MONTH_AUG: 0.0182202824,
MONTH_DEC: 0.0326402378,
MONTH_FEB: 0.0191733732,
MONTH_JAN: 0.0177388184,
MONTH_JUL: 0.0160738917,
MONTH_JUN: 0.0414230015,
MONTH_MAR: -0.047893254,
MONTH_MAY: 0.018531995,
MONTH_NOV: 0.0267615508,
MONTH_OCT: -0.006041788,
MONTH_SEP: -0.0048903238,
},
{
firstCol: 'MSCI World (USD)',
MONTH_APR: 0.0708328691,
MONTH_AUG: 0.0177641189,
MONTH_DEC: -0.0022889836,
MONTH_FEB: 0.0004615302,
MONTH_JAN: 0.0198006607,
MONTH_JUL: 0.0255471919,
MONTH_JUN: 0.0448281421,
MONTH_MAR: -0.0620959112,
MONTH_MAY: -0.00724423,
MONTH_NOV: 0.0541488939,
MONTH_OCT: -0.0270156121,
MONTH_SEP: -0.0042059398,
},
{
firstCol: 'S&P 500 w/Div',
MONTH_APR: 0.0843417236,
MONTH_AUG: 0.0295418485,
MONTH_DEC: -0.0072202278,
MONTH_FEB: 0.0033028129,
MONTH_JAN: 0.0232160356,
MONTH_JUL: 0.0353786569,
MONTH_JUN: 0.0451816775,
MONTH_MAR: -0.0520404549,
MONTH_MAY: -0.00796009,
MONTH_NOV: 0.0553803789,
MONTH_OCT: -0.0244280506,
MONTH_SEP: -0.0045314692,
},
];
}
.cell-span {
background-color: #00e5ff;
}
.ag-cell[col-id="year"] > div {
height: 100%;
display: flex;
align-items: center;
font-weight: bold;
}
// 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;
};
/**
* 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.
*/
(function(global) {
var ANGULAR_VERSION = "10.0.0";
var ANGULAR_CDK_VERSION = "10.0.0";
var ANGULAR_MATERIAL_VERSION = "10.0.0";
function assign() {
var result = {};
for (var i = 0, len = arguments.length; i < len; i++) {
var arg = arguments[i];
for (var prop in arg) {
result[prop] = arg[prop];
}
}
return result;
}
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:
assign(
{
// paths serve as alias
"npm:": "https://unpkg.com/",
}, systemJsPaths)
,
// RxJS makes a lot of requests to unpkg. 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: assign(
{
// css plugin
'css': 'npm:systemjs-plugin-css/css.js',
// angular bundles
"@angular/animations": "npm:@angular/animations@" + ANGULAR_VERSION + "/bundles/animations.umd.js",
"@angular/animations/browser": "npm:@angular/animations@" + ANGULAR_VERSION + "/bundles/animations-browser.umd.js",
"@angular/core": "npm:@angular/core@" + ANGULAR_VERSION + "/bundles/core.umd.js",
"@angular/common": "npm:@angular/common@" + ANGULAR_VERSION + "/bundles/common.umd.js",
"@angular/common/http": "npm:@angular/common@" + ANGULAR_VERSION + "/bundles/common-http.umd.js",
"@angular/compiler": "npm:@angular/compiler@" + ANGULAR_VERSION + "/bundles/compiler.umd.js",
"@angular/platform-browser": "npm:@angular/platform-browser@" + ANGULAR_VERSION + "/bundles/platform-browser.umd.js",
"@angular/platform-browser/animations": "npm:@angular/platform-browser@" + ANGULAR_VERSION + "/bundles/platform-browser-animations.umd.js",
"@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic@" + ANGULAR_VERSION + "/bundles/platform-browser-dynamic.umd.js",
"@angular/http": "npm:@angular/http@7.2.16/bundles/http.umd.js",
"@angular/router": "npm:@angular/router@" + ANGULAR_VERSION + "/bundles/router.umd.js",
"@angular/router/upgrade": "npm:@angular/router@" + ANGULAR_VERSION + "/bundles/router-upgrade.umd.js",
"@angular/forms": "npm:@angular/forms@" + ANGULAR_VERSION + "/bundles/forms.umd.js",
"@angular/upgrade": "npm:@angular/upgrade@" + ANGULAR_VERSION + "/bundles/upgrade.umd.js",
"@angular/upgrade/static": "npm:@angular/upgrade@" + ANGULAR_VERSION + "/bundles/upgrade-static.umd.js",
"angular-in-memory-web-api": "npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js",
// material design
"@angular/material/core": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/bundles/material-core.umd.js",
"@angular/material/radio": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/bundles/material-radio.umd.min.js",
"@angular/material/card": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/bundles/material-card.umd.min.js",
"@angular/material/slider": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/bundles/material-slider.umd.min.js",
"@angular/material/select": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/bundles/material-select.umd.min.js",
"@angular/material/progress-spinner": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/bundles/material-progress-spinner.umd.min.js",
"@angular/material/input": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/bundles/material-input.umd.min.js",
"@angular/material/icon": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/bundles/material-icon.umd.min.js",
"@angular/material/form-field": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/bundles/material-form-field.umd.min.js",
"@angular/material/checkbox": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/bundles/material-checkbox.umd.min.js",
"@angular/material/button-toggle": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/bundles/material-button-toggle.umd.min.js",
"@angular/cdk": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk.umd.js",
"@angular/cdk/platform": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-platform.umd.js",
"@angular/cdk/bidi": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-bidi.umd.js",
"@angular/cdk/coercion": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-coercion.umd.js",
"@angular/cdk/keycodes": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-keycodes.umd.js",
"@angular/cdk/a11y": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-a11y.umd.js",
"@angular/cdk/overlay": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-overlay.umd.js",
"@angular/cdk/portal": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-portal.umd.js",
"@angular/cdk/observers": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-observers.umd.js",
"@angular/cdk/collections": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-collections.umd.js",
"@angular/cdk/scrolling": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-scrolling.umd.js",
"@angular/cdk/text-field": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-text-field.umd.js",
// "@angular/cdk/accordion": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-accordion.umd.js",
// "@angular/cdk/layout": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-layout.umd.js",
// "@angular/cdk/table": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-table.umd.js",
// "@angular/cdk/tree": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-tree.umd.js",
// "@angular/cdk/stepper": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-stepper.umd.js",
// ngx bootstrap
"ngx-bootstrap": "npm:ngx-bootstrap@2.0.0-rc.0",
// ng2 typeahead
"ng2-typeahead": "npm:ng2-typeahead@1.2.0",
ts: "npm:plugin-typescript@5.2.7/lib/plugin.js",
tslib: "npm:tslib@1.7.1/tslib.js",
typescript: "npm:typescript@2.3.2/lib/typescript.js",
// for some of the examples
lodash: "npm:lodash@4.17.4/lodash.js",
// our app is within the app folder, appLocation comes from index.html
app: appLocation + "app",
rxjs: "npm:rxjs@6.3.3/bundles/rxjs.umd.min.js"
},
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: './bundles/ag-grid-angular.umd.js',
defaultExtension: 'js'
},
'ag-grid-community': {
main: './dist/ag-grid-community.cjs.js',
defaultExtension: 'js'
},
'ag-grid-enterprise': {
main: './dist/ag-grid-enterprise.cjs.js',
defaultExtension: 'js'
},
"@ag-grid-community/angular": {
main: "./bundles/ag-grid-community-angular.umd.js",
defaultExtension: "js"
},
rxjs: {
defaultExtension: false
}
}
});
})(this);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Angular 2 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>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div id="app">
<my-app>Loading Angular example…</my-app>
</div>
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="https://unpkg.com/core-js-bundle@3.6.5/minified.js">
</script>
<script src="https://unpkg.com/zone.js@0.11.2/dist/zone.min.js">
</script>
<script>
var appLocation = './';
var boilerplatePath = '';
var systemJsMap = {
"@ag-grid-community/all-modules/dist/styles/ag-grid.css": "https://unpkg.com/@ag-grid-community/all-modules@25.3.0/dist/styles/ag-grid.css",
"@ag-grid-community/core/dist/styles/ag-grid.css": "https://unpkg.com/@ag-grid-community/core@25.3.0/dist/styles/ag-grid.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-alpine-dark.css": "https://unpkg.com/@ag-grid-community/all-modules@25.3.0/dist/styles/ag-theme-alpine-dark.css",
"@ag-grid-community/core/dist/styles/ag-theme-alpine-dark.css": "https://unpkg.com/@ag-grid-community/core@25.3.0/dist/styles/ag-theme-alpine-dark.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-alpine.css": "https://unpkg.com/@ag-grid-community/all-modules@25.3.0/dist/styles/ag-theme-alpine.css",
"@ag-grid-community/core/dist/styles/ag-theme-alpine.css": "https://unpkg.com/@ag-grid-community/core@25.3.0/dist/styles/ag-theme-alpine.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-balham-dark.css": "https://unpkg.com/@ag-grid-community/all-modules@25.3.0/dist/styles/ag-theme-balham-dark.css",
"@ag-grid-community/core/dist/styles/ag-theme-balham-dark.css": "https://unpkg.com/@ag-grid-community/core@25.3.0/dist/styles/ag-theme-balham-dark.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css": "https://unpkg.com/@ag-grid-community/all-modules@25.3.0/dist/styles/ag-theme-balham.css",
"@ag-grid-community/core/dist/styles/ag-theme-balham.css": "https://unpkg.com/@ag-grid-community/core@25.3.0/dist/styles/ag-theme-balham.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-blue.css": "https://unpkg.com/@ag-grid-community/all-modules@25.3.0/dist/styles/ag-theme-blue.css",
"@ag-grid-community/core/dist/styles/ag-theme-blue.css": "https://unpkg.com/@ag-grid-community/core@25.3.0/dist/styles/ag-theme-blue.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-bootstrap.css": "https://unpkg.com/@ag-grid-community/all-modules@25.3.0/dist/styles/ag-theme-bootstrap.css",
"@ag-grid-community/core/dist/styles/ag-theme-bootstrap.css": "https://unpkg.com/@ag-grid-community/core@25.3.0/dist/styles/ag-theme-bootstrap.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-dark.css": "https://unpkg.com/@ag-grid-community/all-modules@25.3.0/dist/styles/ag-theme-dark.css",
"@ag-grid-community/core/dist/styles/ag-theme-dark.css": "https://unpkg.com/@ag-grid-community/core@25.3.0/dist/styles/ag-theme-dark.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-fresh.css": "https://unpkg.com/@ag-grid-community/all-modules@25.3.0/dist/styles/ag-theme-fresh.css",
"@ag-grid-community/core/dist/styles/ag-theme-fresh.css": "https://unpkg.com/@ag-grid-community/core@25.3.0/dist/styles/ag-theme-fresh.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-material.css": "https://unpkg.com/@ag-grid-community/all-modules@25.3.0/dist/styles/ag-theme-material.css",
"@ag-grid-community/core/dist/styles/ag-theme-material.css": "https://unpkg.com/@ag-grid-community/core@25.3.0/dist/styles/ag-theme-material.css",
"@ag-grid-community/react": "https://unpkg.com/@ag-grid-community/react@25.3.0/",
"@ag-grid-community/angular": "https://unpkg.com/@ag-grid-community/angular@25.3.0/",
"@ag-grid-community/vue": "https://unpkg.com/@ag-grid-community/vue@25.3.0/",
"@ag-grid-community/vue3": "https://unpkg.com/@ag-grid-community/vue3@25.3.0/",
"ag-grid-community": "https://unpkg.com/ag-grid-community@25.3.0/",
"ag-grid-enterprise": "https://unpkg.com/ag-grid-enterprise@25.3.0/",
"ag-grid-angular": "https://unpkg.com/ag-grid-angular@25.3.0/",
"ag-grid-react": "https://unpkg.com/ag-grid-react@25.3.0/",
"ag-grid-vue": "https://unpkg.com/ag-grid-vue@25.3.0/",
"ag-grid-vue3": "https://unpkg.com/ag-grid-vue3@25.3.0/"
};
var systemJsPaths = {
"@ag-grid-community/all-modules": "https://unpkg.com/@ag-grid-community/all-modules@25.3.0/dist/ag-grid-community.cjs.js",
"@ag-grid-community/client-side-row-model": "https://unpkg.com/@ag-grid-community/all-modules@25.3.0/dist/ag-grid-community.cjs.js",
"@ag-grid-community/core": "https://unpkg.com/@ag-grid-community/all-modules@25.3.0/dist/ag-grid-community.cjs.js",
"@ag-grid-community/csv-export": "https://unpkg.com/@ag-grid-community/all-modules@25.3.0/dist/ag-grid-community.cjs.js",
"@ag-grid-community/infinite-row-model": "https://unpkg.com/@ag-grid-community/all-modules@25.3.0/dist/ag-grid-community.cjs.js"
};
</script>
<script src="https://unpkg.com/systemjs@0.19.47/dist/system.js">
</script>
<script src="systemjs.config.js">
</script>
<script>System.import('main.ts').catch(function(err) { console.error(err); });</script>
</body>
</html>