diff --git a/src/BootstrapBlazor.Server/Components/Components/CustomerFilter.razor b/src/BootstrapBlazor.Server/Components/Components/CustomerFilter.razor
index 41682c8d957..a3110a6adc1 100644
--- a/src/BootstrapBlazor.Server/Components/Components/CustomerFilter.razor
+++ b/src/BootstrapBlazor.Server/Components/Components/CustomerFilter.razor
@@ -2,9 +2,12 @@
 
 @if (IsHeaderRow)
 {
-
+    <Select Items="@_items" @bind-Value="@_value" IsUseDefaultItemWhenValueIsNull="true" IsPopover="true"
+            ShowLabel="false" SkipValidate="true" OnSelectedItemChanged="_ => OnFilterAsync()"></Select>
 }
 else
 {
-    <Select Items="@_items" @bind-Value="@Value"></Select>
+    <Select Items="@_items" @bind-Value="@_value" IsUseDefaultItemWhenValueIsNull="true" IsPopover="true"></Select>
 }
+
+
diff --git a/src/BootstrapBlazor.Server/Components/Components/CustomerFilter.razor.cs b/src/BootstrapBlazor.Server/Components/Components/CustomerFilter.razor.cs
index fe073eeccd3..f13164565b9 100644
--- a/src/BootstrapBlazor.Server/Components/Components/CustomerFilter.razor.cs
+++ b/src/BootstrapBlazor.Server/Components/Components/CustomerFilter.razor.cs
@@ -3,29 +3,45 @@
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
 
+using BootstrapBlazor.Server.Components.Samples.Table;
+
 namespace BootstrapBlazor.Server.Components.Components;
 
 /// <summary>
-/// 
+/// CustomerFilter 组件示例代码
 /// </summary>
 public partial class CustomerFilter
 {
-    private int? Value;
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<TablesFilter>? TableFilterLocalizer { get; set; }
+
+    private int? _value;
 
-    private readonly IEnumerable<SelectedItem> _items = new SelectedItem[]
+    private List<SelectedItem> _items = [];
+
+    /// <summary>
+    ///     <inheritdoc />
+    /// </summary>
+    protected override void OnInitialized()
     {
-        new() { Value = "", Text = "请选择 ..." },
-        new() { Value = "10", Text = "大于 10" },
-        new() { Value = "50", Text = "大于 50" },
-        new() { Value = "80", Text = "大于 80" }
-    };
+        base.OnInitialized();
+
+        _items =
+        [
+            new SelectedItem { Value = "", Text = TableFilterLocalizer["CustomerFilterItem1"] },
+            new SelectedItem { Value = "10", Text = TableFilterLocalizer["CustomerFilterItem2"] },
+            new SelectedItem { Value = "50", Text = TableFilterLocalizer["CustomerFilterItem3"] },
+            new SelectedItem { Value = "80", Text = TableFilterLocalizer["CustomerFilterItem4"] }
+        ];
+    }
 
     /// <summary>
     /// 重置过滤条件方法
     /// </summary>
     public override void Reset()
     {
-        Value = null;
+        _value = null;
         StateHasChanged();
     }
 
@@ -36,12 +52,12 @@ public override void Reset()
     public override FilterKeyValueAction GetFilterConditions()
     {
         var filter = new FilterKeyValueAction();
-        if (Value != null)
+        if (_value != null)
         {
             filter.Filters.Add(new FilterKeyValueAction()
             {
                 FieldKey = FieldKey,
-                FieldValue = Value.Value,
+                FieldValue = _value.Value,
                 FilterAction = FilterAction.GreaterThan
             });
         }
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesFilter.razor b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesFilter.razor
index 215cd90e2c3..997fe95c8f4 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesFilter.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesFilter.razor
@@ -88,7 +88,13 @@
             <TableColumn @bind-Field="@context.Address" Sortable="true" Filterable="true" />
             <TableColumn @bind-Field="@context.Complete" Width="100" Sortable="true" Filterable="true" />
             <TableColumn @bind-Field="@context.Education" Width="100" Sortable="true" Filterable="true" />
-            <TableColumn @bind-Field="@context.Count" Width="100" Sortable="true" Filterable="true" DefaultSort="true" DefaultSortOrder="@SortOrder.Desc" />
+            <TableColumn @bind-Field="@context.Count" Width="100" Sortable="true" Filterable="true">
+                <FilterTemplate>
+                    <FilterProvider ShowMoreButton="false">
+                        <CustomerFilter></CustomerFilter>
+                    </FilterProvider>
+                </FilterTemplate>
+            </TableColumn>
         </TableColumns>
     </Table>
 </DemoBlock>
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index bad1a1235da..e70c5bf8598 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -5703,7 +5703,11 @@
     "SetFilterInCodeIntro": "Example shows how to set filters through code",
     "SetFilterInCodeButtonText1": "Name contains 01",
     "SetFilterInCodeButtonText2": "Reset All Filter",
-    "TablesFilterTemplateDescription": "<p><code>The FilterTemplate</code> type is <code>RenderFragment</code> <span>its value is a custom component, and the component must inherit</span> <code>the filterBase</code> In this case, the last column in this case<b>, the Quantity column</b>, uses the <code>custom component by filtering the template CustomerFilter</code> <a href=\"{0}\" target=\"_blank\">[portal] CustomerFilter component source code</a></p><p class=\"code-label\">Notes:</p><ul class=\"ul-demo\"><li>Custom filter components are wrapped with <code>FilterProvider</code>, and <code>FilterProvider</code> must be under the <code>FilterTemplate</code> node</li><li>Filters can be fine-tuned through the parameters of the <code>FilterProvider</code> component; for example, by setting <code>ShowMoreButton</code> to control whether the <b>+ -</b> symbol is displayed</li></ul-demo>"
+    "TablesFilterTemplateDescription": "<p><code>The FilterTemplate</code> type is <code>RenderFragment</code> <span>its value is a custom component, and the component must inherit</span> <code>the filterBase</code> In this case, the last column in this case<b>, the Quantity column</b>, uses the <code>custom component by filtering the template CustomerFilter</code> <a href=\"{0}\" target=\"_blank\">[portal] CustomerFilter component source code</a></p><p class=\"code-label\">Notes:</p><ul class=\"ul-demo\"><li>Custom filter components are wrapped with <code>FilterProvider</code>, and <code>FilterProvider</code> must be under the <code>FilterTemplate</code> node</li><li>Filters can be fine-tuned through the parameters of the <code>FilterProvider</code> component; for example, by setting <code>ShowMoreButton</code> to control whether the <b>+ -</b> symbol is displayed</li></ul-demo>",
+    "CustomerFilterItem1": "All",
+    "CustomerFilterItem2": "Greater than 10",
+    "CustomerFilterItem3": "Greater than 50",
+    "CustomerFilterItem4": "Greater than 80"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesFixedHeader": {
     "TablesFixedHeaderTitle": "Fixed header function",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index 6520118edc3..a5ee9320699 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -5704,7 +5704,11 @@
     "SetFilterInCodeIntro": "示例展示如何通过代码设置过滤条件",
     "SetFilterInCodeButtonText1": "名称包含01",
     "SetFilterInCodeButtonText2": "重置条件",
-    "TablesFilterTemplateDescription": "<p><code>FilterTemplate</code> 类型为 <code>RenderFragment</code> <span>其值为自定义组件，组件必须继承</span> <code>FilterBase</code> 本例中最后一列 <b>数量列</b> 通过筛选模板使用自定义组件 <code>CustomerFilter</code>  <a href=\"{0}\" target=\"_blank\">[传送门] CustomerFilter 组件源码</a></p><p class=\"code-label\">注意事项：</p><ul class=\"ul-demo\"><li>自定义过滤组件使用 <code>FilterProvider</code> 包裹，<code>FilterProvider</code>必须在 <code>FilterTemplate</code> 节点下</li><li>通过 <code>FilterProvider</code> 组件的参数可微调过滤器；例如通过设置 <code>ShowMoreButton</code> 控制是否显示 <b>+ -</b> 符号</li></ul-demo>"
+    "TablesFilterTemplateDescription": "<p><code>FilterTemplate</code> 类型为 <code>RenderFragment</code> <span>其值为自定义组件，组件必须继承</span> <code>FilterBase</code> 本例中最后一列 <b>数量列</b> 通过筛选模板使用自定义组件 <code>CustomerFilter</code>  <a href=\"{0}\" target=\"_blank\">[传送门] CustomerFilter 组件源码</a></p><p class=\"code-label\">注意事项：</p><ul class=\"ul-demo\"><li>自定义过滤组件使用 <code>FilterProvider</code> 包裹，<code>FilterProvider</code>必须在 <code>FilterTemplate</code> 节点下</li><li>通过 <code>FilterProvider</code> 组件的参数可微调过滤器；例如通过设置 <code>ShowMoreButton</code> 控制是否显示 <b>+ -</b> 符号</li></ul-demo>",
+    "CustomerFilterItem1": "全部",
+    "CustomerFilterItem2": "大于 10",
+    "CustomerFilterItem3": "大于 50",
+    "CustomerFilterItem4": "大于 80"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesFixedHeader": {
     "TablesFixedHeaderTitle": "固定表头功能",