Angular Grid ag-grid columnDefs Dynamically change

In ag-grid the columns in gridOptions are used once at grid initialisation. If you change the columns after initialisation, you must tell the grid. This is done by calling gridOptions.api.setColumnDefs()

Details of this api method are provided in the ag-grid documentation here.

I think this has been fixed already.

I am able to do something like this now with latest angular and ag-grid. Please note I am using ngxs here, however this still indicates the ability to get the column definitions async as I am getting the column defs based on the property names of the data that is being returned from the back-end in this case rowData.

Firstly, I am fetching the row data from the back-end API.Then when it is fetched I perform operations in the Select for column that map the headers from returned data to properties.

The data will not be displayed without headers, as soon as the headers are there it will redraw the grid with all the column definitions and data.

<ag-grid-angular     style="width: 100%; height: 500px;"     class="ag-theme-balham"    [rowData]="rowData$ | async"     [columnDefs]="columnsDefs$ | async"    ></ag-grid-angular>export class AgGridComponent {    @Select(MyState.getColumnDefs) public columnsDefs$!: Observable<ReadonlyArray<any>>;    @Select(MyState.getRowData) public rowData$!: Observable<ReadonlyArray<any>>;}

Angular.
See demo.

See the code below and note that the ag-grid-angular component has its columnDefs bound to a property in our component of the same name.

<ag-grid-angular    #agGrid    style="width: 100%; height: 300px;"    id="myGrid"    class="ag-theme-alpine"    [columnDefs]="columnDefs"

Any updates to the columnDefs property in app.component will be reflected on our ag-Grid instance. For example, see how we set the initial column definitions in the app.component's constructor function:

constructor() {    this.columnDefs = colDefsAthleteExcluded;}

We can add or remove columns in our ag-Grid instance, simply by updating the columnDefs bound property, passing in a new set of column definitions.

• Columns that didn't exist previously will be added to the ag-Grid instance.

• Columns that are not included in the new set will be removed from the ag-Grid instance.

Please see the code for this below in the event handlers for the "Include Athlete Column" and "Exclude Athlete Column" buttons:

// removes the athlete columnonBtExcludeAthleteColumn() {    this.columnDefs = colDefsAthleteExcluded;}// adds the athlete columnonBtIncludeAthleteColumn() {    this.columnDefs = colDefsAthleteIncluded;}

To update existing column definitions, we first call the ag-Grid API method getColumnDefs() to get a reference to the grid's current columns. We then map over the columns, changing any desired properties before updating our columnDefs bound property.

ag-Grid will then match existing columns with those in our ag-Grid instance and update the columns that have changed.

Please see the code for this below in the event handlers for the "Set HeaderNames" and "Remove HeaderNames" buttons:

// sets each columns headerName propertysetHeaderNames() {    var columnDefs = this.gridApi.getColumnDefs();    columnDefs.forEach(function(colDef, index) {        colDef.headerName = "C" + index;    });    this.columnDefs = columnDefs;}// clears each columns headerName propertyremoveHeaderNames() {    var columnDefs = this.gridApi.getColumnDefs();    columnDefs.forEach(function(colDef, index) {        colDef.headerName = undefined;    });    this.columnDefs = columnDefs;}

React.
See demo.

When using React we have the option of declaring ag-Grid columns declaratively. In the example above you'll see that we're creating ag-Grid Columns by mapping over a state variable columns and returning a agGridColumn React component for each column definition, spreading props while doing so:

const App = () => {    const [columns, setColumns] = useState(colDefsAthleteExcluded);    return (        {columns.map(column => (            <AgGridColumn {...column} key={column.field} />        ))}

To add or remove columns, we simply have to call the setColumns setState method, passing in a new set of column definitions.

• Columns that didn't exist previously will be added to the ag-Grid instance.
• Columns that are not included in the new set will be removed from the ag-Grid instance.

Please see the code for this below in the event handlers for the "Include Athlete Column" and "Exclude Athlete Column" buttons:

// removes the athlete columnconst onBtExcludeAthleteColumn = () => {    setColumns(colDefsAthleteExcluded);};// adds the athlete columnconst onBtIncludeAthleteColumn = () => {    setColumns(colDefsAthleteIncluded);};

To update existing column definitions, we first call the ag-Grid API method getColumnDefs() to get a reference to the grid's current columns. We then map over the columns, changing any desired properties before calling setColumns and updating our columns state variable.

ag-Grid will then match existing columns with those in our ag-Grid instance and update the columns that have changed.

Please see the code for this below in the event handlers for the "Set HeaderNames" and "Remove HeaderNames" buttons:

// sets each columns headerName propertyconst setHeaderNames = () => {    const newColumns = gridApi.getColumnDefs();    newColumns.forEach((newColumn, index) => {        newColumn.headerName = "C" + index;    });    setColumns(newColumns);};// clears each columns headerName propertyconst removeHeaderNames = () => {    const newColumns = gridApi.getColumnDefs();    newColumns.forEach((newColumn, index) => {        newColumn.headerName = undefined;    });    setColumns(newColumns);};

Vue.
See demo.

Below you'll see that our ag-grid-vue component has its columnDefs bound to a property in our component of the same name.

<ag-grid-vue    style="width: 100%; height: 300px;"    class="ag-theme-alpine"    id="myGrid"    :columnDefs="columnDefs"

Any updates to the columnDefs property in Vue component will be reflected in our ag-Grid instance. For example, see how we set the initial column definitions in the beforeMount lifecycle method:

beforeMount() {     this.columnDefs = colDefsAthleteExcluded;}

To add or remove columns to our ag-Grid instance, we update the columnDefs bound property, passing in a new set of column definitions.

• Columns that didn't exist previously will be added to the ag-Grid instance.
• Columns that are not included in the new set will be removed from the ag-Grid instance.

Please see the code for this below in the event handlers for the "Include Athlete Column" and "Exclude Athlete Column" buttons:

// removes the athlete columnbtnExcludeAthleteColumn() {    this.columnDefs = colDefsAthleteExcluded;},  // adds the athlete columnbtnIncludeAthleteColumn() {    this.columnDefs = colDefsAthleteIncluded;}

To update existing column definitions, we first call the ag-Grid API method getColumnDefs() to get a reference to the grid's current columns. We then map over the columns, changing any desired properties before updating our columnDefs bound property.

ag-Grid will then match existing columns with those in our ag-Grid instance and update the columns that have changed.

Please see the code for this below in the event handlers for the "Set HeaderNames" and "Remove HeaderNames" buttons:

// sets each columns headerName propertysetHeaderNames() {    var columnDefs = this.gridApi.getColumnDefs();    columnDefs.forEach(function(colDef, index) {        colDef.headerName = "C" + index;    });    this.columnDefs = columnDefs;}// clears each columns headerName propertyremoveHeaderNames() {    var columnDefs = this.gridApi.getColumnDefs();    columnDefs.forEach(function(colDef, index) {        colDef.headerName = undefined;    });    this.columnDefs = columnDefs;}

Vanilla JS.
See demo.

When using vanilla JS, column definitions cannot be bound to a property within our application as JavaScript does not have a built-in mechanism for reactive data. Instead we use the ag-Grid API method setColumnDefs() to set and update our columns.

To add or remove columns to our ag-Grid instance, we call the setColumnDefs API, passing in a new set of column definitions.

• Columns that didn't exist previously will be added to the ag-Grid instance.
• Columns that are not included in the new set will be removed from the ag-Grid instance.

Please see the code for this below in the event handlers for the "Include Athlete Column" and "Exclude Athlete Column" buttons:

// removes athlete columnfunction onBtExcludeAthleteColumn() {    gridOptions.api.setColumnDefs(colDefsAthleteExcluded);}// adds athlete columnfunction onBtIncludeAthleteColumn() {    gridOptions.api.setColumnDefs(colDefsAthleteIncluded);}

To update existing column definitions, we first call the ag-Grid API method getColumnDefs() to get a reference to the grid's current columns. We then map over the columns, changing any desired properties before calling setColumnDefs(colDefs) and passing in the updated columns.

ag-Grid will then match existing columns with those in our ag-Grid instance and update the columns that have changed.

Please see the code for this below in the event handlers for the "Set HeaderNames" and "Remove HeaderNames" buttons:

// sets each columns headerName propertyfunction setHeaderNames() {    var columnDefs = gridOptions.api.getColumnDefs();    columnDefs.forEach(function(colDef, index) {        colDef.headerName = "C" + index;    });gridOptions.api.setColumnDefs(columnDefs);}// clears each columns headerName propertyfunction removeHeaderNames() {    var columnDefs = gridOptions.api.getColumnDefs();    columnDefs.forEach(function(colDef, index) {        colDef.headerName = undefined;    });    gridOptions.api.setColumnDefs(columnDefs);}

Read the full blog post on our website or check out our documentation for a great variety of scenarios you can implement with ag-Grid.

Ahmed Gadir | Developer @ ag-Grid