Ag grid display in grouping

Question

Attached my plunker link [https://plnkr.co/edit/lnF09XtK3eDo1a5v]

It works, however I wanted to remove line separator from group columns and keep group column data in center.

I tried with to update CSS as shown in plunker but still not coming in center

display:none, center

Current grid - [] 'image'

Answer 1

You could try overwrite this Ag-Grid Css rules:

.ag-row {
    border: transparent!important;
}

With that, you take the borders of the lines, and to add bottom borders for each cell, you could use the cellStyle function to your gridOptions:

cellStyle : params => (params.colDef.headerName === 'Country' || params.colDef.headerName === 'Year') && !params.value
? { borderBottom: 'solid transparent' }
: { border-bottom: '1px solid #dde2eb' }