AgGrid master/detail detail grid rows to have different height

Question

I am working on a master/detail table in AgGrid. The functionality is nothing special besides that I want the detail grid to have a smaller height than the main grid. See image.

I was trying everything, and it seems that there is no way to set the rowHeight on the detail separately then on the main grid. There is a setting for the height of the row that expands detailRowHeight but this sets the height of the containing row not the rows of the sub grid.

Any answer is appreciated.

Shuheb Ahmed Shuheb Ahmed · Accepted Answer · 2021-07-06T06:51:07

Changing rowHeight on the detail grid is the same as you would do for a normal grid, simply add the grid property rowHeight or the grid callback getRowHeight (for dynamic row heights) to the detailGridOptions:

    this.detailCellRendererParams = {
      detailGridOptions: {
        getRowHeight: (params) => 30,
        // [...]
      },
      getDetailRowData: function (params) {
        params.successCallback(params.data.callRecords);
      },
    };

See this implemented in the following sample: https://plnkr.co/edit/AyJ0xvM0EHC6Pce1

AgGrid master/detail detail grid rows to have different height

1 Answers