Compare commits
22 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c338f851e0 | ||
|
|
58df719d45 | ||
|
|
2b6e3e8f41 | ||
|
|
f470a4c33d | ||
|
|
b51caf4746 | ||
|
|
30746397ef | ||
|
|
4998a51817 | ||
|
|
518a95ee89 | ||
|
|
3debbabe28 | ||
|
|
550f6c4077 | ||
|
|
99bc479b60 | ||
|
|
f5c1a4ba17 | ||
|
|
168a127e51 | ||
|
|
f9b1f8527a | ||
|
|
eee938e0e7 | ||
|
|
449a88e832 | ||
|
|
60181add9a | ||
|
|
847005c758 | ||
|
|
172c2a05b0 | ||
|
|
badb5ea485 | ||
|
|
c3af000642 | ||
|
|
7b6b609cdf |
@@ -3,42 +3,49 @@ const path = require('path');
|
||||
const SRC_DIR = path.resolve(__dirname, '../src-examples');
|
||||
|
||||
module.exports = {
|
||||
mode: 'production',
|
||||
entry: SRC_DIR + "/index.js",
|
||||
output: {
|
||||
path: path.resolve(__dirname, '../'),
|
||||
filename: "dist/react-examples.js"
|
||||
},
|
||||
module: {
|
||||
loaders: [
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
loader: "style!css"
|
||||
loader: "style-loader!css-loader"
|
||||
},
|
||||
{
|
||||
test: /\.js$|\.jsx$/,
|
||||
include: SRC_DIR,
|
||||
loader: 'babel-loader',
|
||||
query: {
|
||||
presets: ['react', 'es2015', 'stage-0']
|
||||
presets: ['@babel/preset-react', '@babel/preset-env'],
|
||||
plugins: [
|
||||
require('@babel/plugin-proposal-function-bind'),
|
||||
require('@babel/plugin-proposal-class-properties')
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
|
||||
loader: 'file?name=[path]/[name].[ext]'
|
||||
loader: 'file-loader?name=[path]/[name].[ext]'
|
||||
}
|
||||
]
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
"ag-grid": path.resolve('./node_modules/ag-grid'),
|
||||
"ag-grid-community": path.resolve('./node_modules/ag-grid-community'),
|
||||
"ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'),
|
||||
react: path.resolve('./node_modules/react')
|
||||
},
|
||||
extensions: ['', '.js', '.jsx']
|
||||
extensions: ['.js', '.jsx']
|
||||
},
|
||||
performance: {
|
||||
hints: false
|
||||
},
|
||||
devServer: {
|
||||
historyApiFallback: true,
|
||||
contentBase: './',
|
||||
hot: true
|
||||
port: 8080,
|
||||
historyApiFallback: true
|
||||
}
|
||||
};
|
||||
@@ -3,33 +3,44 @@ const path = require('path');
|
||||
const SRC_DIR = path.resolve(__dirname, '../src-large-data');
|
||||
|
||||
module.exports = {
|
||||
mode: 'production',
|
||||
entry: SRC_DIR + "/index.js",
|
||||
output: {
|
||||
path: path.resolve(__dirname, '../'),
|
||||
filename: "dist/react-large.js"
|
||||
},
|
||||
module: {
|
||||
loaders: [
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
loader: "style!css"
|
||||
loader: "style-loader!css-loader"
|
||||
},
|
||||
{
|
||||
test: /\.js$|\.jsx$/,
|
||||
include: SRC_DIR,
|
||||
loader: 'babel-loader',
|
||||
query: {
|
||||
presets: ['react', 'es2015', 'stage-0']
|
||||
presets: ['@babel/preset-react', '@babel/preset-env'],
|
||||
plugins: [
|
||||
require('@babel/plugin-proposal-function-bind'),
|
||||
require('@babel/plugin-proposal-class-properties')
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
"ag-grid": path.resolve('./node_modules/ag-grid'),
|
||||
"ag-grid-community": path.resolve('./node_modules/ag-grid-community'),
|
||||
"ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'),
|
||||
react: path.resolve('./node_modules/react')
|
||||
},
|
||||
extensions: ['', '.js', '.jsx']
|
||||
extensions: ['.js', '.jsx']
|
||||
},
|
||||
performance: {
|
||||
hints: false
|
||||
},
|
||||
devServer: {
|
||||
port: 8080,
|
||||
}
|
||||
};
|
||||
@@ -3,33 +3,44 @@ const path = require('path');
|
||||
const SRC_DIR = path.resolve(__dirname, '../src-trader-dashboard');
|
||||
|
||||
module.exports = {
|
||||
mode: 'production',
|
||||
entry: SRC_DIR + "/index.js",
|
||||
output: {
|
||||
path: path.resolve(__dirname, '../'),
|
||||
filename: "dist/react-trader.js"
|
||||
},
|
||||
module: {
|
||||
loaders: [
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
loader: "style!css"
|
||||
loader: "style-loader!css-loader"
|
||||
},
|
||||
{
|
||||
test: /\.js$|\.jsx$/,
|
||||
include: SRC_DIR,
|
||||
loader: 'babel-loader',
|
||||
query: {
|
||||
presets: ['react', 'es2015', 'stage-0']
|
||||
presets: ['@babel/preset-react', '@babel/preset-env'],
|
||||
plugins: [
|
||||
require('@babel/plugin-proposal-function-bind'),
|
||||
require('@babel/plugin-proposal-class-properties')
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
"ag-grid": path.resolve('./node_modules/ag-grid'),
|
||||
"ag-grid-community": path.resolve('./node_modules/ag-grid-community'),
|
||||
"ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'),
|
||||
react: path.resolve('./node_modules/react')
|
||||
},
|
||||
extensions: ['', '.js', '.jsx']
|
||||
extensions: ['.js', '.jsx']
|
||||
},
|
||||
performance: {
|
||||
hints: false
|
||||
},
|
||||
devServer: {
|
||||
port: 8080,
|
||||
}
|
||||
};
|
||||
63
package.json
63
package.json
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "ag-grid-react-example",
|
||||
"version": "18.1.0",
|
||||
"version": "19.1.2",
|
||||
"description": "Example Reach applicaiton using ag-Grid.",
|
||||
"main": "dist/ag-grid-react-example.js",
|
||||
"scripts": {
|
||||
"trader": "webpack-dev-server --content-base src-trader-dashboard/ --config config/webpack.config.trader.js --progress --colors --hot --inline",
|
||||
"examples": "webpack-dev-server --content-base src-examples/ --config config/webpack.config.examples.js --progress --colors --hot --inline",
|
||||
"large": "webpack-dev-server --content-base src-large-data/ --config config/webpack.config.large.js --progress --colors --hot --inline",
|
||||
"trader": "webpack-dev-server --content-base src-trader-dashboard/ --config config/webpack.config.trader.js --mode development --open",
|
||||
"examples": "webpack-dev-server --content-base src-examples/ --config config/webpack.config.examples.js --mode development --open",
|
||||
"large": "webpack-dev-server --content-base src-large-data/ --config config/webpack.config.large.js --mode development --open",
|
||||
"clean": "rimraf dist",
|
||||
"mkdirs": "mkdirp dist/trader/dist dist/examples/dist",
|
||||
"copy-examples": "ncp src-examples/images dist/examples/images && ncp src-examples/index.html dist/examples/index.html && ncp dist/react-examples.js dist/examples/dist/react-examples.js && ncp src-examples/ dist/examples/src",
|
||||
@@ -37,39 +37,36 @@
|
||||
},
|
||||
"homepage": "http://www.ag-grid.com/",
|
||||
"devDependencies": {
|
||||
"babel-core": "6.24.x",
|
||||
"babel-loader": "6.4.x",
|
||||
"babel-preset-es2015": "6.24.x",
|
||||
"babel-preset-react": "6.24.x",
|
||||
"babel-preset-stage-0": "6.24.x",
|
||||
"babel-preset-stage-1": "6.24.x",
|
||||
"css-loader": "0.23.x",
|
||||
"@babel/core": "7.1.2",
|
||||
"babel-loader": "8.0.4",
|
||||
"@babel/preset-env": "7.1.0",
|
||||
"@babel/preset-react": "7.0.0",
|
||||
"@babel/plugin-proposal-class-properties": "7.1.0",
|
||||
"@babel/plugin-proposal-function-bind": "7.0.0",
|
||||
"css-loader": "1.0.0",
|
||||
"file-loader": "2.0.0",
|
||||
"gulp": "3.9.1",
|
||||
"merge2": "^1.2.3",
|
||||
"mkdirp": "0.5.1",
|
||||
"ncp": "2.0.0",
|
||||
"prop-types": "15.6.0",
|
||||
"rimraf": "2.5.x",
|
||||
"style-loader": "0.13.x",
|
||||
"webpack": "1.12.x",
|
||||
"webpack-dev-server": "1.14.x",
|
||||
"gulp": "3.9.x",
|
||||
"gulp-typescript": "3.1.x",
|
||||
"merge2": "1.0.x",
|
||||
"typescript": "2.3.x"
|
||||
"prop-types": "15.6.2",
|
||||
"rimraf": "~2.6.2",
|
||||
"style-loader": "~0.23.0",
|
||||
"webpack": "^4.16.1",
|
||||
"webpack-cli": "^3.0.8",
|
||||
"webpack-dev-server": "^3.1.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"ag-grid": "^18.1.0",
|
||||
"ag-grid-enterprise": "^18.1.0",
|
||||
"ag-grid-react": "^18.1.0",
|
||||
"bootstrap": "3.3.7",
|
||||
"ag-grid-community": "^19.1.0",
|
||||
"ag-grid-enterprise": "^19.1.0",
|
||||
"ag-grid-react": "^19.1.0",
|
||||
"bootstrap": "4.1.3",
|
||||
"d3": "4.9.1",
|
||||
"file-loader": "0.11.1",
|
||||
"lodash": "4.17.4",
|
||||
"react": "16.0.0",
|
||||
"react-dom": "16.0.0",
|
||||
"react-dom-factories": "1.0.2",
|
||||
"react-redux": "5.0.x",
|
||||
"react-router-dom": "4.2.x",
|
||||
"redux": "3.6.x",
|
||||
"url-search-params-polyfill": "1.2.0"
|
||||
"lodash": "^4.17.11",
|
||||
"react": "^16.5.2",
|
||||
"react-dom": "^16.5.2",
|
||||
"react-redux": "5.0.7",
|
||||
"react-router-dom": "4.3.1",
|
||||
"redux": "^4.0.1"
|
||||
}
|
||||
}
|
||||
@@ -8,7 +8,7 @@ import SimpleReduxDynamicExample from "./simpleReduxDynamicComponentExample/Simp
|
||||
|
||||
const SideBar = () => (
|
||||
<div style={{float: "left", width: 335, marginRight: 25}}>
|
||||
<ul className="nav nav-pills nav-stacked">
|
||||
<ul className="nav nav-pills">
|
||||
<NavItem to='/rich-grid-declarative'>Rich Grid with Declarative Markup</NavItem>
|
||||
<NavItem to='/simple-redux-dynamic'>Simple Redux Dynamic Component Example</NavItem>
|
||||
</ul>
|
||||
|
||||
@@ -6,8 +6,8 @@ import {Link, Route} from 'react-router-dom'
|
||||
export default function NavItem({children, to, exact}) {
|
||||
return (
|
||||
<Route path={to} exact={exact} children={({match}) => (
|
||||
<li className={match ? 'active' : null}>
|
||||
<Link to={to}>{children}</Link>
|
||||
<li className="nav-item">
|
||||
<Link className={match ? 'nav-link active' : 'nav-link'} to={to}>{children}</Link>
|
||||
</li>
|
||||
)}/>
|
||||
)
|
||||
|
||||
@@ -16,6 +16,10 @@
|
||||
line-height: 1
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
div.card-body > a {
|
||||
margin-top: 5px
|
||||
}
|
||||
|
||||
@@ -4,8 +4,8 @@ import React from "react";
|
||||
import {render} from "react-dom";
|
||||
import {BrowserRouter} from "react-router-dom";
|
||||
|
||||
import "ag-grid/dist/styles/ag-grid.css";
|
||||
import "ag-grid/dist/styles/ag-theme-balham.css";
|
||||
import "ag-grid-community/dist/styles/ag-grid.css";
|
||||
import "ag-grid-community/dist/styles/ag-theme-balham.css";
|
||||
import "../node_modules/bootstrap/dist/css/bootstrap.css";
|
||||
|
||||
import App from "./App";
|
||||
|
||||
@@ -22,7 +22,7 @@ export default class RichGridDeclarativeExample extends Component {
|
||||
|
||||
this.state = {
|
||||
quickFilterText: null,
|
||||
showToolPanel: false,
|
||||
sideBar: false,
|
||||
rowData: new RowDataFactory().createRowData(),
|
||||
icons: {
|
||||
columnRemoveFromGroup: '<i class="fa fa-remove"/>',
|
||||
@@ -50,8 +50,8 @@ export default class RichGridDeclarativeExample extends Component {
|
||||
};
|
||||
|
||||
/* Demo related methods */
|
||||
onToggleToolPanel = (event) => {
|
||||
this.setState({showToolPanel: event.target.checked});
|
||||
onToggleSidebar = (event) => {
|
||||
this.setState({sideBar: event.target.checked});
|
||||
};
|
||||
|
||||
deselectAll() {
|
||||
@@ -142,8 +142,8 @@ export default class RichGridDeclarativeExample extends Component {
|
||||
<div style={{display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10}}>
|
||||
<div style={{float: "left"}}>
|
||||
<label>
|
||||
<input type="checkbox" onChange={this.onToggleToolPanel} style={{marginRight: 5}}/>
|
||||
Show Tool Panel
|
||||
<input type="checkbox" onChange={this.onToggleSidebar} style={{marginRight: 5}}/>
|
||||
Show Side Bar
|
||||
</label>
|
||||
</div>
|
||||
<div style={{float: "left", marginLeft: 20}}>
|
||||
@@ -157,7 +157,7 @@ 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 onClick={this.dobFilter} className="btn btn-primary">DOB equals to 01/01/2000
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -169,7 +169,7 @@ export default class RichGridDeclarativeExample extends Component {
|
||||
onCellClicked={this.onCellClicked}
|
||||
|
||||
// binding to simple properties
|
||||
showToolPanel={this.state.showToolPanel}
|
||||
sideBar={this.state.sideBar}
|
||||
quickFilterText={this.state.quickFilterText}
|
||||
|
||||
// binding to an object property
|
||||
@@ -232,7 +232,7 @@ export default class RichGridDeclarativeExample extends Component {
|
||||
</AgGridColumn>
|
||||
</AgGridReact>
|
||||
</div>
|
||||
<div>
|
||||
<div style={{marginTop: 10}}>
|
||||
<div className="row">
|
||||
<div className="col-sm-12"><h1>Rich Grid with Declarative Markup Example</h1></div>
|
||||
</div>
|
||||
@@ -247,10 +247,10 @@ export default class RichGridDeclarativeExample extends Component {
|
||||
All
|
||||
Rows
|
||||
(expand the Employee column to show the Country column first)</p>
|
||||
<p><span style={{fontWeight: 500}}>Toggle The Tool Panel</span>: Let your users Pivot,
|
||||
<p><span style={{fontWeight: 500}}>Toggle The Side Bar</span>: Let your users Pivot,
|
||||
Group
|
||||
and
|
||||
Aggregate using the Tool Panel</p>
|
||||
Aggregate using the Side Bar</p>
|
||||
<p><span style={{fontWeight: 500}}>Refresh Data</span>: Dynamically Update Grid Data</p>
|
||||
<p><span style={{fontWeight: 500}}>Quick Filter</span>: Perform Quick Grid Wide
|
||||
Filtering
|
||||
@@ -322,12 +322,11 @@ export default class RichGridDeclarativeExample extends Component {
|
||||
<div className="col-sm-4">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<h4 className="card-title">Tool Panel</h4>
|
||||
<h4 className="card-title">Side Bar</h4>
|
||||
<p className="card-text">Let your users Pivot, Group and Aggregate using the
|
||||
Tool
|
||||
Panel</p>
|
||||
<a target="_blank" href="https://www.ag-grid.com//javascript-grid-tool-panel/"
|
||||
className="btn btn-primary">Tool Panel</a>
|
||||
Side Bar</p>
|
||||
<a target="_blank" href="https://www.ag-grid.com//javascript-grid-side-bar/"
|
||||
className="btn btn-primary">Side Bar</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,13 @@
|
||||
import React, {Component} from "react";
|
||||
import * as PropTypes from "prop-types";
|
||||
|
||||
import {AgGridReact} from "ag-grid-react";
|
||||
import {connect} from "react-redux";
|
||||
|
||||
import PriceRenderer from "./PriceRenderer";
|
||||
|
||||
const ThemeContext = React.createContext('light');
|
||||
|
||||
/*
|
||||
* This component serves to display the row data (provided by redux)
|
||||
*/
|
||||
@@ -45,6 +48,9 @@ class GridComponent extends Component {
|
||||
columnDefs={this.state.columnDefs}
|
||||
rowData={this.props.rowData}
|
||||
|
||||
reactNext={true}
|
||||
reduxStore={this.context.store} // must be supplied when using redux with reactNext
|
||||
|
||||
// events
|
||||
onGridReady={this.onGridReady}>
|
||||
</AgGridReact>
|
||||
@@ -53,6 +59,10 @@ class GridComponent extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
GridComponent.contextTypes = {
|
||||
store: PropTypes.object // must be supplied when using redux with reactNext
|
||||
};
|
||||
|
||||
// pull off row data changes
|
||||
export default connect(
|
||||
(state) => {
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import React, {Component} from "react";
|
||||
import {connect} from "react-redux";
|
||||
|
||||
import FontContext from './fontContext'
|
||||
|
||||
class PriceRenderer extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@@ -18,7 +20,9 @@ class PriceRenderer extends Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<span>{this.props.currencySymbol}{this.state.convertedValue}</span>
|
||||
<FontContext.Consumer>
|
||||
{fontWeight => <span style={{fontWeight}}> {this.props.currencySymbol}{this.state.convertedValue}</span> }
|
||||
</FontContext.Consumer>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -33,5 +37,8 @@ export default connect(
|
||||
currencySymbol: state.currencySymbol,
|
||||
exchangeRate: state.exchangeRate
|
||||
}
|
||||
}
|
||||
},
|
||||
null,
|
||||
null,
|
||||
{withRef: true} // must be supplied for react/redux when using GridOptions.reactNext
|
||||
)(PriceRenderer);
|
||||
@@ -9,6 +9,8 @@ import GridComponent from "./GridComponent";
|
||||
|
||||
import gridData from "./gridDataReducer";
|
||||
|
||||
import FontContext from './fontContext'
|
||||
|
||||
let store = createStore(gridData);
|
||||
|
||||
/*
|
||||
@@ -26,7 +28,9 @@ export default class SimpleReduxExample extends Component {
|
||||
<div>
|
||||
<h1>Simple Redux Example using Connected React Components</h1>
|
||||
<HeaderComponent/>
|
||||
<FontContext.Provider value="bold">
|
||||
<GridComponent/>
|
||||
</FontContext.Provider>
|
||||
</div>
|
||||
</Provider>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
import React from "react";
|
||||
|
||||
export default React.createContext('normal');
|
||||
@@ -4,8 +4,8 @@ import ReactDOM from 'react-dom';
|
||||
import React from 'react';
|
||||
import LargeGrid from './largeGrid.jsx';
|
||||
|
||||
import 'ag-grid/dist/styles/ag-grid.css';
|
||||
import 'ag-grid/dist/styles/theme-fresh.css';
|
||||
import 'ag-grid-community/dist/styles/ag-grid.css';
|
||||
import 'ag-grid-community/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.
|
||||
|
||||
@@ -61,7 +61,7 @@ export default class MyApp extends Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div style={{height: '100%'}} className="ag-fresh">
|
||||
<div style={{height: '100%'}} className="ag-theme-fresh">
|
||||
<AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.rowData}/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -3,9 +3,6 @@ import {connect} from "react-redux";
|
||||
|
||||
import {AgGridReact} from "ag-grid-react";
|
||||
|
||||
import assign from "lodash/assign";
|
||||
import uniq from "lodash/uniq";
|
||||
|
||||
class FxQuoteMatrix extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@@ -60,7 +57,7 @@ class FxQuoteMatrix extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div style={{height: 410, width: 800}}
|
||||
className="ag-fresh">
|
||||
className="ag-theme-fresh">
|
||||
<AgGridReact
|
||||
// properties
|
||||
columnDefs={this.state.columnDefs}
|
||||
|
||||
@@ -24,21 +24,21 @@ export default class extends Component {
|
||||
field: 'price',
|
||||
headerName: 'Price',
|
||||
valueFormatter: this.numberFormatter,
|
||||
cellRenderer: 'animateShowChange',
|
||||
cellRenderer: 'agAnimateShowChangeCellRenderer',
|
||||
cellStyle: {'text-align': 'right'}
|
||||
},
|
||||
{
|
||||
field: 'bid',
|
||||
headerName: 'Bid',
|
||||
valueFormatter: this.numberFormatter,
|
||||
cellRenderer: 'animateShowChange',
|
||||
cellRenderer: 'agAnimateShowChangeCellRenderer',
|
||||
cellStyle: {'text-align': 'right'}
|
||||
},
|
||||
{
|
||||
field: 'ask',
|
||||
headerName: 'Ask',
|
||||
valueFormatter: this.numberFormatter,
|
||||
cellRenderer: 'animateShowChange',
|
||||
cellRenderer: 'agAnimateShowChangeCellRenderer',
|
||||
cellStyle: {'text-align': 'right'}
|
||||
}
|
||||
]
|
||||
@@ -151,7 +151,7 @@ export default class extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div style={{height: 410, width: 800}}
|
||||
className="ag-fresh">
|
||||
className="ag-theme-fresh">
|
||||
<AgGridReact
|
||||
// properties
|
||||
columnDefs={this.state.columnDefs}
|
||||
|
||||
@@ -17,21 +17,21 @@ class TopMoversGrid extends Component {
|
||||
field: 'last',
|
||||
headerName: 'Last',
|
||||
headerClass: 'align-right',
|
||||
cellRenderer: 'animateShowChange',
|
||||
cellRenderer: 'agAnimateShowChangeCellRenderer',
|
||||
cellClass: 'align-right'
|
||||
},
|
||||
{
|
||||
field: 'net',
|
||||
headerName: 'Net',
|
||||
headerClass: 'align-right',
|
||||
cellRenderer: 'animateShowChange',
|
||||
cellRenderer: 'agAnimateShowChangeCellRenderer',
|
||||
cellClass: 'align-right'
|
||||
},
|
||||
{
|
||||
field: 'pct_net_change',
|
||||
headerName: '% NC',
|
||||
headerClass: 'align-right',
|
||||
cellRenderer: 'animateShowChange',
|
||||
cellRenderer: 'agAnimateShowChangeCellRenderer',
|
||||
cellClass: 'align-right',
|
||||
sort: 'desc',
|
||||
valueFormatter(params) {
|
||||
@@ -62,7 +62,7 @@ class TopMoversGrid extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div style={{height: 410, width: 400}}
|
||||
className="ag-fresh">
|
||||
className="ag-theme-fresh">
|
||||
<AgGridReact
|
||||
// properties
|
||||
columnDefs={this.state.columnDefs}
|
||||
|
||||
@@ -5,8 +5,8 @@ import {render} from "react-dom";
|
||||
|
||||
import {Provider} from "react-redux";
|
||||
|
||||
import "ag-grid/dist/styles/ag-grid.css";
|
||||
import "ag-grid/dist/styles/theme-fresh.css";
|
||||
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";
|
||||
|
||||
@@ -120,7 +120,7 @@ const FX_DELTA_HEADERS = [
|
||||
field: 'last',
|
||||
headerName: 'Last',
|
||||
headerClass: 'align-right',
|
||||
cellRenderer: 'animateShowChange',
|
||||
cellRenderer: 'agAnimateShowChangeCellRenderer',
|
||||
cellClass: 'align-right',
|
||||
width: 100
|
||||
},
|
||||
@@ -128,7 +128,7 @@ const FX_DELTA_HEADERS = [
|
||||
field: 'net',
|
||||
headerName: 'Net',
|
||||
headerClass: 'align-right',
|
||||
cellRenderer: 'animateShowChange',
|
||||
cellRenderer: 'agAnimateShowChangeCellRenderer',
|
||||
cellClass: 'align-right',
|
||||
width: 90
|
||||
},
|
||||
@@ -145,7 +145,7 @@ const FX_DELTA_HEADERS = [
|
||||
headerName: symbol,
|
||||
width: 67,
|
||||
cellClass: 'align-right',
|
||||
cellRenderer: 'animateShowChange',
|
||||
cellRenderer: 'agAnimateShowChangeCellRenderer',
|
||||
cellClassRules: {
|
||||
'fx-positive': 'x > 0.8',
|
||||
'fx-null': 'x === null',
|
||||
|
||||
Reference in New Issue
Block a user