fix(Table): can't resize column when use dynamic data

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>7.12.2-beta01</Version>
+    <Version>7.12.2-beta02</Version>
   </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

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

@@ -968,6 +968,9 @@ private void ResetDynamicContext()
             InternalResetVisibleColumns(Columns.Select(i => new ColumnVisibleItem(i.GetFieldName(), i.Visible)));
 
             QueryDynamicItems(DynamicContext);
+
+            // 重新绑定列拖拽
+            _bindResizeColumn = true;
         }
     }
 

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

@@ -138,10 +138,10 @@ namespace BootstrapBlazor.Components;
     private static string? GetColWidthString(int? width) => width.HasValue ? $"width: {width.Value}px;" : null;
 
     /// <summary>
-    /// 获得/设置 滚动条宽度 默认为 7
+    /// 获得/设置 滚动条宽度 默认为 6
     /// </summary>
     [Parameter]
-    public int ScrollWidth { get; set; } = 7;
+    public int ScrollWidth { get; set; } = 6;
 
     private string ScrollWidthString => $"width: {ScrollWidth}px;";
 
@@ -715,6 +715,8 @@ private void OnInitParameters()
     /// </summary>
     protected CancellationTokenSource? AutoRefreshCancelTokenSource { get; set; }
 
+    private bool _bindResizeColumn;
+
     /// <summary>
     /// OnParametersSet 方法
     /// </summary>
@@ -800,6 +802,12 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             await InvokeVoidAsync("resetColumn", Id);
         }
 
+        if (_bindResizeColumn)
+        {
+            _bindResizeColumn = false;
+            await InvokeVoidAsync("bindResizeColumn", Id);
+        }
+
         if (UpdateSortTooltip)
         {
             UpdateSortTooltip = false;

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

@@ -515,8 +515,19 @@ export function reset(id) {
 
 export function resetColumn(id) {
     const table = Data.get(id)
-    setResizeListener(table)
-    resetTableWidth(table)
+    if (table) {
+        setResizeListener(table)
+        resetTableWidth(table)
+    }
+}
+
+export function bindResizeColumn(id) {
+    const table = Data.get(id)
+    if (table) {
+        if (table.isResizeColumn) {
+            setResizeListener(table)
+        }
+    }
 }
 
 export function sort(id) {

src/BootstrapBlazor/Components/Table/Table.razor.scss

@@ -18,6 +18,8 @@
     --bb-table-copy-column-margin-right: .5rem;
     --bb-table-column-fixed-border-color: #dee2e6;
     --bb-loader-bg: #f8f9fa;
+    --bb-table-column-resizer-color: #ddd;
+    --bb-table-column-resizer-hover-color: #ddd;
     position: relative;
     height: 100%;
 }
@@ -582,6 +584,12 @@ tr.active:not(.is-edit):hover {
     right: 0;
     bottom: 0;
     cursor: col-resize;
+    border-right: 1px solid var(--bb-table-column-resizer-color);
+    transition: background-color .3s linear;
+
+    &:hover {
+        background-color: var(--bb-table-column-resizer-hover-color);
+    }
 }
 
 .table-resize .border-resize {

src/BootstrapBlazor/wwwroot/scss/bootstrap.blazor.css

@@ -6149,6 +6149,8 @@ body:before {
   --bb-table-copy-column-margin-right: .5rem;
   --bb-table-column-fixed-border-color: #dee2e6;
   --bb-loader-bg: #f8f9fa;
+  --bb-table-column-resizer-color: #ddd;
+  --bb-table-column-resizer-hover-color: #ddd;
   position: relative;
   height: 100%;
 }
@@ -6712,6 +6714,11 @@ tr.active:not(.is-edit):hover {
   right: 0;
   bottom: 0;
   cursor: col-resize;
+  border-right: 1px solid var(--bb-table-column-resizer-color);
+  transition: background-color 0.3s linear;
+}
+.col-resizer:hover {
+  background-color: var(--bb-table-column-resizer-hover-color);
 }
 
 .table-resize .border-resize {