基础的查询与编辑案例。用到了自动生成列和自动生成表单项。

简单的表格，最后一列是各种操作。

在 .NET 5 以下版本建议使用 <Colum> 的 @bind-Field 或 DataIndex 来方便地绑定数据。

局限: 使用 @bind-Feild 绑定接口类型的实体时，属性必须是引用类型，如 int 要改为 int?。使用 DataIndex 则无此问题。

可以不使用 @bind-Field，而是通过设置数据类型 TData 和数据索引字符串 DataIndex 来指定要绑定的属性。列数据的类型与 TData 的定义一致。

当绑定的属性是值类型并且是Nullable时，TData 应设为Nullable类型。如：<Column TData="int?" DataIndex="prop1" /> 或 <Column TData="Nullable<int>" DataIndex="prop1" />。

Column使用DataIndex时，Table的OnChange参数 QuerModel<TItem>.SortModel[].FieldName 等于 DataIndex。

DataIndex支持的访问操作类型，详见成员路径助手

可通过 TItem 类型自动生成列。

注意: 此功能正在迭代中，后续本版可能会存在不兼容的变更。

可通过传入一个返回字典的委托，来给行或者单元格设置任意属性。如 onclick、style、class 等。 适用于 OnRow OnHeaderRow OnCell OnHeaderCell。

对于返回字典的要求，请参加官方文档【属性展开和任意参数】 一节。

第一列是联动的选择框。可以通过 RowSelection.Type 属性指定选择类型，默认为 checkbox。

可为 SelectedRows 设置默认值来默认选中，默认是用对象引用来跟列数据做比对的，所以 要从 DataSource 中 选取对象。也可以利用 Table 上的 RowKey 属性来自定义比对值。

通过路由参数进行翻页

对于使用 ADO.NET 查询数据库的场景，也可以将 DataTable 作为数据源。

从动态的 Json 数据生成表格

添加表格边框线，页头和页脚。

对某一列数据进行筛选，使用列的 Filters 属性来指定需要筛选菜单的列，OnFilter 用于筛选当前数据，FilterMultiple 用于指定多选和单选。

对某一列数据进行排序，通过指定列的 Sortable 属性即可启动排序按钮，也可以设置 SorterCompare: (rowA, rowB) => int， rowA、rowB 为比较的两个行数据。

SortDirections: ['ascend' | 'descend']改变每列可用的排序方式，切换排序时按数组内容依次切换，设置在 table props 上时对所有列生效。你可以通过设置 ['ascend', 'descend', 'ascend'] 禁止排序恢复到默认状态。

使用 DefaultSortOrder 属性，设置列的默认排序顺序。

还可以在 OnChange 事件绑定的方法中，自定义筛选逻辑，可用方法 QueryModel.ExecuteQuery(data) 构建查询表达式。

向 SorterCompare 传入比较函数以自定义排序。 返回值定义与 System.Collections.Generic.IComparer<T> 接口 一致。

当不设置 Filters 时，在 Column 上使用 Filterable 属性也可以显示筛选器，默认会根据绑定的属性类型来创建内置的筛选器。

内置筛选器是根据绑定属性的类型来展示的，目前支持 数值型、枚举型、string、bool、Guid、DateTime 。

当列类型不是内置筛选器支持的类型时，或者您想修改筛选器的比较操作，可以使用自定义筛选器 FieldFilterType。

在本示例中，Color 列就是用自定义筛选器，可以按"亮度"筛选 （或按HUE值排序）。

自定义筛选器需要实现 IFieldFilterType，或者继承 BaseFieldFilterType 或 DateFieldFilterType 来按需重写相关方法。

另外，还可以通过设置 FieldFilterTypeResolver 属性为整个表格组件配置自定义筛选器，或者可以通过在依赖注入服务中注册不同的 IFilterTypeResolver 实现来为整个应用程序中的表格组件设置自定义筛选器（DefaultFieldFilterTypeResolver 是默认实现。）。

可以通过 FilterDropdown 自定义列筛选器模板，并在 OnChange 中把筛选条件拼接到已有的搜索中。

在调用 ReloadData() 时可以将包含 “分页”、“排序”、“过滤器” 等状态的 QueryModel 传递给 Table 恢复状态。 另外也可以调用 ResetData() 重置 Table 状态。

Column 支持 SorterMultiple 字段以配置多列排序优先级。通过 SorterCompare 配置排序逻辑，你可以通过不设置该函数只启动多列排序的交互形式。

这个例子通过简单的 HttpClient 读取方式，演示了如何从服务端读取并展现数据，具有筛选、排序等功能以及页面 loading 效果。开发者可以自行接入其他数据处理方式。

另外，本例也展示了筛选排序功能如何交给服务端实现，列不需要指定具体的 OnFilter 和 Sorter 函数，而是在把筛选和排序的参数通过 OnChange 事件获取，并请求服务端来处理。

注意，此示例使用 模拟接口，展示数据可能不准确，请打开网络面板查看请求。

从0.9.0版本开始，可以设置 RemoteDataSource 为 true 来避免在数据总条数小于等于 PageSize 时调用客户端筛选排序分页逻辑。

由于 QueryModel 已经提供了查询所需的所有信息（页码、排序、筛选），所以可以很好地支持 OData 等查询协议。

推荐使用 OData Client 方式结合 IQueryable<T> 的扩展方法 ExecuteTableQuery 进行流畅地查询。 但需要解决一个已知问题。

  DefaultContainer dsc = new DefaultContainer(new Uri("https://services.odata.org/V4/(S(uvf1y321yx031rnxmcbqmlxw))/TripPinServiceRW/"));
  var _data = dsc.People.ExecuteTableQuery(queryModel).ToArray();

两种紧凑型的列表，小型列表只用于对话框内。

当表格内容较多不能一次性完全展示时。（本例中用于抽象类的不同实现类的展示）

表格支持树形数据的展示，只需设置 TreeChildren 属性指定子数据。

设置 OnExpand 后强制显示展开按钮，按需加载子数据，此时如需禁用某行展开则设置 RowExpandable。

可以通过设置 IndentSize 以控制每一层的缩进宽度。

在展示树形数据时，Table组件能够处理父子数据之间的循环引用。

当设置了 DefaultExpandAllRows 时，将按照 DefaultExpandMaxLevel 来限制展开的级数，避免因循环引用导致应用陷入死循环。

DefaultExpandMaxLevel 的默认值为 4。

方便一页内展示大量数据。

需要指定 column 的 Width 属性，否则列头和内容可能不对齐。如果指定 Width 不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。

对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 ScrollX 配合使用。

若列头与内容不对齐或出现列重复，请指定固定列的宽度 Width。如果指定 Width 不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。

建议指定 ScrollX 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 ScrollX。

适合同时展示有大量数据和数据列。

若列头与内容不对齐或出现列重复，请指定固定列的宽度 Width。如果指定 Width 不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。

建议指定 ScrollX 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 ScrollX。

注意：如果右侧固定列出现错位，请设置 ScrollBarWidth 来固定滚动条宽度。

设置 AutoHeight 可以让表格自动撑满高度，并固定头部。

注意：要使其生效还需要设置容器高度，本案例中设置了 min-height:100vh;。

可以使用 HeaderTemplate 自定义表头模板。

本示例中，列定义 ColumnDefinitions 与头部定义 HeaderTemplate 分开了，ColumnDefinitions 中的定义只控制单元格的绑定。

表头只支持列合并，使用 Column 里的 HeaderColSpan 进行设置，设值为 0 时，设置的表格不会渲染。

表格支持行/列合并，使用 Column 里的单元格属性 ColSpan 或者 RowSpan 设值为 0 时，设置的表格不会渲染。

可以使用 RowTemplate 自定义每行数据的展示，本示例中每行数据分别由两行组成。

TableRow 是行组件，对应 <tr>, TableCell 是单元格组件，对应 <td>,

设置 Grouping 指定列属性值进行分组，也可以设置 GroupBy 委托来指定分组的值。还可以设置 GroupTitleTemplate 自定义分组标题。

注意：目前实现的是客户端分组，因此如果 DataSource 绑定的是 IQueryable<T>，请确保其已包含数据库分组的操作（分页、排序和筛选仍然生效）

可以使用 RowClassName 给特定的行设置 class。也可以用 ExpandedRowClassName 给特定的展开行设置 class。

注意：如果设置了固定列，则还需要为单元格指定样式。

带单元格编辑功能的表格。

带行编辑功能的表格。

展示每行数据更详细的信息。

使用 Resizable 属性启用可伸缩列。

设置 Eolumn.Ellipsis 可以让单元格内容根据宽度自动省略。

列头缩略暂不支持和排序筛选一起使用。

通过 SummaryRow 设置总结栏。使用 SummaryCell 同步 Column 的固定状态。

可使用 Hidden 属性控制 Column 的显示。

如果希望在小屏设备时（ <960px ）呈现列表模式，请设置 Responsive 属性。(v0.10.6+ 默认改为 false)

本示例需要调整浏览器宽度才会有效果。

可使用 Align 属设置列的对齐方式。

设置 EnableVirtualization 与 ScrollY 启用虚拟化，在大数据量下提高性能（需要.NET 5或更高版本框架）。 启用 RemoteDataSource 即变为按需加载。

表格的分页设置。

使用PaginationTemplate可以实现自定义分页。