In this post we’ll go over how to bind and update column definitions in ag-Grid in each major framework. You’ll see how specific aspects of column state are preserved during these updates, allowing you to easily update columns without having to implement you own logic to reapply column state.
We demonstrate this in live examples in Angular, React, Vue.JS and JavaScript.
Note: As of ag-Grid version 24, there is no longer a need to set immutableColumns in your gridOptions (previously known as deltaColumnMode) as columns are reactive by default!
Contents
- Column State is maintained when updating columns
- Binding and Updating Column Definitions in Angular
- Binding and Updating Column Definitions in React
- Binding and Updating Column Definitions in Vue.js
- Binding and Updating Column Definitions in Vanilla JavaScript
Column State is maintained when updating columns
Whenever new column definitions are set in ag-Grid, specific aspects of state of the existing columns are automatically preserved. This allows you to easily update column definitions without having to write your own code to save and reapply column state.
Column state is kept for sorting, filtering, column width, pinned columns, column order etc. See the full list of stateful attributes of column definitions and how to save and apply column state in our documentation.
The GIF below shows how adding, removing and even updating columns does not reset column state - we sort the AGE column, resize the COUNTRY column, filter the SPORT column, and all this state is preserved when we add a new ATHLETE column or set header names by clicking the buttons above the grid.
#ag-grid #angular #columns #javascript #react #state #vuejs
