feat(Table): add FitAllColumnWidth instance method (#6857)

* feat(Table): add FitAllColumnWidth instance method

* refactor: 增加 border 宽度

* chore: bump version 9.11.1

* test: 增加单元测试

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

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

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

@@ -1590,6 +1590,14 @@ private async Task OnContextMenu(MouseEventArgs e, TItem item)
     [Parameter]
     public Func<string, Task<float>>? OnAutoFitContentAsync { get; set; }
 
+    /// <summary>
+    /// 列宽自适应方法
+    /// </summary>
+    public async Task FitAllColumnWidth()
+    {
+        await InvokeVoidAsync("fitAllColumnWidth", Id);
+    }
+
     /// <summary>
     /// 重置列方法 由 JavaScript 脚本调用
     /// </summary>

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

@@ -114,6 +114,18 @@ export function reset(id) {
     observeHeight(table)
 }
 
+export function fitAllColumnWidth(id) {
+    const table = Data.get(id)
+    if (table === null) {
+        return;
+    }
+
+    const columns = [...table.tables[0].querySelectorAll('.col-resizer')];
+    columns.forEach(async col => {
+        await autoFitColumnWidth(table, col);
+    });
+}
+
 const observeHeight = table => {
     setBodyHeight(table);
 
@@ -773,8 +785,7 @@ const calcCellWidth = cell => {
     document.body.appendChild(div);
 
     const cellStyle = getComputedStyle(cell);
-    const width = div.offsetWidth + parseFloat(cellStyle.getPropertyValue('padding-left')) + parseFloat(cellStyle.getPropertyValue('padding-right'));
-    div.remove();
+    const width = div.offsetWidth + parseFloat(cellStyle.getPropertyValue('padding-left')) + parseFloat(cellStyle.getPropertyValue('padding-right')) + parseFloat(cellStyle.getPropertyValue('border-left-width')) + parseFloat(cellStyle.getPropertyValue('border-right-width')) + 1;
     return width;
 }
 

test/UnitTest/Components/TableTest.cs

@@ -6030,6 +6030,37 @@ public void ReloadColumnWidth_Columns_Invalid()
         Assert.DoesNotContain("<col style=\"width: 20px;\" />", table.Markup);
     }
 
+    [Fact]
+    public async Task FitAllColumnWidth_Ok()
+    {
+        var localizer = Context.Services.GetRequiredService<IStringLocalizer<Foo>>();
+        var items = Foo.GenerateFoo(localizer, 2);
+        var cut = Context.RenderComponent<BootstrapBlazorRoot>(pb =>
+        {
+            pb.AddChildContent<Table<Foo>>(pb =>
+            {
+                pb.Add(a => a.RenderMode, TableRenderMode.Table);
+                pb.Add(a => a.AllowResizing, true);
+                pb.Add(a => a.Items, items);
+                pb.Add(a => a.TableColumns, foo => builder =>
+                {
+                    builder.OpenComponent<TableColumn<Foo, string>>(0);
+                    builder.AddAttribute(1, "Field", "Name");
+                    builder.AddAttribute(2, "FieldExpression", Utility.GenerateValueExpression(foo, "Name", typeof(string)));
+                    builder.CloseComponent();
+
+                    builder.OpenComponent<TableColumn<Foo, string>>(0);
+                    builder.AddAttribute(1, "Field", "Address");
+                    builder.AddAttribute(2, "FieldExpression", Utility.GenerateValueExpression(foo, "Address", typeof(string)));
+                    builder.CloseComponent();
+                });
+            });
+        });
+        var table = cut.FindComponent<Table<Foo>>();
+        Assert.NotNull(table);
+        await cut.InvokeAsync(() => table.Instance.FitAllColumnWidth());
+    }
+
     [Fact]
     public async Task Refresh_Ok()
     {