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.
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. Here's the content:
/* Add application styles & imports to this file! */
@import "ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin";
.ag-theme-alpine {
@include ag-theme-alpine((
// use theme parameters where possible
// Default border for cells. This can be used to specify the border-style and border-color properties e.g. `dashed red` but the border-width is fixed at 1px.
cell-horizontal-border: solid ag-derived(secondary-border-color),
));
.ag-header-cell {
// or write CSS selectors to make customisations beyond what the parameters support
border-right: 1px solid ag-param(secondary-border-color);
}
}