title: Blazor virtualization with row grouping
body: <p>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 <code>table-content-container</code>. Virtualization only works when fixed height and overflow is set to <code>group-body-container</code>.</p>
  <p>Here's the html i got what does not work:</p>
  <pre><code>&lt;div class=&quot;table-container&quot;&gt;
      &lt;div class=&quot;table-header grid-row-template&quot;&gt;
          &lt;div class=&quot;header-item&quot;&gt;Id&lt;/div&gt;
          &lt;div class=&quot;header-item&quot;&gt;Name&lt;/div&gt;
      &lt;/div&gt;
      
      &lt;div class=&quot;table-content-container&quot; style=&quot;height:50vh; overflow-y:scroll&quot;&gt;
      @foreach (DataGroup group in dataGroups)
      {
          &lt;div class=&quot;group-header&quot;&gt;
              &lt;MudToggleIconButton
                  @bind-Toggled=&quot;@group.IsExpanded&quot;
                  Icon=&quot;@Icons.Filled.ExpandMore&quot;
                  Color=&quot;Color.Secondary&quot;
                  ToggledIcon=&quot;@Icons.Filled.ExpandLess&quot;                
                  Size=&quot;Size.Small&quot;
                  ToggledSize=&quot;Size.Small&quot;/&gt;
              &lt;MudText Color=&quot;@Color.Primary&quot;&gt;@group.GroupName&lt;/MudText&gt;    
          &lt;/div&gt;
          @if (group.IsExpanded)
          {
              &lt;div class=&quot;group-body-container&quot;&gt;
                  &lt;Virtualize Items=&quot;group.DataRow&quot; Context=&quot;row&quot; ItemSize=&quot;20&quot;&gt;
                      &lt;div class=&quot;grid-row-template data-row&quot;&gt;
                          &lt;div class=&quot;data-item&quot;&gt;@row.Id&lt;/div&gt;
                          &lt;div class=&quot;data-item&quot;&gt;@row.Name&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/Virtualize&gt;
              &lt;/div&gt;
          }
      }
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Here the virtualization works: <a href="https://try.mudblazor.com/snippet/GEcwagOjgXcmYqFL" rel="nofollow noreferrer">https://try.mudblazor.com/snippet/GEcwagOjgXcmYqFL</a></p>
  <p>Here its not working: <a href="https://try.mudblazor.com/snippet/GawcYUuNUXbCiTTY" rel="nofollow noreferrer">https://try.mudblazor.com/snippet/GawcYUuNUXbCiTTY</a></p>
  <p>The goal would be to have the virtualization working with the second example, when scrolled only the top header would be &quot;sticky&quot;.</p>
  <p><strong>EDIT</strong>:
  Here's recording of what i would like to achieve but with working virtualization (<a href="https://try.mudblazor.com/snippet/GawcYUuNUXbCiTTY" rel="nofollow noreferrer">https://try.mudblazor.com/snippet/GawcYUuNUXbCiTTY</a>):
  <a href="https://i.stack.imgur.com/1zhGr.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1zhGr.gif" alt="enter image description here" /></a></p>
  <p>Is this even possible with blazors virtualization component?</p>