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

Merge branch 'b18.1.0'

Browse Source 
# Conflicts:
#	package.json

Merge branch 'b18.1.0'

Merge branch 'b18.1.0'

# Conflicts:
#	package-lock.json
#	package.json
#	vue.config.js
This commit is contained in:
Alberto
2018-07-05 11:06:51 +01:00
parent 172c2a05b0 ca64dae64c
commit 847005c758
12 changed files with 68 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1,2 +1,3 @@
/node_modules
/dist
package-lock.json

17
README.md
View File

@@ -1,29 +1,18 @@
ag-Grid React Example
==============
Examples of running ag-Grid inside React application.
See [www.ag-grid.com](http://www.ag-grid.com) for an overview and full documentation.
Frameworks Supported
====================
Framework specific Getting Started guides:
[Angular 1](https://www.ag-grid.com/best-angularjs-data-grid/) | [Angular 2](https://www.ag-grid.com/best-angular-2-data-grid/) | [Aurelia](https://www.ag-grid.com/best-aurelia-data-grid/)
[Javascript](https://www.ag-grid.com/best-javascript-data-grid/) | [React](https://www.ag-grid.com/best-react-data-grid/) | [TypeScript](https://www.ag-grid.com/ag-grid-typescript-webpack-2/)
[VueJS](https://www.ag-grid.com/best-vuejs-data-grid/) | [Web Components](https://www.ag-grid.com/best-web-component-data-grid/)
There are two examples:
## Examples
1. standard - shows a typical grid demonstrating many ag-Grid features
2. large - shows a very large grid (767 columns and 1,000 rows) using React cell renderers
See [www.ag-grid.com](http://www.ag-grid.com) for full documentation and examples.
Building
==============
To build:
- `npm install`
- `npm install webpack -g`
- `npm run examples`, `npm run large` or `npm run trader`
- navigate to localhost:8080

11
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "ag-grid-react-example",
"version": "18.0.0",
"version": "18.1.0",
"description": "Example Reach applicaiton using ag-Grid.",
"main": "dist/ag-grid-react-example.js",
"scripts": {
@@ -17,14 +17,13 @@
"build-dashboard": "webpack --config config/webpack.config.trader.js --progress --profile --bail",
"build-all": "npm run build-examples && npm run build-dashboard",
"build": "npm run clean && npm run mkdirs && npm run build-all && npm run copy",
"copy-to-docs": "ncp dist/examples ../ag-grid-docs/src/framework-examples/react-examples/examples && ncp dist/trader ../ag-grid-docs/src/framework-examples/react-examples/trader",
"build-to-docs": "npm run build && npm run copy-to-docs",
"start": "npm run examples"
},
"repository": {
"type": "git",
"url": "https://github.com/ag-grid/ag-grid-react-example.git"
},
"private": true,
"keywords": [
"react",
"grid",
@@ -58,9 +57,9 @@
"typescript": "2.3.x"
},
"dependencies": {
"ag-grid": "^18.0.0",
"ag-grid-enterprise": "^18.0.0",
"ag-grid-react": "^18.0.0",
"ag-grid": "^18.1.0",
"ag-grid-enterprise": "^18.1.0",
"ag-grid-react": "^18.1.0",
"bootstrap": "3.3.7",
"d3": "4.9.1",
"file-loader": "0.11.1",

12
src-examples/App.jsx
View File

@@ -7,12 +7,12 @@ import RichGridDeclarativeExample from "./richGridDeclarativeExample/RichGridDec
import SimpleReduxDynamicExample from "./simpleReduxDynamicComponentExample/SimpleReduxExample";
const SideBar = () => (
<div style={{float: "left", width: 335, marginRight: 25}}>
<ul className="nav nav-pills nav-stacked">
<NavItem to='/rich-grid-declarative'>Rich Grid with Declarative Markup</NavItem>
<NavItem to='/simple-redux-dynamic'>Simple Redux Dynamic Component Example</NavItem>
</ul>
</div>
<div style={{float: "left", width: 335, marginRight: 25}}>
<ul className="nav nav-pills nav-stacked">
<NavItem to='/rich-grid-declarative'>Rich Grid with Declarative Markup</NavItem>
<NavItem to='/simple-redux-dynamic'>Simple Redux Dynamic Component Example</NavItem>
</ul>
</div>
);
class App extends Component {

2
src-examples/NavItem.jsx
View File

@@ -1,6 +1,6 @@
import React from 'react'
import * as PropTypes from 'prop-types';
import {Route, Link} from 'react-router-dom'
import {Link, Route} from 'react-router-dom'
// for bootstrap li active functionality
export default function NavItem({children, to, exact}) {

2
src-examples/index.js
View File

@@ -5,7 +5,7 @@ import {render} from "react-dom";
import {BrowserRouter} from "react-router-dom";
import "ag-grid/dist/styles/ag-grid.css";
import "ag-grid/dist/styles/theme-fresh.css";
import "ag-grid/dist/styles/ag-theme-balham.css";
import "../node_modules/bootstrap/dist/css/bootstrap.css";
import App from "./App";

2
src-examples/richGridDeclarativeExample/ProficiencyFilter.jsx
View File

@@ -54,7 +54,7 @@ export default class ProficiencyFilter extends React.Component {
PROFICIENCY_NAMES.forEach((name) => {
const selected = this.state.selected === name;
rows.push(
<div key={name}>
<div key={name} style={{marginTop: 3}}>
<label style={{paddingLeft: 4}}>
<input type="radio" checked={selected} name={Math.random()}
onChange={this.onButtonPressed.bind(this, name)}/>

66
src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx
View File

@@ -12,7 +12,6 @@ import HeaderGroupComponent from './HeaderGroupComponent.jsx';
import SortableHeaderComponent from './SortableHeaderComponent.jsx';
import "./RichGridDeclarativeExample.css";
// take this line out if you do not want to use ag-Grid-Enterprise
import "ag-grid-enterprise";
@@ -77,8 +76,10 @@ export default class RichGridDeclarativeExample extends Component {
dobFilter = () => {
let dateFilterComponent = this.api.getFilterInstance('dob');
dateFilterComponent.setFilterType('equals');
dateFilterComponent.setDateFrom('2000-01-01');
dateFilterComponent.setModel({
type: 'equals',
dateFrom: '2000-01-01'
});
// as the date filter is a React component, and its using setState internally, we need
// to allow time for the state to be set (as setState is an async operation)
@@ -121,13 +122,21 @@ export default class RichGridDeclarativeExample extends Component {
<div>
<span>
Grid API:
<button onClick={() => { this.api.selectAll() }} className="btn btn-primary">Select All</button>
<button onClick={() => { this.api.deselectAll() }} className="btn btn-primary">Clear Selection</button>
<button onClick={() => {
this.api.selectAll()
}} className="btn btn-primary">Select All</button>
<button onClick={() => {
this.api.deselectAll()
}} className="btn btn-primary">Clear Selection</button>
</span>
<span style={{float: "right"}}>
Column API:
<button onClick={() => { this.columnApi.setColumnVisible('country', false) }} className="btn btn-primary">Hide Country Column</button>
<button onClick={() => { this.columnApi.setColumnVisible('country', true) }} className="btn btn-primary">Show Country Column</button>
<button onClick={() => {
this.columnApi.setColumnVisible('country', false)
}} className="btn btn-primary">Hide Country Column</button>
<button onClick={() => {
this.columnApi.setColumnVisible('country', true)
}} className="btn btn-primary">Show Country Column</button>
</span>
</div>
<div style={{display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10}}>
@@ -148,10 +157,11 @@ export default class RichGridDeclarativeExample extends Component {
<button onClick={this.invokeSkillsFilterMethod}
className="btn btn-primary">Invoke Skills Filter Method
</button>
<button onClick={this.dobFilter} className="btn btn-primary">DOB equals to 01/01/2000ß</button>
<button onClick={this.dobFilter} className="btn btn-primary">DOB equals to 01/01/2000ß
</button>
</div>
</div>
<div style={{height: 400, width: 900}} className="ag-fresh">
<div style={{height: 400, width: 900}} className="ag-theme-balham">
<AgGridReact
// listening for events
onGridReady={this.onGridReady}
@@ -177,7 +187,6 @@ export default class RichGridDeclarativeExample extends Component {
enableFilter
floatingFilter
groupHeaders
rowHeight="22"
// setting grid wide date component
dateComponentFramework={DateComponent}
@@ -190,20 +199,36 @@ export default class RichGridDeclarativeExample extends Component {
}
}}
>
<AgGridColumn headerName="#" width={30} checkboxSelection suppressSorting suppressMenu suppressFilter pinned></AgGridColumn>
<AgGridColumn headerName="#" width={30}
checkboxSelection suppressSorting suppressMenu suppressFilter pinned>
</AgGridColumn>
<AgGridColumn headerName="Employee" headerGroupComponentFramework={HeaderGroupComponent}>
<AgGridColumn field="name" width={150} enableRowGroup enablePivot pinned editable cellEditorFramework={NameCellEditor}></AgGridColumn>
<AgGridColumn field="country" width={150} enableRowGroup enablePivot pinned editable cellRenderer={RichGridDeclarativeExample.countryCellRenderer} filterParams={{cellRenderer: RichGridDeclarativeExample.countryCellRenderer, cellHeight:20}}></AgGridColumn>
<AgGridColumn field="dob" width={145} headerName="DOB" filter="date" pinned columnGroupShow="open" cellRenderer={RichGridDeclarativeExample.dateCellRenderer}></AgGridColumn>
<AgGridColumn field="name" width={150}
cellEditorFramework={NameCellEditor}
enableRowGroup enablePivot pinned editable/>
<AgGridColumn field="country" width={150}
cellRenderer={RichGridDeclarativeExample.countryCellRenderer}
filterParams={{
cellRenderer: RichGridDeclarativeExample.countryCellRenderer,
cellHeight: 20
}}
enableRowGroup enablePivot pinned editable/>
<AgGridColumn field="dob" width={175} headerName="DOB" filter="agDateColumnFilter"
pinned columnGroupShow="open"
cellRenderer={RichGridDeclarativeExample.dateCellRenderer}/>
</AgGridColumn>
<AgGridColumn headerName="IT Skills">
<AgGridColumn field="skills" width={120} enableRowGroup enablePivot suppressSorting cellRendererFramework={SkillsCellRenderer} filterFramework={SkillsFilter}></AgGridColumn>
<AgGridColumn field="proficiency" width={135} enableValue cellRendererFramework={ProficiencyCellRenderer} filterFramework={ProficiencyFilter}></AgGridColumn>
<AgGridColumn field="skills" width={120} enableRowGroup enablePivot suppressSorting
cellRendererFramework={SkillsCellRenderer}
filterFramework={SkillsFilter}/>
<AgGridColumn field="proficiency" width={135} enableValue
cellRendererFramework={ProficiencyCellRenderer}
filterFramework={ProficiencyFilter}/>
</AgGridColumn>
<AgGridColumn headerName="Contact">
<AgGridColumn field="mobile" width={150} filter="text"></AgGridColumn>
<AgGridColumn field="landline" width={150} filter="text"></AgGridColumn>
<AgGridColumn field="address" width={500} filter="text"></AgGridColumn>
<AgGridColumn field="mobile" width={150} filter="text"/>
<AgGridColumn field="landline" width={150} filter="text"/>
<AgGridColumn field="address" width={500} filter="text"/>
</AgGridColumn>
</AgGridReact>
</div>
@@ -213,7 +238,8 @@ export default class RichGridDeclarativeExample extends Component {
</div>
<div className="row">
<div className="col-sm-12">
<h5>This example demonstrates many features of ag-Grid, with Grid and Column Definition defined declaratively (i.e. with markup).</h5>
<h5>This example demonstrates many features of ag-Grid, with Grid and Column Definition
defined declaratively (i.e. with markup).</h5>
<p><span style={{fontWeight: 500}}>Select All/Clear Selection</span>: Select or Deselect
All
Rows</p>

2
src-examples/simpleReduxDynamicComponentExample/GridComponent.jsx
View File

@@ -39,7 +39,7 @@ class GridComponent extends Component {
render() {
return (
<div style={{height: 400, width: 900, marginTop: 15}}
className="ag-fresh">
className="ag-theme-balham">
<AgGridReact
// properties
columnDefs={this.state.columnDefs}

1
src-examples/simpleReduxDynamicComponentExample/HeaderComponent.jsx
View File

@@ -1,6 +1,5 @@
import React, {Component} from "react";
import {connect} from "react-redux";
// take this line out if you do not want to use ag-Grid-Enterprise
import "ag-grid-enterprise";

5
src-examples/simpleReduxDynamicComponentExample/SimpleReduxExample.jsx
View File

@@ -1,7 +1,6 @@
import React, {Component} from "react";
import {Provider} from "react-redux";
import {createStore} from "redux";
// take this line out if you do not want to use ag-Grid-Enterprise
import "ag-grid-enterprise";
@@ -26,8 +25,8 @@ export default class SimpleReduxExample extends Component {
<Provider store={store}>
<div>
<h1>Simple Redux Example using Connected React Components</h1>
<HeaderComponent />
<GridComponent />
<HeaderComponent/>
<GridComponent/>
</div>
</Provider>
)

1
src-examples/simpleReduxDynamicComponentExample/gridDataActions.jsx
View File

@@ -4,6 +4,7 @@ export function updateRowData(rowData) {
rowData
}
}
export function setCurrency(currencySymbol, exchangeRate) {
return {
type: 'CURRENCY_CHANGED',