How to shrink space in agGrid detailGridOptions

Question

There is an enormous amount of space in my agGrid dropdown that is rendered by the detailGridOptions. 99% in the application there will be only one row in the dropdown. The other 1% there may be 2 rows. How do I shrink the space in the drop down. agGrid angular9

less- i've already been able to shrink the height of the table the row is in using the code below toward the end "ag-root-wrapper-body" and below

    #AllLeaseView {
        input[type='radio'] {
            display: none;
        }
    
        .sales-summary-chart {
            svg.ngx-charts {
                margin-left: -35px;
                margin-top: 35px;
            }
        }
    
        .kt-portlet__head-toolbar .btn-group .btn {
            cursor: pointer;
        }
    }
    .k-grid tbody td {
        white-space: nowrap;
        line-height: 18px;
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 500;
        vertical-align: top;
    }
    
    .k-grid th.k-header,
    .k-grid-header {
        font-size: 14px;
        font-weight: 900;
        padding: 10px 24px;
    }
    
    .rag-red {
        background-color: #e74c3c;
        color: black;
    }
    .rag-green {
        background-color: #00bc8c;
    }
    .rag-amber {
        background-color: #f39c12;
        color: black;
    }
    
    .ag-header-cell-text {
        overflow: visible !important;
        text-overflow: unset !important;
        white-space: normal !important;
     }
     .ag-root-wrapper-body.ag-layout-normal{
        max-height: 100px !important;
     }
    
     .ag-details-row, .ag-row-position-absolute, .ag-full-width-row {
         max-height: 150px !important;
     }

html-nothing much to say here

    <ag-grid-angular domLayout='autoHeight' class="ag-theme-balham-dark"
                                    [rowData]="leases" [columnDefs]="columnDefs" [frameworkComponents]="frameworkComponents"
                                    [gridOptions]="gridOptions" [animateRows]="true" [detailCellRendererParams]="detailCellRendererParams"
                                    [overlayLoadingTemplate]="overlayLoadingTemplate" [masterDetail]="true"   (firstDataRendered)="onFirstDataRendered($event)"
                                    [sideBar]="sideBar" (gridReady)="onGridReady($event)">
                                </ag-grid-angular>

    this.detailCellRendererParams = {
            detailGridOptions: {
                columnDefs: [
                    {
                        field: 'tenantType',
                        headerName: ' Tenant Type',
                        cellRenderer(params) {
                            const tenantType = params.data.tenantType;
                            if (tenantType) {
                                return tenantType;
                            } else {
                                return;
                            }
                        },
                    },
                    { field: 'leaseTenantImprovements', headerName: 'TI (PSF)' },
                    { field: 'leaseFreeRentMonths', headerName: 'Free Rent Months' },
                    {
                        field: 'rentCommencementDate',
                        headerName: 'Commencement Date',
                        cellRenderer(params) {
                            return params.data.rentCommencementDate.format('MM/DD/YY');
                        },
                    },
                    { field: 'lessor' },
                    { field: 'guarantor' },
                    { field: 'renewalOptions' },
                    { field: 'purchaseOptions' },
                    { field: 'terminationClause' },
                    {
                        field: 'verifications',
                        headerName: ' Verification Date',
                        cellRenderer(params) {
                            return params.data.verifications[0].verificationDate.format('MM/DD/YY');
                        },
                    },
                    {
                        field: 'verifications',
                        headerName: 'Verified By',
                        cellRenderer(params) {
                            const verifiedByUserDto = _.find(this.users, {
                                id: params.data.verifications[0].verifiedByUserId,
                            });
                            if (verifiedByUserDto) {
                                return verifiedByUserDto.name;
                            } else {
                                return;
                            }
                        },
                    },
                ],......

Answer 1

You should not require any fancy css handling for this. Ag-grid doc has a neat example to cover the same. Basically you want to dedicate only certain height to the detail grid based on number of rows. 2 ways to solve this -

1. Using detailRowHeight in master gridOptions

   masterGridOptions.detailRowHeight = 200;

2. Implement getRowHeight

Add getRowHeight in HTML

[getRowHeight]="getRowHeight"

Define getRowHeight something like this -

this.getRowHeight = function(params) {
  if (params.node && params.node.detail) { // this ensures it only applies to detail grid
    var offset = 80;
    var allDetailRowHeight =
      params.data.detailGrid.length *
      params.api.getSizesForCurrentTheme().rowHeight; //replace detailGrid with your detail grid rowdata property
    var gridSizes = params.api.getSizesForCurrentTheme();
    return allDetailRowHeight + gridSizes.headerHeight + offset;
  }
};

Check out this example from documentation