doc(Table): update table documentation (#3374)

* doc: 更新 table 基础用法文档 * doc: 精简代码 * doc: 精简代码 * doc: 精简代码 * doc: 精简代码 * doc: 精简代码 * doc: 增加 section 元素 * doc: 增加 section 元素 * doc: 增加 section 元素 * doc: 增加 section 元素 * doc: 增加 section 元素 * doc: 精简样式 * doc: 改用 section 元素 * doc: 改用 section 元素 * doc: 精简样式 * doc: 改用 section 元素 * doc: 改用 section 元素 * chore: bump version 8.5.0 * chore: 更新仓库挂件信息
dotnetcore · Apr 29, 2024 · e7a1e08 · e7a1e08
1 parent 553be5f
commit e7a1e08
Show file tree

Hide file tree

Showing 24 changed files with 273 additions and 235 deletions.
diff --git a/README.md b/README.md
@@ -3,15 +3,15 @@
 <div align="center">
 <h2>A set of enterprise-class UI components based on Bootstrap and Blazor.</h2>
 
-[![Security Status](https://www.murphysec.com/platform3/v3/badge/1619783039836532736.svg)](https://github.com/ArgoZhang/BootstrapBlazor/blob/main/LICENSE)
+[![Security Status](https://www.murphysec.com/platform3/v3/badge/1619783039836532736.svg)](https://github.com/dotnetcore/BootstrapBlazor/blob/main/LICENSE)
 
-[![oscs](https://www.oscs1024.com/platform/badge/murphysecurity/murphysec.svg)](https://github.com/ArgoZhang/BootstrapBlazor/blob/main/LICENSE)
-[![License](https://img.shields.io/github/license/argozhang/bootstrapblazor.svg?logo=git&logoColor=red)](https://github.com/ArgoZhang/BootstrapBlazor/blob/main/LICENSE)
+[![oscs](https://www.oscs1024.com/platform/badge/murphysecurity/murphysec.svg)](https://github.com/dotnetcore/BootstrapBlazor/blob/main/LICENSE)
+[![License](https://img.shields.io/github/license/dotnetcore/BootstrapBlazor.svg?logo=git&logoColor=red)](https://github.com/dotnetcore/BootstrapBlazor/blob/main/LICENSE)
 [![Nuget](https://img.shields.io/nuget/v/BootstrapBlazor.svg?color=red&logo=nuget&logoColor=green)](https://www.nuget.org/packages/BootstrapBlazor/)
 [![Nuget](https://img.shields.io/nuget/dt/BootstrapBlazor.svg?logo=nuget&logoColor=green)](https://www.nuget.org/packages/BootstrapBlazor/)
-[![Repo Size](https://img.shields.io/github/repo-size/ArgoZhang/BootstrapBlazor.svg?logo=github&logoColor=green&label=repo)](https://github.com/ArgoZhang/BootstrapBlazor)
-[![Commit Date](https://img.shields.io/github/last-commit/ArgoZhang/BootstrapBlazor/main.svg?logo=github&logoColor=green&label=commit)](https://github.com/ArgoZhang/BootstrapBlazor)
-[![Github build](https://img.shields.io/github/actions/workflow/status/ArgoZhang/BootstrapBlazor/build.yml?branch=main&?label=main&logo=github)](https://github.com/ArgoZhang/BootstrapBlazor/actions?query=workflow%3A%22Build+Project%22+branch%3Amain)
+[![Repo Size](https://img.shields.io/github/repo-size/dotnetcore/BootstrapBlazor.svg?logo=github&logoColor=green&label=repo)](https://github.com/dotnetcore/BootstrapBlazor)
+[![Commit Date](https://img.shields.io/github/last-commit/dotnetcore/BootstrapBlazor/main.svg?logo=github&logoColor=green&label=commit)](https://github.com/dotnetcore/BootstrapBlazor)
+[![Github build](https://img.shields.io/github/actions/workflow/status/dotnetcore/BootstrapBlazor/build.yml?branch=main&?label=main&logo=github)](https://github.com/dotnetcore/BootstrapBlazor/actions?query=workflow%3A%22Build+Project%22+branch%3Amain)
 [![codecov](https://codecov.io/gh/dotnetcore/BootstrapBlazor/branch/main/graph/badge.svg?token=5SXIWHXZC3)](https://codecov.io/gh/dotnetcore/BootstrapBlazor)
 </div>
 

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -3,15 +3,15 @@
 <div align="center">
 <h2>一套基于 Bootstrap 和 Blazor 的企业级组件库</h2>
 
-[![Security Status](https://www.murphysec.com/platform3/v3/badge/1619783039836532736.svg)](https://github.com/ArgoZhang/BootstrapBlazor/blob/main/LICENSE)
+[![Security Status](https://www.murphysec.com/platform3/v3/badge/1619783039836532736.svg)](https://github.com/dotnetcore/BootstrapBlazor/blob/main/LICENSE)
 
-[![oscs](https://www.oscs1024.com/platform/badge/murphysecurity/murphysec.svg)](https://github.com/ArgoZhang/BootstrapBlazor/blob/main/LICENSE)
-[![License](https://img.shields.io/github/license/argozhang/bootstrapblazor.svg?logo=git&logoColor=red)](https://github.com/ArgoZhang/BootstrapBlazor/blob/main/LICENSE)
+[![oscs](https://www.oscs1024.com/platform/badge/murphysecurity/murphysec.svg)](https://github.com/dotnetcore/BootstrapBlazor/blob/main/LICENSE)
+[![License](https://img.shields.io/github/license/dotnetcore/BootstrapBlazor.svg?logo=git&logoColor=red)](https://github.com/dotnetcore/BootstrapBlazor/blob/main/LICENSE)
 [![Nuget](https://img.shields.io/nuget/v/BootstrapBlazor.svg?color=red&logo=nuget&logoColor=green)](https://www.nuget.org/packages/BootstrapBlazor/)
 [![Nuget](https://img.shields.io/nuget/dt/BootstrapBlazor.svg?logo=nuget&logoColor=green)](https://www.nuget.org/packages/BootstrapBlazor/)
-[![Repo Size](https://img.shields.io/github/repo-size/ArgoZhang/BootstrapBlazor.svg?logo=github&logoColor=green&label=repo)](https://github.com/ArgoZhang/BootstrapBlazor)
-[![Commit Date](https://img.shields.io/github/last-commit/ArgoZhang/BootstrapBlazor/main.svg?logo=github&logoColor=green&label=commit)](https://github.com/ArgoZhang/BootstrapBlazor)
-[![Github build](https://img.shields.io/github/actions/workflow/status/ArgoZhang/BootstrapBlazor/build.yml?branch=main&?label=main&logo=github)](https://github.com/ArgoZhang/BootstrapBlazor/actions?query=workflow%3A%22Build+Project%22+branch%3Amain)
+[![Repo Size](https://img.shields.io/github/repo-size/dotnetcore/BootstrapBlazor.svg?logo=github&logoColor=green&label=repo)](https://github.com/dotnetcore/BootstrapBlazor)
+[![Commit Date](https://img.shields.io/github/last-commit/dotnetcore/BootstrapBlazor/main.svg?logo=github&logoColor=green&label=commit)](https://github.com/dotnetcore/BootstrapBlazor)
+[![Github build](https://img.shields.io/github/actions/workflow/status/dotnetcore/BootstrapBlazor/build.yml?branch=main&?label=main&logo=github)](https://github.com/dotnetcore/BootstrapBlazor/actions?query=workflow%3A%22Build+Project%22+branch%3Amain)
 [![codecov](https://codecov.io/gh/dotnetcore/BootstrapBlazor/branch/main/graph/badge.svg?token=5SXIWHXZC3)](https://codecov.io/gh/dotnetcore/BootstrapBlazor)
 </div>
 
@@ -199,7 +199,7 @@ Blazor 应用基于组件。 Blazor 中的组件是指 UI 元素，例如页面
 ![登录可查看](https://gitee.com/Longbow/Pictures/raw/master/BootstrapBlazor/Doughnut.png "Doughnut.png")
 
 ## 开源协议
-[![Gitee license](https://img.shields.io/github/license/argozhang/bootstrapblazor.svg?logo=git&logoColor=red)](https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/master/LICENSE)
+[![Gitee license](https://img.shields.io/github/license/dotnetcore/BootstrapBlazor.svg?logo=git&logoColor=red)](https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/master/LICENSE)
 
 ## 特别鸣谢
 

diff --git a/src/BootstrapBlazor.Server/Components/Layout/ComponentLayout.razor b/src/BootstrapBlazor.Server/Components/Layout/ComponentLayout.razor
@@ -12,11 +12,11 @@
     <ImageViewer Alt="oscs" IsAsync="true" Url="https://www.oscs1024.com/platform/badge/murphysecurity/murphysec.svg" />
     <span class="d-none d-sm-inline">
         <ImageViewer Alt="version" IsAsync="true" Url="https://img.shields.io/nuget/vpre/BootstrapBlazor.svg?logo=nuget&logoColor=green" />
-        <ImageViewer Alt="license" IsAsync="true" Url="https://img.shields.io/github/license/argozhang/bootstrapblazor.svg?logo=git&logoColor=red" />
+        <ImageViewer Alt="license" IsAsync="true" Url="https://img.shields.io/github/license/dotnetcore/BootstrapBlazor.svg?logo=git&logoColor=red" />
         <ImageViewer Alt="download" IsAsync="true" Url="https://img.shields.io/nuget/dt/BootstrapBlazor.svg?logo=nuget&logoColor=green" />
-        <ImageViewer Alt="repo" IsAsync="true" Url="https://img.shields.io/github/repo-size/ArgoZhang/BootstrapBlazor.svg?logo=github&logoColor=green&label=repo" />
-        <ImageViewer Alt="commit" IsAsync="true" Url="https://img.shields.io/github/last-commit/ArgoZhang/BootstrapBlazor/main.svg?logo=github&logoColor=green&label=commit" />
-        <ImageViewer Alt="build" IsAsync="true" Url="https://img.shields.io/github/actions/workflow/status/ArgoZhang/BootstrapBlazor/build.yml?branch=main&?label=main&logo=github" />
+        <ImageViewer Alt="repo" IsAsync="true" Url="https://img.shields.io/github/repo-size/dotnetcore/BootstrapBlazor.svg?logo=github&logoColor=green&label=repo" />
+        <ImageViewer Alt="commit" IsAsync="true" Url="https://img.shields.io/github/last-commit/dotnetcore/BootstrapBlazor/main.svg?logo=github&logoColor=green&label=commit" />
+        <ImageViewer Alt="build" IsAsync="true" Url="https://img.shields.io/github/actions/workflow/status/dotnetcore/BootstrapBlazor/build.yml?branch=main&?label=main&logo=github" />
     </span>
     <ImageViewer Alt="coverage" IsAsync="true" Url="https://codecov.io/gh/dotnetcore/BootstrapBlazor/branch/main/graph/badge.svg?token=5SXIWHXZC3" />
 </div>

diff --git a/src/BootstrapBlazor.Server/Components/Samples/Table/Tables.razor b/src/BootstrapBlazor.Server/Components/Samples/Table/Tables.razor
@@ -19,10 +19,10 @@
 <DemoBlock Title="@Localizer["TableBaseNormalTitle"]"
            Introduction="@Localizer["TableBaseNormalIntro"]"
            Name="Normal">
-    <p>@((MarkupString)Localizer["TableBaseNormalDescription"].Value)</p>
-
-    <Button Icon="fa-solid fa-arrows-rotate" Text="@RefreshText" OnClick="OnClick" class="mb-3" />
-
+    <section ignore>
+        <p>@((MarkupString)Localizer["TableBaseNormalDescription"].Value)</p>
+        <Button Icon="fa-solid fa-arrows-rotate" Text="@RefreshText" OnClick="OnClick" />
+    </section>
     <Table TItem="Foo" Items="@Items.Take(3)">
         <TableColumns>
             <TableColumn @bind-Field="@context.DateTime" Width="180" />
@@ -59,7 +59,7 @@
 <DemoBlock Title="@Localizer["TableBaseSizeTitle"]"
            Introduction="@Localizer["TableBaseSizeIntro"]"
            Name="TableSize">
-    <p>@((MarkupString)Localizer["TableBaseSizeDescription"].Value)</p>
+    <section ignore>@((MarkupString)Localizer["TableBaseSizeDescription"].Value)</section>
     <Table TItem="Foo" Items="@Items.Take(3)" IsBordered="true" IsStriped="true" TableSize="TableSize.Compact">
         <TableColumns>
             <TableColumn @bind-Field="@context.DateTime" Width="180" Filterable="true" Sortable="true" />
@@ -72,8 +72,10 @@
 <DemoBlock Title="@Localizer["TableBaseHeaderStyleTitle"]"
            Introduction="@Localizer["TableBaseHeaderStyleIntro"]"
            Name="HeaderStyle">
-    <p>@((MarkupString)Localizer["TableBaseHeaderStyleDescription"].Value)</p>
-    <div class="code-label mb-3"><code>Light</code> @Localizer["TableBaseHeaderStyleMode"]</div>
+    <section ignore>
+        <p>@((MarkupString)Localizer["TableBaseHeaderStyleDescription"].Value)</p>
+        <div class="code-label mb-3"><code>Light</code> @Localizer["TableBaseHeaderStyleMode"]</div>
+    </section>
     <Table TItem="Foo" Items="@Items.Take(3)" HeaderStyle="TableHeaderStyle.Light" IsBordered="true">
         <TableColumns>
             <TableColumn @bind-Field="@context.DateTime" Width="180" />
@@ -82,7 +84,7 @@
         </TableColumns>
     </Table>
 
-    <div class="code-label my-3"><code>Dark</code> @Localizer["TableBaseHeaderStyleMode"]</div>
+    <section ignore class="code-label my-3"><code>Dark</code> @Localizer["TableBaseHeaderStyleMode"]</section>
     <Table TItem="Foo" Items="@Items.Take(3)" HeaderStyle="TableHeaderStyle.Dark" IsBordered="true">
         <TableColumns>
             <TableColumn @bind-Field="@context.DateTime" Width="180" />

diff --git a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesCell.razor b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesCell.razor
@@ -7,30 +7,40 @@
 
 <h4>@Localizer["TablesCellDescription"]</h4>
 
+<HeadContent>
+    <style>
+        .cell-demo {
+            --bs-table-bg: #e9ecef;
+        }
+    </style>
+</HeadContent>
+
 <DemoBlock Title="@Localizer["TableCellMergeCellTitle"]"
            Introduction="@Localizer["TableCellMergeCellIntro"]"
            Name="MergeCell">
-    <p>@((MarkupString)Localizer["TableCellMergeCellTip"].Value)</p>
-    <Pre class="mb-3">.cell-demo {
+    <section ignore>
+        <p>@((MarkupString)Localizer["TableCellMergeCellTip"].Value)</p>
+        <Pre class="mb-3">.cell-demo {
     --bs-table-bg: #e9ecef;
 }</Pre>
-    <div class="table-demo">
-        <Table TItem="Foo" Items="@Items.Take(3)">
-            <TableColumns>
-                <TableColumn @bind-Field="@context.DateTime" Width="140" />
-                <TableColumn @bind-Field="@context.Name" OnCellRender="@OnCellRenderHandler" />
-                <TableColumn @bind-Field="@context.Address" />
-            </TableColumns>
-        </Table>
-    </div>
+    </section>
+    <Table TItem="Foo" Items="@Items.Take(3)">
+        <TableColumns>
+            <TableColumn @bind-Field="@context.DateTime" Width="140" />
+            <TableColumn @bind-Field="@context.Name" OnCellRender="@OnCellRenderHandler" />
+            <TableColumn @bind-Field="@context.Address" />
+        </TableColumns>
+    </Table>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TableCellOnDoubleClickCellTitle"]"
            Introduction="@Localizer["TableCellOnDoubleClickCellIntro"]"
            Name="OnDoubleClickCell">
-    <Tips class="mb-3">
-        <p>@((MarkupString)Localizer["TableCellOnDoubleClickCellTip"].Value)</p>
-    </Tips>
+    <section ignore>
+        <Tips>
+            <p>@((MarkupString)Localizer["TableCellOnDoubleClickCellTip"].Value)</p>
+        </Tips>
+    </section>
     <Table TItem="Foo" Items="@Items.Take(3)" IsBordered="true" OnDoubleClickCellCallback="@OnDoubleClickCellCallback">
         <TableColumns>
             <TableColumn @bind-Field="@context.DateTime" Width="180" />

diff --git a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesCell.razor.css b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesCell.razor.css
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesColumnList.razor b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesColumnList.razor
@@ -39,17 +39,19 @@
 <DemoBlock Title="@Localizer["ShownWithBreakPointTitle"]"
            Introduction="@Localizer["ShownWithBreakPointIntro"]"
            Name="ShownWithBreakPoint">
-    <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>
+    <section ignore>
+        <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>
+    </section>
     <Table TItem="Foo" RenderMode="TableRenderMode.Table"
            IsPagination="true" PageItemsSource="@PageItemsSource"
            IsStriped="true" IsBordered="true"

diff --git a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesColumnResizing.razor b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesColumnResizing.razor
@@ -11,9 +11,11 @@
 <DemoBlock Title="@Localizer["WidthTitle"]"
            Introduction="@Localizer["WidthIntro"]"
            Name="Width">
-    <p>@((MarkupString)Localizer["WidthP1"].Value)</p>
-    <p>@((MarkupString)Localizer["WidthP2"].Value)</p>
-    <p>@((MarkupString)Localizer["WidthP3"].Value)</p>
+    <section ignore>
+        <p>@((MarkupString)Localizer["WidthP1"].Value)</p>
+        <p>@((MarkupString)Localizer["WidthP2"].Value)</p>
+        <p>@((MarkupString)Localizer["WidthP3"].Value)</p>
+    </section>
     <Table TItem="Foo" @ref="TableRows"
            IsPagination="true" PageItemsSource="@PageItemsSource"
            IsStriped="true" IsBordered="true"

diff --git a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesDetailRow.razor b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesDetailRow.razor
@@ -43,7 +43,7 @@
 <DemoBlock Title="@Localizer["DetailRowTemplate2Title"]"
            Introduction="@Localizer["DetailRowTemplate2Intro"]"
            Name="Show">
-    <p>@((MarkupString)Localizer["DetailRowTemplate2P"].Value)</p>
+    <section ignore>@((MarkupString)Localizer["DetailRowTemplate2P"].Value)</section>
     <Table TItem="Foo"
            IsPagination="true" PageItemsSource="@PageItemsSource"
            IsStriped="true" IsBordered="true"
@@ -70,7 +70,7 @@
 <DemoBlock Title="@Localizer["HeightTitle"]"
            Introduction="@Localizer["HeightIntro"]"
            Name="Height">
-    <p>@Localizer["HeightP"]</p>
+    <section ignore>@Localizer["HeightP"]</section>
     <Table TItem="Foo" Height="400" IsFixedHeader="true"
            IsStriped="true" IsBordered="true"
            ShowToolbar="true" ShowDefaultButtons="false"
@@ -90,7 +90,7 @@
 <DemoBlock Title="@Localizer["DetailRowTemplate3Title"]"
            Introduction="@Localizer["DetailRowTemplate3Intro"]"
            Name="DetailRowTemplate">
-    <p>@((MarkupString)Localizer["DetailRowTemplate3P"].Value)</p>
+    <section ignore>@((MarkupString)Localizer["DetailRowTemplate3P"].Value)</section>
     <Table TItem="Foo" IsPagination="true" PageItemsSource="@PageItemsSource"
            IsStriped="true" IsBordered="true"
            ShowToolbar="true" ShowDefaultButtons="false"

diff --git a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesDialog.razor b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesDialog.razor
@@ -29,22 +29,24 @@
             <TableColumn @bind-Field="@context.Count" Width="80" />
         </TableColumns>
     </Table>
-    <Modal @ref="Modal">
-        <ModalDialog Title="@Localizer["TableDialogNormalSelectItem"]" IsCentered="true">
-            <BodyTemplate>
-                <Table TItem="Foo" IsStriped="true" @bind-SelectedRows="@SelectedRows" ClickToSelect="true"
-                       ShowToolbar="true" ShowDefaultButtons="false" IsMultipleSelect="true"
-                       OnQueryAsync="@OnQueryProductAsync">
-                    <TableColumns>
-                        <TableColumn @bind-Field="@context.DateTime" />
-                        <TableColumn @bind-Field="@context.Name" />
-                        <TableColumn @bind-Field="@context.Count" />
-                    </TableColumns>
-                </Table>
-            </BodyTemplate>
-            <FooterTemplate>
-                <Button Text="@Localizer["TableDialogNormalSure"]" Icon="fa-regular fa-square-check" OnClick="@OnConfirm" />
-            </FooterTemplate>
-        </ModalDialog>
-    </Modal>
+    <section ignore>
+        <Modal @ref="Modal">
+            <ModalDialog Title="@Localizer["TableDialogNormalSelectItem"]" IsCentered="true">
+                <BodyTemplate>
+                    <Table TItem="Foo" IsStriped="true" @bind-SelectedRows="@SelectedRows" ClickToSelect="true"
+                           ShowToolbar="true" ShowDefaultButtons="false" IsMultipleSelect="true"
+                           OnQueryAsync="@OnQueryProductAsync">
+                        <TableColumns>
+                            <TableColumn @bind-Field="@context.DateTime" />
+                            <TableColumn @bind-Field="@context.Name" />
+                            <TableColumn @bind-Field="@context.Count" />
+                        </TableColumns>
+                    </Table>
+                </BodyTemplate>
+                <FooterTemplate>
+                    <Button Text="@Localizer["TableDialogNormalSure"]" Icon="fa-regular fa-square-check" OnClick="@OnConfirm" />
+                </FooterTemplate>
+            </ModalDialog>
+        </Modal>
+    </section>
 </DemoBlock>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesDynamic.razor b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesDynamic.razor
@@ -15,7 +15,7 @@
 <DemoBlock Title="@Localizer["TablesDynamicEditTitle"]"
            Introduction="@Localizer["TablesDynamicEditIntro"]"
            Name="Edit">
-    <p>@((MarkupString)Localizer["TablesDynamicEditDescription"].Value)</p>
+    <section ignore>@((MarkupString)Localizer["TablesDynamicEditDescription"].Value)</section>
     <Table TItem="DynamicObject" DynamicContext="DataTableDynamicContext" ModelEqualityComparer="ModelEqualityComparer"
            IsMultipleSelect="true" IsBordered="true" IsStriped="true" @bind-SelectedRows="SelectedItems"
            ShowToolbar="true" ShowExtendButtons="true" />