[DataGrid] Resize enhancements (#3767)

* Prep for next release

* - Adjust header button width
- Change resize handle to use a plain div instead of FluentDivider
- Change styling to adapt to the above

* Continue work on hving resize handle on whole column

* - Update comments
- Update Unit Test verified files

Author: vnbaaij

examples/Demo/Shared/Pages/DataGrid/Examples/DataGridVirtualize.razor

@@ -26,7 +26,6 @@
 </FluentSwitch>
 <FluentButton OnClick="SimulateDataLoading">Simulate data loading</FluentButton>
 
-
 @code {
     FluentDataGrid<SampleGridData>? grid;
     FluentSwitch? _clearToggle;

src/Core/Components/DataGrid/Columns/ColumnBase.razor

@@ -21,7 +21,7 @@
 
                 @if (AnyColumnActionEnabled)
                 {
-                    <FluentButton Disabled="@(!AnyColumnActionEnabled)" Id="@_columnId" Appearance="Appearance.Stealth" Class="col-sort-button" Style="width: calc(100% - 20px);" @onclick="@HandleColumnHeaderClickedAsync" aria-label="@tooltip" title="@tooltip">
+                    <FluentButton Disabled="@(!AnyColumnActionEnabled)" Id="@_columnId" Appearance="Appearance.Stealth" Class="col-sort-button" Style="width: calc(100% - 10px);" @onclick="@HandleColumnHeaderClickedAsync" aria-label="@tooltip" title="@tooltip">
                         <div class="col-title-text" title="@tooltip">@Title</div>
 
                         @if (Grid.SortByAscending.HasValue && IsActiveSortColumn)
@@ -90,13 +90,24 @@
         else
         {
             string? tooltip = Tooltip ? (HeaderTooltip ?? Title) : null;
-            string? wdelta = "20px";
+            string? wdelta = "10px";
+            string? align;
 
             if (Grid.ResizeType is not null || ColumnOptions is not null)
             {
                 wdelta = "56px";
             }
-            <div style="display: flex;">
+
+            // determine align string based on Align value
+            align = Align switch
+            {
+                Align.Start => "flex-start",
+                Align.Center => "center",
+                Align.End => "flex-end",
+                _ => "flex-start"
+            };
+
+            <div style="display: flex; justify-content: @align;">
                 @if (Align == Align.Start || Align == Align.Center)
                 {
                     @if (Grid.ResizeType is not null)

src/Core/Components/DataGrid/Columns/ColumnBase.razor.css

@@ -1,5 +1,5 @@
 .col-title {
-    padding: 0.4rem 0.8rem;
+    padding: 6px 16px;
     user-select: none;
 }
 

src/Core/Components/DataGrid/FluentDataGrid.razor

@@ -193,7 +193,7 @@
 
                 @if (ResizableColumns)
                 {
-                    <FluentDivider Class="resize-handle" Orientation="Orientation.Vertical" Role="DividerRole.Separator" />
+                    <div class="resize-handle"></div>
                 }
             </FluentDataGridCell>
         }

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

@@ -64,19 +64,15 @@
 
 ::deep .resize-handle {
     position: absolute;
-    top: 5px;
+    top: 6px;
     right: 0;
     left: unset;
     bottom: 0;
-    height: 32px;
+    height: 30px;
     cursor: col-resize;
-    margin-left: calc(var(--design-unit) * 2px);
-    width: calc(var(--design-unit) * 1px + 2px);
-}
-
-[dir=rtl] * ::deep .resize-handle {
-    left: 0;
-    right: unset;
+    width: 6px;
+    border-inline-end: 1px solid var(--neutral-stroke-divider-rest);
+    ;
 }
 
 .header {

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

@@ -160,108 +160,154 @@ export function checkColumnPopupPosition(gridElement, selector) {
 
 export function enableColumnResizing(gridElement) {
     const columns = [];
-    let min = 75;
-    let headerBeingResized;
-    let resizeHandle;
-
     const headers = gridElement.querySelectorAll('.column-header.resizable');
 
     if (headers.length === 0) {
         return;
     }
 
-    headers.forEach(header => {
+    const isRTL = getComputedStyle(gridElement).direction === 'rtl';
+    const isGrid = gridElement.classList.contains('grid')
+
+    let tableHeight = gridElement.offsetHeight;
+    // rows have not been loaded yet, so we need to calculate the height
+    if (tableHeight < 70) {
+        // by getting the aria rowcount attribute
+        const rowCount = gridElement.getAttribute('aria-rowcount');
+        if (rowCount) {
+            const rowHeight = gridElement.querySelector('thead tr th').offsetHeight;
+            // and multiply by the itemsize (== height of the header cells)
+            tableHeight = rowCount * rowHeight;
+        }
+    }
+
+    headers.forEach((header) => {
         columns.push({
             header,
-            size: `minmax(${minWidth}px,auto)`,
+            size: `${header.clientWidth}px`,
         });
 
-        const onPointerMove = (e) => requestAnimationFrame(() => {
-            if (!headerBeingResized) {
-                return;
-            }
-            gridElement.style.tableLayout = "fixed";
+        const div = createDiv(tableHeight, isRTL);
+        header.appendChild(div);
+        header.style.position = 'relative';
+        setListeners(div, isRTL);
+    });
 
-            const horizontalScrollOffset = document.documentElement.scrollLeft;
-            let width;
+    let initialWidths;
+    if (gridElement.style.gridTemplateColumns) {
+        initialWidths = gridElement.style.gridTemplateColumns;
+    } else {
+        initialWidths = columns.map(({ size }) => size).join(' ');
 
-            if (document.body.dir === '' || document.body.dir === 'ltr') {
-                width = (horizontalScrollOffset + e.clientX) - headerBeingResized.getClientRects()[0].x;
-            }
-            else {
-                width = headerBeingResized.getClientRects()[0].x + headerBeingResized.clientWidth - (horizontalScrollOffset + e.clientX);
-            }
+        if (isGrid) {
+            gridElement.style.gridTemplateColumns = initialWidths;
+        }
+    }
 
-            const column = columns.find(({ header }) => header === headerBeingResized);
-            column.size = Math.max(minWidth, width) + 'px';
+    const id = gridElement.id;
+    grids.push({
+        id,
+        columns,
+        initialWidths,
+    });
 
-            columns.forEach((column) => {
-                if (column.size.startsWith('minmax')) {
-                    column.size = parseInt(column.header.clientWidth, 10) + 'px';
-                }
-            });
+    function setListeners(div, isRTL) {
+        let pageX, curCol, curColWidth;
+
+        div.addEventListener('pointerdown', function (e) {
+            curCol = e.target.parentElement;
+            pageX = e.pageX;
+
+            const padding = paddingDiff(curCol);
 
-            gridElement.style.gridTemplateColumns = columns
-                .map(({ size }) => size)
-                .join(' ');
+            curColWidth = curCol.offsetWidth - padding;
         });
 
-        const onPointerUp = (e) => {
+        div.addEventListener('pointerover', function (e) {
+            e.target.style.borderInlineEnd = '2px solid var(--neutral-stroke-focus)';
+        });
 
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerUp);
-            window.removeEventListener('pointerleave', onPointerUp);
+        div.addEventListener('pointerup', removeBorder);
+        div.addEventListener('pointercancel', removeBorder);
+        div.addEventListener('pointerleave', removeBorder);
 
-            headerBeingResized.classList.remove('header-being-resized');
-            headerBeingResized = null;
+        document.addEventListener('pointermove', (e) =>
+            requestAnimationFrame(() => {
+                gridElement.style.tableLayout = 'fixed';
 
-            if (e.target.hasPointerCapture(e.pointerId)) {
-                e.target.releasePointerCapture(e.pointerId);
-            }
-        };
+                if (curCol) {
+                    const diffX = isRTL ? pageX - e.pageX : e.pageX - pageX;
+                    const column = columns.find(({ header }) => header === curCol);
 
-        const initResize = ({ target, pointerId }) => {
-            headerBeingResized = target.parentNode;
-            headerBeingResized.classList.add('header-being-resized');
+                    column.size = parseInt(Math.max(minWidth, curColWidth + diffX), 10) + 'px';
 
+                    columns.forEach((col) => {
+                        if (col.size.startsWith('minmax')) {
+                            col.size = parseInt(col.header.clientWidth, 10) + 'px';
+                        }
+                    });
 
-            window.addEventListener('pointermove', onPointerMove);
-            window.addEventListener('pointerup', onPointerUp);
-            window.addEventListener('pointercancel', onPointerUp);
-            window.addEventListener('pointerleave', onPointerUp);
+                    if (isGrid) {
+                        gridElement.style.gridTemplateColumns = columns
+                            .map(({ size }) => size)
+                            .join(' ');
+                    }
+                    else {
+                        curCol.style.width = column.size;
+                    }
+                }
+            })
+        );
 
-            if (resizeHandle) {
-                resizeHandle.setPointerCapture(pointerId);
-            }
-        };
+        document.addEventListener('pointerup', function () {
+            curCol = undefined;
+            curColWidth = undefined;
+            pageX = undefined;
+        });
+    }
 
-        header.querySelector('.resize-handle').addEventListener('pointerdown', initResize);
+    function createDiv(height, isRTL) {
+        const div = document.createElement('div');
+        div.style.top = '5px';
+        div.style.position = 'absolute';
+        div.style.cursor = 'col-resize';
+        div.style.userSelect = 'none';
+        div.style.height = height + 'px';
+        div.style.width = '5px';
+
+        if (isRTL) {
+            div.style.left = '0px';
+            div.style.right = 'unset';
+        } else {
+            div.style.left = 'unset';
+            div.style.right = '0px';
+        }
+        return div;
+    }
 
-    });
+    function paddingDiff(col) {
+        if (getStyleVal(col, 'box-sizing') === 'border-box') {
+            return 0;
+        }
 
-    let initialWidths;
-    if (gridElement.style.gridTemplateColumns) {
-        initialWidths = gridElement.style.gridTemplateColumns;
+        const padLeft = getStyleVal(col, 'padding-left');
+        const padRight = getStyleVal(col, 'padding-right');
+        return parseInt(padLeft) + parseInt(padRight);
     }
-    else {
-        initialWidths = columns
-            .map(({ header, size }) => size)
-            .join(' ');
 
-        gridElement.style.gridTemplateColumns = initialWidths;
+    function getStyleVal(elm, css) {
+        return window.getComputedStyle(elm, null).getPropertyValue(css);
     }
 
-    let id = gridElement.id;
-    grids.push({
-        id,
-        columns,
-        initialWidths
-    });
+    function removeBorder(e) {
+        e.target.style.borderInlineEnd = '';
+    }
 }
 
-export function resetColumnWidths(gridElement) {
 
+
+export function resetColumnWidths(gridElement) {
+    const isGrid = gridElement.classList.contains('grid');
     const grid = grids.find(({ id }) => id === gridElement.id);
     if (!grid) {
         return;
@@ -270,11 +316,19 @@ export function resetColumnWidths(gridElement) {
     const columnsWidths = grid.initialWidths.split(' ');
 
     grid.columns.forEach((column, index) => {
-        column.size = columnsWidths[index];
+        if (isGrid) {
+            column.size = columnsWidths[index];
+        } else {
+            column.header.style.width = columnsWidths[index];
+        }
     });
 
-    gridElement.style.gridTemplateColumns = grid.initialWidths;
-    gridElement.dispatchEvent(new CustomEvent('closecolumnresize', { bubbles: true }));
+    if (isGrid) {
+        gridElement.style.gridTemplateColumns = grid.initialWidths;
+    }
+    gridElement.dispatchEvent(
+        new CustomEvent('closecolumnresize', { bubbles: true })
+    );
     gridElement.focus();
 }
 
@@ -308,7 +362,7 @@ export function resizeColumnDiscrete(gridElement, column, change) {
         }
         else {
             if (column.size.startsWith('minmax')) {
-                    column.size = parseInt(column.header.clientWidth, 10) + 'px';
+                column.size = parseInt(column.header.clientWidth, 10) + 'px';
             }
         }
         columns.push(column.size);

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

@@ -75,7 +75,7 @@ public partial class FluentDataGridCell<TGridItem> : FluentComponentBase
         .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)
         .AddStyle("width", Column?.Width, !string.IsNullOrEmpty(Column?.Width) && Grid.DisplayMode == DataGridDisplayMode.Table)
-        .AddStyle("height", $"{Grid.ItemSize:0}px", () => !Grid.EffectiveLoadingValue && Grid.Virtualize && Owner.RowType == DataGridRowType.Default)
+        .AddStyle("height", $"{Grid.ItemSize:0}px", () => !Grid.EffectiveLoadingValue && Grid.Virtualize)
         .AddStyle("height", $"{(int)Grid.RowSize}px", () => !Grid.EffectiveLoadingValue && !Grid.Virtualize && !Grid.MultiLine && (Grid.Items is not null || Grid.ItemsProvider is not null))
         .AddStyle("height", "100%", Grid.MultiLine)
         .AddStyle("min-height", "44px", Owner.RowType != DataGridRowType.Default)