doc: update Table document (#579)

dotnetcore · Feb 26, 2023 · 370dc43 · 370dc43
1 parent 6a4aa70
commit 370dc43
Show file tree

Hide file tree

Showing 7 changed files with 145 additions and 160 deletions.
diff --git a/src/BootstrapBlazor.Shared/Demos/Table/TablesEdit/TablesEditDataService.razor b/src/BootstrapBlazor.Shared/Demos/Table/TablesEdit/TablesEditDataService.razor
@@ -1,15 +1,13 @@
 @inject IStringLocalizer<Foo> LocalizerFoo
 
-<div>
-    <Table TItem="Foo" EditDialogShowMaximizeButton="true"
-           IsPagination="true" PageItemsSource="@PageItemsSource" DataService="@CustomerDataService"
-           IsStriped="true" IsBordered="true" IsMultipleSelect="true" AutoGenerateColumns="true"
-           ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true">
-        <TableColumns>
-            <TableColumn @bind-Field="@context.Hobby" Items="@Hobbys" />
-        </TableColumns>
-    </Table>
-</div>
+<Table TItem="Foo" EditDialogShowMaximizeButton="true"
+       IsPagination="true" PageItemsSource="@PageItemsSource" DataService="@CustomerDataService"
+       IsStriped="true" IsBordered="true" IsMultipleSelect="true" AutoGenerateColumns="true"
+       ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true">
+    <TableColumns>
+        <TableColumn @bind-Field="@context.Hobby" Items="@Hobbys" />
+    </TableColumns>
+</Table>
 
 @code {
     private static IEnumerable<int> PageItemsSource => new int[] { 4, 10, 20 };

diff --git a/src/BootstrapBlazor.Shared/Demos/Table/TablesEdit/TablesEditFooterTemplate.razor b/src/BootstrapBlazor.Shared/Demos/Table/TablesEdit/TablesEditFooterTemplate.razor
@@ -1,21 +1,19 @@
 @inject IStringLocalizer<Foo> LocalizerFoo
 @inject ToastService ToastService
 
-<div>
-    <Table TItem="Foo" EditDialogShowMaximizeButton="true"
-           IsPagination="true" PageItemsSource="@PageItemsSource" DataService="@CustomerDataService"
-           IsStriped="true" IsBordered="true" IsMultipleSelect="true" AutoGenerateColumns="true"
-           ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true">
-        <TableColumns>
-            <TableColumn @bind-Field="@context.Hobby" Items="@Hobbys" />
-        </TableColumns>
-        <EditFooterTemplate Context="model">
-            <Button Text="Popup" Color="Color.Danger" Icon="fa-regular fa-comment-dots" OnClick="() => OnClick(model)"></Button>
-            <DialogCloseButton />
-            <DialogSaveButton Color="Color.Primary" Icon="fa-solid fa-floppy-disk" Text="Save" />
-        </EditFooterTemplate>
-    </Table>
-</div>
+<Table TItem="Foo" EditDialogShowMaximizeButton="true"
+        IsPagination="true" PageItemsSource="@PageItemsSource" DataService="@CustomerDataService"
+        IsStriped="true" IsBordered="true" IsMultipleSelect="true" AutoGenerateColumns="true"
+        ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true">
+    <TableColumns>
+        <TableColumn @bind-Field="@context.Hobby" Items="@Hobbys" />
+    </TableColumns>
+    <EditFooterTemplate Context="model">
+        <Button Text="Popup" Color="Color.Danger" Icon="fa-regular fa-comment-dots" OnClick="() => OnClick(model)"></Button>
+        <DialogCloseButton />
+        <DialogSaveButton Color="Color.Primary" Icon="fa-solid fa-floppy-disk" Text="Save" />
+    </EditFooterTemplate>
+</Table>
 
 @code {
     private static IEnumerable<int> PageItemsSource => new int[] { 4, 10, 20 };

diff --git a/src/BootstrapBlazor.Shared/Demos/Table/TablesEdit/TablesEditInjectDataService.razor b/src/BootstrapBlazor.Shared/Demos/Table/TablesEdit/TablesEditInjectDataService.razor
@@ -2,29 +2,27 @@
 @inject IStringLocalizer<Foo> LocalizerFoo
 @inject IOptionsMonitor<WebsiteOptions> WebsiteOption
 
-<div>
-    <p id="anchor6">
-        @((MarkupString)Localizer["TablesEditInjectDataServiceDescription"].Value)
-        <ul class="ul-demo mb-3">
-            <li><code>OnAddAsync</code></li>
-            <li><code>OnDeleteAsync</code></li>
-            <li><code>OnSaveAsync</code></li>
-            <li><code>OnQueryAsync</code></li>
-        </ul>
-        <div class="mb-3">@Localizer["TablesEditInjectDataServiceTips1"] <a href="@DataServiceUrl" target="_blank">@Localizer["TablesEditInjectDataServiceTips2"]</a></div>
-        <b>@Localizer["TablesEditInjectDataServiceTips3"]</b>
-        <div class="mt-1">@Localizer["TablesEditInjectDataServiceTips4"]</div>
-    </p>
-    <Pre class="no-highlight my-3">services.AddTableDemoDataService();</Pre>
-    <Table TItem="Foo"
-           IsPagination="true" PageItemsSource="@PageItemsSource"
-           IsStriped="true" IsBordered="true" IsMultipleSelect="true" AutoGenerateColumns="true"
-           ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true">
-        <TableColumns>
-            <TableColumn @bind-Field="@context.Hobby" Items="@Hobbys" />
-        </TableColumns>
-    </Table>
-</div>
+<p id="anchor6">
+    @((MarkupString)Localizer["TablesEditInjectDataServiceDescription"].Value)
+    <ul class="ul-demo mb-3">
+        <li><code>OnAddAsync</code></li>
+        <li><code>OnDeleteAsync</code></li>
+        <li><code>OnSaveAsync</code></li>
+        <li><code>OnQueryAsync</code></li>
+    </ul>
+    <div class="mb-3">@Localizer["TablesEditInjectDataServiceTips1"] <a href="@DataServiceUrl" target="_blank">@Localizer["TablesEditInjectDataServiceTips2"]</a></div>
+    <b>@Localizer["TablesEditInjectDataServiceTips3"]</b>
+    <div class="mt-1">@Localizer["TablesEditInjectDataServiceTips4"]</div>
+</p>
+<Pre class="no-highlight my-3">services.AddTableDemoDataService();</Pre>
+<Table TItem="Foo"
+        IsPagination="true" PageItemsSource="@PageItemsSource"
+        IsStriped="true" IsBordered="true" IsMultipleSelect="true" AutoGenerateColumns="true"
+        ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true">
+    <TableColumns>
+        <TableColumn @bind-Field="@context.Hobby" Items="@Hobbys" />
+    </TableColumns>
+</Table>
 
 @code {
     private static IEnumerable<int> PageItemsSource => new int[] { 4, 10, 20 };

diff --git a/src/BootstrapBlazor.Shared/Demos/Table/TablesEdit/TablesEditMode.razor b/src/BootstrapBlazor.Shared/Demos/Table/TablesEdit/TablesEditMode.razor
@@ -1,42 +1,40 @@
 @inject IStringLocalizer<TablesEditMode> Localizer
 @inject IStringLocalizer<Foo> LocalizerFoo
 
-<div>
-    <Table TItem="Foo"
-           IsPagination="true" PageItemsSource="@PageItemsSource"
-           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
-           ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true"
-           AddModalTitle="@Localizer["TablesEditModeAddModalTitle"]" EditModalTitle="@Localizer["TablesEditModeEditModalTitle"]"
-           OnQueryAsync="@OnQueryAsync" EditMode="EditMode.EditForm"
-           OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
-        <TableColumns>
-            <TableColumn @bind-Field="@context.DateTime" Width="180" />
-            <TableColumn @bind-Field="@context.Name" />
-            <TableColumn @bind-Field="@context.Address" />
-            <TableColumn @bind-Field="@context.Education" />
-            <TableColumn @bind-Field="@context.Count" />
-            <TableColumn @bind-Field="@context.Complete" />
-        </TableColumns>
-    </Table>
-
-    <p id="anchor5" class="mt-3">@((MarkupString)Localizer["TablesEditModeInCell"].Value)</p>
-    <RadioList @bind-Value="InsertMode" class="mb-3" />
-    <Table TItem="Foo"
-           IsPagination="true" PageItemsSource="@PageItemsSource"
-           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
-           ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true"
-           AddModalTitle="@Localizer["TablesEditModeAddModalTitle"]" EditModalTitle="@Localizer["TablesEditModeEditModalTitle"]"
-           EditMode="EditMode.InCell" @bind-Items="@BindItems" InsertRowMode="InsertMode">
-        <TableColumns>
-            <TableColumn @bind-Field="@context.DateTime" Width="180" />
-            <TableColumn @bind-Field="@context.Name" />
-            <TableColumn @bind-Field="@context.Address" />
-            <TableColumn @bind-Field="@context.Education" />
-            <TableColumn @bind-Field="@context.Count" />
-            <TableColumn @bind-Field="@context.Complete" />
-        </TableColumns>
-    </Table>
-</div>
+<Table TItem="Foo"
+        IsPagination="true" PageItemsSource="@PageItemsSource"
+        IsStriped="true" IsBordered="true" IsMultipleSelect="true"
+        ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true"
+        AddModalTitle="@Localizer["TablesEditModeAddModalTitle"]" EditModalTitle="@Localizer["TablesEditModeEditModalTitle"]"
+        OnQueryAsync="@OnQueryAsync" EditMode="EditMode.EditForm"
+        OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
+    <TableColumns>
+        <TableColumn @bind-Field="@context.DateTime" Width="180" />
+        <TableColumn @bind-Field="@context.Name" />
+        <TableColumn @bind-Field="@context.Address" />
+        <TableColumn @bind-Field="@context.Education" />
+        <TableColumn @bind-Field="@context.Count" />
+        <TableColumn @bind-Field="@context.Complete" />
+    </TableColumns>
+</Table>
+
+<p id="anchor5" class="mt-3">@((MarkupString)Localizer["TablesEditModeInCell"].Value)</p>
+<RadioList @bind-Value="InsertMode" class="mb-3" />
+<Table TItem="Foo"
+        IsPagination="true" PageItemsSource="@PageItemsSource"
+        IsStriped="true" IsBordered="true" IsMultipleSelect="true"
+        ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true"
+        AddModalTitle="@Localizer["TablesEditModeAddModalTitle"]" EditModalTitle="@Localizer["TablesEditModeEditModalTitle"]"
+        EditMode="EditMode.InCell" @bind-Items="@BindItems" InsertRowMode="InsertMode">
+    <TableColumns>
+        <TableColumn @bind-Field="@context.DateTime" Width="180" />
+        <TableColumn @bind-Field="@context.Name" />
+        <TableColumn @bind-Field="@context.Address" />
+        <TableColumn @bind-Field="@context.Education" />
+        <TableColumn @bind-Field="@context.Count" />
+        <TableColumn @bind-Field="@context.Complete" />
+    </TableColumns>
+</Table>
 
 @code {
     /// <summary>

diff --git a/src/BootstrapBlazor.Shared/Demos/Table/TablesEdit/TablesEditOnAddAsync.razor b/src/BootstrapBlazor.Shared/Demos/Table/TablesEdit/TablesEditOnAddAsync.razor
@@ -1,22 +1,20 @@
 @inject IStringLocalizer<Foo> LocalizerFoo
 
-<div>
-    <Table TItem="Foo"
-           IsPagination="true" PageItemsSource="@PageItemsSource"
-           IsStriped="true" IsBordered="true" IsMultipleSelect="true" EditDialogIsDraggable="true"
-           ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true" IsExtendButtonsInRowHeader="true"
-           OnQueryAsync="@OnQueryAsync"
-           OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
-        <TableColumns>
-            <TableColumn @bind-Field="@context.DateTime" Width="180" />
-            <TableColumn @bind-Field="@context.Name" />
-            <TableColumn @bind-Field="@context.Address" Readonly="true" />
-            <TableColumn @bind-Field="@context.Education" />
-            <TableColumn @bind-Field="@context.Count" Editable="false" />
-            <TableColumn @bind-Field="@context.Complete" />
-        </TableColumns>
-    </Table>
-</div>
+<Table TItem="Foo"
+        IsPagination="true" PageItemsSource="@PageItemsSource"
+        IsStriped="true" IsBordered="true" IsMultipleSelect="true" EditDialogIsDraggable="true"
+        ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true" IsExtendButtonsInRowHeader="true"
+        OnQueryAsync="@OnQueryAsync"
+        OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
+    <TableColumns>
+        <TableColumn @bind-Field="@context.DateTime" Width="180" />
+        <TableColumn @bind-Field="@context.Name" />
+        <TableColumn @bind-Field="@context.Address" Readonly="true" />
+        <TableColumn @bind-Field="@context.Education" />
+        <TableColumn @bind-Field="@context.Count" Editable="false" />
+        <TableColumn @bind-Field="@context.Complete" />
+    </TableColumns>
+</Table>
 
 @code {
     /// <summary>

diff --git a/src/BootstrapBlazor.Shared/Demos/Table/TablesEdit/TablesEditShowSearch.razor b/src/BootstrapBlazor.Shared/Demos/Table/TablesEdit/TablesEditShowSearch.razor
@@ -1,44 +1,41 @@
 @inject IStringLocalizer<TablesEditShowSearch> Localizer
 @inject IStringLocalizer<Foo> LocalizerFoo
 
-<div>
-    <Table TItem="Foo" IsAutoCollapsedToolbarButton="false"
-           IsPagination="true" PageItemsSource="@PageItemsSource"
-           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
-           ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true" IsExtendButtonsInRowHeader="true"
-           OnQueryAsync="@OnQueryAsync" OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
-        <TableColumns>
-            <TableColumn @bind-Field="@context.DateTime" Width="180" />
-            <TableColumn @bind-Field="@context.Name" />
-            <TableColumn @bind-Field="@context.Address" />
-            <TableColumn @bind-Field="@context.Education" />
-            <TableColumn @bind-Field="@context.Count" Align="Alignment.Right" />
-            <TableColumn @bind-Field="@context.Complete" Align="Alignment.Center" />
-        </TableColumns>
-        <EditTemplate>
-            <div class="row g-3 form-inline">
-                <div class="col-12 col-sm-6">
-                    <BootstrapInput @bind-Value="@context.Name" placeholder="@PlaceHolderString" maxlength="50" />
-                </div>
-                <div class="col-12 col-sm-6">
-                    <BootstrapInput @bind-Value="@context.Address" placeholder="@PlaceHolderString" maxlength="50" />
-                </div>
-                <div class="col-12 col-sm-6">
-                    <DateTimePicker @bind-Value="@context.DateTime" />
-                </div>
-                <div class="col-12 col-sm-6">
-                    <Select @bind-Value="@context.Education" />
-                </div>
-                <div class="col-12 col-sm-6">
-                    <BootstrapInputNumber @bind-Value="@context.Count" ShowButton="true" />
-                </div>
-                <div class="col-12 col-sm-6">
-                    <Switch @bind-Value="@context.Complete" ShowInnerText="true" />
-                </div>
+<Table TItem="Foo" IsPagination="true" PageItemsSource="@PageItemsSource"
+        IsStriped="true" IsBordered="true" IsMultipleSelect="true"
+        ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true" IsExtendButtonsInRowHeader="true"
+        OnQueryAsync="@OnQueryAsync" OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
+    <TableColumns>
+        <TableColumn @bind-Field="@context.DateTime" Width="180" />
+        <TableColumn @bind-Field="@context.Name" />
+        <TableColumn @bind-Field="@context.Address" />
+        <TableColumn @bind-Field="@context.Education" />
+        <TableColumn @bind-Field="@context.Count" Align="Alignment.Right" />
+        <TableColumn @bind-Field="@context.Complete" Align="Alignment.Center" />
+    </TableColumns>
+    <EditTemplate>
+        <div class="row g-3 form-inline">
+            <div class="col-12 col-sm-6">
+                <BootstrapInput @bind-Value="@context.Name" placeholder="@PlaceHolderString" maxlength="50" />
             </div>
-        </EditTemplate>
-    </Table>
-</div>
+            <div class="col-12 col-sm-6">
+                <BootstrapInput @bind-Value="@context.Address" placeholder="@PlaceHolderString" maxlength="50" />
+            </div>
+            <div class="col-12 col-sm-6">
+                <DateTimePicker @bind-Value="@context.DateTime" />
+            </div>
+            <div class="col-12 col-sm-6">
+                <Select @bind-Value="@context.Education" />
+            </div>
+            <div class="col-12 col-sm-6">
+                <BootstrapInputNumber @bind-Value="@context.Count" ShowButton="true" />
+            </div>
+            <div class="col-12 col-sm-6">
+                <Switch @bind-Value="@context.Complete" ShowInnerText="true" />
+            </div>
+        </div>
+    </EditTemplate>
+</Table>
 
 @code {
     /// <summary>

diff --git a/src/BootstrapBlazor.Shared/Demos/Table/TablesEdit/TablesEditTemplate.razor b/src/BootstrapBlazor.Shared/Demos/Table/TablesEdit/TablesEditTemplate.razor
@@ -1,28 +1,26 @@
 @using BootstrapBlazor.Shared.Samples.Table
 @inject IStringLocalizer<Foo> LocalizerFoo
 
-<div>
-    <Table TItem="Foo"
-           IsPagination="true" PageItemsSource="@PageItemsSource"
-           IsStriped="true" IsBordered="true" IsMultipleSelect="true" IsExtendButtonsInRowHeader="true"
-           ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true"
-           OnQueryAsync="@OnQueryAsync"
-           OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
-        <TableColumns>
-            <TableColumn @bind-Field="@context.DateTime" Width="180" />
-            <TableColumn @bind-Field="@context.Name">
-                <EditTemplate Context="value">
-                    <div class="col-12 col-sm-6">
-                        <TablesNameDrop Model="value" />
-                    </div>
-                </EditTemplate>
-            </TableColumn>
-            <TableColumn @bind-Field="@context.Address" Rows="3" />
-            <TableColumn @bind-Field="@context.Count" />
-            <TableColumn @bind-Field="@context.Complete" />
-        </TableColumns>
-    </Table>
-</div>
+<Table TItem="Foo"
+        IsPagination="true" PageItemsSource="@PageItemsSource"
+        IsStriped="true" IsBordered="true" IsMultipleSelect="true" IsExtendButtonsInRowHeader="true"
+        ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true"
+        OnQueryAsync="@OnQueryAsync"
+        OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
+    <TableColumns>
+        <TableColumn @bind-Field="@context.DateTime" Width="180" />
+        <TableColumn @bind-Field="@context.Name">
+            <EditTemplate Context="value">
+                <div class="col-12 col-sm-6">
+                    <TablesNameDrop Model="value" />
+                </div>
+            </EditTemplate>
+        </TableColumn>
+        <TableColumn @bind-Field="@context.Address" Rows="3" />
+        <TableColumn @bind-Field="@context.Count" />
+        <TableColumn @bind-Field="@context.Complete" />
+    </TableColumns>
+</Table>
 
 @code {
     /// <summary>