MudDataGrid -> FixedHeader not working on scroll with the filter option, DataGridFilterMode.ColumnFilterRow #6671

[tvpkn-9192]

Any fix or workaround for this issue?

Bug type

Component

Component name

MudDataGrid

What happened?

For MudDataGrid, filter and virtualization is used.

Fixed height is entered for the virtualization to work with scroll. In order to display column header FixedHeader="true" is used but the filter mode is DataGridFilterMode.ColumnFilterRow

So, when the ColumnFilterRow filter is used and scrolled down. It doesn't show the column header, instead only the filter is displayed on scroll. This is hiding the column names. Ideally, it should display both the Column Headers and Filter Row when scroll is performed. This is not working in latest 6.2.2 version. Please advise.

Expected behavior

Expected should display both the Column Headers and Filter Row when scroll is performed for the property FixedHeader="true"

Reproduction link

https://try.mudblazor.com/snippet/QkQdOeFBzYhBUFnT

Reproduction steps

Attached code for reproduction.

1. DataGrid loaded
2. Scroll down
3. We could see only the filter textboxes and actual Column header is hidden.

Relevant log output

No response

Version (bug)

6.2.2

Version (working)

No

What browsers are you seeing the problem on?

Chrome

On what operating system are you experiencing the issue?

Windows

Pull Request

• I would like to do a Pull Request

Code of Conduct

• I agree to follow this project's Code of Conduct

[Jack-Linders]

I am also having this issue on one of my projects

[KasperDanielsen]

Same issue here :)

[edcarandang]

Any update on this? I'm having the same issue.

[thockamier]

Note: For me, turning Virtualization off does not affect the fixed header. Setting Filterable="false" makes the header fixed, Filterable="true" and fixed header is broken.

Maybe just me, seems like an important feature. What's the point of using the datagrid to display real world data (hundreds, thousands of rows) if the user has to scroll to the top to know what a column value is (e.g. having 10 columns of $$$ values).

Would be great to know if this is in the pipeline to be resolved.

Thanks

[jsreynolds]

I'm noticing this too - filterable set to "true" breaks the fixed header.

Thank you

[thockamier]

[like] Tab Hockamier reacted to your message:

…

________________________________ From: John ***@***.***> Sent: Tuesday, January 16, 2024 10:57:45 PM To: MudBlazor/MudBlazor ***@***.***> Cc: Tab Hockamier ***@***.***>; Comment ***@***.***> Subject: [EXTERNAL]... Re: [MudBlazor/MudBlazor] MudDataGrid -> FixedHeader not working on scroll with the filter option, DataGridFilterMode.ColumnFilterRow #6671 (Discussion #6939) This email originated from outside of Hillstone I'm noticing this too - filterable set to "true" breaks the fixed header. Thank you — Reply to this email directly, view it on GitHub [github.com]<https://urldefense.com/v3/__https://github.com/MudBlazor/MudBlazor/discussions/6939*discussioncomment-8150088__;Iw!!J-uX8GXurA!ktu8Z8bmXASTOEAtD8yAzXDDPZQiydIYJpsbNiPM9fdaA91yEdG1GrmQ4T4XAKb7tUeV6FuDYLC7FcIDBfVT2dO464NP9g$>, or unsubscribe [github.com]<https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/AYVW6P7YEDRGRKLP6ZZHNJ3YO4AWTAVCNFSM6AAAAAAYTVGEJKVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DCNJQGA4DQ__;!!J-uX8GXurA!ktu8Z8bmXASTOEAtD8yAzXDDPZQiydIYJpsbNiPM9fdaA91yEdG1GrmQ4T4XAKb7tUeV6FuDYLC7FcIDBfVT2dPq3xOGXQ$>. You are receiving this because you commented.Message ID: ***@***.***>

[thockamier]

Also found similar issue here: #7464

I did a small playground here: https://try.mudblazor.com/snippet/QOwoOlbBLQZVQaeN

[oakscout]

Until this issue is solved, here is a css workaround:
https://try.mudblazor.com/snippet/caQIkGkBoLZOlgKm

[thockamier]

Excellent, thank you.

[thockamier]

This is a good fix but after trying, it seems that the problem is simply switched from the header to the filter so now the header stays in place and the filter scrolls up
See attached from your snippet link

[oakscout]

Works well for me, does your style snippet look like this?

<style>
   
    .header-class .mud-table-row:first-child {
        background-color: var(--mud-palette-surface);
        position: sticky;
        z-index: 1;
        top: 0;
    }
    
   .header-class .mud-table-row:nth-child(2) {
        background-color: var(--mud-palette-surface);
        position: sticky;
        z-index: 1;
        top: 59px;
    }

</style>

This is how it looks for me:

[thockamier]

I did try something very similar, now I see that I had the top: 59px wrong, I appreciate you solving this...!

[Tequu-devOps]

Instead of making the individual rows of the header sticky i just made the whole header itself sticky. This comes with the benefit that i don't have to know the height of the first row(useful when your column titles might wrap to a new line which would change the height):

.header-class {
    top: 0;
    position: sticky;
    z-index: 1;
    background-color: var(--mud-palette-surface);
}

https://try.mudblazor.com/snippet/GOGIYfEqpyzOyFGX