<!DOCTYPE html>
<html lang="en">
<head>
<title>ag-Grid React Example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style> html, body, #root { margin: 0; padding: 0; height: 100%; } </style>
</head>
<body>
<div id="root">Loading ag-Grid React example…</div>
<script>
var appLocation = '';
var boilerplatePath = '';
var systemJsMap = {"ag-grid":"https:\/\/unpkg.com\/ag-grid@17.0.0\/dist\/ag-grid.js","ag-grid\/main":"https:\/\/unpkg.com\/ag-grid@17.0.0\/dist\/ag-grid.js","ag-grid-enterprise":"https:\/\/unpkg.com\/ag-grid-enterprise@17.0.0\/","ag-grid-react":"npm:ag-grid-react@17.0.0\/","ag-grid-angular":"npm:ag-grid-angular@17.0.0\/","ag-grid-vue":"npm:ag-grid-vue@17.0.0\/"} </script>
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script>
System.import('index.jsx').catch( function(err) { console.error(err); })
</script>
</body>
</html>
"use strict";
import React, { Component } from "react";
import { render } from "react-dom";
import { AgGridReact } from "ag-grid-react";
import "ag-grid-enterprise";
class GridExample extends Component {
constructor(props) {
super(props);
this.state = {
columnDefs: [],
autoGroupColumnDef: {
headerName: "GroupByNumber",
field: "number",
width: 200
},
aggFuncs: {
sum: sumFunction
},
onGridReady: function(params) {
gridOptions.api.sizeColumnsToFit();
},
pinnedBottomRowData: this.createData(this, "Bottom"),
};
}
createData(count, prefix) {
var result = [];
result.push({
amount: "TODO",
number: " Total "
});
return result;
}
onGenarateColumn(data) {
let results = [];
let uniqNumberType = _.uniq(data, function(item, key, a) {
return item.numberType;
});
uniqNumberType.map((item) => {
results.push({
field: "amount",
headerName: item.numberType,
aggFunc: "sum"
})
})
results.push({
headerName: "number",
field: "number",
rowGroup: true,
hide: true
})
console.log(results)
return results;
}
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
const httpRequest = new XMLHttpRequest();
const updateColumn = data => {
params.api.setColumnDefs(data)
}
const updateData = data => {
params.api.setRowData(data);
};
httpRequest.open(
"POST",
"https://api.graph.cool/simple/v1/cjejed4se53oa0135znj1b9p5"
);
httpRequest.setRequestHeader("Content-Type", "application/json");
httpRequest.setRequestHeader("Accept", "application/json");
httpRequest.onload = function () {
//console.log('data returned:', httpRequest.response);
}
httpRequest.send(JSON.stringify({"operationName":"AllNumbers","variables":{},"query":"query AllNumbers($numberType: NumberType) {\n allNumbers(filter: {numberType: $numberType}) {\n amount\n number\n numberType\n }\n}\n"}));
httpRequest.onreadystatechange = () => {
if (httpRequest.readyState === 4 && httpRequest.status === 200) {
let parse = JSON.parse(httpRequest.responseText)
let res = this.onGenarateColumn(parse.data.allNumbers);
updateColumn(res)
updateData(parse.data.allNumbers);
this.setState({
responseData: parse.data.allNumbers
})
}
}
params.api.sizeColumnsToFit();
}
onPinnedRowBottomCount() {
var footerRowsToFloat = document.getElementById("bottom-row-count").value;
var count = Number(footerRowsToFloat);
var rows = createData(count, "Bottom");
this.gridApi.setPinnedBottomRowData(rows);
}
render() {
return (
<div style={{ width: "100%", height: "100%" }}>
<div
style={{
boxSizing: "border-box",
height: "100%",
width: "100%"
}}
className="ag-theme-balham"
>
<AgGridReact
id="myGrid"
columnDefs={this.state.columnDefs}
groupUseEntireRow={false}
enableSorting={true}
groupHideOpenParents={true}
animateRows={true}
enableColResize={true}
enableRangeSelection={true}
autoGroupColumnDef={this.state.autoGroupColumnDef}
suppressAggFuncInHeader={true}
aggFuncs={this.state.aggFuncs}
pinnedBottomRowData={this.state.pinnedBottomRowData}
onGridReady={this.state.onGridReady}
onGridReady={this.onGridReady.bind(this)}
/>
</div>
</div>
);
}
}
function sumFunction(values) {
var result = 0;
values.forEach(function(value) {
if (typeof value === "number") {
result += value;
}
});
return result;
}
render(<GridExample />, document.querySelector("#root"));
(function(global) {
// simplified version of Object.assign for es3
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({
transpiler: 'plugin-babel',
defaultExtension: 'js',
paths: {
'npm:': 'https://unpkg.com/'
},
map: assign(
{
// babel transpiler
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// react
react: 'npm:react@16.0.0',
'react-dom': 'npm:react-dom@16.0.0',
'react-dom-factories': 'npm:react-dom-factories',
redux: 'npm:redux@3.6.0',
'react-redux': 'npm:react-redux@5.0.6',
'prop-types': 'npm:prop-types',
app: appLocation + 'app'
},
systemJsMap
), // systemJsMap comes from index.html
packages: {
react: {
main: './umd/react.production.min.js'
},
'react-dom': {
main: './umd/react-dom.production.min.js'
},
'prop-types': {
main: './prop-types.min.js',
defaultExtension: 'js'
},
redux: {
main: './dist/redux.min.js',
defaultExtension: 'js'
},
'react-redux': {
main: './dist/react-redux.min.js',
defaultExtension: 'js'
},
app: {
defaultExtension: 'jsx'
},
'ag-grid-react': {
main: './main.js',
defaultExtension: 'js'
},
'ag-grid-enterprise': {
main: './main.js',
defaultExtension: 'js'
}
},
meta: {
'*.jsx': {
babelOptions: {
react: true
}
}
}
});
})(this);