<!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%; }
.red {
color: red;
}
</style>
</head>
<body>
<div id="row-style">Row Style…</div>
<div id="row-class">Row Class…</div>
<div id="row-class-rules">Row Class Rules…</div>
<script>
var appLocation = '';
var boilerplatePath = '';
var systemJsMap = {"ag-grid":"https:\/\/unpkg.com\/ag-grid@17.1.1\/dist\/ag-grid.js","ag-grid\/main":"https:\/\/unpkg.com\/ag-grid@17.1.1\/dist\/ag-grid.js","ag-grid-enterprise":"https:\/\/unpkg.com\/ag-grid-enterprise@17.1.1\/","ag-grid-react":"npm:ag-grid-react@17.1.0\/","ag-grid-angular":"npm:ag-grid-angular@17.1.0\/","ag-grid-vue":"npm:ag-grid-vue@17.1.0\/"} </script>
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
<script src="systemjs.config.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 = {
autoGroupColumnDef: {
headerName: 'Group',
width: 200
},
columnDefs: [
{
enableRowGroup: true,
field: 'category',
headerName: 'Category',
hide: true,
rowGroup: true,
},
{
aggFunc: values => {
let uniqueValues = new Set(values);
if (uniqueValues.size === 1) {
return values[0];
} else {
return '';
}
},
field: 'name',
headerName: 'name',
width: 90,
},
{
headerName: 'provider',
field: 'provider',
width: 90,
},
],
data: [
{id: 1, category: 'A', name: 'Campaign 1', provider: 'Google'},
{id: 2, category: 'A', name: 'Campaign 1', provider: 'Bing'},
{id: 3, category: 'B', name: 'Campaign 2', provider: 'Google'},
{id: 4, category: 'B', name: 'Campaign 2', provider: 'Bing'},
]
};
}
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
params.api.setRowData(this.state.data);
params.api.sizeColumnsToFit();
}
getRowNodeId = (node) => {
return node.id;
}
toggleCampaignOneName = () => {
let newName;
if (this.state.data[0].name === 'Campaign 1') {
newName = 'Campaign 10';
} else {
newName = 'Campaign 1';
}
this.setState({data: [
{...this.state.data[0], name: newName},
{...this.state.data[1], name: newName},
...this.state.data.slice(2),
]});
}
render() {
return (
<div style={{width: '100%', height: '100%'}}>
{this.props.title}
<button onClick={this.toggleCampaignOneName}>Update Campaign 1</button>
<div
style={{
boxSizing: 'border-box',
height: '250px',
width: '100%'
}}
className="ag-theme-balham"
>
<AgGridReact
autoGroupColumnDef={this.state.autoGroupColumnDef}
columnDefs={this.state.columnDefs}
deltaRowDataMode
id="myGrid"
enableSorting
enableColResize
enableRangeSelection
getRowNodeId={this.getRowNodeId}
groupUseEntireRow={false}
onGridReady={this.onGridReady.bind(this)}
rowData={this.state.data}
rowGroupPanelShow="always"
suppressAggFuncInHeader
toolPanelSuppressSideButtons
{...this.props}
/>
</div>
</div>
);
}
}
function getRowClass({node}) {
let data = node.group ? node.aggData : node.data;
if (data.name === 'Campaign 10') {
return 'red';
}
}
function getRowStyle({node}) {
let data = node.group ? node.aggData : node.data;
if (data.name === 'Campaign 10') {
return {color: 'red'};
}
}
const rowClassRules = {
red: getRowClass
};
render(<GridExample title="Row Style" getRowStyle={getRowStyle} />, document.querySelector("#row-style"));
render(<GridExample title="Row Class" getRowClass={getRowClass} />, document.querySelector("#row-class"));
render(<GridExample title="Row Class Rules" rowClassRules={rowClassRules} />, document.querySelector("#row-class-rules"));
(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);