How to add space between two rows of ag-grid in angular 2 ag-grid

Question

above image is like i want

but i used ag-grid so my output is coming like this below image

i am using ag- grid . i want more spce between 2 rows of grids,which shows that row is seperated.

 .ag-body-container .ag-row {
        margin-top:15px;
        border: 1px solid $white-three;
        background-color: #d8d8d8;
        border-radius: 4px;
        font-size: 12px;
        color: #505050;

i given this for grids row .but it take margin for all rows as 15px .but problem is that upper row is override to down .so basically i need to seperate rows with specific space. please tell me soon .thank you

Replete

Have any js fiddle for this, or link to check? – Yokoyama

iam using ag-grid documentaion [ag-grid.com/best-angular-2-data-grid/#gsc.tab=0] – Replete

Will you please also post the image with the issue you are facing ? – Yokoyama

hey,i shared 2 images – Replete

first one is expected output and second one is mine – Replete

try to use padding instead of margin – Yokoyama

Answer 1

Since the ag-grid uses absolute positioning to place the rows and provide height, padding and margin will just shift the rows and hiding them behind each other. Instead, I suggest providing a larger height to the rows, to allow space for a border to be placed.

Something like this will work:

var gridOptions = {
    ...
    rowHeight: 45,
    rowStyle: {'border-bottom': 'white 20px solid'},
    ....
};

Or if you need to account for vertical centering in your rows:

var gridOptions = {
    ...
    rowHeight: 45,
    rowStyle: {
        'border-bottom': 'white 10px solid',
        'border-top': 'white 10px solid' 
    },
    ....
};

Plnkr example

Overstrung

Answer 2

I came up with diferrent solution - not based on borders. This way you will not only be able to have transparent gaps, but also rounded edges without any problem.

These lines make gap betwen table body rows (no space between header and first body row):

rowHeight: 58,
rowStyle: {
  "max-height": "50px",
},

"rowHeight" should be your row style height + margin you want to make on bottom of every row.

And then, making header margin bottom:

.ag-theme-material .ag-header{
    margin-bottom: 12px;
}

Note! If you are using another theme than ".ag-theme-material" replace it in code above!

Exchequer

its not showing as transparent gaps just white – Haema

Answer 3

.my-row{
  margin-top: 10px;
  position: relative;
  transform: translateY(0) !important;
  border: none;
  border-radius: 10px;
  box-shadow: 1px 1px 10px black;
} 

worked for me

Scharff

this messes up the sorting. didn't work. – Decosta