Ag-Grid: Modify a single column header's css/style?

Question

I have two different columns and would like them to appear as 1 single column. To give that illusion I used the cellStyle to set 'border-right':'none' for the cells on the left column, however, for the header I'm finding out it is not as easy.

I've tried using headerComponentParams and adding a custom template, but there is way too much HTML that is needed in order to remove the right border.

I have tried applying CSS to the component I am working in directly, but I am finding that the attributes are not very descriptive, and I end up editing all of the headers.

The functionality of columns alone work very well, one being a chevron which needs to expand and collapse additional rows. I may need to hide this chevron as needed. Any idea on what I could do?

Answer 1

Column Grouping without the child headers is what can be useful for you.

In your column defs, define the 2 child columns as you would normally like this -

this.columnDefs = [
  {
    headerName: "Athlete Country",
    children: [
      {
        headerName: "Athlete",
        field: "athlete",
        width: 150,
      },
      {
        headerName: "Country",
        field: "country",
        width: 120
      }
    ]
  }]

And in your onGridReady

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    this.gridApi.setHeaderHeight(0);
    this.gridApi.setGroupHeaderHeight(30);
}

Based on the example here