diff --git a/src/BootstrapBlazor.Shared/Samples/Table/CustomerFilter.razor b/src/BootstrapBlazor.Shared/Components/CustomerFilter.razor
similarity index 100%
rename from src/BootstrapBlazor.Shared/Samples/Table/CustomerFilter.razor
rename to src/BootstrapBlazor.Shared/Components/CustomerFilter.razor
diff --git a/src/BootstrapBlazor.Shared/Demos/Table/TablesColumn/TablesColumnDragOrder.razor b/src/BootstrapBlazor.Shared/Demos/Table/TablesColumn/TablesColumnDragColumn.razor
similarity index 86%
rename from src/BootstrapBlazor.Shared/Demos/Table/TablesColumn/TablesColumnDragOrder.razor
rename to src/BootstrapBlazor.Shared/Demos/Table/TablesColumn/TablesColumnDragColumn.razor
index 5497de08a03b46487fcde7c7e21877009a0fd117..8af2255ff7509b2c7a158c2840a131f6492c67a8 100644
--- a/src/BootstrapBlazor.Shared/Demos/Table/TablesColumn/TablesColumnDragOrder.razor
+++ b/src/BootstrapBlazor.Shared/Demos/Table/TablesColumn/TablesColumnDragColumn.razor
@@ -2,7 +2,7 @@
 
 <Table TItem="Foo"
        IsPagination="true" PageItemsSource="@PageItemsSource" AllowDragColumn="true"
-       IsStriped="true" IsBordered="true"
+       IsStriped="true" IsBordered="true" OnDragColumnEndAsync="OnDragColumnEndAsync"
        ShowToolbar="false" IsMultipleSelect="true" ShowExtendButtons="false"
        OnQueryAsync="@OnQueryAsync">
     <TableColumns>
@@ -13,6 +13,8 @@
     </TableColumns>
 </Table>
 
+<ConsoleLogger @ref="Logger" class="mt-3"></ConsoleLogger>
+
 @code {
     /// <summary>
     /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
@@ -24,6 +26,9 @@
 
     private static IEnumerable<int> PageItemsSource => new int[] { 5, 10, 20 };
 
+    [NotNull]
+    private ConsoleLogger? Logger { get; set; }
+
     /// <summary>
     /// OnInitialized 方法
     /// </summary>
@@ -34,6 +39,12 @@
         Items = Foo.GenerateFoo(FooLocalizer);
     }
 
+    private Task OnDragColumnEndAsync(string? columnName)
+    {
+        Logger.Log($"Column: {columnName}");
+        return Task.CompletedTask;
+    }
+
     private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
     {
         IEnumerable<Foo> items = Items;
diff --git a/src/BootstrapBlazor.Shared/Demos/Table/TablesColumn/TablesColumnShownWithBreakPoint.razor b/src/BootstrapBlazor.Shared/Demos/Table/TablesColumn/TablesColumnShownWithBreakPoint.razor
index 07612b8de50ebfc92b2970cf6279b7a499f106fd..7e7f9b9464433d99cd1b843de6b3be19a9880b47 100644
--- a/src/BootstrapBlazor.Shared/Demos/Table/TablesColumn/TablesColumnShownWithBreakPoint.razor
+++ b/src/BootstrapBlazor.Shared/Demos/Table/TablesColumn/TablesColumnShownWithBreakPoint.razor
@@ -8,7 +8,7 @@
     <TableColumns>
         <TableColumn @bind-Field="@context.DateTime" Width="120" FormatString="yyyy-MM-dd" Align="Alignment.Center" />
         <TableColumn @bind-Field="@context.Name" Width="100" />
-        <TableColumn @bind-Field="@context.Address" />
+        <TableColumn @bind-Field="@context.Address" ShownWithBreakPoint="BreakPoint.Medium" />
         <TableColumn @bind-Field="@context.Count" ShownWithBreakPoint="BreakPoint.Large" Formatter="@IntFormatter" Width="60" />
     </TableColumns>
 </Table>
diff --git a/src/BootstrapBlazor.Shared/Extensions/MenusLocalizerExtensions.cs b/src/BootstrapBlazor.Shared/Extensions/MenusLocalizerExtensions.cs
index 49e1ad272663ccc484c49ee52e8a6302dee3469e..ffaaad361f53c892e22bb37bc256246b6c7d27a0 100644
--- a/src/BootstrapBlazor.Shared/Extensions/MenusLocalizerExtensions.cs
+++ b/src/BootstrapBlazor.Shared/Extensions/MenusLocalizerExtensions.cs
@@ -672,13 +672,28 @@ internal static class MenusLocalizerExtensions
                 },
                 new()
                 {
-                    Text = Localizer["TableCell"],
-                    Url = "tables/cell"
+                    Text = Localizer["TableColumnDrag"],
+                    Url = "tables/column/drag"
                 },
                 new()
                 {
-                    Text = Localizer["TableLookup"],
-                    Url = "tables/lookup"
+                    Text = Localizer["TableColumnResizing"],
+                    Url = "tables/column/resizing"
+                },
+                new()
+                {
+                    Text = Localizer["TableColumnList"],
+                    Url = "tables/column/list"
+                },
+                new()
+                {
+                    Text = Localizer["TableColumnTemplate"],
+                    Url = "tables/column/template"
+                },
+                new()
+                {
+                    Text = Localizer["TableFixColumn"],
+                    Url = "tables/fix-column"
                 },
                 new()
                 {
@@ -691,6 +706,26 @@ internal static class MenusLocalizerExtensions
                     Url = "tables/detail"
                 },
                 new()
+                {
+                    Text = Localizer["TableSelection"],
+                    Url = "tables/selection"
+                },
+                new()
+                {
+                    Text = Localizer["TableWrap"],
+                    Url = "tables/wrap"
+                },
+                new()
+                {
+                    Text = Localizer["TableCell"],
+                    Url = "tables/cell"
+                },
+                new()
+                {
+                    Text = Localizer["TableLookup"],
+                    Url = "tables/lookup"
+                },
+                new()
                 {
                     Text = Localizer["TableDynamic"],
                     Url = "tables/dynamic"
@@ -721,11 +756,6 @@ internal static class MenusLocalizerExtensions
                     Url = "tables/multi-header"
                 },
                 new()
-                {
-                    Text = Localizer["TableFixColumn"],
-                    Url = "tables/fix-column"
-                },
-                new()
                 {
                     Text = Localizer["TablePage"],
                     Url = "tables/pages"
@@ -761,11 +791,6 @@ internal static class MenusLocalizerExtensions
                     Url = "tables/export"
                 },
                 new()
-                {
-                    Text = Localizer["TableSelection"],
-                    Url = "tables/selection"
-                },
-                new()
                 {
                     Text = Localizer["TableAutoRefresh"],
                     Url = "tables/autorefresh"
@@ -781,11 +806,6 @@ internal static class MenusLocalizerExtensions
                     Url = "tables/dialog"
                 },
                 new()
-                {
-                    Text = Localizer["TableWrap"],
-                    Url = "tables/wrap"
-                },
-                new()
                 {
                     Text = Localizer["TableTree"],
                     Url = "tables/tree"
diff --git a/src/BootstrapBlazor.Shared/Locales/en.json b/src/BootstrapBlazor.Shared/Locales/en.json
index 7cf885730617254e88ec5f29d1252602dc06689f..ecad5f3a061bd101670f4b236d0c31855255127b 100644
--- a/src/BootstrapBlazor.Shared/Locales/en.json
+++ b/src/BootstrapBlazor.Shared/Locales/en.json
@@ -5008,6 +5008,12 @@
     "TableBase": "Base",
     "TableRow": "Row",
     "TableColumn": "Column",
+    "TableColumnDrag": "Column Dragging",
+    "TableColumnResizing": "Column Width",
+    "TableColumnList": "Columns Show/Hide",
+    "TableColumnAlign": "Column Alignment",
+    "TableColumnCopy": "Column Replication",
+    "TableColumnTemplate": "Column Template",
     "TableCell": "Cell",
     "TableDetail": "Detail",
     "TableDynamic": "Dynamic",
@@ -5335,8 +5341,8 @@
     "TableColumnP1": "In this example, the column <code>DateTime</code> value is displayed in different colors depending on whether the <code>Complete</code> value is <code>true</code>",
     "TableColumnP2": "In this example, the column <code>Complete</code> is displayed as a <code>Checkbox</code> component according to the value of <code>Complete</code>",
     "TableColumnP3": "<code>Template</code> template comes with <code>Context</code> associated context, its value is of type <code>TableColumnContext</code>",
-    "TableColumnli1": "<code>Value</code> is the data value of the currently bound column",
-    "TableColumnli2": "<code>Row</code> is the data value of the row where the currently bound column is located",
+    "TableColumnLi1": "<code>Value</code> is the data value of the currently bound column",
+    "TableColumnLi2": "<code>Row</code> is the data value of the row where the currently bound column is located",
     "FormatterTitle": "Custom column data format",
     "FormatterIntro": "Format the cell value by specifying the <code>FormatString</code> or <code>Formatter</code> callback delegate when the column is bound",
     "FormatterP1": "In this example the column <code>DateTime</code> values ​​are formatted according to <code>FormatString</code> to <code>yyyy-MM-dd</code> year month day format",
diff --git a/src/BootstrapBlazor.Shared/Locales/zh.json b/src/BootstrapBlazor.Shared/Locales/zh.json
index c867b4bf5f070411de777925179c2fb944d75dd9..d89afe2d3df9267787e9373cd6b40ac3fb8673fb 100644
--- a/src/BootstrapBlazor.Shared/Locales/zh.json
+++ b/src/BootstrapBlazor.Shared/Locales/zh.json
@@ -5017,15 +5017,21 @@
     "TableBase": "基本功能",
     "TableRow": "行设置",
     "TableColumn": "列设置",
+    "TableColumnDrag": "列拖动",
+    "TableColumnResizing": "列宽设置",
+    "TableColumnList": "列显示/隐藏",
+    "TableColumnAlign": "列对齐",
+    "TableColumnCopy": "列复制",
+    "TableColumnTemplate": "列模板",
     "TableCell": "单元格",
     "TableDetail": "明细行",
     "TableDynamic": "动态表格",
     "TableDynamicObject": "动态对象",
     "TableSearch": "搜索功能",
     "TableFilter": "筛选和排序",
-    "TableFixHeader": "固定表头",
+    "TableFixHeader": "表头固定",
     "TableHeaderGroup": "表头分组",
-    "TableFixColumn": "固定列",
+    "TableFixColumn": "列固定",
     "TablePage": "分页功能",
     "TableToolbar": "工具栏",
     "TableEdit": "表单维护",
@@ -5367,8 +5373,8 @@
     "TableColumnP1": " 本例中列 <code>DateTime</code> 值根据 <code>Complete</code> 值是否为 <code>true</code> 显示不同颜色",
     "TableColumnP2": "本例中列 <code>Complete</code> 根据 <code>Complete</code> 值自定义显示为 <code>Checkbox</code> 组件",
     "TableColumnP3": "<code>Template</code> 模板自带 <code>Context</code> 相关联上下文，其值为 <code>TableColumnContext</code> 类型",
-    "TableColumnli1": "<code>Value</code> 为当前绑定列的数据值",
-    "TableColumnli2": "<code>Row</code> 为当前绑定列所在行的数据值",
+    "TableColumnLi1": "<code>Value</code> 为当前绑定列的数据值",
+    "TableColumnLi2": "<code>Row</code> 为当前绑定列所在行的数据值",
     "FormatterTitle": "自定义列数据格式",
     "FormatterIntro": "列绑定时通过指定 <code>FormatString</code> 或者 <code>Formatter</code> 回调委托来实现单元格数值格式化",
     "FormatterP1": "本例中列 <code>DateTime</code> 值根据 <code>FormatString</code> 将值格式化为 <code>yyyy-MM-dd</code> 年月日格式",
diff --git a/src/BootstrapBlazor.Shared/Samples/Table/TablesCell.razor b/src/BootstrapBlazor.Shared/Samples/Table/TablesCell.razor
index 80542fb8ff79bbf1924d6ffa302aac8f2b077b67..228cbdb2da9d98fea4c6107c6bcb57a6cc6dd2fa 100644
--- a/src/BootstrapBlazor.Shared/Samples/Table/TablesCell.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Table/TablesCell.razor
@@ -17,7 +17,7 @@
            Demo="typeof(Demos.Table.TablesCell.TableCellMergeCell)">
     <p>@((MarkupString)Localizer["TableCellMergeCellTip"].Value)</p>
     <Pre>.cell-demo {
-    --bs-table-bg: ##e9ecef;
+    --bs-table-bg: #e9ecef;
 }</Pre>
 </DemoBlock>
 
diff --git a/src/BootstrapBlazor.Shared/Samples/Table/TablesColumn.razor b/src/BootstrapBlazor.Shared/Samples/Table/TablesColumn.razor
index 5646b84889dbfe7af525a10a202c5794956c2a2f..9169aff6d252c50a1e6ff9ba11142c305b29f6fb 100644
--- a/src/BootstrapBlazor.Shared/Samples/Table/TablesColumn.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Table/TablesColumn.razor
@@ -31,34 +31,11 @@
            Demo="typeof(Demos.Table.TablesColumn.TablesColumnDisabled)">
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["WidthTitle"]"
-           Introduction="@Localizer["WidthIntro"]"
-           Name="Width"
-           Demo="typeof(Demos.Table.TablesColumn.TablesColumnWidth)">
-    <p>@((MarkupString)Localizer["WidthP1"].Value)</p>
-    <p>@((MarkupString)Localizer["WidthP2"].Value)</p>
-    <p>@((MarkupString)Localizer["WidthP3"].Value)</p>
-</DemoBlock>
-
-<DemoBlock Title="@Localizer["TableColumnTitle"]"
-           Introduction="@Localizer["TableColumnIntro"]"
-           Name="TableColumnNormal"
-           Demo="typeof(Demos.Table.TablesColumn.TablesColumnNormal)">
-    <p>@((MarkupString)Localizer["TableColumnP1"].Value)</p>
-    <p>@((MarkupString)Localizer["TableColumnP2"].Value)</p>
-    <p>@((MarkupString)Localizer["TableColumnP3"].Value)</p>
-    <ul>
-        <li>@((MarkupString)Localizer["TableColumnli1"].Value)</li>
-        <li>@((MarkupString)Localizer["TableColumnli2"].Value)</li>
-    </ul>
-</DemoBlock>
-
-<DemoBlock Title="@Localizer["FormatterTitle"]"
-           Introduction="@Localizer["FormatterIntro"]"
-           Name="Formatter"
-           Demo="typeof(Demos.Table.TablesColumn.TablesColumnFormatter)">
-    <p>@((MarkupString)Localizer["FormatterP1"].Value)</p>
-    <p>@((MarkupString)Localizer["FormatterP2"].Value)</p>
+<DemoBlock Title="@Localizer["ShowCopyColumnTitle"]"
+           Introduction="@Localizer["ShowCopyColumnIntro"]"
+           Name="ShowCopyColumn"
+           Demo="typeof(Demos.Table.TablesColumn.TablesColumnShowCopyColumn)">
+    <p>@((MarkupString)Localizer["ShowCopyColumnDesc"].Value)</p>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["AlignTitle"]"
@@ -69,74 +46,12 @@
     <p>@((MarkupString)Localizer["AlignP2"].Value)</p>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["ShownWithBreakPointTitle"]"
-           Introduction="@Localizer["ShownWithBreakPointIntro"]"
-           Name="ShownWithBreakPoint"
-           Demo="typeof(Demos.Table.TablesColumn.TablesColumnShownWithBreakPoint)">
-    <p>@((MarkupString)Localizer["ShownWithBreakPointP1"].Value)</p>
-    <ul class="ul-demo mb-3">
-        <li>@((MarkupString)Localizer["ShownWithBreakPointLi1"].Value)</li>
-        <li>@((MarkupString)Localizer["ShownWithBreakPointLi2"].Value)</li>
-        <li>@((MarkupString)Localizer["ShownWithBreakPointLi3"].Value)</li>
-        <li>@((MarkupString)Localizer["ShownWithBreakPointLi4"].Value)</li>
-        <li>@((MarkupString)Localizer["ShownWithBreakPointLi5"].Value)</li>
-    </ul>
-    <p>@((MarkupString)Localizer["ShownWithBreakPointP2"].Value)</p>
-    <p>@((MarkupString)Localizer["ShownWithBreakPointP3"].Value)</p>
-    <p>@((MarkupString)Localizer["ShownWithBreakPointP4"].Value)</p>
-</DemoBlock>
-
-<DemoBlock Title="@Localizer["VisibleTitle"]"
-           Introduction="@Localizer["VisibleIntro"]"
-           Name="Visible"
-           Demo="typeof(Demos.Table.TablesColumn.TablesColumnVisible)">
-    <p>@((MarkupString)Localizer["VisibleP1"].Value)</p>
-    <p>@((MarkupString)Localizer["VisibleP2"].Value)</p>
-    <p>@((MarkupString)Localizer["VisibleP3"].Value)</p>
-    <p>@((MarkupString)Localizer["VisibleP4"].Value)</p>
-    <p>@((MarkupString)Localizer["ResetVisibleColumnsDesc"].Value)</p>
-</DemoBlock>
-
-<DemoBlock Title="@Localizer["AllowResizingTitle"]"
-           Introduction="@Localizer["AllowResizingIntro"]"
-           Name="AllowResizing"
-           Demo="typeof(Demos.Table.TablesColumn.TablesColumnAllowResizing)">
-    <p>@((MarkupString)Localizer["AllowResizingDesc"].Value)</p>
-</DemoBlock>
-
-<DemoBlock Title="@Localizer["AllowDragOrderTitle"]"
-           Introduction="@Localizer["AllowDragOrderIntro"]"
-           Name="AllowDragColumn"
-           Demo="typeof(Demos.Table.TablesColumn.TablesColumnDragOrder)">
-    <p>@((MarkupString)Localizer["AllowDragOrderDesc"].Value)</p>
-</DemoBlock>
-
-<DemoBlock Title="@Localizer["ShowCopyColumnTitle"]"
-           Introduction="@Localizer["ShowCopyColumnIntro"]"
-           Name="ShowCopyColumn"
-           Demo="typeof(Demos.Table.TablesColumn.TablesColumnShowCopyColumn)">
-    <p>@((MarkupString)Localizer["ShowCopyColumnDesc"].Value)</p>
-</DemoBlock>
-
-<DemoBlock Title="@Localizer["TemplateTitle"]"
-           Introduction="@Localizer["TemplateIntro"]"
-           Name="Template"
-           Demo="typeof(Demos.Table.TablesColumn.TablesColumnTemplate)">
-</DemoBlock>
-
-<DemoBlock Title="@Localizer["AutoGenerateColumnsTitle"]"
-           Introduction="@Localizer["AutoGenerateColumnsIntro"]"
-           Name="AutoGenerateColumns"
-           Demo="typeof(Demos.Table.TablesColumn.TablesColumnAutoGenerateColumns)">
-    <p>
-        @((MarkupString)Localizer["AutoGenerateColumnsP1"].Value)
-        <ul class="ul-demo mb-3">
-            <li>@((MarkupString)Localizer["AutoGenerateColumnsLi1"].Value)</li>
-            <li>@((MarkupString)Localizer["AutoGenerateColumnsLi2"].Value)</li>
-            <li>@((MarkupString)string.Format(Localizer["AutoGenerateColumnsLi3"].Value, WebsiteOption.CurrentValue.BootstrapBlazorLink))</li>
-        </ul>
-        @((MarkupString)Localizer["AutoGenerateColumnsP2"].Value)
-    </p>
+<DemoBlock Title="@Localizer["FormatterTitle"]"
+           Introduction="@Localizer["FormatterIntro"]"
+           Name="Formatter"
+           Demo="typeof(Demos.Table.TablesColumn.TablesColumnFormatter)">
+    <p>@((MarkupString)Localizer["FormatterP1"].Value)</p>
+    <p>@((MarkupString)Localizer["FormatterP2"].Value)</p>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["OnColumnCreatingTitle"]"
diff --git a/src/BootstrapBlazor.Shared/Samples/Table/TablesColumnDrag.razor b/src/BootstrapBlazor.Shared/Samples/Table/TablesColumnDrag.razor
new file mode 100644
index 0000000000000000000000000000000000000000..0679e89896a4190f5e3d10f49140c261dd62f2ef
--- /dev/null
+++ b/src/BootstrapBlazor.Shared/Samples/Table/TablesColumnDrag.razor
@@ -0,0 +1,14 @@
+@page "/tables/column/drag"
+@inject IStringLocalizer<TablesColumn> Localizer
+@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
+
+<h3>@Localizer["TablesColumnTitle"]</h3>
+
+<h4>@Localizer["TablesColumnDescription"]</h4>
+
+<DemoBlock Title="@Localizer["AllowDragOrderTitle"]"
+           Introduction="@Localizer["AllowDragOrderIntro"]"
+           Name="AllowDragColumn"
+           Demo="typeof(Demos.Table.TablesColumn.TablesColumnDragColumn)">
+    <p>@((MarkupString)Localizer["AllowDragOrderDesc"].Value)</p>
+</DemoBlock>
diff --git a/src/BootstrapBlazor.Shared/Samples/Table/TablesColumnList.razor b/src/BootstrapBlazor.Shared/Samples/Table/TablesColumnList.razor
new file mode 100644
index 0000000000000000000000000000000000000000..f7b076a7446e87c2474efa80860516eba0558c57
--- /dev/null
+++ b/src/BootstrapBlazor.Shared/Samples/Table/TablesColumnList.razor
@@ -0,0 +1,35 @@
+@page "/tables/column/list"
+@inject IStringLocalizer<TablesColumn> Localizer
+@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
+
+<h3>@Localizer["TablesColumnTitle"]</h3>
+
+<h4>@Localizer["TablesColumnDescription"]</h4>
+
+<DemoBlock Title="@Localizer["VisibleTitle"]"
+           Introduction="@Localizer["VisibleIntro"]"
+           Name="Visible"
+           Demo="typeof(Demos.Table.TablesColumn.TablesColumnVisible)">
+    <p>@((MarkupString)Localizer["VisibleP1"].Value)</p>
+    <p>@((MarkupString)Localizer["VisibleP2"].Value)</p>
+    <p>@((MarkupString)Localizer["VisibleP3"].Value)</p>
+    <p>@((MarkupString)Localizer["VisibleP4"].Value)</p>
+    <p>@((MarkupString)Localizer["ResetVisibleColumnsDesc"].Value)</p>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["ShownWithBreakPointTitle"]"
+           Introduction="@Localizer["ShownWithBreakPointIntro"]"
+           Name="ShownWithBreakPoint"
+           Demo="typeof(Demos.Table.TablesColumn.TablesColumnShownWithBreakPoint)">
+    <p>@((MarkupString)Localizer["ShownWithBreakPointP1"].Value)</p>
+    <ul class="ul-demo mb-3">
+        <li>@((MarkupString)Localizer["ShownWithBreakPointLi1"].Value)</li>
+        <li>@((MarkupString)Localizer["ShownWithBreakPointLi2"].Value)</li>
+        <li>@((MarkupString)Localizer["ShownWithBreakPointLi3"].Value)</li>
+        <li>@((MarkupString)Localizer["ShownWithBreakPointLi4"].Value)</li>
+        <li>@((MarkupString)Localizer["ShownWithBreakPointLi5"].Value)</li>
+    </ul>
+    <p>@((MarkupString)Localizer["ShownWithBreakPointP2"].Value)</p>
+    <p>@((MarkupString)Localizer["ShownWithBreakPointP3"].Value)</p>
+    <p>@((MarkupString)Localizer["ShownWithBreakPointP4"].Value)</p>
+</DemoBlock>
diff --git a/src/BootstrapBlazor.Shared/Samples/Table/TablesColumnResizing.razor b/src/BootstrapBlazor.Shared/Samples/Table/TablesColumnResizing.razor
new file mode 100644
index 0000000000000000000000000000000000000000..a07d97e767ba2660c5937119e5e5ffc115c31de6
--- /dev/null
+++ b/src/BootstrapBlazor.Shared/Samples/Table/TablesColumnResizing.razor
@@ -0,0 +1,23 @@
+@page "/tables/column/resizing"
+@inject IStringLocalizer<TablesColumn> Localizer
+@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
+
+<h3>@Localizer["TablesColumnTitle"]</h3>
+
+<h4>@Localizer["TablesColumnDescription"]</h4>
+
+<DemoBlock Title="@Localizer["WidthTitle"]"
+           Introduction="@Localizer["WidthIntro"]"
+           Name="Width"
+           Demo="typeof(Demos.Table.TablesColumn.TablesColumnWidth)">
+    <p>@((MarkupString)Localizer["WidthP1"].Value)</p>
+    <p>@((MarkupString)Localizer["WidthP2"].Value)</p>
+    <p>@((MarkupString)Localizer["WidthP3"].Value)</p>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["AllowResizingTitle"]"
+           Introduction="@Localizer["AllowResizingIntro"]"
+           Name="AllowResizing"
+           Demo="typeof(Demos.Table.TablesColumn.TablesColumnAllowResizing)">
+    <p>@((MarkupString)Localizer["AllowResizingDesc"].Value)</p>
+</DemoBlock>
diff --git a/src/BootstrapBlazor.Shared/Samples/Table/TablesColumnTemplate.razor b/src/BootstrapBlazor.Shared/Samples/Table/TablesColumnTemplate.razor
new file mode 100644
index 0000000000000000000000000000000000000000..0458fcf7d89338f17c2e92eda0a8b620055993f5
--- /dev/null
+++ b/src/BootstrapBlazor.Shared/Samples/Table/TablesColumnTemplate.razor
@@ -0,0 +1,41 @@
+@page "/tables/column/template"
+@inject IStringLocalizer<TablesColumn> Localizer
+@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
+
+<h3>@Localizer["TablesColumnTitle"]</h3>
+
+<h4>@Localizer["TablesColumnDescription"]</h4>
+
+<DemoBlock Title="@Localizer["TableColumnTitle"]"
+           Introduction="@Localizer["TableColumnIntro"]"
+           Name="TableColumnNormal"
+           Demo="typeof(Demos.Table.TablesColumn.TablesColumnNormal)">
+    <p>@((MarkupString)Localizer["TableColumnP1"].Value)</p>
+    <p>@((MarkupString)Localizer["TableColumnP2"].Value)</p>
+    <p>@((MarkupString)Localizer["TableColumnP3"].Value)</p>
+    <ul>
+        <li>@((MarkupString)Localizer["TableColumnLi1"].Value)</li>
+        <li>@((MarkupString)Localizer["TableColumnLi2"].Value)</li>
+    </ul>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["TemplateTitle"]"
+           Introduction="@Localizer["TemplateIntro"]"
+           Name="Template"
+           Demo="typeof(Demos.Table.TablesColumn.TablesColumnTemplate)">
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["AutoGenerateColumnsTitle"]"
+           Introduction="@Localizer["AutoGenerateColumnsIntro"]"
+           Name="AutoGenerateColumns"
+           Demo="typeof(Demos.Table.TablesColumn.TablesColumnAutoGenerateColumns)">
+    <p>
+        @((MarkupString)Localizer["AutoGenerateColumnsP1"].Value)
+        <ul class="ul-demo mb-3">
+            <li>@((MarkupString)Localizer["AutoGenerateColumnsLi1"].Value)</li>
+            <li>@((MarkupString)Localizer["AutoGenerateColumnsLi2"].Value)</li>
+            <li>@((MarkupString)string.Format(Localizer["AutoGenerateColumnsLi3"].Value, WebsiteOption.CurrentValue.BootstrapBlazorLink))</li>
+        </ul>
+        @((MarkupString)Localizer["AutoGenerateColumnsP2"].Value)
+    </p>
+</DemoBlock>