Table height not increasing to show child row contents when only one row is visible

dbt

Link to test case: https://live.datatables.net/fotusute/1/edit?html,css,js,output

Steps to Reproduce: Use the Custom Search Builder to filter down to just one row (select "Name" "Equals" and a specific name is the fastest I've found). Expand the row to see all of the columns (the arrow on the left edge of the row) and notice that the table height doesn't expand to show the child row contents.

Description of problem: If the user filters down to just one row, they won't be able to see the child row contents as the table doesn't dynamically resize the height anymore. It seems like this is caused by using scrollCollapse: true, and the workaround I've found is to add a min-height to the div, but this doesn't look great with the empty wasted space on the screen as shown in: https://live.datatables.net/wowilovu/1/edit?html,css,js,output

What else can I do to keep the table loading performance as fast as possible, while still maintaining the responsive resizing to varying device screen sizes (phone, tablet, laptop, desktop) and without obscuring any data?

Thanks in advance!

allan

Hi,

Scroller is not compatible with child rows I'm sorry to say. The compatibility chart shows that.

The issue is that for Scroller to operate it needs to know the height of every element inside the table. In order for it to performed its "virtual" calculations it will take a single row's height and assume that all rows in the table are that height and there are no other elements in the table body. Anything else will cause its calculations to fail.

If you want child rows, I'm afraid there is no alternative but to disable scroller. The other option would be to display the child row details in a modal or some other popover.

If performance is key, disable scrolling completely and use paging. It is vastly faster since it doesn't require column width calculations and row rendering can be deferred (although that is irrelevant with a DOM sourced table, or with Scroller which is the attempt to bring those benefits to a scrolling table, but it has limitations).

Allan

dbt

Thanks Allan, appreciate the insight, and apologies for missing that in the compatibility chart.

The example I put together is a simplified version of what I'm trying to do, which takes in a few user inputs and then generates all the rows client side for display. Went ahead and disabled scroller and cut down my page load time in half (~500ms to ~250ms)!

Thanks again for your assistance!