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

release 5.3.2

Browse Source
This commit is contained in:
ceolter
2016-09-02 16:43:20 +01:00
parent 5a8da199c2
commit 68ba430896
18 changed files with 156 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@@ -2,10 +2,13 @@
ag-Grid React Example ag-Grid React Example
============== ==============
Example of running ag-Grid inside React application. Examples of running ag-Grid inside React application.
See the [www.ag-grid.com](http://www.ag-grid.com). See the [www.ag-grid.com](http://www.ag-grid.com).
There are two examples:
standard - shows a typical grid demonstrating many ag-Grid features
large - shows a very large grid (767 columns and 1,000 rows) using React cell renderers
Building Building
============== ==============
@@ -13,6 +16,5 @@ Building
To build: To build:
- `npm install` - `npm install`
- `npm install webpack -g` - `npm install webpack -g`
- `npm start` - `npm run standard` or `npm run large`
- navigate to localhost:8080 - navigate to localhost:8080

3
index.html
View File

@@ -1,5 +1,8 @@
<html> <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> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<script type="text/javascript" src="dist/bundle.js" charset="utf-8"></script> <script type="text/javascript" src="dist/bundle.js" charset="utf-8"></script>

5
package.json
View File

@@ -1,10 +1,11 @@
{ {
"name": "ag-grid-react-example", "name": "ag-grid-react-example",
"version": "5.3.0", "version": "5.3.2",
"description": "Example Reach applicaiton using ag-Grid.", "description": "Example Reach applicaiton using ag-Grid.",
"main": "dist/ag-grid-react-example.js", "main": "dist/ag-grid-react-example.js",
"scripts": { "scripts": {
"start": "webpack-dev-server --progress --colors --hot --inline" "standard": "webpack-dev-server --config webpack.config.standard.js --progress --colors --hot --inline",
"large": "webpack-dev-server --config webpack.config.large.js --progress --colors --hot --inline"
}, },
"repository": { "repository": {
"type": "git", "type": "git",

18
src-large/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';
// is there a better way of doing this?
import 'ag-grid-root/dist/styles/ag-grid.css';
import 'ag-grid-root/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
);
});

75
src-large/largeGrid.jsx Normal file
View File

@@ -0,0 +1,75 @@
import React from 'react';
import {reactCellRendererFactory} from 'ag-grid-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 React.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'}
var alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
this.columnNames = [];
alphabet.forEach( letter1 => {
alphabet.forEach( letter2 => {
this.columnNames.push(letter1 + letter2);
});
});
}
createRowData() {
var rowData = [];
for (var i = 0; i<1000; i++) {
var item = {};
this.columnNames.forEach( colName => {
item[colName] = '('+colName.toUpperCase()+','+i+')'
});
rowData.push(item);
}
return rowData;
}
createColumnDefs() {
var columnDefs = [];
// pass in the parent component to use for React component to the cellRenderer.
// this is optional. if missing, then react router will not work.
var cellRenderer = reactCellRendererFactory(SimpleCellRenderer, this);
this.columnNames.forEach( colName => {
columnDefs.push({
headerName: colName.toUpperCase(),
field: colName,
cellRenderer: cellRenderer,
width: 100
});
});
return columnDefs;
}
render() {
return (
<div style={{height: '100%'}} className="ag-fresh">
<AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.rowData} />
</div>
);
}
}

17
src-large/simpleCellRenderer.jsx Normal file
View File

@@ -0,0 +1,17 @@
import React from 'react';
export default class SimpleCellRenderer extends React.Component {
render() {
var params = this.props.params;
// 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">{params.value}</span>
);
}
}
SimpleCellRenderer.propTypes = {
params: React.PropTypes.object
};

10
src/ColDefFactory.jsx → src-standard/ColDefFactory.jsx
View File

@@ -8,7 +8,7 @@ import ProficiencyFilter from './ProficiencyFilter.jsx';
export default class ColDefFactory { export default class ColDefFactory {
createColDefs() { createColDefs(parentReactComponent) {
var columnDefs = [ var columnDefs = [
{headerName: '#', width: 30, checkboxSelection: true, suppressSorting: true, {headerName: '#', width: 30, checkboxSelection: true, suppressSorting: true,
@@ -29,15 +29,15 @@ export default class ColDefFactory {
children: [ children: [
{headerName: "Skills", width: 125, suppressSorting: true, field: 'skills', enableRowGroup: true, enablePivot: true, {headerName: "Skills", width: 125, suppressSorting: true, field: 'skills', enableRowGroup: true, enablePivot: true,
// using ag-Grid's React cellRenderer factory // using ag-Grid's React cellRenderer factory
cellRenderer: reactCellRendererFactory(SkillsCellRenderer), cellRenderer: reactCellRendererFactory(SkillsCellRenderer, parentReactComponent),
// using ag-Grid's React filter factory // using ag-Grid's React filter factory
filter: reactFilterFactory(SkillsFilter) filter: reactFilterFactory(SkillsFilter, parentReactComponent)
}, },
{headerName: "Proficiency", field: "proficiency", filter: 'number', width: 120, enableValue: true, {headerName: "Proficiency", field: "proficiency", filter: 'number', width: 120, enableValue: true,
// using ag-Grid's React cellRenderer factory // using ag-Grid's React cellRenderer factory
cellRenderer: reactCellRendererFactory(ProficiencyCellRenderer), cellRenderer: reactCellRendererFactory(ProficiencyCellRenderer, parentReactComponent),
// using ag-Grid's React filter factory // using ag-Grid's React filter factory
filter: reactFilterFactory(ProficiencyFilter)} filter: reactFilterFactory(ProficiencyFilter, parentReactComponent)}
] ]
}, },
{ {

0
src/ProficiencyCellRenderer.jsx → src-standard/ProficiencyCellRenderer.jsx
View File

0
src/ProficiencyFilter.jsx → src-standard/ProficiencyFilter.jsx
View File

0
src/RefData.js → src-standard/RefData.js
View File

0
src/RowDataFactory.js → src-standard/RowDataFactory.js
View File

0
src/SkillsCellRenderer.jsx → src-standard/SkillsCellRenderer.jsx
View File

0
src/SkillsFilter.jsx → src-standard/SkillsFilter.jsx
View File

0
src/index.js → src-standard/index.js
View File

0
src/myApp.css → src-standard/myApp.css
View File

4
src/myApp.jsx → src-standard/myApp.jsx
View File

@@ -18,8 +18,8 @@ export default class MyApp extends React.Component {
quickFilterText: null, quickFilterText: null,
showGrid: true, showGrid: true,
showToolPanel: false, showToolPanel: false,
columnDefs: new ColDefFactory().createColDefs(), columnDefs: new ColDefFactory().createColDefs(this),
rowData: new RowDataFactory().createRowData(), rowData: new RowDataFactory().createRowData(this),
icons: { icons: {
columnRemoveFromGroup: '<i class="fa fa-remove"/>', columnRemoveFromGroup: '<i class="fa fa-remove"/>',
filter: '<i class="fa fa-filter"/>', filter: '<i class="fa fa-filter"/>',

2
webpack.config.js → webpack.config.large.js
View File

@@ -1,5 +1,5 @@
module.exports = { module.exports = {
entry: "./src/index.js", entry: "./src-large/index.js",
output: { output: {
path: __dirname, path: __dirname,
filename: "dist/bundle.js" filename: "dist/bundle.js"

27
webpack.config.standard.js Normal file
View File

@@ -0,0 +1,27 @@
module.exports = {
entry: "./src-standard/index.js",
output: {
path: __dirname,
filename: "dist/bundle.js"
},
module: {
loaders: [
{
test: /\.css$/,
loader: "style!css"
},
{
test: /\.js$|\.jsx$/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}
]
},
resolve: {
alias: {
"ag-grid-root" : __dirname + "/node_modules/ag-grid"
}
}
};