datagridstickyhorizontal-scrollingmudblazorfixed-header-tables

Mudblazor Datagrid where My headers is fixed and first column is Sticky Left while horizontal scrolling Fixed Header first column is not fixed


Using Mudblazor,In Datagrid where My headers is fixed and first column is Sticky Left while horizontal scrolling Fixed Header first column header is not fixed and it also get affected in horizontal scroll.

production link: https://try.mudblazor.com/snippet/mYQeFYaNPNVnOpvJ

Intial: in my datagrid, my header is fixed and first column is sticky left. enter image description here

My Issue: In my datagrid, while horizontal scrolling my first column is sticky left but my first column header is not fixed and getting scrolled in horizontal scrolling. I want my first column header to be fixed and unaffected by horizontal scrolling.

enter image description here


Solution

  • By using FixedHeader="true" it overrides the z-index value of all header cells. The z-index of the header is now 2, while the z-index of left-sticky is 1.

    There are surely better solutions but if you use

    <style>
        .mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell:first-child
        {
            z-index: 3;
        }
    </style>
    

    you can set the first headers z-index to 3 and it works as expected.

    Snippet

    I have taken the .mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell:first-child straight from the devtools web inspector.