Skip to content

fix: Sticky header scrolls away in FluentDataGrid #3171

@bLinMil

Description

@bLinMil

🐛 Bug Report

I have a header that I want to add borders on the th cells to distinguish them from each other. When I do that, they appear.
However, when I scroll my data grid, the borders scroll away.

💻 Repro or Code Sample

@page "/test"

<style>
    .column-header {
        border-right: 2px solid;
    }
</style>

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div style="height: 200px;">
    <FluentDataGrid DisplayMode="DataGridDisplayMode.Table" TGridItem="Testt" Items="testList.AsQueryable()" GenerateHeader="GenerateHeaderOption.Sticky">
        <TemplateColumn Sortable="true" Title="First Column Header" Align="Align.Center" Width="200px">
            @context.a
        </TemplateColumn>
        <TemplateColumn Sortable="true" Title="Second Column Header" Align="Align.Center" Width="200px">
            @context.b
        </TemplateColumn>
        <TemplateColumn Sortable="true" Title="Third Column Header" Align="Align.Center" Width="200px">
            @context.c
        </TemplateColumn>
    </FluentDataGrid>
</div>


@code {
    class Testt
    {
        public string a = "a";
        public string b = "b";
        public string c = "c";
    }

    private List<Testt> testList = new()
    {
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
    };
}

Before scrolling
Image

After scrolling

Image
The th's are fixed but the tr scrolls away for the header

🤔 Expected Behavior

When I scroll, I want to the header to stay sticky but I also want the .column-header classes to have the borders and for them to stay put.

😯 Current Behavior

The borders scroll away when I scroll the table

🔦 Context

In a more complex table, I have a column options button and so the borders help distinguish which option button applies to each header.

🌍 Your Environment

Windows
Edge
Fluent 4.11.2 dotnet 8.0.404

Metadata

Metadata

Assignees

No one assigned

    Labels

    triageNew issue. Needs to be looked at

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions