[DataGrid] Make resize menu work in 'Table' mode (#4116)

* Add MinWidth parameter to ColumnBase and use it in DataGrid resize actions

* Update verified files

* Fix #4060

Author: vnbaaij

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)