ngx-datatable-row-detail - "auto" height and padding calculations - virtualization on

[bonellimitch]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[x] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

You can only set a specific height for the datatable-row-detail which means you have to know how big the content of the detail is before it gets displayed.

Moreover if you use [rowHeight]="100" and the row-details provides top and bottom padding of 10px then the actual height / available space inside the row details is not 100px but 80px!

Expected behavior

• When setting the height of the row details to 100px I expect it to be the actual available space for the child component, the datatable should not subtract the padding to the height but add the padding as needed.
• Is there a way to let the datatable know that it has to elaborate the height of the row-detail at runtime? there are a bunch of issues related to this, some are open and some are closed. Everyone handled things differently I would like to know the actual solution / best practice for this component. When I try to use [rowHeight]="'auto'" the rows beneath disappear as if the row details is taking up all the available space even if the component inside it is actually reallysmall.

Following the related issues:

• https://github.com/swimlane/ngx-datatable/issues/1657: this is exactly what happens if I set the [rowHeight]="'auto'", the actual row-detail height is set correctly and as expected but the following rows for some reason disappear from the DOM.
• https://github.com/swimlane/ngx-datatable/issues/1831: same as 1657
• https://github.com/swimlane/ngx-datatable/issues/544: some people talk about some possible solutions which didn't work for me
• https://github.com/swimlane/ngx-datatable/issues/525: here it says 'auto' will never be implemented, yet people are talking about it
• https://github.com/swimlane/ngx-datatable/issues/1364: is a duplicate of this issue

Reproduction of the problem

What is the motivation / use case for changing the behavior?

I don't know the height of the component that gets loaded in the row detail. Actually, depending on the responses I receive from the BE, I need to show / hide different components (i.e: a list, a form, just some text) which have all different heights requirements.

Please tell us about your environment: Windows 10

• Table version: 19.0.0

• Angular version: Angular 10

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] All

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[btimfl]

I'm facing the same issue, did you find any solution for this?

[bonellimitch]

Hi @btimfl, unluckly we stopped working on the component a while ago so I don't remember exactly if we managed to fixed it or not and we are not planning on going on with this component for now due to other priorities.

What I can tell is that by quickly testing maybe we found a way to solve it but I'm not sure. I'll share with you some code maybe it might be useful for your testing.

This is what we defined in the html template.

<!-- Accordion template -->
<ngx-datatable-row-detail [rowHeight]="getHeight()" #accordion>
  <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
    <div class="injector-container" #accordionContainer>
      <!-- other angular component -->
    </div>
  </ng-template>
</ngx-datatable-row-detail>

And this is how the getHeight() funcion is implemented:

  getHeight() {
    let height = this.accordionContainer;
    if (this.accordionContainer && this.accordionContainer.nativeElement.offsetHeight > 0) {
      height = this.accordionContainer.nativeElement.offsetHeight;
    }
    this.rows = [...this.rows];
    return height;
  }

So basically what id does is to calculate the height of the accordionContainer manually at runtime and the forcing the rendering of the datatable by assigning the rows again.

Hope it helps in someway! Good luck!!

[btimfl]

Thank you so much for replying and sharing this information. Unfortunately for me, I'm passing the template for the rowDetail from another component, and I'm facing a bunch of problems in getting the offset height due to that. I don't think I'll be able to make it work unless I define the template right in this file, which is not possible because the content of the detail row are decided based on some information I get from the backend.