How to make multiple header rows stick to top when scrolled in MudTable?

Question

In mudtable I have two line of header on scroll need to fix the both header currently second header fixed and first header is scrolling up.

<MudTable Height="200px"  CustomHeader="true" FixedHeader="true">
  <HeaderContent>
     <MudTHeadRow>
         <MudTh Class="fw-bold lh-1 border" colspan="1">A</MudTh>
     </MudTHeadRow>
     <MudTHeadRow>
        <MudTh Class="fw-bold lh-1 border" colspan="1">B</MudTh>
     </MudTHeadRow>
  </HeaderContent>
</MudTable>

Answer 1

MudTable styles the headers with these properties.

.mud-simple-table.mud-table-sticky-header * table thead * th {
    background-color: var(--mud-palette-surface);
    position: sticky;
    z-index: 1;
    top: 0;
}

Since they're all position: sticky;,z-index:1 and top:0, that means that only the last element will be visible as they're all overlapping eachother.

You can override this by applying styles to the individual MudTHeadRow elements.

Here in the example below, we push the last header 3.5rem lower so that the second last header can be seen.

<MudTable Height="200px"  CustomHeader="true" FixedHeader="true">
  <HeaderContent>
     <MudTHeadRow>
         <MudTh colspan="1">A</MudTh>
     </MudTHeadRow>
     <MudTHeadRow Style="position: sticky;top: 3.5rem; z-index: 2;">
        <MudTh colspan="1">B</MudTh>
     </MudTHeadRow>
  </HeaderContent>
</MudTable>

---

And if you had 3 headers that you wanted be sticky then you'd have to apply styles to the last 2 elements and so on.

<MudTable Height="200px"  CustomHeader="true" FixedHeader="true">
  <HeaderContent>
     <MudTHeadRow>
         <MudTh colspan="1">A</MudTh>
     </MudTHeadRow>
     <MudTHeadRow Style="position: sticky;top: 3.5rem; z-index: 2;">
        <MudTh colspan="1">B</MudTh>
     </MudTHeadRow>
        <MudTHeadRow Style="position: sticky;top: 7rem; z-index: 2;">
        <MudTh colspan="1">C</MudTh>
     </MudTHeadRow>
  </HeaderContent>
</MudTable>

MudBlazor snippet