<!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>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
</head>
<body>
<div id="root">Loading ag-Grid React example…</div>
<script>
var appLocation = '';
var boilerplatePath = '';
var systemJsMap = {
"jquery": "https:\/\/unpkg.com\/jquery@3.3.1\/dist\/jquery.js",
"jquery-ui": "https:\/\/unpkg.com\/jquery-ui@1.12.1",
"ag-grid-community":"https:\/\/unpkg.com\/ag-grid-community@19.0.0\/dist\/ag-grid-community.js",
"ag-grid-community\/main":"https:\/\/unpkg.com\/ag-grid-community@19.0.0\/dist\/ag-grid-community.js",
"ag-grid-enterprise":"https:\/\/unpkg.com\/ag-grid-enterprise@19.0.0\/",
"ag-grid-react":"npm:ag-grid-react@19.0.0\/",
"ag-grid-angular":"npm:ag-grid-angular@19.0.0\/",
"ag-grid-vue":"npm:ag-grid-vue@19.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://npmcdn.com/moment@2.14.1"></script>
<script>
System.import('index.jsx').catch( function(err) { console.error(err); })
</script>
</body>
</html>
import React, { Component } from "react";
import { render } from "react-dom";
import { AgGridReact } from "ag-grid-react";
import MaterialUIDateComponent from "./MaterialUIDateComponent.jsx";
class GridExample extends Component {
constructor(props) {
super(props);
this.state = {
columnDefs: [
{
headerName: "Athlete",
field: "athlete",
width: 150
},
{
headerName: "Date",
field: "date",
width: 160,
filter: "agDateColumnFilter",
filterParams: {
comparator: function(filterLocalDateAtMidnight, cellValue) {
var dateAsString = cellValue;
var dateParts = dateAsString.split("/");
var cellDate = new Date(Number(dateParts[2]), Number(dateParts[1]) - 1, Number(dateParts[0]));
if (filterLocalDateAtMidnight.getTime() === cellDate.getTime()) {
return 0;
}
if (cellDate < filterLocalDateAtMidnight) {
return -1;
}
if (cellDate > filterLocalDateAtMidnight) {
return 1;
}
}
}
},
{
headerName: "Sport",
field: "sport",
width: 110
}
],
frameworkComponents: {
agDateInput: MaterialUIDateComponent
},
rowData: []
};
}
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
const httpRequest = new XMLHttpRequest();
const updateData = data => {
this.setState({ rowData: data });
};
httpRequest.open(
"GET",
"https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinners.json"
);
httpRequest.send();
httpRequest.onreadystatechange = () => {
if (httpRequest.readyState === 4 && httpRequest.status === 200) {
updateData(JSON.parse(httpRequest.responseText));
}
};
}
render() {
return (
<div style={{ width: "100%", height: "100%" }}>
<div
id="myGrid"
style={{
boxSizing: "border-box",
height: "450px",
width: "100%"
}}
className="ag-theme-material"
>
<AgGridReact
columnDefs={this.state.columnDefs}
enableFilter={true}
frameworkComponents={this.state.frameworkComponents}
onGridReady={this.onGridReady.bind(this)}
rowData={this.state.rowData}
/>
</div>
</div>
);
}
}
render(<GridExample />, document.querySelector("#root"));
.filter {
margin: 0;
}
.dd {
width: 20px !important;
}
.mm {
width: 25px !important;
}
.yyyy {
width: 35px !important;
}
.divider {
margin: 0;
padding: 0;
}
.reset {
padding: 2px;
background-color: red;
border-radius: 3px;
font-size: 10px;
margin-right: 5px;
color: white;
}
(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',
'@material-ui/core': 'npm:@material-ui/core',
'@material-ui/icons': 'npm:@material-ui/icons',
'material-ui-pickers': 'npm:material-ui-pickers',
'moment': 'npm:moment',
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);
import React, {Component} from "react"
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
import KeyboardArrowUp from '@material-ui/icons/KeyboardArrowUp';
import MomentUtils from 'material-ui-pickers/utils/moment-utils';
import {MuiPickersUtilsProvider} from "material-ui-pickers"
export default class MaterialUIDateComponent extends Component {
constructor(props) {
super(props);
this.state = {
date: null,
};
this.dateInput = React.createRef();
this.onDateChanged = this.onDateChanged.bind(this);
}
render() {
return (
<MuiPickersUtilsProvider utils={MomentUtils}>
<InlineDatePicker
ref={this.dateInput}
keyboard
label={label}
format="MM/DD/YYYY"
mask={value => (value ? [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/] : [])}
value={this.state.date}
onChange={this.onDateChanged}
disableOpenOnEnter
disabled={disabled || readOnly}
animateYearScrolling={false}
leftArrowIcon={<KeyboardArrowLeft />}
rightArrowIcon={<KeyboardArrowRight />}
keyboardIcon={<KeyboardArrowUp />}
/>
</MuiPickersUtilsProvider>
)
}
getDate() {
return this.state.date;
}
setDate(date) {
this.setState({
date
});
}
updateAndNotifyAgGrid(date) {
this.setState({
date: date
},
this.props.onDateChanged
);
}
onDateChanged(date) {
if (date !== this.state.date) {
this.updateAndNotifyAgGrid(date.toDate());
}
}
}