feat(Table): add ShowSearchInColumnList parameter

src/BootstrapBlazor.Server/Components/Samples/Table/TablesColumnList.razor

@@ -1,4 +1,4 @@
-@page "/table/column/list"
+@page "/table/column/list"
 @inject IStringLocalizer<NavMenu> NavMenuLocalizer
 @inject IStringLocalizer<TablesColumnList> Localizer
 @inject IOptions<WebsiteOptions> WebsiteOption
@@ -13,6 +13,7 @@
            Name="Visible">
     <section ignore>
         <p>@((MarkupString)Localizer["VisibleP1"].Value)</p>
+        <p>@((MarkupString)Localizer["ShowColumnListControlsDesc"].Value)</p>
         <p>@((MarkupString)Localizer["VisibleP2"].Value)</p>
         <p>@((MarkupString)Localizer["VisibleP3"].Value)</p>
         <p>@((MarkupString)Localizer["VisibleP4"].Value)</p>
@@ -22,9 +23,9 @@
 
     <Table TItem="Foo" @ref="TableColumnVisible"
            IsPagination="true" PageItemsSource="@PageItemsSource"
-           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
+           IsStriped="true" IsBordered="true" IsMultipleSelect="true" ShowColumnListControls="true"
            ShowToolbar="true" ShowAddButton="false" ShowEditButton="false" ShowDeleteButton="false"
-           ShowExtendButtons="false" ShowColumnList="true" ClientTableName="testtable"
+           ShowExtendButtons="false" ShowColumnList="true" ClientTableName="test_table"
            OnQueryAsync="@OnQueryAsync">
         <TableColumns>
             <TableColumn @bind-Field="@context.DateTime" Width="180" />

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -5156,7 +5156,8 @@
     "VisibleP3": "In this example, the <b>quantity</b> column is not displayed by setting <code>Visible</code>, and it can be displayed through the column control button",
     "VisibleP4": "Trigger the <code>OnColumnVisibleChanged</code> callback when switch the column state <b>Show/Hide</b>",
     "ResetVisibleColumnsButtonText": "Set Columns",
-    "ResetVisibleColumnsDesc": "Call the instancel method <code>ResetVisibleColumns</code> of <code>Table</code> for set the multiple columns visible value"
+    "ResetVisibleColumnsDesc": "Call the instancel method <code>ResetVisibleColumns</code> of <code>Table</code> for set the multiple columns visible value",
+    "ShowColumnListControlsDesc": "The <code>ShowColumnListControls</code> setting controls whether the column dropdown list displays control buttons. The built-in control buttons are <code>All</code> and <code>Invert</code>."
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesColumnTemplate": {
     "TablesColumnTitle": "Table Column",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -5156,7 +5156,8 @@
     "VisibleP3": "此例中 <b>数量</b> 列通过设置 <code>Visible</code> 未显示，可以通过列控制按钮进行显示设置",
     "VisibleP4": "更改 <b>列</b> 状态后触发 <code>OnColumnVisibleChanged</code> 回调委托",
     "ResetVisibleColumnsButtonText": "设置列隐藏信息",
-    "ResetVisibleColumnsDesc": "通过调用 <code>Table</code> 实例方法 <code>ResetVisibleColumns</code> 可设置任意列显示隐藏属性"
+    "ResetVisibleColumnsDesc": "通过调用 <code>Table</code> 实例方法 <code>ResetVisibleColumns</code> 可设置任意列显示隐藏属性",
+    "ShowColumnListControlsDesc": "通过设置 <code>ShowColumnListControls</code> 控制列下拉框是否显示控制按钮，内置控制按钮有 <code>全选</code> 与 <code>反选</code> 两个按钮"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesColumnTemplate": {
     "TablesColumnTitle": "Table 表格",

src/BootstrapBlazor/Components/Table/Table.razor

@@ -1,4 +1,4 @@
-@namespace BootstrapBlazor.Components
+@namespace BootstrapBlazor.Components
 @using Microsoft.AspNetCore.Components.Web.Virtualization
 @typeparam TItem
 @inherits BootstrapModuleComponentBase
@@ -14,7 +14,7 @@
         {
             <SkeletonTable ShowToolbar="@ShowToolbar"></SkeletonTable>
         }
-        else if(ShowLoadingInFirstRender)
+        else if (ShowLoadingInFirstRender)
         {
             <div class="table-loading">
                 @if (LoadingTemplate is not null)
@@ -117,16 +117,29 @@
                                 <span class="d-none d-sm-inline-block">@ColumnButtonText</span>
                                 <span class="caret"></span>
                             </button>
-                            <div class="dropdown-menu dropdown-menu-end shadow">
-                                @foreach (var item in _visibleColumns)
+                            <div class="@DropdownListClassString">
+                                @if (ShowColumnListControls)
                                 {
-                                    <div class="dropdown-item">
-                                        <Checkbox ShowAfterLabel="true" DisplayText="@item.DisplayName"
-                                                  IsDisabled="@GetColumnsListState(item)"
-                                                  @bind-Value="@item.Visible"
-                                                  OnValueChanged="visible => OnToggleColumnVisible(item.Name, visible)">
-                                        </Checkbox>
+                                    <div class="column-list-controls">
+                                        <Button Text="@Localizer["ColumnListSelectAllText"]" Size="Size.ExtraSmall"
+                                                OnClick="TriggerSelectAllColumnList"></Button>
+                                        <Button Text="@Localizer["ColumnListSelectInvertText"]" Size="Size.ExtraSmall"
+                                                OnClick="TriggerSelectInvertColumnList" class="ms-2"></Button>
                                     </div>
+                                    <Divider />
+                                    <div class="column-list-items">
+                                        @foreach (var item in _visibleColumns)
+                                        {
+                                            @RenderColumnListItem(item)
+                                        }
+                                    </div>
+                                }
+                                else
+                                {
+                                    @foreach (var item in _visibleColumns)
+                                    {
+                                        @RenderColumnListItem(item)
+                                    }
                                 }
                             </div>
                         </div>
@@ -253,7 +266,7 @@
                 {
                     foreach (var item in Rows)
                     {
-				        OnBeforeRenderRow?.Invoke(item);
+                        OnBeforeRenderRow?.Invoke(item);
                         if (RowTemplate != null)
                         {
                             var columns = GetVisibleColumns();
@@ -1131,4 +1144,12 @@
                      GotoNavigatorLabelText="@GotoNavigatorLabelText"
                      ShowPageInfo="ShowPageInfo" PageInfoTemplate="InternalPageInfoTemplate"/>;
 
+    RenderFragment<ColumnVisibleItem> RenderColumnListItem => item =>
+        @<div class="dropdown-item">
+            <Checkbox ShowAfterLabel="true" DisplayText="@item.DisplayName"
+                        IsDisabled="@GetColumnsListState(item)"
+                        @bind-Value="@item.Visible"
+                        OnValueChanged="visible => OnToggleColumnVisible(item.Name, visible)">
+            </Checkbox>
+        </div>;
 }

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

@@ -1,4 +1,4 @@
-// Licensed to the .NET Foundation under one or more agreements.
+// Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the Apache 2.0 License
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
@@ -173,4 +173,25 @@ private async Task OnToggleColumnVisible(string columnName, bool visible)
             await OnColumnVisibleChanged(columnName, visible);
         }
     }
+
+    private void TriggerSelectAllColumnList()
+    {
+        foreach (var column in _visibleColumns)
+        {
+            column.Visible = true;
+        }
+    }
+
+    private void TriggerSelectInvertColumnList()
+    {
+        foreach (var column in _visibleColumns)
+        {
+            column.Visible = !column.Visible;
+        }
+
+        if (_visibleColumns.All(i => i.Visible == false))
+        {
+            _visibleColumns.First().Visible = true;
+        }
+    }
 }

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

@@ -1,4 +1,4 @@
-// Licensed to the .NET Foundation under one or more agreements.
+// Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the Apache 2.0 License
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
@@ -7,10 +7,6 @@
 
 namespace BootstrapBlazor.Components;
 
-/// <summary>
-/// 
-/// </summary>
-/// <typeparam name="TItem"></typeparam>
 public partial class Table<TItem>
 {
     /// <summary>

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

@@ -1,4 +1,4 @@
-// Licensed to the .NET Foundation under one or more agreements.
+// Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the Apache 2.0 License
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
@@ -310,6 +310,12 @@ public Func<TItem, bool>? ShowDeleteButtonCallback
     [Parameter]
     public bool ShowColumnList { get; set; }
 
+    /// <summary>
+    /// 获得/设置 列选择下拉框中是否显示控制功能按钮默认为 false 不显示
+    /// </summary>
+    [Parameter]
+    public bool ShowColumnListControls { get; set; }
+
     /// <summary>
     /// 获得/设置 列选择下拉框图标
     /// </summary>

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

@@ -814,6 +814,10 @@ public async Task ExpandDetailRow(TItem item)
 
     private bool _isFilterTrigger;
 
+    private string? DropdownListClassString => CssBuilder.Default("dropdown-menu dropdown-menu-end shadow")
+        .AddClass("dropdown-menu-controls", ShowColumnListControls)
+        .Build();
+
     /// <summary>
     /// OnInitialized 方法
     /// </summary>
@@ -1044,7 +1048,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 
         if (_resetColDragListener)
         {
-            _resetColDragListener= false;
+            _resetColDragListener = false;
             await InvokeVoidAsync("resetColDragListener", Id);
         }
 

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

@@ -308,8 +308,23 @@
 }
 
 .table-toolbar .dropdown-column .dropdown-menu {
-    max-height: var(--bb-table-columnlist-max-height);
-    overflow: auto;
+
+    &:not(.dropdown-menu-controls) {
+        max-height: var(--bb-table-columnlist-max-height);
+        overflow: auto;
+    }
+
+    .column-list-controls {
+        display: flex;
+        flex-wrap: nowrap;
+        padding: 0 var(--bs-dropdown-item-padding-x);
+        margin-block-end: .5rem;
+    }
+
+    .column-list-items {
+        max-height: var(--bb-table-columnlist-max-height);
+        overflow: auto;
+    }
 }
 
 .table-toolbar .dropdown-menu .dropdown-item span {

src/BootstrapBlazor/Locales/en.json

@@ -1,4 +1,4 @@
-{
+{
   "BootstrapBlazor.Components.AutoComplete": {
     "NoDataTip": "No Data",
     "PlaceHolder": "Please Input"
@@ -254,7 +254,9 @@
     "AlignCenterText": "Center",
     "AlignCenterTooltipText": "Click to align text in this column to the center",
     "AlignRightText": "Right",
-    "AlignRightTooltipText": "Click to align text in this column to the right"
+    "AlignRightTooltipText": "Click to align text in this column to the right",
+    "ColumnListSelectAllText": "All",
+    "ColumnListSelectInvertText": "Invert"
   },
   "BootstrapBlazor.Components.EditDialog": {
     "CloseButtonText": "Close",

src/BootstrapBlazor/Locales/zh.json

@@ -1,4 +1,4 @@
-{
+{
   "BootstrapBlazor.Components.AutoComplete": {
     "NoDataTip": "无匹配数据",
     "PlaceHolder": "请输入"
@@ -254,7 +254,9 @@
     "AlignCenterText": "居中",
     "AlignCenterTooltipText": "点击后本列文本居中对齐",
     "AlignRightText": "右对齐",
-    "AlignRightTooltipText": "点击后本列文本右对齐"
+    "AlignRightTooltipText": "点击后本列文本右对齐",
+    "ColumnListSelectAllText": "全选",
+    "ColumnListSelectInvertText": "反选"
   },
   "BootstrapBlazor.Components.EditDialog": {
     "CloseButtonText": "关闭",

test/UnitTest/Components/TableTest.cs

@@ -8871,6 +8871,42 @@ public void Table_ShowMoreButton_Ok(TableRenderMode mode)
         cut.Contains("<div>dropdown-item-more-template</div");
     }
 
+    [Fact]
+    public async Task ShowColumnListControls_Ok()
+    {
+        var localizer = Context.Services.GetRequiredService<IStringLocalizer<Foo>>();
+        var cut = Context.Render<Table<Foo>>(pb =>
+        {
+            pb.AddCascadingValue<ISortableList>(new SortableList());
+            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();
+            });
+            pb.Add(a => a.RenderMode, TableRenderMode.Table);
+            pb.Add(a => a.Items, Foo.GenerateFoo(localizer));
+            pb.Add(a => a.ShowToolbar, true);
+            pb.Add(a => a.ShowColumnList, true);
+            pb.Add(a => a.ShowColumnListControls, true);
+        });
+
+        cut.Contains("dropdown-menu dropdown-menu-end shadow dropdown-menu-controls");
+        cut.Contains("column-list-items");
+
+        var buttons = cut.FindAll(".column-list-controls button");
+        Assert.Equal(2, buttons.Count);
+
+        await cut.InvokeAsync(() => buttons[1].Click());
+        await cut.InvokeAsync(() => buttons[0].Click());
+    }
+
     class SortableList : ISortableList { }
 
     static bool ProhibitEdit(Table<Foo> @this)