(ag-grid) Animate dynamically added columns

Question

As we can see on https://www.ag-grid.com/javascript-grid-column-menu/, when the user checks/unchecks a column from the menu, the grid animates the other columns.

I'm introducing some columns dynamically, by using columnDefs:

this.columnDefs = [
  { headerName: 'Name', field: 'name', width: 200 },
  { headerName: 'S01F01', hide: this.solver !== 'solver1', field: 'age', width: 90, suppressToolPanel: true },
  ...
];

I've bound the hide/show flag to buttons on the UI that will bring a set of columns into the grid when needed. Although the columns show up appropriately, they simply appear instead of animating into the grid. I understand this is because I'm simply updating the columnDefs for the whole grid every time the user clicks the button.

Is there a way for me to display these columns on the click of the button while at the same time triggering the animation?

Pratik Bhat Pratik Bhat · Accepted Answer · 2018-10-24T03:06:04

Unless you have this grid property suppressColumnMoveAnimation=true, the columns should have animation on by default.
As per docs

Column animations are on by default, row animations are off by default. This is to keep with what is expected to be the most common configuration as default.

(ag-grid) Animate dynamically added columns

1 Answers