.example-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
#myGrid {
flex: 1 1 auto;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>React example</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style media="only screen">
html, body, #root {
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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"/>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="root">Loading React example…</div>
<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@23.2.0/dist/styles/ag-grid.css",
"@ag-grid-community/core/dist/styles/ag-grid.css": "https://unpkg.com/@ag-grid-community/core@23.2.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@23.2.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@23.2.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@23.2.0/dist/styles/ag-theme-alpine.css",
"@ag-grid-community/core/dist/styles/ag-theme-alpine.css": "https://unpkg.com/@ag-grid-community/core@23.2.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@23.2.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@23.2.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@23.2.0/dist/styles/ag-theme-balham.css",
"@ag-grid-community/core/dist/styles/ag-theme-balham.css": "https://unpkg.com/@ag-grid-community/core@23.2.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@23.2.0/dist/styles/ag-theme-blue.css",
"@ag-grid-community/core/dist/styles/ag-theme-blue.css": "https://unpkg.com/@ag-grid-community/core@23.2.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@23.2.0/dist/styles/ag-theme-bootstrap.css",
"@ag-grid-community/core/dist/styles/ag-theme-bootstrap.css": "https://unpkg.com/@ag-grid-community/core@23.2.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@23.2.0/dist/styles/ag-theme-dark.css",
"@ag-grid-community/core/dist/styles/ag-theme-dark.css": "https://unpkg.com/@ag-grid-community/core@23.2.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@23.2.0/dist/styles/ag-theme-fresh.css",
"@ag-grid-community/core/dist/styles/ag-theme-fresh.css": "https://unpkg.com/@ag-grid-community/core@23.2.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@23.2.0/dist/styles/ag-theme-material.css",
"@ag-grid-community/core/dist/styles/ag-theme-material.css": "https://unpkg.com/@ag-grid-community/core@23.2.0/dist/styles/ag-theme-material.css",
"@ag-grid-community/react": "https://unpkg.com/@ag-grid-community/react@23.2.0/",
"@ag-grid-community/angular": "https://unpkg.com/@ag-grid-community/angular@23.2.0/",
"@ag-grid-community/vue": "https://unpkg.com/@ag-grid-community/vue@23.2.0/",
"ag-charts-community": "https://unpkg.com/ag-charts-community@1.2.0/dist/ag-charts-community.cjs.js",
"ag-grid-community": "https://unpkg.com/ag-grid-community@23.2.0/",
"ag-grid-enterprise": "https://unpkg.com/ag-grid-enterprise@23.2.0/",
"ag-grid-angular": "https://unpkg.com/ag-grid-angular@23.2.0/",
"ag-grid-react": "https://unpkg.com/ag-grid-react@23.2.0/",
"ag-grid-vue": "https://unpkg.com/ag-grid-vue@23.2.0/"
};
var systemJsPaths = {
"@ag-grid-community/all-modules": "https://unpkg.com/@ag-grid-community/all-modules@23.2.0/dist/ag-grid-community.cjs.js",
"@ag-grid-community/client-side-row-model": "https://unpkg.com/@ag-grid-community/all-modules@23.2.0/dist/ag-grid-community.cjs.js",
"@ag-grid-community/core": "https://unpkg.com/@ag-grid-community/all-modules@23.2.0/dist/ag-grid-community.cjs.js",
"@ag-grid-community/csv-export": "https://unpkg.com/@ag-grid-community/all-modules@23.2.0/dist/ag-grid-community.cjs.js",
"@ag-grid-community/infinite-row-model": "https://unpkg.com/@ag-grid-community/all-modules@23.2.0/dist/ag-grid-community.cjs.js"
};
</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>
import React, { Component } from 'react';
export default class ChildMessageRenderer extends Component {
constructor(props) {
super(props);
this.invokeParentMethod = this.invokeParentMethod.bind(this);
}
invokeParentMethod() {
this.props.context.componentParent.methodFromParent(
`Row: ${this.props.node.rowIndex}, Col: ${this.props.colDef.headerName}`
);
}
render() {
return (
<span>
<button
style={{ height: 20, lineHeight: 0.5 }}
onClick={this.invokeParentMethod}
className="btn btn-info"
>
Invoke Parent
</button>
</span>
);
}
}
import React, { Component } from 'react';
export default class CubeRenderer extends Component {
constructor(props) {
super(props);
this.state = {
value: this.valueCubed(),
};
}
valueCubed() {
return this.props.value * this.props.value * this.props.value;
}
render() {
return <span>{this.state.value}</span>;
}
}
import React, { Component } from 'react';
export default class CurrencyRenderer extends Component {
constructor(props) {
super(props);
this.state = {
value: props.value,
};
}
formatValueToCurrency(currency, value) {
return `${currency}${value.toFixed(2)}`;
}
// noinspection JSUnusedGlobalSymbols
refresh(params) {
if (params.value !== this.state.value) {
this.setState({
value: params.value,
});
}
return true;
}
render() {
return <span>{this.formatValueToCurrency('EUR', this.state.value)}</span>;
}
}
'use strict';
import React, { Component } from 'react';
import { render } from 'react-dom';
import { AgGridReact } from '@ag-grid-community/react';
import { AllCommunityModules } from '@ag-grid-community/all-modules';
import '@ag-grid-community/all-modules/dist/styles/ag-grid.css';
import '@ag-grid-community/all-modules/dist/styles/ag-theme-alpine.css';
import ChildMessageRenderer from './childMessageRenderer.jsx';
import CubeRenderer from './cubeRenderer.jsx';
import CurrencyRenderer from './currencyRenderer.jsx';
import ParamsRenderer from './paramsRenderer.jsx';
import SquareRenderer from './squareRenderer.jsx';
class GridExample extends Component {
constructor(props) {
super(props);
this.state = {
modules: AllCommunityModules,
columnDefs: [
{
headerName: 'Row',
field: 'row',
width: 150,
},
{
headerName: 'Row Params',
field: 'nestedRowData.name',
cellRenderer: 'paramsRenderer',
colId: 'params',
width: 150,
cellRendererParams: ({ data }) => ({
value: data.nestedRowData
})
},
],
rowData: createRowData(),
context: { componentParent: this },
frameworkComponents: {
squareRenderer: SquareRenderer,
cubeRenderer: CubeRenderer,
paramsRenderer: ParamsRenderer,
currencyRenderer: CurrencyRenderer,
childMessageRenderer: ChildMessageRenderer,
},
defaultColDef: {
editable: true,
sortable: true,
flex: 1,
minWidth: 100,
filter: true,
resizable: true,
},
};
}
onGridReady = params => {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
};
refreshEvenRowsCurrencyData = () => {
this.gridApi.forEachNode(function(rowNode) {
if (rowNode.data.value % 2 === 0) {
rowNode.setDataValue(
'currency',
rowNode.data.value + Number(Math.random().toFixed(2))
);
}
});
this.gridApi.refreshCells({ columns: ['currency'] });
};
methodFromParent = cell => {
alert('Parent Component Method from ' + cell + '!');
};
render() {
return (
<div style={{ width: '100%', height: '100%' }}>
<div className="example-wrapper">
<button
onClick={() => this.refreshEvenRowsCurrencyData()}
style={{ marginBottom: '10px' }}
className="btn btn-primary"
>
Refresh Even Row Currency Data
</button>
<div
id="myGrid"
style={{
height: '100%',
width: '100%',
}}
className="ag-theme-alpine"
>
<AgGridReact
modules={this.state.modules}
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}
context={this.state.context}
frameworkComponents={this.state.frameworkComponents}
defaultColDef={this.state.defaultColDef}
onGridReady={this.onGridReady}
/>
</div>
</div>
</div>
);
}
}
function createRowData() {
var rowData = [];
for (var i = 0; i < 3; i++) {
rowData.push({
row: 'Row ' + i,
value: i,
currency: i + Number(Math.random().toFixed(2)),
nestedRowData: {
name: i === 1 ? '' : 'non-empty',
id: i,
}
});
}
return rowData;
}
render(<GridExample></GridExample>, document.querySelector('#root'));
import React, { Component } from 'react';
export default class ParamsRenderer extends Component {
constructor(props) {
super(props);
}
render() {
return (
<span>
{JSON.stringify(this.props.value)}
</span>
);
}
}
import React, { Component } from 'react';
export default class SquareRenderer extends Component {
constructor(props) {
super(props);
this.state = {
value: this.valueSquared(),
};
}
valueSquared() {
return this.props.value * this.props.value;
}
render() {
return <span>{this.state.value}</span>;
}
}
(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:
assign(
{
// paths serve as alias
"npm:": "https://unpkg.com/",
}, systemJsPaths),
map: assign(
{
// css plugin
'css': 'npm:systemjs-plugin-css/css.js',
// 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'
},
'react-dom/server': {
main: '../umd/react-dom-server.browser.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-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/react': {
main: './main.js',
defaultExtension: 'js'
}
},
meta: {
'*.jsx': {
babelOptions: {
react: true
}
},
'*.css': {loader: 'css'}
}
});
})(this);