mohiit1502/ag-grid-react-example
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

AG-1053 Tidy react examples, make more idiomatic

Browse Source
This commit is contained in:
Sean Landsman
2017-11-08 14:45:28 +00:00
parent b030235bbc
commit 983b5974cf
149 changed files with 339 additions and 8856 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
src-large-data/index.html Normal file
View File

@@ -0,0 +1,124 @@
<html>
<!-- This index file is common for both the standard and large examples. As to which project you are running
depends on whether you use 'npm run standard' or 'npm run large' -->
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../dist/react-large.js" charset="utf-8"></script>
<!-- Example uses font awesome icons -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<!-- Put some spacing around the buttons - not needed, just makes it look nice -->
<style>
button {
margin-left: 4px;
margin-right: 4px;
}
.customHeaderMenuButton{
margin-top: 5px;
margin-left: 4px;
float: left;
}
.customHeaderLabel{
margin-left: 5px;
margin-top: 3px;
float: left;
}
.customSortDownLabel{
float: left;
margin-left: 10px;
margin-top: 5px;
}
.customSortUpLabel{
float: left;
margin-left: 3px;
margin-top: 4px;
}
.customSortRemoveLabel{
float: left;
font-size: 11px;
margin-left: 3px;
margin-top: 6px;
}
.active {
color: cornflowerblue;
}
.hidden { display:none; }
.customHeaderLabel{
margin-left: 5px;
margin-top: 3px;
float: left;
}
.customExpandButton{
float:right;
margin-top: 5px;
margin-left: 3px;
}
.expanded {
animation-name: toExpanded;
animation-duration: 1s;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
.collapsed {
color: cornflowerblue;
animation-name: toCollapsed;
animation-duration: 1s;
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}
@keyframes toExpanded{
from {
color: cornflowerblue;
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}
to {
color: black;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
}
@keyframes toCollapsed{
from {
color: black;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
to {
color: cornflowerblue;
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}
}
</style>
<body>
<div id="myAppContainer"></div>
</body>
</html>

18
src-large-data/index.js Normal file
View File

@@ -0,0 +1,18 @@
'use strict';
import ReactDOM from 'react-dom';
import React from 'react';
import LargeGrid from './largeGrid.jsx';
import 'ag-grid/dist/styles/ag-grid.css';
import 'ag-grid/dist/styles/theme-fresh.css';
// waiting for dom to load before booting react. we could alternatively
// put the index.js reference at the end fo the index.html, but i prefer this way.
document.addEventListener('DOMContentLoaded', ()=> {
var container = document.getElementById('myAppContainer');
ReactDOM.render(
React.createElement(LargeGrid),
container
);
});

70
src-large-data/largeGrid.jsx Normal file
View File

@@ -0,0 +1,70 @@
import React, {Component} from 'react';
import SimpleCellRenderer from './simpleCellRenderer.jsx';
import {AgGridReact} from 'ag-grid-react';
// put this line in to use ag-Grid enterprise
// import 'ag-grid-enterprise';
export default class MyApp extends Component {
constructor() {
super();
this.createColumnNames();
this.state = {
columnDefs: this.createColumnDefs(),
rowData: this.createRowData()
};
}
createColumnNames() {
// creates column names by iterating the alphabet twice, eg {'aa','ab','ac',.....'zz'}
const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
this.columnNames = [];
alphabet.forEach(letter1 => {
alphabet.forEach(letter2 => {
this.columnNames.push(letter1 + letter2);
});
});
}
createRowData() {
const rowData = [];
for (let i = 0; i < 1000; i++) {
const item = {};
this.columnNames.forEach(colName => {
item[colName] = '(' + colName.toUpperCase() + ',' + i + ')'
});
rowData.push(item);
}
return rowData;
}
createColumnDefs() {
const columnDefs = [];
this.columnNames.forEach(colName => {
columnDefs.push({
headerName: colName.toUpperCase(),
field: colName,
cellRendererFramework: SimpleCellRenderer,
width: 100
});
});
return columnDefs;
}
render() {
return (
<div style={{height: '100%'}} className="ag-fresh">
<AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.rowData}/>
</div>
);
}
}

16
src-large-data/simpleCellRenderer.jsx Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react';
import * as PropTypes from 'prop-types';
export default class SimpleCellRenderer extends React.Component {
render() {
// the class below does nothing, it's just for testing, so we can inspect the dom of
// the result and looking for it, to validate that this cellRenderer is actually getting used.
return (
<span className="simple-cell-renderer">{this.props.value}</span>
);
}
}
SimpleCellRenderer.propTypes = {
params: PropTypes.object
};