docs(module: table): add a search box in the filter & sorter demo (#2955)

site/AntDesign.Docs/Demos/Components/Table/demo/Head_.razor

@@ -1,4 +1,15 @@
 <Table DataSource="data" OnChange="OnChange" TItem="Data">
+    <TitleTemplate>
+        <GridRow>
+            <GridCol Span="4">
+                <Title Level="3">Table Title</Title>
+            </GridCol>
+            <GridCol Span="8" Offset="12">
+                <Search Placeholder="Search Name" @bind-Value="searchString" OnSearch="()=>_table?.ReloadData()" />
+            </GridCol>
+        </GridRow>
+    </TitleTemplate>
+      <RowTemplate>
     <PropertyColumn
             Property="c=>c.Name"
             SorterCompare="@((a,b)=> a.Length - b.Length)"
@@ -16,11 +27,15 @@
             Filters="addressFilters"
             FilterMultiple="false"
             OnFilter="(value,address)=>address.StartsWith(value)" />
+    </RowTemplate>
 </Table>
 
 @using AntDesign.TableModels;
 @using System.Text.Json;
 @code {
+    string searchString;
+    IEnumerable<Data> dataSource;
+    ITable _table;
 
     class Data
     {
@@ -57,6 +72,9 @@
     void OnChange(QueryModel<Data> query)
     {
         Console.WriteLine(JsonSerializer.Serialize(query));
+
+        dataSource = query.ExecuteQuery(data.AsQueryable())
+            .Where(x => string.IsNullOrWhiteSpace(searchString) || x.Name.Contains(searchString, StringComparison.OrdinalIgnoreCase));
     }
 
     void OnRowClick(RowData<Data> row)

site/AntDesign.Docs/Demos/Components/Table/demo/head.md

@@ -7,25 +7,28 @@ title:
 
 ## zh-CN
 
-对某一列数据进行筛选，使用列的 `filters` 属性来指定需要筛选菜单的列，`onFilter` 用于筛选当前数据，`filterMultiple` 用于指定多选和单选。
+对某一列数据进行筛选，使用列的 `Filters` 属性来指定需要筛选菜单的列，`OnFilter` 用于筛选当前数据，`FilterMultiple` 用于指定多选和单选。
 
-对某一列数据进行排序，通过指定列的 `sorter` 函数即可启动排序按钮。`sorter: function(rowA, rowB) { ... }`， rowA、rowB 为比较的两个行数据。
+对某一列数据进行排序，通过指定列的 `Sortable` 属性即可启动排序按钮，也可以设置 `SorterCompare: (rowA, rowB) => int`， rowA、rowB 为比较的两个行数据。
 
-`sortDirections: ['ascend' | 'descend']`改变每列可用的排序方式，切换排序时按数组内容依次切换，设置在 table props 上时对所有列生效。你可以通过设置 `['ascend', 'descend', 'ascend']` 禁止排序恢复到默认状态。
+`SortDirections: ['ascend' | 'descend']`改变每列可用的排序方式，切换排序时按数组内容依次切换，设置在 table props 上时对所有列生效。你可以通过设置 `['ascend', 'descend', 'ascend']` 禁止排序恢复到默认状态。
 
-使用 `defaultSortOrder` 属性，设置列的默认排序顺序。
+使用 `DefaultSortOrder` 属性，设置列的默认排序顺序。
+
+还可以在 `OnChange` 事件绑定的方法中，自定义筛选逻辑，可用方法 `QueryModel.ExecuteQuery(data)` 构建查询表达式。
 
 ## en-US
 
-Use `filters` to generate filter menu in columns, `onFilter` to determine filtered result, and `filterMultiple` to indicate whether it's multiple or single selection.
+Use `Filters` to generate filter menu in columns, `OnFilter` to determine filtered result, and `FilterMultiple` to indicate whether it's multiple or single selection.
 
 Uses `defaultFilteredValue` to make a column filtered by default.
 
-Use `sorter` to make a column sortable. `sorter` can be a function of the type `function(a, b) { ... }` for sorting data locally.
+Use `Sortable` to make a column sortable. Or use `SorterCompare`, a function of the type `(a, b) => int` for sorting data locally.
 
-`sortDirections: ['ascend' | 'descend']` defines available sort methods for each columns, effective for all columns when set on table props. You can set as `['ascend', 'descend', 'ascend']` to prevent sorter back to default status.
+`SortDirections: ['ascend' | 'descend']` defines available sort methods for each columns, effective for all columns when set on table props. You can set as `['ascend', 'descend', 'ascend']` to prevent sorter back to default status.
 
-Uses `defaultSortOrder` to make a column sorted by default.
+Uses `DefaultSortOrder` to make a column sorted by default.
 
-If a `sortOrder` or `defaultSortOrder` is specified with the value `ascend` or `descend`, you can access this value from within the function passed to the `sorter` as explained above. Such a function can take the form: `function(a, b, sortOrder) { ... }`.
+If a `SortOrder` or `DefaultSortOrder` is specified with the value `ascend` or `descend`, you can access this value from within the function passed to the `sorter` as explained above. Such a function can take the form: `function(a, b, sortOrder) { ... }`.
 
+You can also customize the filtering logic in the 'OnChange' event method, using the method 'QueryModel.ExecuteQuery(data)' to build query expressions.

site/AntDesign.Docs/Demos/Components/Table/doc/index.en-US.md

@@ -15,7 +15,12 @@ A table displays rows of data.
 
 ## How To Use
 
-Specify `dataSource` of Table as an array of data.
+Specify `dataSource` of Table as an array of data, the `OnChange` event and its incoming query state can be paged and filtered.
+
+### Two data column types
+
+- **PropertyColumn** inherits from Column and is bound with 'Property="c=> c.User.Name "' to support cascading access.  If used below .NET 6, need to specify the type of 'TItem', 'TProp'.
+- **Column** bound with `@bind-Field="context.UserName"`, but does not support cascading access to class attributes (for example, `context.User.Name`), but it can be bound with `DataIndex="'User.Name'"`.
 
 
 ## API

site/AntDesign.Docs/Demos/Components/Table/doc/index.zh-CN.md

@@ -16,7 +16,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/f-SbcX2Lx/Table.svg
 
 ## 如何使用
 
-指定表格的数据源 `dataSource` 为一个数组。
+指定表格的数据源 `DataSource` 为一个数组，可用 OnChange 事件传入的查询状态进行分页和筛选。
+
+### 两个数据列类型:
+
+- **PropertyColumn** 继承自 Column，用 `Property="c=>c.User.Name"` 绑定列，支持级联访问。在 .NET6 以下使用需指定 `TItem`, `TProp` 的类型。
+- **Column** 用 `@bind-Field="context.UssrName"` 绑定时不支持级联访问类的属性（例如：`context.User.Name`），但可以用 `DataIndex="'User.Name'"` 绑定。
 
 
 ## API