fix: Cannot set column widths in Fluent Data Grid #3164
Description
🐛 Bug Report
When I set DisplayMode to Table in my fluent data grid, my column widths are not being applied. The columns seem to have all the same width.
💻 Repro or Code Sample
@page "/test"
<style>
th {
display: table-cell !important;
}
</style>
<div style="height: 400px; width: 800px; overflow-y: scroll;">
<FluentDataGrid GenerateHeader="GenerateHeaderOption.Sticky" DisplayMode="DataGridDisplayMode.Table" TGridItem="Test" Items="testList.AsQueryable()">
<PropertyColumn Width="200px" Sortable="true" Title="First Column" Property="@(p => p.a)" />
<PropertyColumn Width="500px" Sortable="true" Title="Second Column" Property="@(p => p.b)" />
<PropertyColumn Width="100px" Sortable="true" Title="Third Column" Property="@(p => p.c)" />
</FluentDataGrid>
</div>
@code{
class Test
{
public string a = "a";
public string b = "b";
public string c = "c";
}
private List<Test> testList = new()
{
new(),
new(),
new(),
new(),
new(),
new(),
new(),
new(),
new(),
new(),
new(),
new(),
new(),
new(),
new(),
new(),
new(),
new(),
new(),
new(),
};
}
🤔 Expected Behavior
When I set the width of the template column, it should show in the grid.
😯 Current Behavior
The value of the width doesnt affect the rendered width.
💁 Possible Solution
Think it has something to the grid-template-column and the fact that the display mode is table.
🔦 Context
My grid is virtualized and scrolling horizontally then vertically doesnt render my data. I switch the table display mode to fix this.
🌍 Your Environment
Windows
Edge
dotnet 8.0.404 Fluent 4.11.1