From 68ba430896e9240d8d238517d4c2f5b90f75d552 Mon Sep 17 00:00:00 2001 From: ceolter Date: Fri, 2 Sep 2016 16:43:20 +0100 Subject: [PATCH] release 5.3.2 --- README.md | 8 +- index.html | 3 + package.json | 5 +- src-large/index.js | 18 +++++ src-large/largeGrid.jsx | 75 +++++++++++++++++++ src-large/simpleCellRenderer.jsx | 17 +++++ {src => src-standard}/ColDefFactory.jsx | 10 +-- .../ProficiencyCellRenderer.jsx | 0 {src => src-standard}/ProficiencyFilter.jsx | 0 {src => src-standard}/RefData.js | 0 {src => src-standard}/RowDataFactory.js | 0 {src => src-standard}/SkillsCellRenderer.jsx | 0 {src => src-standard}/SkillsFilter.jsx | 0 {src => src-standard}/index.js | 0 {src => src-standard}/myApp.css | 0 {src => src-standard}/myApp.jsx | 4 +- webpack.config.js => webpack.config.large.js | 2 +- webpack.config.standard.js | 27 +++++++ 18 files changed, 156 insertions(+), 13 deletions(-) create mode 100644 src-large/index.js create mode 100644 src-large/largeGrid.jsx create mode 100644 src-large/simpleCellRenderer.jsx rename {src => src-standard}/ColDefFactory.jsx (92%) rename {src => src-standard}/ProficiencyCellRenderer.jsx (100%) rename {src => src-standard}/ProficiencyFilter.jsx (100%) rename {src => src-standard}/RefData.js (100%) rename {src => src-standard}/RowDataFactory.js (100%) rename {src => src-standard}/SkillsCellRenderer.jsx (100%) rename {src => src-standard}/SkillsFilter.jsx (100%) rename {src => src-standard}/index.js (100%) rename {src => src-standard}/myApp.css (100%) rename {src => src-standard}/myApp.jsx (98%) rename webpack.config.js => webpack.config.large.js (94%) create mode 100644 webpack.config.standard.js diff --git a/README.md b/README.md index 2b568bd..5c53ea6 100644 --- a/README.md +++ b/README.md @@ -2,10 +2,13 @@ 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). +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 ============== @@ -13,6 +16,5 @@ Building To build: - `npm install` - `npm install webpack -g` -- `npm start` +- `npm run standard` or `npm run large` - navigate to localhost:8080 - diff --git a/index.html b/index.html index aefe46b..0ee551e 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,8 @@ + + diff --git a/package.json b/package.json index e45d7b9..2452570 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,11 @@ { "name": "ag-grid-react-example", - "version": "5.3.0", + "version": "5.3.2", "description": "Example Reach applicaiton using ag-Grid.", "main": "dist/ag-grid-react-example.js", "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": { "type": "git", diff --git a/src-large/index.js b/src-large/index.js new file mode 100644 index 0000000..931f4f8 --- /dev/null +++ b/src-large/index.js @@ -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 + ); +}); diff --git a/src-large/largeGrid.jsx b/src-large/largeGrid.jsx new file mode 100644 index 0000000..443df11 --- /dev/null +++ b/src-large/largeGrid.jsx @@ -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 ( +
+ +
+ ); + } + +} diff --git a/src-large/simpleCellRenderer.jsx b/src-large/simpleCellRenderer.jsx new file mode 100644 index 0000000..54e4a41 --- /dev/null +++ b/src-large/simpleCellRenderer.jsx @@ -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 ( + {params.value} + ); + } +} + +SimpleCellRenderer.propTypes = { + params: React.PropTypes.object +}; \ No newline at end of file diff --git a/src/ColDefFactory.jsx b/src-standard/ColDefFactory.jsx similarity index 92% rename from src/ColDefFactory.jsx rename to src-standard/ColDefFactory.jsx index d8f714a..3e564f0 100644 --- a/src/ColDefFactory.jsx +++ b/src-standard/ColDefFactory.jsx @@ -8,7 +8,7 @@ import ProficiencyFilter from './ProficiencyFilter.jsx'; export default class ColDefFactory { - createColDefs() { + createColDefs(parentReactComponent) { var columnDefs = [ {headerName: '#', width: 30, checkboxSelection: true, suppressSorting: true, @@ -29,15 +29,15 @@ export default class ColDefFactory { children: [ {headerName: "Skills", width: 125, suppressSorting: true, field: 'skills', enableRowGroup: true, enablePivot: true, // using ag-Grid's React cellRenderer factory - cellRenderer: reactCellRendererFactory(SkillsCellRenderer), + cellRenderer: reactCellRendererFactory(SkillsCellRenderer, parentReactComponent), // using ag-Grid's React filter factory - filter: reactFilterFactory(SkillsFilter) + filter: reactFilterFactory(SkillsFilter, parentReactComponent) }, {headerName: "Proficiency", field: "proficiency", filter: 'number', width: 120, enableValue: true, // using ag-Grid's React cellRenderer factory - cellRenderer: reactCellRendererFactory(ProficiencyCellRenderer), + cellRenderer: reactCellRendererFactory(ProficiencyCellRenderer, parentReactComponent), // using ag-Grid's React filter factory - filter: reactFilterFactory(ProficiencyFilter)} + filter: reactFilterFactory(ProficiencyFilter, parentReactComponent)} ] }, { diff --git a/src/ProficiencyCellRenderer.jsx b/src-standard/ProficiencyCellRenderer.jsx similarity index 100% rename from src/ProficiencyCellRenderer.jsx rename to src-standard/ProficiencyCellRenderer.jsx diff --git a/src/ProficiencyFilter.jsx b/src-standard/ProficiencyFilter.jsx similarity index 100% rename from src/ProficiencyFilter.jsx rename to src-standard/ProficiencyFilter.jsx diff --git a/src/RefData.js b/src-standard/RefData.js similarity index 100% rename from src/RefData.js rename to src-standard/RefData.js diff --git a/src/RowDataFactory.js b/src-standard/RowDataFactory.js similarity index 100% rename from src/RowDataFactory.js rename to src-standard/RowDataFactory.js diff --git a/src/SkillsCellRenderer.jsx b/src-standard/SkillsCellRenderer.jsx similarity index 100% rename from src/SkillsCellRenderer.jsx rename to src-standard/SkillsCellRenderer.jsx diff --git a/src/SkillsFilter.jsx b/src-standard/SkillsFilter.jsx similarity index 100% rename from src/SkillsFilter.jsx rename to src-standard/SkillsFilter.jsx diff --git a/src/index.js b/src-standard/index.js similarity index 100% rename from src/index.js rename to src-standard/index.js diff --git a/src/myApp.css b/src-standard/myApp.css similarity index 100% rename from src/myApp.css rename to src-standard/myApp.css diff --git a/src/myApp.jsx b/src-standard/myApp.jsx similarity index 98% rename from src/myApp.jsx rename to src-standard/myApp.jsx index 9722df2..b276de8 100644 --- a/src/myApp.jsx +++ b/src-standard/myApp.jsx @@ -18,8 +18,8 @@ export default class MyApp extends React.Component { quickFilterText: null, showGrid: true, showToolPanel: false, - columnDefs: new ColDefFactory().createColDefs(), - rowData: new RowDataFactory().createRowData(), + columnDefs: new ColDefFactory().createColDefs(this), + rowData: new RowDataFactory().createRowData(this), icons: { columnRemoveFromGroup: '', filter: '', diff --git a/webpack.config.js b/webpack.config.large.js similarity index 94% rename from webpack.config.js rename to webpack.config.large.js index e613e7f..a4e1475 100644 --- a/webpack.config.js +++ b/webpack.config.large.js @@ -1,5 +1,5 @@ module.exports = { - entry: "./src/index.js", + entry: "./src-large/index.js", output: { path: __dirname, filename: "dist/bundle.js" diff --git a/webpack.config.standard.js b/webpack.config.standard.js new file mode 100644 index 0000000..6f691d7 --- /dev/null +++ b/webpack.config.standard.js @@ -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" + } + } +}; \ No newline at end of file