How to add click event to column header in ag-grid?

Question

I have a requirement of selecting the whole column when the column header is clicked. I am unable to find any solution for this as there is no 'click' event for columns in ag-grid. Only events that I could find were to 'sort' or 'pin' columns. I also want to have column data on click so that I can perform other task based on which column was selected. Attaching screenshot for better understanding.

Answer 1

Solved this by extracting col-id attribute from all the divs having class name 'ag-header-cell'.

this.colElements = Array.from(
  document.getElementsByClassName('ag-header-cell') as HTMLCollectionOf<
    HTMLElement
  >
);

And then adding click event listener on each item found. This will get us the col-id attribute when we click on column header.

this.colElements.forEach((elem, index) => {
  elem.addEventListener('click', () => {
    attribute = elem.getAttribute('col-id');
    //you can add you custom styling based on selected index here
  });
});

Next in the 'columnDefs' array we add custom 'cellStyle' by filtering cell items based on col-id we extracted.

columnDefs: [
      {
        headerName: 'State',
        field: 'dynamic',
        cellStyle: (params) => {
          if (params.colDef.field === this.selectedColId) {
            return { color: '#001D6D', backgroundColor: '#F3F7FF' };
          }
          return null;
        },
      },
    ],

Finally on every click event of event listener, we add 'redrawRow' function.

columnSelected(colId) {
  this.gridOptions.api.redrawRows();
}