In the last video, we set up Redux with our grid and have store data displaying as rowData.
In this video, let's build some buttons above our grid that will dispatch actions to modify the data in the store. This will cause our grid data to update in real time.
First, add the four buttons above the AgGridReact component:
// src/FileView.js
<div id="myGrid" style={{ height: 450 }} className="ag-theme-balham">
<button onClick={() => this.addSize()}>Add 1 Size to Even Ids</button>
<button onClick={() => this.randomSize()}>Randomize Sizes</button>
<button onClick={() => this.newFile()}>Add File</button>
<button onClick={() => this.deleteFiles()}>Delete Files</button>
<AgGridReact
// all the props are unchanged
></AgGridReact>
</div>
We can now define our click handlers to call our actions (I put them after the onGridReady function). The first three are pretty straightforward:
// src/FileView.js
// rest unchanged
addSize = () => {
this.props.actions.addSize();
};
randomSize = () => {
this.props.actions.randomSize();
};
newFile = () => {
this.props.actions.newFile();
};
The deleteFiles function requires a little extra work to grab the row ids using the grid API:
// src/FileView.js
deleteFiles = () => {
let ids = [];
this.gridApi.forEachNode(node => {
if (node.isSelected()) {
ids.push(node.data.id);
}
});
this.props.actions.deleteFiles(ids);
};
If you run npm start and navigate to localhost:3000, you should now see the four buttons. Try each of them out! You can add a file, increase the size of even rows, randomize all of the sizes, and delete selected files. All of this is happening in the store, but ag-Grid is receiving those updates as they happen. Awesome!
You've reached the end of this tutorial on working with data in ag-Grid and React. Congratulations! Up next, we'll tackle Columns. See you there!