Updating Columns with State

Note: this video switches to the aggr-column-state project.

We've covered a lot of ground in this tutorial on columns. Let's finish it up by learning how to keep column definitions in a Redux store and update them using actions.

In this video, I first walk you through the setup of the aggr-column-state project. We covered setting up ag-Grid with Redux in Using ag-Grid with React: Data, so I don't spend any time here going back through that process.

We're storing our columnDefs in the Redux store and then changing them using three actions:

• one to hide some columns,
• one to abbreviate the header names, and
• one to group some rows together and add a "Group" column.

Let's add some buttons to dispatch those actions and update the grid.

We first need to create three helper functions:

// src/App.js
changeColumns = () => {
  this.props.actions.changeColumns();
};

updateHeaderName = () => {
  this.props.actions.updateHeaderName();
};

groupColumn = () => {
  this.props.actions.groupColumn();
};

Then, we can create three buttons above our AgGridReact component to use those functions:

// src/App.js
<button onClick={this.changeColumns}>Change Columns</button>
<button onClick={this.updateHeaderName}>Update Header Name</button>
<button onClick={this.groupColumn}>Group Column</button>

If you run npm start and navigate to localhost:3000, you can click the buttons and see the grid change. Pro tip: we're using the same logging middleware we used in the video on setting up ag-Grid with Redux. If you pop open the console, you'll see a nice log of all actions dispatched.

That's it for this tutorial on columns in ag-Grid with React. See you in the next tutorial, where you'll learn all about filters in ag-Grid!