Ag-Grid - How to Set Border Bottom for the Last Row

user_3979263 0
Viewed 9649

I am using Ag-Grid with React and I can't seem to be able to figure out how to show the border-bottom after the last row. The grid looks incomplete without it. See the attached image. Need the border bottom after the last row

I tried to set the following CSS, but it doesn't work:

.ag-footer-cell-entire-row {
    border-bottom: solid 1px black !important;
}

In the documentation, I also looked at the rowStyle property and tried to use it but I can't figure out how to determine if the current row is the last row. I will greatly appreciate if someone could point me in the right direction.

ag-grid reactjs css styles javascript
2 Answers

This is the top result when Googling "Set bottom border in agGrid". The issue I was having was that applying a border to the grid body was not rendering a border on the bottom of the grid (e.g. regardless of how man rows were present, I wanted the grid itself to have a border all the way around). After some tinkering, here is my solution

.grid-container {
    height: 70%;
    margin: 10px 20px 0 20px;

    .ag-header {
        border: 1px solid black;
        border-bottom: none;
    }

    .ag-body {
        background-color: #fdfdfd;
        border-bottom: 1px solid black;
    }

    .ag-body-viewport-wrapper {
        border: 1px solid black;
        border-top: none;
    }

    .ag-body-viewport {
        border-bottom: 1px solid black;
    }

}
user_52871900
Related