Adding space or margin around AG Grid Angular columns

Question

I am using AG Grid for Angular and community edition. I am trying to add space or marge around the left and right side of the cell but nothing seems to be working. Here is the css I have tried.

.editableCell {
  background-color: rgba(255, 255, 255, 0.6);
  box-shadow: 2px 2px 2px -1px rgba(0, 0, 0, 0.4);
  border: 0.5px solid rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  box-sizing: border-box!important; /* To maintain cell size including padding and border */
  margin: 5px!important;

}

Even After this, it looks like this.

Answer 1

As far as I can see, .ag-cell cells are built with position: absolute; and have a hard left and width.
So in your case the easiest thing to do would be to turn off columnBorder and rowBorder and add styles to ::before pseudo-element:

.ag-cell {
  border: 0 !important;
  &:before {
    content: '';
    position: absolute;
    inset: 2px 4px; // your space
    pointer-events: none;
    border-radius: 8px;
    border: solid 1px #ccc;
    transition: border-color 0.2s;
  }
  &.ag-cell-focus {
    &:before {
      border-color: blue;
    }
  }
}