Change or Set Cell Class Dynamically in Ag Grid

Question

I have a Div whose size can vary (only div resize) based on user action (small & large view) and this div contain ag-grid.
Initially div/grid load in compress size so I have used class according to that like (small font-size, height, padding etc.) to remove scrolls
but I want when user enlarge the div size the class will swap with another class (large font-size, height etc.) but I couldn't find any grid api or method to set cellClass and headerClass dynamically.

One more thing can I update that in gridOptions and load grid according to new option.

Answer 1

Add a listener to gridSizeChanged event. In the listener, check for the window/div size and apply CSS classes accordingly.

var gridOptions = {
  ...
  onGridSizeChanged: onGridSizeChanged
};

function onGridSizeChanged(params) {
  let newClass = (css class for new width)
  gridOptions.api.getColumnDef(colId).headerClass = newClass;
  gridOptions.api.refreshHeader()
}