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

Merge branch 'b23.0.0'

Browse Source
This commit is contained in:
Sean Landsman
2020-03-17 14:29:28 +00:00
parent f2b515af7f 2d5fea4790
commit d19c461847
9 changed files with 56 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1,3 +1,4 @@
/node_modules
/dist
package-lock.json
*.nosync

10
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "ag-grid-react-example",
"version": "22.1.0",
"version": "23.0.0",
"description": "Example Reach applicaiton using ag-Grid.",
"main": "dist/ag-grid-react-example.js",
"scripts": {
@@ -38,7 +38,7 @@
},
"homepage": "http://www.ag-grid.com/",
"devDependencies": {
"@ag-grid-community/core": "~22.1.0",
"@ag-grid-community/core": "~23.0.0",
"@babel/core": "7.4.4",
"@babel/plugin-proposal-class-properties": "7.4.4",
"@babel/plugin-proposal-function-bind": "7.2.0",
@@ -62,9 +62,9 @@
"webpack-dev-server": "3.4.1"
},
"dependencies": {
"@ag-grid-enterprise/all-modules": "~22.1.0",
"@ag-grid-community/react": "~22.1.0",
"bootstrap": "4.3.1",
"@ag-grid-enterprise/all-modules": "~23.0.0",
"@ag-grid-community/react": "~23.0.0",
"bootstrap": "4.4.1",
"d3": "4.9.1",
"lodash": "4.17.11",
"react": "16.8.6",

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

@@ -1,5 +1,5 @@
import React, {Component} from "react";
import {AgGridColumn, AgGridReact} from "@ag-grid-community/react";
import React, { Component } from "react";
import { AgGridColumn, AgGridReact } from "@ag-grid-community/react";
import RowDataFactory from "./RowDataFactory";
import DateComponent from "./DateComponent.jsx";
import SkillsCellRenderer from './SkillsCellRenderer.jsx';
@@ -17,7 +17,7 @@ import "./RichGridDeclarativeExample.css";
// import {AllCommunityModules} from "@ag-grid-community/all-modules";
// for enterprise features
import {AllModules} from "@ag-grid-enterprise/all-modules";
import { AllModules } from "@ag-grid-enterprise/all-modules";
export default class RichGridDeclarativeExample extends Component {
constructor(props) {
@@ -57,7 +57,7 @@ export default class RichGridDeclarativeExample extends Component {
/* Demo related methods */
onToggleSidebar = (event) => {
this.setState({sideBar: event.target.checked});
this.setState({ sideBar: event.target.checked });
};
deselectAll() {
@@ -65,7 +65,7 @@ export default class RichGridDeclarativeExample extends Component {
}
onQuickFilterText = (event) => {
this.setState({quickFilterText: event.target.value});
this.setState({ quickFilterText: event.target.value });
};
onRefreshData = () => {
@@ -128,58 +128,58 @@ export default class RichGridDeclarativeExample extends Component {
render() {
return (
<div style={{width: '900px'}}>
<div style={{ width: '900px' }}>
<h1>Rich Grid with Declarative Markup Example</h1>
<div style={{display: "inline-block", width: "100%"}}>
<div style={{float: "left"}}>
<b>Employees Skills and Contact Details: </b>{ this.state.rowCount }
<div style={{ display: "inline-block", width: "100%" }}>
<div style={{ float: "left" }}>
<b>Employees Skills and Contact Details: </b>{this.state.rowCount}
</div>
</div>
<div style={{marginTop: 10}}>
<div style={{ marginTop: 10 }}>
<div>
<span>
Grid API:
<button onClick={() => {
this.api.selectAll()
this.api.selectAll();
}} className="btn btn-primary">Select All</button>
<button onClick={() => {
this.api.deselectAll()
this.api.deselectAll();
}} className="btn btn-primary">Clear Selection</button>
</span>
<span style={{float: "right"}}>
<span style={{ float: "right" }}>
Column API:
<button onClick={() => {
this.columnApi.setColumnVisible('country', false)
this.columnApi.setColumnVisible('country', false);
}} className="btn btn-primary">Hide Country Column</button>
<button onClick={() => {
this.columnApi.setColumnVisible('country', true)
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}}>
<div style={{float: "left"}}>
<div style={{ display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10 }}>
<div style={{ float: "left" }}>
<button onClick={this.onRefreshData} className="btn btn-primary">Refresh Data</button>
</div>
<div style={{float: "right"}}>
<div style={{ float: "right" }}>
Filter API:
<button onClick={this.invokeSkillsFilterMethod}
className="btn btn-primary">Invoke Skills Filter Method
className="btn btn-primary">Invoke Skills Filter Method
</button>
<button onClick={this.dobFilter} className="btn btn-primary">DOB equals to 01/01/2000
</button>
</div>
</div>
<div style={{display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10}}>
<div style={{float: "left"}}>
<div style={{ display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10 }}>
<div style={{ float: "left" }}>
<label htmlFor="sideBarToggle">Show Side Bar&nbsp;</label>
<input type="checkbox" id="sideBarToggle" onChange={this.onToggleSidebar} style={{marginRight: 5}}/>
<input type="checkbox" id="sideBarToggle" onChange={this.onToggleSidebar} style={{ marginRight: 5 }} />
</div>
<div style={{float: "right", marginLeft: 20}}>
<div style={{ float: "right", marginLeft: 20 }}>
<label htmlFor="quickFilter">Quick Filter:&nbsp;</label>
<input type="text" id="quickFilter" onChange={this.onQuickFilterText} placeholder="Type text to filter..."/>
<input type="text" id="quickFilter" onChange={this.onQuickFilterText} placeholder="Type text to filter..." />
</div>
</div>
<div style={{height: 400, width: 900}} className="ag-theme-balham">
<div style={{ height: 400, width: 900 }} className="ag-theme-balham">
<AgGridReact
// listening for events
onGridReady={this.onGridReady}
@@ -220,35 +220,35 @@ export default class RichGridDeclarativeExample extends Component {
}
}}>
<AgGridColumn headerName="#" width={30}
checkboxSelection sortable={false} suppressMenu filter={false} pinned>
checkboxSelection sortable={false} suppressMenu filter={false} pinned>
</AgGridColumn>
<AgGridColumn headerName="Employee" headerGroupComponentFramework={HeaderGroupComponent}>
<AgGridColumn field="name" width={150}
cellEditorFramework={NameCellEditor}
enableRowGroup enablePivot pinned editable/>
cellEditorFramework={NameCellEditor}
enableRowGroup enablePivot pinned editable />
<AgGridColumn field="country" width={150}
cellRenderer={RichGridDeclarativeExample.countryCellRenderer}
filterParams={{
cellRenderer: RichGridDeclarativeExample.countryCellRenderer,
cellHeight: 20
}}
enableRowGroup enablePivot pinned editable/>
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}/>
pinned columnGroupShow="open"
cellRenderer={RichGridDeclarativeExample.dateCellRenderer} />
</AgGridColumn>
<AgGridColumn headerName="IT Skills">
<AgGridColumn field="skills" width={120} enableRowGroup enablePivot sortable={false}
cellRendererFramework={SkillsCellRenderer}
filterFramework={SkillsFilter}/>
cellRendererFramework={SkillsCellRenderer}
filterFramework={SkillsFilter} />
<AgGridColumn field="proficiency" width={160} enableValue
cellRendererFramework={ProficiencyCellRenderer}
filterFramework={ProficiencyFilter}/>
cellRendererFramework={ProficiencyCellRenderer}
filterFramework={ProficiencyFilter} />
</AgGridColumn>
<AgGridColumn headerName="Contact">
<AgGridColumn field="mobile" width={150} filter="text"/>
<AgGridColumn field="landline" width={150} filter="text"/>
<AgGridColumn field="address" width={500} filter="text"/>
<AgGridColumn field="mobile" width={150} filter="text" />
<AgGridColumn field="landline" width={150} filter="text" />
<AgGridColumn field="address" width={500} filter="text" />
</AgGridColumn>
</AgGridReact>
</div>

2
src-large-data/index.js
View File

@@ -5,7 +5,7 @@ import React from 'react';
import LargeGrid from './largeGrid.jsx';
import '@ag-grid-community/core/dist/styles/ag-grid.css';
import '@ag-grid-community/core/dist/styles/ag-theme-fresh.css';
import '@ag-grid-community/core/dist/styles/ag-theme-balham.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.

2
src-large-data/largeGrid.jsx
View File

@@ -63,7 +63,7 @@ export default class MyApp extends Component {
render() {
return (
<div style={{height: '100%'}} className="ag-theme-fresh">
<div style={{height: '100%'}} className="ag-theme-balham">
<AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.rowData} modules={AllModules}/>
</div>
);

2
src-trader-dashboard/components/FxQuoteMatrix.jsx
View File

@@ -61,7 +61,7 @@ class FxQuoteMatrix extends Component {
render() {
return (
<div style={{height: 410, width: 800}}
className="ag-theme-fresh">
className="ag-theme-balham">
<AgGridReact
// properties
columnDefs={this.state.columnDefs}

2
src-trader-dashboard/components/PriceChangesGrid.jsx
View File

@@ -152,7 +152,7 @@ export default class extends Component {
render() {
return (
<div style={{height: 410, width: 800}}
className="ag-theme-fresh">
className="ag-theme-balham">
<AgGridReact
// properties
columnDefs={this.state.columnDefs}

2
src-trader-dashboard/components/TopMoversGrid.jsx
View File

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

2
src-trader-dashboard/index.js
View File

@@ -9,7 +9,7 @@ import StoreService from './services/StoreService';
import TraderDashboard from "./components/TraderDashboard.jsx";
import "@ag-grid-enterprise/all-modules/dist/styles/ag-grid.css";
import "@ag-grid-enterprise/all-modules/dist/styles/ag-theme-fresh.css";
import "@ag-grid-enterprise/all-modules/dist/styles/ag-theme-balham.css";
let store = StoreService.STORE;