Table表格

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

第一列是联动的选择框，增加 [nzChecked] 后，th 获得和 nz-checkbox 一样的功能，选择后进行操作，完成后清空选择，请注意：数据逻辑需要自行控制。

通过 nzSelections 自定义选择项.

筛选：对某一列数据进行筛选，通过指定 [nzFilters] 属性来指定筛选菜单，[nzFilterFn] 指定筛选函数，[nzFilterMultiple] 用于指定多选和单选，通过设置 [nzFilters] 中的 { byDefault: true } 属性来默认启用一个筛选器。

排序：对某一列数据进行排序，通过指定 [nzSortOrder] 来指定默认排序顺序，[nzSortFn] 指定排序函数 [nzSortDirections] 改变每列可用的排序方式。

使用 [nzSortPriority] 字段以配置多列排序优先级。通过 [nzSortFn] 配置排序逻辑。

修改 [nzSortOrder] 和 [nzFilters] 来指定当前列的排序与筛选状态。

通过 <nz-filter-trigger> 组件定义自定义的列筛选功能，并实现一个搜索列的示例。

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

• 分页：使用 [nzFrontPagination]="false" 指定由服务端分页。
• 排序：使用 [nzSortFn]="true" 指定由服务端排序，如果需要多列排序可使用 [nzSortPriority]="true"。
• 筛选：使用 [nzFilters] 来指定筛选项，使用 [nzFilterFn]="true" 指定由服务端筛选
• 参数传输：通过 (nzQueryParams) 服务端需要的参数，数据结构为

{
  pageIndex: number;
  pageSize: number;
  sort: Array<{ key: string; value: 'ascend' | 'descend' | null }>;
  filter: Array<{ key: string; value: any | any[] }>;
}

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

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

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

当表格内容较多不能一次性完全展示时，可以通过 td 上的 nzExpand 属性展开。

当使用 nzExpand 属性时，添加 nzExpandIcon 自定义展开图标。

像 W3C标准 <table> 一样，使用 colspan 和 rowspan 合并行/列。

表格支持树形数据的展示，可以通过设置 nzIndentSize 以控制每一层的缩进宽度，本例子中提供了树与数组之间的转换函数，实际业务中请根据需求修改。

指定 [nzScroll] 的 y 数值 方便一页内展示大量数据，每一列的宽度可以由 [nzWidth] 指定。

对于列数很多的数据，可以使用 [nzLeft] 和 [nzRight] 固定前后的列，横向滚动查看其它数据，需要和 [nzScroll].x 配合使用。

列头与内容不对齐或出现列重复，请指定固定列的宽度 [nzWidth]。如果指定 width 不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。 建议指定 nzScroll.x 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 nzScroll.x。 注意：固定列通过 sticky 实现，IE 11 会降级成横向滚动。

同时固定头和列，适合同时展示有大量数据和数据列。

列头与内容不对齐或出现列重复，请指定固定列的宽度 [nzWidth]。如果指定 width 不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。 建议指定 nzScroll.x 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 nzScroll.x。 注意：固定列通过 sticky 实现，IE 11 会降级成横向滚动。

固定列与分组表头联合使用。

定制带单元格编辑功能的表格，自由操作单元格内容。

为了获得更好的性能，NG-ZORRO 所有组件都运行在 OnPush 模式下，这意味着对 @Input() 数据的 mutate 将不会生效，请使用 immutable 方式操作数组或者对象。

开发者可以参照该例子根据自己需求自由定制表格的编辑功能。

定制带行编辑功能的表格，自由操作行内容。

为了获得更好的性能，NG-ZORRO 所有组件都运行在 OnPush 模式下，这意味着对 @Input() 数据的 mutate 将不会生效，请使用 immutable 方式操作数组或者对象。

开发者可以参照该例子根据自己需求自由定制表格的编辑功能。

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

虚拟滚动，结合 cdk scrolling 的虚拟滚动，用于巨量数据加载。可以通过获得 cdkVirtualScrollViewport 进行进一步操作，见本示例及 API。

使用自定义元素，用户可以导入 @angular/cdk/drag-drop 来实现拖拽排序。

注意：需要手动导入 import { DragDropModule } from '@angular/cdk/drag-drop';

模板模式，显示内容仅由模板内容控制，不再需要向 nzData 传入数据，完全像普通 table 一样使用，使用 ant-design 的样式。

当有连续超长字符串时，可以使用 nzBreakWord 来折行显示

设置 nzTableLayout="fixed" 与 nzEllipsis 可以让单元格内容根据宽度自动省略。

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

通过 nzSummary 设置总结栏。可以通过配置 nzFixed 属性使其固定。

选择不同配置组合查看效果。

控制表格中列的展示与排序