feat(Table): add IsGroupExtendButtons parameter (#7044)

* feat(Table): add UseButtonGroup parameter

* refactor: 更改名字

* test: 增加单元测试

* refactor: 更改参数名称

Author: ArgoZhang

src/BootstrapBlazor/Components/Table/Table.razor

@@ -869,7 +869,7 @@
     RenderFragment<TItem> RenderExtendButtons => item =>
     @<div class="table-cell">
         <label>@ColumnButtonTemplateHeaderText</label>
-        <span class="btn-group">
+        <div class="@ExtendButtonGroupClassString">
             @if (BeforeRowButtonTemplate != null)
             {
                 <TableExtensionButton OnClickButton="cell => OnClickExtensionButton(item, cell)">
@@ -897,13 +897,13 @@
                     @RowButtonTemplate.Invoke(item)
                 </TableExtensionButton>
             }
-        </span>
+        </div>
     </div>;
 
     RenderFragment<TItem> RenderRowExtendButtons => item =>
     @<td class="@FixedExtendButtonsColumnClassString" style="@GetFixedExtendButtonsColumnStyleString()">
         <div class="@ExtendButtonsCellClassString">
-            <div class="btn-group" @onclick:stopPropagation="true">
+            <div class="@ExtendButtonGroupClassString" @onclick:stopPropagation="true">
                 @{
                     var isInCell = InCellMode && SelectedRows.FirstOrDefault() == item;
                 }

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

@@ -47,6 +47,12 @@ public partial class Table<TItem> : ITable, IModelEqualityComparer<TItem> where
     [Parameter]
     public int DefaultFixedColumnWidth { get; set; } = 200;
 
+    /// <summary>
+    /// 获得/设置 是否使用按钮组显示行内扩展按钮 默认 true
+    /// </summary>
+    [Parameter]
+    public bool IsGroupExtendButtons { get; set; } = true;
+
     /// <summary>
     /// 获得/设置 内置虚拟化组件实例
     /// </summary>
@@ -153,6 +159,11 @@ public partial class Table<TItem> : ITable, IModelEqualityComparer<TItem> where
         .AddClass(ExtendButtonColumnAlignment.ToDescriptionString())
         .Build();
 
+    private string? ExtendButtonGroupClassString => CssBuilder.Default()
+        .AddClass("btn-group", IsGroupExtendButtons)
+        .AddClass("btn-separate", !IsGroupExtendButtons)
+        .Build();
+
     private string GetSortTooltip(ITableColumn col) => SortName != col.GetFieldName()
         ? UnsetText
         : SortOrder switch

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

@@ -968,3 +968,7 @@ form .table .table-cell > textarea {
 .bb-sortable tr {
     cursor: pointer;
 }
+
+.btn-separate > button:not(:last-child) {
+    margin-inline-end: .25rem;
+}

test/UnitTest/Components/TableTest.cs

@@ -2026,6 +2026,17 @@ public void RowButtonTemplate_Ok()
                 });
             });
         });
+
+        cut.Contains("<div class=\"btn-group\">");
+
+        var table = cut.FindComponent<Table<Foo>>();
+        Assert.NotNull(table);
+
+        table.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.IsGroupExtendButtons, false);
+        });
+        cut.Contains("<div class=\"btn-separate\">");
     }
 
     [Fact]