-
Notifications
You must be signed in to change notification settings - Fork 461
Closed
Labels
triageNew issue. Needs to be looked atNew issue. Needs to be looked at
Description
🐛 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(),
};
}
After scrolling

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
Labels
triageNew issue. Needs to be looked atNew issue. Needs to be looked at
