CODEWITHSUNDEEP
ag-gridag-grid-angular
Tom O'Brien
Tom O'Brien

Reputation: 1831

How to style AG-GRID column vertical borders

I want my AG-Grid columns to have vertical borders. By default the grid rows have horizontal borders. I want it to mimic the regular Excel spreadsheet look and feel.

I have tried using cell-styling in the column definitions like so:

this.columnDefs = [
  { headerName: 'Test', cellStyle: {'border-right-color': '#e2e2e2'}, field: 'test' }];

This does the trick. But when I click on a cell to edit, the blue border it puts on the active cell is overwritten by the cellstyling above, so i get a cell with 3 blue borders and 1 grey border.

This can't be the correct approach for this....

Has anybody any ideas? I've attempted to do some CSS styling, but have gotten nowhere as it seems to be insanely difficult to figure out which classes to overwrite.

Upvotes: 7

Views: 31638

Answers (2)

Bakr
Bakr

Reputation: 91

.ag-theme-alpine {
  --ag-cell-horizontal-border: var(--ag-row-border-width)
    var(--ag-row-border-style) var(--ag-row-border-color); /* Add left and right borders to each cell and use row border's properties  */
  --ag-header-column-separator-display: block;
}

ag-grid reference css variables

Upvotes: 7

Sergey_M
Sergey_M

Reputation: 511

it is better done by styling the ag-grid theme. Here are docs about it https://www.ag-grid.com/javascript-grid-themes-customising/

And I made a simple Stackblitz with borders Borders Example that you can check out.

Upvotes: 11

Related Questions