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 inplete 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.

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 inplete 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.

• javascript
• css
• reactjs
• styles
• ag-grid

• I would add some css like table tr:last-child {border-bottom:.....} – James Commented May 12, 2017 at 18:38
• I just tried this but it doesn't seem to make any difference. Thanks for the suggestion though. – Linus Commented May 12, 2017 at 18:47
• I might have been mistaken setting the border on the tr instead of each td, check this fiddle where it's working (using a css selector of table tbody tr:last-child td) – James Commented May 12, 2017 at 19:15
• 1 @James, the example you posted just uses a table where I know how to apply the border bottom but my question is related to the link ag-grid ponent. Like I mentioned in my question, I can't seem to get the border bottom to show up when the containing div's height is greater than that of the grid. – Linus Commented May 12, 2017 at 20:11
• OK, the same concept should apply though, the last <whatever> of a parent <something> is accessible by a css selector like something whatever:last-child. Strange that ag-grid would use something other than a table to present tabular data, I guess I have some reading to do. – James Commented May 12, 2017 at 20:21

2 Answers 2

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 parison 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 parison 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

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

}