What is the proper way to add vertical column lines between cells in angular AG Grid?

Question

Using Angular 11 and AG Grid.

I'd like to turn on vertical column lines between the cells. I see that I can style my own cells with cellStyle or cellClass … but is this the appropriate way to do it?

I could style something like …

{ border-right: 1px solid; }

Is there not an API/option to toggle an option like this on/off? Doesn't make sense that row lines are automatic but column lines need to be manually styled. How am I supposed to know what the row color is to match it?

Answer 1

I had the same issue. And I came to the same conclusion - that I had to include a style to achieve this as I couldn't find an option to toggle them on.

Instead of styling the cells with my own class, I overrode all the cells with an appropriate colour:

.ag-theme-balham .ag-header-cell,
.ag-theme-balham .ag-header-group-cell,
.ag-theme-balham .ag-ltr .ag-cell {
    border-right: 1px solid #D9DDDF;
}

(We've restyled the grid so alternate and selected rows are a different colour to standard, so this colour may not look correct for your colour scheme)