diff --git a/src/BootstrapBlazor.Shared/Pages/Samples/Table/TablesToolbar.razor b/src/BootstrapBlazor.Shared/Pages/Samples/Table/TablesToolbar.razor
index ee54f8d3129efb859a8aefd52e1ec2cb467bdeb8..dfffd6fad2aa9c2e8b0b49365de9c1130a28b9bc 100644
--- a/src/BootstrapBlazor.Shared/Pages/Samples/Table/TablesToolbar.razor
+++ b/src/BootstrapBlazor.Shared/Pages/Samples/Table/TablesToolbar.razor
@@ -19,9 +19,10 @@
 </Block>
 
 <Block Title="带查询的表格" Introduction="设置 <code>ShowSearch</code> 显示查询组件">
+	<p>本例中通过设置 <code>ShowCardView</code> 显示 <b>视图</b> 按钮，用于切换 <code>Table</code> 组件渲染方式</p>
     <Table TItem="Foo"
            IsBordered="true" IsPagination="true" PageItemsSource="@PageItemsSource"
-           ShowToolbar="true" ShowSearch="true" ShowAdvancedSearch="false" ShowDefaultButtons="false"
+           ShowToolbar="true" ShowSearch="true" ShowCardView="true" ShowAdvancedSearch="false" ShowDefaultButtons="false"
            OnQueryAsync="@OnSearchQueryAsync">
         <TableColumns>
             <TableColumn @bind-Field="@context.DateTime" Width="180" />
diff --git a/src/BootstrapBlazor/Components/Table/Table.razor b/src/BootstrapBlazor/Components/Table/Table.razor
index 22d61ab315e566aff8f769ee8bbee561568182d6..6ce2fdf009fd320470e7ec9b382680744160effa 100644
--- a/src/BootstrapBlazor/Components/Table/Table.razor
+++ b/src/BootstrapBlazor/Components/Table/Table.razor
@@ -51,6 +51,10 @@
                     {
                         <Button Icon="fa fa-refresh" Text="@RefreshButtonText" Color="@Color.Secondary" OnClickWithoutRender="@OnClickRefreshAsync" />
                     }
+					@if(ShowCardView)
+					{
+                        <Button Icon="fa fa-bars" Text="@CardViewButtonText" Color="@Color.Secondary" OnClick="@OnClickCardView" />
+					}
                     @if (ShowColumnList)
                     {
                         <div class="btn-group btn-col" role="group">
diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.Edit.cs b/src/BootstrapBlazor/Components/Table/Table.razor.Edit.cs
index 7b024b5aab23f9b8d85072a274ddfdf687492c13..4ef515a570c1a964a54d2ca26c934b3ee0395523 100644
--- a/src/BootstrapBlazor/Components/Table/Table.razor.Edit.cs
+++ b/src/BootstrapBlazor/Components/Table/Table.razor.Edit.cs
@@ -271,6 +271,26 @@ namespace BootstrapBlazor.Components
         /// <returns></returns>
         protected Task OnClickRefreshAsync() => QueryAsync();
 
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <returns></returns>
+        protected void OnClickCardView()
+        {
+            var model = RenderMode;
+            if (model == TableRenderMode.Auto)
+            {
+                model = ActiveRenderMode;
+            }
+            RenderMode = model switch
+            {
+                TableRenderMode.Table => TableRenderMode.CardView,
+                _ => TableRenderMode.Table
+            };
+
+            StateHasChanged();
+        }
+
         /// <summary>
         /// 查询按钮调用此方法
         /// </summary>
diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.Localization.cs b/src/BootstrapBlazor/Components/Table/Table.razor.Localization.cs
index ebd111fbdaa6de4abbf9e9c140102328c942a898..c193a7fef9ea57b82b8bfcd54a15724f5e51b152 100644
--- a/src/BootstrapBlazor/Components/Table/Table.razor.Localization.cs
+++ b/src/BootstrapBlazor/Components/Table/Table.razor.Localization.cs
@@ -91,6 +91,13 @@ namespace BootstrapBlazor.Components
         [NotNull]
         public string? RefreshButtonText { get; set; }
 
+        /// <summary>
+        /// 视图按钮文本
+        /// </summary>
+        [Parameter]
+        [NotNull]
+        public string? CardViewButtonText { get; set; }
+
         /// <summary>
         /// 列显示隐藏按钮提示信息文本
         /// </summary>
@@ -269,6 +276,7 @@ namespace BootstrapBlazor.Components
             ConfirmDeleteButtonText ??= Localizer[nameof(ConfirmDeleteButtonText)];
             ConfirmDeleteContentText ??= Localizer[nameof(ConfirmDeleteContentText)];
             RefreshButtonText ??= Localizer[nameof(RefreshButtonText)];
+            CardViewButtonText ??= Localizer[nameof(CardViewButtonText)];
             ColumnButtonTitleText ??= Localizer[nameof(ColumnButtonTitleText)];
             ColumnButtonText ??= Localizer[nameof(ColumnButtonText)];
             ExportButtonText ??= Localizer[nameof(ExportButtonText)];
diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.Toolbar.cs b/src/BootstrapBlazor/Components/Table/Table.razor.Toolbar.cs
index d328da4a26bf37d5a545506995f7d57b10204e0d..2c552ed56ab022c857bf6110990cdbb4b478145c 100644
--- a/src/BootstrapBlazor/Components/Table/Table.razor.Toolbar.cs
+++ b/src/BootstrapBlazor/Components/Table/Table.razor.Toolbar.cs
@@ -94,6 +94,12 @@ namespace BootstrapBlazor.Components
         [Parameter]
         public bool ShowRefresh { get; set; } = true;
 
+        /// <summary>
+        /// 获得/设置 是否显示视图按钮 默认为 false
+        /// </summary>
+        [Parameter]
+        public bool ShowCardView { get; set; }
+
         /// <summary>
         /// 获得/设置 是否显示列选择下拉框 默认为 false 不显示
         /// </summary>
diff --git a/src/BootstrapBlazor/Locales/en.json b/src/BootstrapBlazor/Locales/en.json
index 5f77b011867b3ba8bed9dc9184b92808884ce31f..63c3a64afc1d4dc38db8e391e1b0ab2525183a3b 100644
--- a/src/BootstrapBlazor/Locales/en.json
+++ b/src/BootstrapBlazor/Locales/en.json
@@ -194,6 +194,7 @@
     "ConfirmDeleteButtonText": "Delete",
     "ConfirmDeleteContentText": "Are you sure to DELETE all selected rows?",
     "RefreshButtonText": "Refresh",
+    "CardViewButtonText": "View",
     "ColumnButtonTitleText": "Show/Hide Columns",
     "ColumnButtonText": "Columns",
     "ExportButtonText": "Export",
diff --git a/src/BootstrapBlazor/Locales/zh.json b/src/BootstrapBlazor/Locales/zh.json
index 4db4f00b2bc4a50d477380b2685b6e49a4d407af..4b12b53630a730154fd00e27f8d65a07e5e3acb4 100644
--- a/src/BootstrapBlazor/Locales/zh.json
+++ b/src/BootstrapBlazor/Locales/zh.json
@@ -194,6 +194,7 @@
     "ConfirmDeleteButtonText": "删除",
     "ConfirmDeleteContentText": "确认要删除选中的所有行吗？",
     "RefreshButtonText": "刷新",
+    "CardViewButtonText": "视图",
     "ColumnButtonTitleText": "列显示隐藏控制",
     "ColumnButtonText": "列",
     "ExportButtonText": "导出数据",