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

Release 22.0.0

Browse Source
This commit is contained in:
Sean Landsman
2019-11-11 14:48:41 +00:00
parent 66580db71c 5ad3592fed
commit 67fdecbe51
23 changed files with 105 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
config/webpack.config.examples.js
View File

@@ -35,8 +35,9 @@ module.exports = {
},
resolve: {
alias: {
"ag-grid-community": path.resolve('./node_modules/ag-grid-community'),
"ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'),
// "@ag-grid-community/core/modules": path.resolve('./node_modules/@ag-grid-community/core/dist/es2015/modules'),
"@ag-grid-community/core": path.resolve('./node_modules/@ag-grid-community/core'),
// "ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'),
react: path.resolve('./node_modules/react')
},
extensions: ['.js', '.jsx']
@@ -48,4 +49,4 @@ module.exports = {
port: 8080,
historyApiFallback: true
}
};
};

4
config/webpack.config.large.js
View File

@@ -31,7 +31,7 @@ module.exports = {
},
resolve: {
alias: {
"ag-grid-community": path.resolve('./node_modules/ag-grid-community'),
"@ag-grid-community/core": path.resolve('./node_modules/@ag-grid-community/core'),
"ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'),
react: path.resolve('./node_modules/react')
},
@@ -43,4 +43,4 @@ module.exports = {
devServer: {
port: 8080,
}
};
};

4
config/webpack.config.trader.js
View File

@@ -31,7 +31,7 @@ module.exports = {
},
resolve: {
alias: {
"ag-grid-community": path.resolve('./node_modules/ag-grid-community'),
"@ag-grid-community/core": path.resolve('./node_modules/@ag-grid-community/core'),
"ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'),
react: path.resolve('./node_modules/react')
},
@@ -43,4 +43,4 @@ module.exports = {
devServer: {
port: 8080,
}
};
};

12
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "ag-grid-react-example",
"version": "21.2.0",
"version": "22.0.0",
"description": "Example Reach applicaiton using ag-Grid.",
"main": "dist/ag-grid-react-example.js",
"scripts": {
@@ -38,13 +38,14 @@
},
"homepage": "http://www.ag-grid.com/",
"devDependencies": {
"@ag-grid-community/core": "~22.0.0",
"@babel/core": "7.4.4",
"@babel/plugin-proposal-class-properties": "7.4.4",
"@babel/plugin-proposal-function-bind": "7.2.0",
"@babel/preset-env": "7.4.4",
"@babel/preset-react": "7.0.0",
"@types/react": "16.8.17",
"@types/react-dom": "16.8.4",
"@types/react": "16.9.2",
"@types/react-dom": "16.9.0",
"babel-loader": "8.0.6",
"css-loader": "2.1.1",
"file-loader": "3.0.1",
@@ -61,9 +62,8 @@
"webpack-dev-server": "3.4.1"
},
"dependencies": {
"ag-grid-community": "^21.0.0",
"ag-grid-enterprise": "^21.0.0",
"ag-grid-react": "^21.0.0",
"@ag-grid-enterprise/all-modules": "~22.0.0",
"@ag-grid-community/react": "~22.0.0",
"bootstrap": "4.3.1",
"d3": "4.9.1",
"lodash": "4.17.11",

1
src-examples/App.jsx
View File

@@ -2,7 +2,6 @@ import React, {Component} from "react";
import {Redirect, Route, Switch} from "react-router-dom";
import NavItem from "./NavItem";
import RichGridDeclarativeExample from "./richGridDeclarativeExample/RichGridDeclarativeExample";
import SimpleReduxDynamicExample from "./simpleReduxDynamicComponentExample/SimpleReduxExample";
import SimpleReduxHookExample from "./simpleReduxHooksExample/SimpleReduxHookExample";

6
src-examples/index.js
View File

@@ -4,14 +4,14 @@ import React from "react";
import {render} from "react-dom";
import {BrowserRouter} from "react-router-dom";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";
import "@ag-grid-enterprise/all-modules/dist/styles/ag-grid.css";
import "@ag-grid-enterprise/all-modules/dist/styles/ag-theme-balham.css";
import "../node_modules/bootstrap/dist/css/bootstrap.css";
import App from "./App";
// only required when using enterprise features
// import {LicenseManager} from "ag-grid-enterprise/main";
// import {LicenseManager} from "@ag-grid-enterprise/all-modules";
// LicenseManager.setLicenseKey("<your license key>");
document.addEventListener('DOMContentLoaded', () => {

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

@@ -1,5 +1,5 @@
import React, {Component} from "react";
import {AgGridColumn, AgGridReact} from "ag-grid-react";
import {AgGridColumn, AgGridReact} from "@ag-grid-community/react";
import RowDataFactory from "./RowDataFactory";
import DateComponent from "./DateComponent.jsx";
import SkillsCellRenderer from './SkillsCellRenderer.jsx';
@@ -12,8 +12,12 @@ 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";
// for community features
// import {AllCommunityModules} from "@ag-grid-community/all-modules";
// for enterprise features
import {AllModules} from "@ag-grid-enterprise/all-modules";
export default class RichGridDeclarativeExample extends Component {
constructor(props) {
@@ -193,6 +197,9 @@ export default class RichGridDeclarativeExample extends Component {
// binding to array properties
rowData={this.state.rowData}
// register all modules (row model, csv/excel, row grouping etc)
modules={AllModules}
// no binding, just providing hard coded strings for the properties
// boolean properties will default to true if provided (ie suppressRowClickSelection => suppressRowClickSelection="true")
suppressRowClickSelection

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

@@ -1,7 +1,6 @@
import React, {Component} from "react";
import {connect} from "react-redux";
import {AgGridReact} from "ag-grid-react";
import {AgGridReact} from "@ag-grid-community/react";
import PriceRenderer from "./PriceRenderer";
@@ -45,8 +44,6 @@ class GridComponent extends Component {
columnDefs={this.state.columnDefs}
rowData={this.props.rowData}
reactNext={true}
// events
onGridReady={this.onGridReady}>
</AgGridReact>
@@ -62,4 +59,4 @@ export default connect(
rowData: state.rowData
}
}
)(GridComponent);
)(GridComponent);

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

@@ -1,7 +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";
import {setCurrency, updateRowData} from "./gridDataActions";

4
src-examples/simpleReduxDynamicComponentExample/PriceRenderer.jsx
View File

@@ -41,5 +41,5 @@ export default connect(
},
null,
null,
{forwardRef: true} // must be supplied for react/redux when using GridOptions.reactNext
)(PriceRenderer);
{forwardRef: true} // must be supplied for react/redux when using AgGridReact
)(PriceRenderer);

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

@@ -1,8 +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";
import HeaderComponent from "./HeaderComponent";
import GridComponent from "./GridComponent";

6
src-examples/simpleReduxHooksExample/GridComponent.jsx
View File

@@ -1,6 +1,6 @@
import React, { useContext } from "react";
import React, {useContext} from "react";
import {Context} from "./store";
import {AgGridReact} from "ag-grid-react";
import {AgGridReact} from "@ag-grid-community/react";
/*
* This component serves to display the row data (provided by redux)
@@ -22,7 +22,7 @@ export default function GridComponent() {
columnDefs={columnDefs}
rowData={rowData}
reactNext={true}
defaultColDef={{filter: true}}
// events
onGridReady={onGridReady}>

18
src-examples/simpleReduxHooksExample/PriceEditor.jsx Normal file
View File

@@ -0,0 +1,18 @@
import React, {useEffect, forwardRef, useImperativeHandle, useRef} from "react";
export default forwardRef((props, ref) => {
const inputRef = useRef();
useImperativeHandle(ref, () => {
return {
getValue: () => {
return inputRef.current.value;
}
};
});
useEffect(() => {
// https://github.com/facebook/react/issues/7835#issuecomment-395504863
setTimeout(() => inputRef.current.focus(), 10)
}, []);
return <input type="text" ref={inputRef} defaultValue={props.value}/>;
})

18
src-examples/simpleReduxHooksExample/PriceFilter.jsx Normal file
View File

@@ -0,0 +1,18 @@
import React, {forwardRef, useImperativeHandle, useRef} from "react";
export default forwardRef((props, ref) => {
const inputRef = useRef();
useImperativeHandle(ref, () => {
return {
isFilterActive() {
return inputRef.current.value !== '';
},
doesFilterPass: (params) => {
return params.data.price.toString() === inputRef.current.value;
}
};
});
return <input type="text" ref={inputRef} onChange={() => props.filterChangedCallback()}/>;
})

8
src-examples/simpleReduxHooksExample/store.js
View File

@@ -1,15 +1,21 @@
import React from "react";
import PriceRenderer from "./PriceRenderer";
import PriceEditor from "./PriceEditor";
import PriceFilter from "./PriceFilter";
export const initialState = {
rowData: [],
columnDefs: [
{
field: 'symbol'
field: 'symbol',
editable: true
},
{
field: 'price',
cellClass: 'align-right',
editable: true,
cellEditorFramework: PriceEditor,
filterFramework: PriceFilter,
cellRendererFramework: PriceRenderer
}
]

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

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

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

@@ -1,10 +1,12 @@
import React, {Component} from 'react';
import SimpleCellRenderer from './simpleCellRenderer.jsx';
import {AgGridReact} from '@ag-grid-community/react';
import {AgGridReact} from 'ag-grid-react';
// for community features
import {AllModules} from "@ag-grid-enterprise/all-modules";
// put this line in to use ag-Grid enterprise
// import 'ag-grid-enterprise';
// for enterprise features
// import {AllModules} from "@ag-grid-enterprise/all-modules";
export default class MyApp extends Component {
@@ -62,7 +64,7 @@ export default class MyApp extends Component {
render() {
return (
<div style={{height: '100%'}} className="ag-theme-fresh">
<AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.rowData}/>
<AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.rowData} modules={AllModules}/>
</div>
);
}

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

@@ -1,7 +1,9 @@
import React, {Component} from "react";
import {connect} from "react-redux";
import {AgGridReact} from "ag-grid-react";
import {AgGridReact} from "@ag-grid-community/react";
import {ClientSideRowModelModule} from "@ag-grid-enterprise/all-modules";
class FxQuoteMatrix extends Component {
constructor(props) {
@@ -71,6 +73,8 @@ class FxQuoteMatrix extends Component {
// callbacks
getRowNodeId={this.getRowNodeId}
modules={[ClientSideRowModelModule]}
// events
onGridReady={this.onGridReady}>
</AgGridReact>
@@ -85,4 +89,4 @@ export default connect(
rowData: state ? state.fxData : null
}
}
)(FxQuoteMatrix);
)(FxQuoteMatrix);

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

@@ -1,6 +1,7 @@
import React, {Component} from "react";
import {AgGridReact} from "ag-grid-react";
import {AgGridReact} from "@ag-grid-community/react";
import {ClientSideRowModelModule} from "@ag-grid-enterprise/all-modules";
import map from "lodash/map";
import difference from "lodash/difference";
@@ -160,6 +161,8 @@ export default class extends Component {
}}
rowSelection="single"
modules={[ClientSideRowModelModule]}
// callbacks
getRowNodeId={this.getRowNodeId}
@@ -170,4 +173,4 @@ export default class extends Component {
</div>
);
}
}
}

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

@@ -1,7 +1,8 @@
import React, {Component} from "react";
import {connect} from "react-redux";
import {AgGridReact} from "ag-grid-react";
import {AgGridReact} from "@ag-grid-community/react";
import {ClientSideRowModelModule} from "@ag-grid-enterprise/all-modules";
class TopMoversGrid extends Component {
constructor(props) {
@@ -75,6 +76,8 @@ class TopMoversGrid extends Component {
deltaRowDataMode
getRowNodeId={this.getRowNodeId}
modules={[ClientSideRowModelModule]}
// events
onGridReady={this.onGridReady}>
</AgGridReact>

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

@@ -5,12 +5,12 @@ import {render} from "react-dom";
import {Provider} from "react-redux";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-fresh.css";
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";
let store = StoreService.STORE;
document.addEventListener('DOMContentLoaded', () => {

2
ts-tests/InvalidGridProperty.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react';
import {AgGridReact} from 'ag-grid-react';
import {AgGridReact} from '@ag-grid-community/react';
export const App: React.FunctionComponent = () => <AgGridReact invalidProperty columnDefs={[]} rowData={[]}/>;

2
ts-tests/SimpleFunctionalGrid.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react';
import {AgGridReact} from 'ag-grid-react';
import {AgGridReact} from '@ag-grid-community/react';
export const App: React.FunctionComponent = () => <AgGridReact columnDefs={[]} rowData={[]}/>;