How to remove extra space in the detail grid style in ag-grid master detail setup?

Question

I have an ag-grid master-detail grid where one master row typically has only 1 or 2 sub-rows in the detail grid (there's always 2 columns for the detail grid). When I write up the code matching the examples on ag-grid's documentation, it always leaves huge whitespace under the detail grid and it auto-expands the detail grid's width to the width of the container.

I would like to get rid of the extra whitespace under the detail grid and also size the detail grid so the columns are only as wide as they need to be to fit the data. (Thus there would be whitespace to the right side of the detail-grid)

I've tried looking through the styles in chrome dev tools but I can't figure out what controls those 2 styling aspects. In addition, setting domLayout = 'autoHeight' in the detail grid options just moves the bottom of the detail grid to the last row, but it doesn't get rid of the extra whitespace in the cases where there's only 1 detail-row.

Plunkr MVPs (includes domLayout = 'autoHeight' in detail-grid's options):

React: https://plnkr.co/edit/K76FssFF4Ex538fn

Angular: https://plnkr.co/edit/0n5EllKejfyq9x4E

The original plunkr samples came from the "Simple Example" plunkr on the ag-grid master-detail documentation.

Answer 1

All you need to do is refer the documentation here, as for the additional things needed.

We need to use this method from the ag-grid documentation.

this.getRowHeight = function(params) {
      if (params.node && params.node.detail) {
        var offset = 80;
        var allDetailRowHeight =
          params.data.callRecords.length *
          params.api.getSizesForCurrentTheme().rowHeight;
        var gridSizes = params.api.getSizesForCurrentTheme();
        return allDetailRowHeight + gridSizes.headerHeight + offset;
      }
    };

Also on the detail panel grid options we need to add this property, which will set the height dynamically.

this.detailCellRendererParams = {
  detailGridOptions: {
    columnDefs: [
      { field: 'callId' },
      {
        field: 'duration',
        valueFormatter: "x.toLocaleString() + 's'",
      }
    ],
    defaultColDef: {
      flex: 1,
      editable: true,
      resizable: true,
    },
    onGridReady: function(params) {
      params.api.setDomLayout('autoHeight');
    },
  },
  getDetailRowData: function(params) {
    params.successCallback(params.data.callRecords);
  },
};

Below is a working example for your reference

Plunkr example

Answer 2

After combining Naren's answer with some css adjustments, this is the best result I could get. I'm not accepting this answer because it's not what I want, but I can live with it until I (or someone else) can figure out something better.

https://plnkr.co/edit/d9emrRiavR9gCpQl

Basically I added these 2 things to the plunkr:

this.getRowHeight = params => {
  const defRowHeight = params.api.getSizesForCurrentTheme().rowHeight;
  if(params.node.detail) {
    const offset = 80;
    const detailRowHeight =
      params.data.callRecords.length * defRowHeight;
    var gridSizes = params.api.getSizesForCurrentTheme();
    return detailRowHeight + gridSizes.headerHeight + offset;
  } else {
    return defRowHeight;
  }
}

---

styles: ['::ng-deep .ag-details-row { width: 50% }']

An acceptable solution would provide a way to resize the detail grid directly to the width of the actual columns (rather than an arbitrary percentage)

Image:

(You can remove that little extra space under the 1st row of the detail grid by overriding min-height of one of the grid's css classes. It only appears if there's 1 row in the detail grid)