This example application uses ag-Grid, material UI components, react and redux to simulate the interface of a simple trading platform, showcasing the lightning performance from ag-grid.
Please see the example below and feel free to play around with the features!
Lightning Performance Using React Renderers
Documentation: Updating Data
In this example, we were able to update each of the 50,000 rows 10 times, in 2550 milliseconds, you can see this for yourself by downloading and running this example from this repo.
Passing properties to React Renderers
Documentation: React Renderers
For the buy/sell/keep recommendations and the buy/sell buttons seen in the B/S/K column in the application, we created a react component.
Adding this component and hooking it up to the grid was as simple as registering the component and referencing it in the column definition.
When using the grid with react cell renderers it's possible to pass properties straight through them as you would in any react application. To do so, in this application we leveraged the Provider/Consumers components provided by React.
This can be seen in our Index.js and Buy/Sell/Keep renderer, which include the following lines of code:
The running and balance properties change when different actions are taken in the app, for example when you click 'run', all renderers will receive a property telling them that the application is running, so the buttons for BUY/SELL should be hidden.
If the user clicks stop, the opposite will happen and the buttons will be shown again.
Reading redux state from a renderer
At the top of the example we can see two sliders, these were created using the material UI library. They are used to choose in what quantity the user buys or sells stock when using the buy and sell buttons found in each row.
This is done by updating the redux store to reflect the new buy/sell amount when a slider is changed, this gives other components access to the updated value and allows it to be passed to the reducer method which are called when the buttons are clicked.
Editing in React
Documentation: Cell editing
This functionality is provided by the grid, so adding it to the application is as easy as adding the property "editable" to the column definition of the quantity column.
We used the onCellValueChanged event to listen for when the user changes the quantity of a row.
Editing a quantity results in the application working out the amount of stocks the user would need to buy or sell to make the quantity correct and then performing that transaction.
Note, that in this example we're using default cell editors however, it would be possible to cancel the edit instead of changing the quantity value back manually after the edit, if we were to create our own custom cell editors.
Miscellaneous Grid Features:
Documentation: (Row Grouping, Floating Filters and Side Bar, Show Change Cell Renderers):
We took advantage of how easily customisable the grid is, to add some more minor features to the application. All of these features can be found in the App.js file and are grid (found in the grid options) or column (found in the default column/column definitions) properties.
We added row grouping to show more clearly which countries owned which stocks.
We used a floating filter on the quantity and price columns to allow for the user to search for the quantities of stock they own already and search for the prices they want to buy stocks for.
We used a sidebar to allow the user to dynamically change the groupings or filter using a set filter on each column or pivot or even choose which columns they want to hide or show.
Finally, we used the provided show change cell renderer to show when prices are changed and how much they changed by, we think this gives the application a more authentic look.
For a more detailed look at the code or to run the application locally, please see the following Github repo: https://github.com/icedjello/redux-blog-trade-spoof and if this project has inspired you to create your own using ag-Grid, you might find the getting started guides helpful: (JS / React / Angular / Vue).