FluentDataGrid column widths wrong initially

[Stephen-Lamb]

Hi, I am having an issue with the data grid component, where when my page loads the column widths seems to be wrong/ignored until I move the mouse cursor over the page, when the column widths then seem to update and become correct.

Please see the code below, which is based off the virtualized grid demo example. Can anyone see what I am doing wrong, or what I have to do to avoid this problem? Thanks.

P.S. I'm using InteractiveServer, Google Chrome and Fluent UI 4.12.1.

<div style="height: 400px; width: 100%; overflow-y: auto;">
	<FluentDataGrid @ref="grid" Items=@items Virtualize="true" DisplayMode="DataGridDisplayMode.Table"
					Style="width: fit-content;" ItemSize="54" GenerateHeader="@GenerateHeaderOption.Sticky"
					ResizableColumns="true" ResizeColumnOnAllRows="false">
		<ChildContent>
			<PropertyColumn Width="200px" Property="@(c => c.Item1)" Sortable="true" />
			<PropertyColumn Width="200px" Property="@(c => c.Item2)" />
			<PropertyColumn Width="200px" Property="@(c => c.Item3)" Align="Align.Center" />
			<PropertyColumn Width="200px" Property="@(c => c.Item4)" Align="Align.End" />
		</ChildContent>
		<EmptyContent>
			<FluentIcon Value="@(new Icons.Filled.Size24.Crown())" Color="@Color.Accent" />&nbsp; Nothing to see here. Carry on!
		</EmptyContent>
		<LoadingContent>
			<FluentStack Orientation="Orientation.Vertical" HorizontalAlignment="HorizontalAlignment.Center">
				Loading...<br />
				<FluentProgress Width="240px" />
			</FluentStack>
		</LoadingContent>
	</FluentDataGrid>
</div>
<br />
<FluentSwitch @ref="_clearToggle"
			  @bind-Value="@_clearItems"
			  @bind-Value:after="ToggleItems"
			  UncheckedMessage="Clear all results"
			  CheckedMessage="Restore all results">
</FluentSwitch>
<FluentButton OnClick="SimulateDataLoading">Simulate data loading</FluentButton>

@code {
	FluentDataGrid<SampleGridData>? grid;
	FluentSwitch? _clearToggle;

	bool _clearItems = false;
	public record SampleGridData(string Item1, string Item2, string Item3, string Item4);

	IQueryable<SampleGridData>? items = Enumerable.Empty<SampleGridData>().AsQueryable();

	private IQueryable<SampleGridData> GenerateSampleGridData(int size)
	{
		SampleGridData[] data = new SampleGridData[size];

		for (int i = 0; i < size; i++)
		{
			data[i] = new SampleGridData(
				$"value {i}-1",
				$"Some very, very long text for item {i} that may be wider than the column width",
				$"value {i}-3",
				$"value {i}-4"
			);
		}
		return data.AsQueryable();
	}
	protected override void OnInitialized()
	{
		items = GenerateSampleGridData(5000);
	}

	private void ToggleItems()
	{
		if (_clearItems)
		{
			items = null;
		}
		else
		{
			items = GenerateSampleGridData(5000);
		}
	}

	private async Task SimulateDataLoading()
	{
		_clearItems = false;

		items = null;
		grid?.SetLoadingState(true);

		await Task.Delay(1500);

		items = GenerateSampleGridData(5000);
		grid?.SetLoadingState(false);
	}
}

[Stephen-Lamb]

Okay, I finally figured it out. It's a bit of a weird one. When the page loads there is no "table-layout: fixed" style attribute on the table (as seen using the browser console), however when I move the cursor over the page one is getting added, which is why the column widths appear to change. Simply adding "table-layout: fixed" myself to the style attribute of the table fixes the problem.