Dynamic header name refresh with Ag-Grid

Question

I have a "select" column and I want to have the total of the current selected rows in the header name.

I am using headerValueGetter but the value is not refreshed when a new row is selected.

// in my colDef
headerValueGetter: params => `(${this.totalSelected})`

// methods
onSelectionChanged(event) {
  this.totalSelected = event.api.getSelectedNodes().length
},

totalSelected is a property of my Vue component and its value is updated when a new row is selected.

Any ideas how to accomplish this ?

Answer 1

Try refreshing the header manually in your selectionChanged-event:

onSelectionChanged(event) {
  this.totalSelected = event.api.getSelectedNodes().length;
  gridOption.api.refreshHeader();
},