Ag-Grid: Cannot decrease container space for detail rows

Question

It seems that there is a fixed/calculated height with the container for when detail rows are displayed in Ag-Grid. I was able to replicate this issue using Ag-Grid documentation's example on Plunker:

The last Plunker example on this page: https://www.ag-grid.com/javascript-grid-master-detail/

To replicate it, once in Plunker I clicked the chevron to open the sub-table to view the detail rows, then opened DevTools. I inspected the container around the sub-table, and it has a class of "ag-details"row". I added a height value, such as 50%, but it only decreases the height of the rows.

So I have about 2-3 rows in the sub-table. How can I remove the extra space between the bottom of the sub-table and parent row below it?

ambs ambs · Accepted Answer · 2019-02-21T22:49:14

The detailing row can be assigned a height. But what you're asking for sounds like a dynamic height, which you can also do.

For example, within your grid options, you can define getRowHeight;

getRowHeight: function (params) {
    if (params.node && params.node.detail) {
        var offset = 80;
        var allDetailRowHeight = params.data.callRecords.length * 28;
        return allDetailRowHeight + offset;
    } else {
        // otherwise return fixed master row height
        return 60;
    }
}

See AG Grid's documentation for a full example; https://www.ag-grid.com/javascript-grid-master-detail/#example-dynamic-detail-row-height

Ag-Grid: Cannot decrease container space for detail rows

1 Answers