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

ag-grid, css, javascript, reactjs, styles

Solution

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

Problem

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.

Original source