CODEWITHSUNDEEP
javascriptcssreactjsstylesag-grid
Linus
Linus

Reputation: 43

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

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.

Upvotes: 4

Views: 12747

Answers (2)

Brian H.
Brian H.

Reputation: 2235

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;
    }

}

Upvotes: 1

Jarod Moser
Jarod Moser

Reputation: 7338

Using rowStyle is really close... You will actually need to use getRowStyle which you will need to return an object of CSS values per the docs. Here is an example of what your function will look like:

gridOptions = {
    ...
    getRowStyle: lastRowBorder
    ...
}

function lastRowBorder(params){
    if (params.node.rowIndex == params.api.rowModel.rowsToDisplay.length - 1){
        return {border-bottom: thick green}
    }
    else {
        return {}
    }
}

I believe that this comparison params.node.rowIndex == params.api.rowModel.rowsToDisplay.length - 1 will work in all cases, but I haven't tested it myself. There is a params.api.lastChild, but I am unsure if that is only true for the last row node or if it is true for the last node for groups... which is what you seem to be doing. In any case it would be beneficial to console.log the params if the comparison that I provided doesn't work.

As a side note, going the route of trying to use css selectors to try to reach the last-child won't be the cleanest solution in most cases since ag grid relies on absolute positioning... meaning that the last row in the grid could be in the middle of the DOM

Upvotes: 3

Related Questions