doc: update the table component fix-column demos (#452)

Co-authored-by: Argo Zhang <argo@live.ca>

src/BootstrapBlazor.Shared/Demos/Table/TablesFixedColumn/TablesFixedColHeader.razor

@@ -0,0 +1,40 @@
+@inject IStringLocalizer<Foo> LocalizerFoo
+
+<div>
+    <Table TItem="Foo"
+           Items="@Items.Take(4)"
+           RenderMode="TableRenderMode.Table"
+           HeaderStyle="TableHeaderStyle.Light"
+           IsBordered="true"
+           IsStriped="true"
+           class="table-fixed-column-demo">
+        <TableColumns>
+            <TableColumn @bind-Field="@context.Name" Width="100" Fixed="true" />
+            <TableColumn @bind-Field="@context.DateTime" Width="180" Fixed="true" Filterable="true" />
+            <TableColumn @bind-Field="@context.Address" Width="900" Filterable="true" />
+            <TableColumn @bind-Field="@context.Education" Width="100" Filterable="true" />
+            <TableColumn @bind-Field="@context.Count" Width="100" Filterable="true" />
+            <TableColumn @bind-Field="@context.Complete" Width="100" Fixed="true" Filterable="true" />
+        </TableColumns>
+    </Table>
+</div>
+
+@code {
+    /// <summary>
+    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
+    /// Foo class is used for Demo test, please download the source code if necessary
+    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
+    /// </summary>
+    [NotNull]
+    private List<Foo>? Items { get; set; }
+
+    /// <summary>
+    /// OnInitialized method
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        Items = Foo.GenerateFoo(LocalizerFoo);
+    }
+}

src/BootstrapBlazor.Shared/Demos/Table/TablesFixedColumn/TablesFixedColTableHeader.razor

@@ -0,0 +1,42 @@
+@inject IStringLocalizer<Foo> LocalizerFoo
+
+<div>
+    <Table TItem="Foo"
+           Items="@Items.Take(10)"
+           RenderMode="TableRenderMode.Table"
+           HeaderStyle="TableHeaderStyle.Dark"
+           IsBordered="true" IsStriped="true"
+           IsMultipleSelect="true"
+           Height="200"
+           FixedMultipleColumn="true"
+           class="table-fixed-column-demo2">
+        <TableColumns>
+            <TableColumn @bind-Field="@context.Name" Width="100" Fixed="true" />
+            <TableColumn @bind-Field="@context.DateTime" Width="180" />
+            <TableColumn @bind-Field="@context.Address" Width="900" />
+            <TableColumn @bind-Field="@context.Education" Width="100" />
+            <TableColumn @bind-Field="@context.Count" Width="100" />
+            <TableColumn @bind-Field="@context.Complete" Width="100" Fixed="true" />
+        </TableColumns>
+    </Table>
+</div>
+
+@code {
+    /// <summary>
+    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
+    /// Foo class is used for Demo test, please download the source code if necessary
+    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
+    /// </summary>
+    [NotNull]
+    private List<Foo>? Items { get; set; }
+
+    /// <summary>
+    /// OnInitialized method
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        Items = Foo.GenerateFoo(LocalizerFoo);
+    }
+}

src/BootstrapBlazor.Shared/Demos/Table/TablesFixedColumn/TablesFixedExtendButtonsColumn.razor

@@ -0,0 +1,41 @@
+@inject IStringLocalizer<Foo> LocalizerFoo
+
+<div>
+    <Table TItem="Foo"
+           Items="@Items.Take(4)"
+           IsBordered="true"
+           IsStriped="true"
+           RenderMode="TableRenderMode.Table"
+           ShowExtendButtons="true"
+           FixedExtendButtonsColumn="true"
+           class="table-fixed-column-demo">
+        <TableColumns>
+            <TableColumn @bind-Field="@context.Name" Width="100" />
+            <TableColumn @bind-Field="@context.DateTime" Width="180" />
+            <TableColumn @bind-Field="@context.Address" Width="900" />
+            <TableColumn @bind-Field="@context.Education" Width="100" />
+            <TableColumn @bind-Field="@context.Count" Width="100" />
+            <TableColumn @bind-Field="@context.Complete" Width="100" />
+        </TableColumns>
+    </Table>
+</div>
+
+@code {
+    /// <summary>
+    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
+    /// Foo class is used for Demo test, please download the source code if necessary
+    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
+    /// </summary>
+    [NotNull]
+    private List<Foo>? Items { get; set; }
+
+    /// <summary>
+    /// OnInitialized method
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        Items = Foo.GenerateFoo(LocalizerFoo);
+    }
+}

src/BootstrapBlazor.Shared/Demos/Table/TablesFixedColumn/TablesFixedHeaderAndExtendButtonsColumn.razor

@@ -0,0 +1,68 @@
+@inject IStringLocalizer<Foo> LocalizerFoo
+
+<div>
+    <Table TItem="Foo"
+           Items="@Items.Take(10)"
+           IsBordered="true"
+           IsStriped="true"
+           IsMultipleSelect="true"
+           IsFixedHeader="true"
+           FixedExtendButtonsColumn="true"
+           Height="200"
+           FixedMultipleColumn="true"
+           ShowExtendButtons="true"
+           RenderMode="TableRenderMode.Table"
+           class="table-fixed-column-demo2">
+        <TableColumns>
+            <TableColumn @bind-Field="@context.Name" Width="100" />
+            <TableColumn @bind-Field="@context.DateTime" Width="180" />
+            <TableColumn @bind-Field="@context.Address" Width="900" />
+            <TableColumn @bind-Field="@context.Education" Width="100" />
+            <TableColumn @bind-Field="@context.Count" Width="100" />
+            <TableColumn @bind-Field="@context.Complete" Width="100" />
+        </TableColumns>
+    </Table>
+
+    <Table TItem="Foo"
+           Items="@Items.Take(10)"
+           IsBordered="true"
+           IsStriped="true"
+           IsMultipleSelect="true"
+           IsFixedHeader="true"
+           FixedExtendButtonsColumn="true"
+           IsExtendButtonsInRowHeader="true"
+           FixedMultipleColumn="true"
+           ShowExtendButtons="true"
+           RenderMode="TableRenderMode.Table"
+           Height="200"
+           class="table-fixed-column-demo mt-3">
+        <TableColumns>
+            <TableColumn @bind-Field="@context.Name" Width="100" />
+            <TableColumn @bind-Field="@context.DateTime" Width="180" />
+            <TableColumn @bind-Field="@context.Address" Width="900" />
+            <TableColumn @bind-Field="@context.Education" Width="100" />
+            <TableColumn @bind-Field="@context.Count" Width="100" />
+            <TableColumn @bind-Field="@context.Complete" Width="100" />
+        </TableColumns>
+    </Table>
+</div>
+
+@code {
+    /// <summary>
+    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
+    /// Foo class is used for Demo test, please download the source code if necessary
+    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
+    /// </summary>
+    [NotNull]
+    private List<Foo>? Items { get; set; }
+
+    /// <summary>
+    /// OnInitialized method
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        Items = Foo.GenerateFoo(LocalizerFoo);
+    }
+}

src/BootstrapBlazor.Shared/Locales/en.json

@@ -95,18 +95,18 @@
     "TablesPageShowTopPaginationIntro": "Set <code>ShowTopPagination</code> to <code>true</code> is the top display pagination component"
   },
   "BootstrapBlazor.Shared.Samples.Table.TablesFixedColumn": {
-    "H1": "Fixed column",
-    "H2": "For data with a large number of columns, you can fix the front and rear columns and scroll horizontally to view other data",
-    "P1": "For fixed column usage, please set the fixed column width as much as possible. If it is not set, set it according to the default value of <code>200</code>",
-    "P2": "Fixed column header and column footer",
-    "P3": "Set the <code>Fixed</code> attribute to fix the header",
-    "P4": "In this example, set <code>Name</code> <code>DateTime</code> <code>Complete</code> The first two columns and the last column are fixed columns, and the middle columns are scrolled horizontally",
-    "P5": "Fixed headers and columns",
-    "P6": "Set <code>Height=200</code> to fix the header, set <code>Fixed</code> to fix the column",
-    "P7": "Fixed button action column",
-    "P8": "Set <code>FixedExtendButtonsColumn</code> to fix the action column",
-    "P9": "Fixed header and button action columns",
-    "P10": "Set <code>Height=200</code> to fix the header, set <code>FixedExtendButtonsColumn</code> to fix the operation column"
+    "TablesFixedColumnTitle": "Fixed column",
+    "TablesFixedColumnDescription": "For data with a large number of columns, you can fix the front and rear columns and scroll horizontally to view other data",
+    "TablesFixedColumnNote": "For fixed column usage, please set the fixed column width as much as possible. If it is not set, set it according to the default value of <code>200</code>",
+    "TablesFixedColHeaderTitle": "Fixed column header and column footer",
+    "TablesFixedColHeaderIntro": "Set the <code>Fixed</code> attribute to fix the header",
+    "TablesFixedColHeaderDescription": "In this example, set <code>Name</code> <code>DateTime</code> <code>Complete</code> The first two columns and the last column are fixed columns, and the middle columns are scrolled horizontally",
+    "TablesFixedColTableHeaderTitle": "Fixed headers and columns",
+    "TablesFixedColTableHeaderIntro": "Set <code>Height=200</code> to fix the header, set <code>Fixed</code> to fix the column",
+    "TablesFixedExtendButtonsColumnTtile": "Fixed button action column",
+    "TablesFixedExtendButtonsColumnIntro": "Set <code>FixedExtendButtonsColumn</code> to fix the action column",
+    "TablesFixedHeaderAndExtendButtonsColumnTitle": "Fixed header and button action columns",
+    "TablesFixedHeaderAndExtendButtonsColumnIntro": "Set <code>Height=200</code> to fix the header, set <code>FixedExtendButtonsColumn</code> to fix the operation column"
   },
   "BootstrapBlazor.Shared.Samples.Tooltips": {
     "H1": "Tooltip",

src/BootstrapBlazor.Shared/Locales/zh.json

@@ -95,18 +95,18 @@
     "TablesPageShowTopPaginationIntro": "设置 <code>ShowTopPagination</code> 为 <code>true</code> 是顶端显示分页组件"
   },
   "BootstrapBlazor.Shared.Samples.Table.TablesFixedColumn": {
-    "H1": "固定列功能",
-    "H2": "对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据",
-    "P1": "固定列用法请尽可能的设置固定列宽度，未设置时按照 <code>200</code> 默认值设置",
-    "P2": "固定列头与列尾",
-    "P3": "设置 <code>Fixed</code> 属性固定表头",
-    "P4": "本例中设置 <code>Name</code> <code>DateTime</code> <code>Complete</code> 前两列和最后一列为固定列，中间各列进行水平滚动",
-    "P5": "固定表头与列",
-    "P6": "设置 <code>Height=200</code> 固定表头，设置 <code>Fixed</code> 对列进行固定",
-    "P7": "固定按钮操作列",
-    "P8": "设置 <code>FixedExtendButtonsColumn</code> 对操作列进行固定",
-    "P9": "固定表头与按钮操作列",
-    "P10": "设置 <code>Height=200</code> 固定表头，设置 <code>FixedExtendButtonsColumn</code> 对操作列进行固定"
+    "TablesFixedColumnTitle": "固定列功能",
+    "TablesFixedColumnDescription": "对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据",
+    "TablesFixedColumnNote": "固定列用法请尽可能的设置固定列宽度，未设置时按照 <code>200</code> 默认值设置",
+    "TablesFixedColHeaderTitle": "固定列头与列尾",
+    "TablesFixedColHeaderIntro": "设置 <code>Fixed</code> 属性固定表头",
+    "TablesFixedColHeaderDescription": "本例中设置 <code>Name</code> <code>DateTime</code> <code>Complete</code> 前两列和最后一列为固定列，中间各列进行水平滚动",
+    "TablesFixedColTableHeaderTitle": "固定表头与列",
+    "TablesFixedColTableHeaderIntro": "设置 <code>Height=200</code> 固定表头，设置 <code>Fixed</code> 对列进行固定",
+    "TablesFixedExtendButtonsColumnTtile": "固定按钮操作列",
+    "TablesFixedExtendButtonsColumnIntro": "设置 <code>FixedExtendButtonsColumn</code> 对操作列进行固定",
+    "TablesFixedHeaderAndExtendButtonsColumnTitle": "固定表头与按钮操作列",
+    "TablesFixedHeaderAndExtendButtonsColumnIntro": "设置 <code>Height=200</code> 固定表头，设置 <code>FixedExtendButtonsColumn</code> 对操作列进行固定"
   },
   "BootstrapBlazor.Shared.Samples.Tooltips": {
     "H1": "Tooltip 提示工具条",

src/BootstrapBlazor.Shared/Samples/Table/TablesFixedColumn.razor

@@ -1,76 +1,32 @@
 @page "/tables/fix-column"
+@inject IStringLocalizer<TablesFixedColumn> Localizer
 
-<h3>@Localizer["H1"]</h3>
-<h4>@Localizer["H2"]</h4>
+<h3>@Localizer["TablesFixedColumnTitle"]</h3>
+<h4>@Localizer["TablesFixedColumnDescription"]</h4>
 
-<p>@((MarkupString)Localizer["P1"].Value)</p>
+<p>@((MarkupString)Localizer["TablesFixedColumnNote"].Value)</p>
 
-<DemoBlock Title="@Localizer["P2"]" Introduction="@Localizer["P3"]" Name="FixedColHeader">
-    <p>@((MarkupString)Localizer["P4"].Value)</p>
-    <Table TItem="Foo" Items="@Items.Take(4)" RenderMode="TableRenderMode.Table" HeaderStyle="TableHeaderStyle.Light" IsBordered="true" IsStriped="true" class="table-fixed-column-demo">
-        <TableColumns>
-            <TableColumn @bind-Field="@context.Name" Width="100" Fixed="true" />
-            <TableColumn @bind-Field="@context.DateTime" Width="180" Fixed="true" Filterable="true" />
-            <TableColumn @bind-Field="@context.Address" Width="900" Filterable="true" />
-            <TableColumn @bind-Field="@context.Education" Width="100" Filterable="true" />
-            <TableColumn @bind-Field="@context.Count" Width="100" Filterable="true" />
-            <TableColumn @bind-Field="@context.Complete" Width="100" Fixed="true" Filterable="true" />
-        </TableColumns>
-    </Table>
+<DemoBlock Title="@Localizer["TablesFixedColHeaderTitle"]"
+           Introduction="@Localizer["TablesFixedColHeaderIntro"]"
+           Name="FixedColHeader"
+           Demo="typeof(Demos.Table.TablesFixedColumn.TablesFixedColHeader)">
+    <p>@((MarkupString)Localizer["TablesFixedColHeaderDescription"].Value)</p>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["P5"]" Introduction="@Localizer["P6"]" Name="FixedColTableHeader">
-    <Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table" HeaderStyle="TableHeaderStyle.Dark" IsBordered="true" IsStriped="true" IsMultipleSelect="true" Height="200" FixedMultipleColumn="true" class="table-fixed-column-demo2">
-        <TableColumns>
-            <TableColumn @bind-Field="@context.Name" Width="100" Fixed="true" />
-            <TableColumn @bind-Field="@context.DateTime" Width="180" />
-            <TableColumn @bind-Field="@context.Address" Width="900" />
-            <TableColumn @bind-Field="@context.Education" Width="100" />
-            <TableColumn @bind-Field="@context.Count" Width="100" />
-            <TableColumn @bind-Field="@context.Complete" Width="100" Fixed="true" />
-        </TableColumns>
-    </Table>
+<DemoBlock Title="@Localizer["TablesFixedColTableHeaderTitle"]"
+           Introduction="@Localizer["TablesFixedColTableHeaderIntro"]"
+           Name="FixedColTableHeader"
+           Demo="typeof(Demos.Table.TablesFixedColumn.TablesFixedColTableHeader)">
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["P7"]" Introduction="@Localizer["P8"]" Name="FixedExtendButtonsColumn">
-    <Table TItem="Foo" Items="@Items.Take(4)" IsBordered="true" IsStriped="true" RenderMode="TableRenderMode.Table"
-           ShowExtendButtons="true" FixedExtendButtonsColumn="true"
-           class="table-fixed-column-demo">
-        <TableColumns>
-            <TableColumn @bind-Field="@context.Name" Width="100" />
-            <TableColumn @bind-Field="@context.DateTime" Width="180" />
-            <TableColumn @bind-Field="@context.Address" Width="900" />
-            <TableColumn @bind-Field="@context.Education" Width="100" />
-            <TableColumn @bind-Field="@context.Count" Width="100" />
-            <TableColumn @bind-Field="@context.Complete" Width="100" />
-        </TableColumns>
-    </Table>
+<DemoBlock Title="@Localizer["TablesFixedExtendButtonsColumnTtile"]"
+           Introduction="@Localizer["TablesFixedExtendButtonsColumnIntro"]"
+           Name="FixedExtendButtonsColumn"
+           Demo="typeof(Demos.Table.TablesFixedColumn.TablesFixedExtendButtonsColumn)">
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["P9"]" Introduction="@Localizer["P10"]" Name="FixedExtendButtonsColumn">
-    <Table TItem="Foo" Items="@Items.Take(10)" IsBordered="true" IsStriped="true" IsMultipleSelect="true"
-           IsFixedHeader="true" FixedExtendButtonsColumn="true" Height="200" FixedMultipleColumn="true"
-           ShowExtendButtons="true" RenderMode="TableRenderMode.Table" class="table-fixed-column-demo2">
-        <TableColumns>
-            <TableColumn @bind-Field="@context.Name" Width="100" />
-            <TableColumn @bind-Field="@context.DateTime" Width="180" />
-            <TableColumn @bind-Field="@context.Address" Width="900" />
-            <TableColumn @bind-Field="@context.Education" Width="100" />
-            <TableColumn @bind-Field="@context.Count" Width="100" />
-            <TableColumn @bind-Field="@context.Complete" Width="100" />
-        </TableColumns>
-    </Table>
-
-    <Table TItem="Foo" Items="@Items.Take(10)" IsBordered="true" IsStriped="true" IsMultipleSelect="true"
-           IsFixedHeader="true" FixedExtendButtonsColumn="true" IsExtendButtonsInRowHeader="true" FixedMultipleColumn="true"
-           ShowExtendButtons="true" RenderMode="TableRenderMode.Table" Height="200" class="table-fixed-column-demo mt-3">
-        <TableColumns>
-            <TableColumn @bind-Field="@context.Name" Width="100" />
-            <TableColumn @bind-Field="@context.DateTime" Width="180" />
-            <TableColumn @bind-Field="@context.Address" Width="900" />
-            <TableColumn @bind-Field="@context.Education" Width="100" />
-            <TableColumn @bind-Field="@context.Count" Width="100" />
-            <TableColumn @bind-Field="@context.Complete" Width="100" />
-        </TableColumns>
-    </Table>
+<DemoBlock Title="@Localizer["TablesFixedHeaderAndExtendButtonsColumnTitle"]"
+           Introduction="@Localizer["TablesFixedHeaderAndExtendButtonsColumnIntro"]"
+           Name="FixedHeaderExtendButtonsColumn"
+           Demo="typeof(Demos.Table.TablesFixedColumn.TablesFixedHeaderAndExtendButtonsColumn)">
 </DemoBlock>

src/BootstrapBlazor.Shared/Samples/Table/TablesFixedColumn.razor.cs

@@ -1,32 +0,0 @@
-// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
-// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
-// Website: https://www.blazor.zone or https://argozhang.github.io/
-
-namespace BootstrapBlazor.Shared.Samples.Table;
-
-/// <summary>
-/// Fixed column example
-/// </summary>
-public partial class TablesFixedColumn
-{
-    [NotNull]
-    private List<Foo>? Items { get; set; }
-
-    [Inject]
-    [NotNull]
-    private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
-
-    [Inject]
-    [NotNull]
-    private IStringLocalizer<TablesFixedColumn>? Localizer { get; set; }
-
-    /// <summary>
-    /// OnInitialized method
-    /// </summary>
-    protected override void OnInitialized()
-    {
-        base.OnInitialized();
-
-        Items = Foo.GenerateFoo(LocalizerFoo);
-    }
-}