Blazor virtualization with row grouping - html

Question

Im creating a grouped list with sticky header. Really would like to use virtualization with it. But the virtualization doesnt work when i set fixed height and overflow on the top level table-content-container. Virtualization only works when fixed height and overflow is set to group-body-container.
Here's the html i got what does not work:
<div class="table-container">
<div class="table-header grid-row-template">
<div class="header-item">Id</div>
<div class="header-item">Name</div>
</div>
<div class="table-content-container" style="height:50vh; overflow-y:scroll">
#foreach (DataGroup group in dataGroups)
{
<div class="group-header">
<MudToggleIconButton
#bind-Toggled="#group.IsExpanded"
Icon="#Icons.Filled.ExpandMore"
Color="Color.Secondary"
ToggledIcon="#Icons.Filled.ExpandLess"
Size="Size.Small"
ToggledSize="Size.Small"/>
<MudText Color="#Color.Primary">#group.GroupName</MudText>
</div>
#if (group.IsExpanded)
{
<div class="group-body-container">
<Virtualize Items="group.DataRow" Context="row" ItemSize="20">
<div class="grid-row-template data-row">
<div class="data-item">#row.Id</div>
<div class="data-item">#row.Name</div>
</div>
</Virtualize>
</div>
}
}
</div>
</div>
Here the virtualization works: https://try.mudblazor.com/snippet/GEcwagOjgXcmYqFL
Here its not working: https://try.mudblazor.com/snippet/GawcYUuNUXbCiTTY
The goal would be to have the virtualization working with the second example, when scrolled only the top header would be "sticky".
EDIT:
Here's recording of what i would like to achieve but with working virtualization (https://try.mudblazor.com/snippet/GawcYUuNUXbCiTTY):
Is this even possible with blazors virtualization component?

Answer 1

It is because the Virtualize component needs a limiting height - either explicit or implicit. As you have it now, each Virtualize can just grow to consume as much space as it needs.
You can make your container use flexbox and your group container have a min/max height of 100% to achieve this:
.table-content-container {
display: flex;
flex-direction: column;
gap:0;
}
.group-body-container {
min-height: 100%;
max-height: 100%;
overflow: auto;
}
Updated demo #2 where the expanded group matches the container height - but without more information about what you are trying to do this could go on forever....:
https://try.mudblazor.com/snippet/wOQwEKbUdhZHlbiE
To round things off - I do not recommend this design, but to show it is possible, you can also hide the scrollbars on the expanded/virtualised groups with CSS
.group-body-container {
min-height: 100%;
max-height: 100%;
overflow: auto;
}
.group-body-container {
scrollbar-width: none; /* Firefox */
}
.group-body-container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
Here is a demo: https://try.mudblazor.com/snippet/cammugcNEmPoITgg - with a scrollbar only on the main container, so you can only scroll the virtualized groups contents with mousewheel/touch - which is why I don't like it.