feat(Table): add auto width function (#8126)

* feat: 增加客户端未设置列宽列自适应功能

* Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Signed-off-by: Argo Zhang <argo@live.ca>

* Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Signed-off-by: Argo Zhang <argo@live.ca>

* chore: bump version 10.7.2

---------

Signed-off-by: Argo Zhang <argo@live.ca>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>10.7.2-beta04</Version>
+    <Version>10.7.2</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Table/Table.razor.Edit.cs

@@ -516,6 +516,12 @@ private async Task QueryAsync(bool shouldRender, int? pageIndex = null, bool tri
 
         if (shouldRender)
         {
+            // 数据渲染后触发脚本测量列内容最小宽度 用于固定表头(table-layout:fixed)窄容器下横向滚动兜底
+            if (IsFixedHeader)
+            {
+                _measureColumnMinWidth = true;
+                _invoke = true;
+            }
             StateHasChanged();
         }
     }

src/BootstrapBlazor/Components/Table/Table.razor.cs

@@ -522,6 +522,7 @@ private string GetSortTooltip(ITableColumn col) => SortName != col.GetFieldName(
     private bool _resetTable;
     private bool _resetColumnListPopover;
     private bool _resetColumns;
+    private bool _measureColumnMinWidth;
     private bool _updateSortTooltip;
     private bool _shouldScrollTop;
     private bool _invoke;
@@ -1151,13 +1152,15 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             var resetColumnListPopover = _resetColumnListPopover;
             var resetTable = _resetTable;
             var resetColumns = _resetColumns;
+            var measureColumnMinWidth = _measureColumnMinWidth;
             var updateSortTooltip = _updateSortTooltip;
             var scrollToTop = _shouldScrollTop;
 
             _invoke = false;
             _resetColumnListPopover = false;
             _resetTable = false;
             _resetColumns = false;
+            _measureColumnMinWidth = false;
             _updateSortTooltip = false;
             _shouldScrollTop = false;
 
@@ -1167,6 +1170,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
                 ResetColumnListPopover = resetColumnListPopover,
                 ResetTable = resetTable,
                 ResetColumns = resetColumns,
+                MeasureColumnMinWidth = measureColumnMinWidth,
                 ColumnStates = _tableColumnStates,
                 AllowDragColumn,
                 UpdateSortTooltip = updateSortTooltip,
@@ -1463,6 +1467,7 @@ private async Task OnTableRenderAsync(bool firstRender)
                 FitColumnWidthIncludeHeader,
                 ResizeColumnCallback = nameof(ResizeColumnCallback),
                 ColumnMinWidth = ColumnMinWidth ?? Options.CurrentValue.TableSettings.ColumnMinWidth,
+                ColumnStates = _tableColumnStates,
                 ScrollWidth = ActualScrollWidth,
                 ShowColumnWidthTooltip,
                 ColumnWidthTooltipPrefix,

src/BootstrapBlazor/Components/Table/Table.razor.js

@@ -26,6 +26,16 @@ export async function reset(id) {
         return;
     }
 
+    if (table.minWidthObserver) {
+        table.minWidthObserver.disconnect();
+        table.minWidthObserver = null;
+    }
+    if (table.minWidthRaf) {
+        cancelAnimationFrame(table.minWidthRaf);
+        table.minWidthRaf = null;
+    }
+    table.autoColumns = [];
+
     table.columns = [];
     table.tables = [];
     table.dragColumns = [];
@@ -51,6 +61,19 @@ export async function reset(id) {
                 const left = table.body.scrollLeft
                 table.thead.scrollTo(left, 0)
             });
+
+            if (window.ResizeObserver) {
+                table.minWidthObserver = new ResizeObserver(() => {
+                    if (table.minWidthRaf) {
+                        cancelAnimationFrame(table.minWidthRaf);
+                    }
+                    table.minWidthRaf = requestAnimationFrame(() => {
+                        table.minWidthRaf = null;
+                        applyColumnMinWidth(table);
+                    });
+                });
+                table.minWidthObserver.observe(table.body);
+            }
         }
         else {
             table.isExcel = shim.firstElementChild.classList.contains('table-excel')
@@ -91,6 +114,10 @@ export async function reset(id) {
         table.loopCheckHeightHandler = requestAnimationFrame(() => check(table));
         return;
     }
+
+    if (table.thead) {
+        setColSize(table, table.options);
+    }
 }
 
 export async function switchCardView(id) {
@@ -113,6 +140,13 @@ const destroyTable = table => {
         if (table.loopCheckHeightHandler) {
             cancelAnimationFrame(table.loopCheckHeightHandler);
         }
+        if (table.minWidthObserver) {
+            table.minWidthObserver.disconnect();
+            table.minWidthObserver = null;
+        }
+        if (table.minWidthRaf) {
+            cancelAnimationFrame(table.minWidthRaf);
+        }
         if (table.thead) {
             EventHandler.off(table.body, 'scroll')
         }
@@ -1062,6 +1096,9 @@ export async function updateTableState(id, options) {
         if (options.resetColumns) {
             resetColumns(table, options);
         }
+        else if (options.measureColumnMinWidth) {
+            setColSize(table, options);
+        }
 
         if (options.resetColumnListPopover) {
             resetColumnListPopover(table);
@@ -1121,18 +1158,57 @@ const resetColumns = (table, options) => {
 }
 
 const setColSize = (table, options) => {
-    var zeroWidthColumns = options.columnStates.filter(i => i.width === null && i.visible === true);
-    zeroWidthColumns.forEach(col => {
-        const headerCollection = [...table.tables[0].querySelectorAll('thead > tr > th')];
+    if (!table.tables || table.tables.length === 0) {
+        return;
+    }
+    const headerCollection = [...table.tables[0].querySelectorAll('thead > tr > th')];
+    const columnMinWidth = table.options.columnMinWidth || 0;
+    const autoColumns = [];
+    options.columnStates.forEach(col => {
+        if (col.width != null || col.visible === false) {
+            return;
+        }
         const th = headerCollection.find(i => i.getAttribute('data-bb-field') === col.name);
-        if (th.offsetWidth === 0) {
-            const width = getCellWidth(th);
-            const colIndex = headerCollection.indexOf(th);
-            col.width = Math.max(width, getColumnMaxCellWidth(table, colIndex));
-            table.tables.forEach(table => {
-                table.querySelectorAll('colgroup col')[colIndex].style.width = `${col.width}px`;
-            });
+        if (th === void 0) {
+            return;
         }
+        const colIndex = headerCollection.indexOf(th);
+        const minWidth = Math.max(getCellWidth(th) + getHeaderIconsWidth(th), getColumnMaxCellWidth(table, colIndex), columnMinWidth) | 0;
+        autoColumns.push({ colIndex, minWidth });
+    });
+    table.autoColumns = autoColumns;
+    applyColumnMinWidth(table);
+}
+
+const getHeaderIconsWidth = th => {
+    let width = 0;
+    th.querySelectorAll('.sort-icon, .filter-icon, .toolbox-icon, .col-copy').forEach(icon => {
+        width += getWidth(icon);
+    });
+    return width;
+}
+
+const applyColumnMinWidth = table => {
+    if (!table.thead || !table.body || !table.autoColumns || table.autoColumns.length === 0) {
+        return;
+    }
+    setAutoColWidths(table, true);
+    const compact = table.body.scrollWidth > table.body.clientWidth + 1;
+    if (!compact) {
+        setAutoColWidths(table, false);
+    }
+}
+
+const setAutoColWidths = (table, apply) => {
+    const colgroups = table.tables.map(t => t.querySelectorAll('colgroup col'));
+    table.autoColumns.forEach(({ colIndex, minWidth }) => {
+        const width = apply ? `${minWidth}px` : '';
+        colgroups.forEach(cols => {
+            const colEl = cols[colIndex];
+            if (colEl) {
+                colEl.style.width = width;
+            }
+        });
     });
 }