[DataGrid] Make resize menu work in 'Table' mode

examples/Demo/Shared/Pages/Lab/IssueTester.razor

@@ -1 +1,78 @@
-
+<div style="height: 400px; max-width: 800px; overflow-y: scroll;">
+	<FluentDataGrid @ref="grid" Items=@items Virtualize="true" DisplayMode="DataGridDisplayMode.Table" Style="width: 100%;" ItemSize="54" GenerateHeader="@GenerateHeaderOption.Sticky"
+					ResizableColumns="true" ResizeType="DataGridResizeType.Exact">
+		<ChildContent>
+			<PropertyColumn Width="25%" Property="@(c => c.Item1)" Sortable="true" />
+			<PropertyColumn Width="25%" Property="@(c => c.Item2)" />
+			<PropertyColumn Width="25%" Property="@(c => c.Item3)" Align="Align.Center" />
+			<PropertyColumn Width="25%" 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", $"value {i}-2", $"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);
+	}
+}

src/Core/Components/DataGrid/FluentDataGrid.razor.js

@@ -219,11 +219,13 @@ export function enableColumnResizing(gridElement, resizeColumnOnAllRows = true)
     }
 
     const id = gridElement.id;
-    grids.push({
-        id,
-        columns,
-        initialWidths,
-    });
+    if (!grids.find(grid => grid.id === id)) {
+        grids.push({
+            id,
+            columns,
+            initialWidths,
+        });
+    }
 
     function setListeners(div, isRTL) {
         let pageX, curCol, curColWidth;
@@ -351,7 +353,7 @@ export function resetColumnWidths(gridElement) {
 }
 
 export function resizeColumnDiscrete(gridElement, column, change) {
-
+    const isGrid = gridElement.classList.contains('grid');
     const columns = [];
     let headerBeingResized;
 
@@ -369,27 +371,32 @@ export function resizeColumnDiscrete(gridElement, column, change) {
 
     grids.find(({ id }) => id === gridElement.id).columns.forEach(column => {
         if (column.header === headerBeingResized) {
-            const width = headerBeingResized.getBoundingClientRect().width + change;
+            const width = headerBeingResized.offsetWidth + change; //.getBoundingClientRect().width + change;
 
             if (change < 0) {
                 column.size = Math.max(parseInt(column.header.style.minWidth), width) + 'px';
             }
             else {
                 column.size = width + 'px';
             }
+            column.header.style.width = column.size;
         }
-        else {
+        if (isGrid) {
+            // for grid we need to recalculate all columns that are minmax
             if (column.size.startsWith('minmax')) {
                 column.size = parseInt(column.header.clientWidth, 10) + 'px';
             }
+            columns.push(column.size);
         }
-        columns.push(column.size);
     });
 
-    gridElement.style.gridTemplateColumns = columns.join(' ');
+    if (isGrid) {
+        gridElement.style.gridTemplateColumns = columns.join(' ');
+    }
 }
 
 export function resizeColumnExact(gridElement, column, width) {
+    const isGrid = gridElement.classList.contains('grid');
     const columns = [];
     let headerBeingResized = gridElement.querySelector('.column-header[col-index="' + column + '"]');
 
@@ -400,16 +407,21 @@ export function resizeColumnExact(gridElement, column, width) {
     grids.find(({ id }) => id === gridElement.id).columns.forEach(column => {
         if (column.header === headerBeingResized) {
             column.size = Math.max(parseInt(column.header.style.minWidth), width) + 'px';
+            column.header.style.width = column.size;
         }
-        else {
+        if (isGrid) {
+            // for grid we need to recalculate all columns that are minmax
             if (column.size.startsWith('minmax')) {
                 column.size = parseInt(column.header.clientWidth, 10) + 'px';
             }
+            column.header.style.width = column.size;
+            columns.push(column.size);
         }
-        columns.push(column.size);
     });
 
-    gridElement.style.gridTemplateColumns = columns.join(' ');
+    if (isGrid) {
+        gridElement.style.gridTemplateColumns = columns.join(' ');
+    }
 
     gridElement.dispatchEvent(new CustomEvent('closecolumnresize', { bubbles: true }));
     gridElement.focus();

src/Core/Components/DataGrid/FluentDataGridCell.razor.cs

@@ -71,7 +71,7 @@ public partial class FluentDataGridCell<TGridItem> : FluentComponentBase
         .AddStyle("grid-column", GridColumn.ToString(), () => !Grid.EffectiveLoadingValue && (Grid.Items is not null || Grid.ItemsProvider is not null) && Grid.DisplayMode == DataGridDisplayMode.Grid)
         .AddStyle("text-align", "center", Column is SelectColumn<TGridItem>)
         .AddStyle("align-content", "center", Column is SelectColumn<TGridItem>)
-        .AddStyle("min-width", Column?.MinWidth, Owner.RowType == DataGridRowType.Header)
+        .AddStyle("min-width", Column?.MinWidth, Owner.RowType is DataGridRowType.Header or DataGridRowType.StickyHeader)
         .AddStyle("padding-inline-start", "calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px)", Column is SelectColumn<TGridItem> && Owner.RowType == DataGridRowType.Default)
         .AddStyle("padding-top", "calc(var(--design-unit) * 2.5px)", Column is SelectColumn<TGridItem> && (Grid.RowSize == DataGridRowSize.Medium || Owner.RowType == DataGridRowType.Header))
         .AddStyle("padding-top", "calc(var(--design-unit) * 1.5px)", Column is SelectColumn<TGridItem> && Grid.RowSize == DataGridRowSize.Small && Owner.RowType == DataGridRowType.Default)