Search code examples
angularag-gridag-grid-angular

How to have separators between cells using balham theme?

I love AgGrid's Balham theme but I'd like to have separators between the cells. Just like the separators between the column's headers.

I am using AgGrid Enterprise 19.1.4 with Angular 7.

Can anyone help me?

Solution

  • You will need to put in some CSS to the ag-cell. Here is an example: https://plnkr.co/edit/EyJEtF7wzWsdpzCJFzGm?p=preview

    .ag-theme-balham .ag-ltr .ag-cell {
  border-right: 1px solid #aaa;
}

    The example uses CSS class selector .ag-theme-balham .ag-ltr .ag-cell as that is the CSS selector ag-Grid uses for border-right, so it overrides what the grid puts. If you want a simpler selector, just put !important to make sure the new CSS get's used and not the grids.

    You could also look at generating our own theme, explained here: https://www.ag-grid.com/javascript-grid-styling/

    However creating your own theme would be overkill just for adding a border.