# Table 表格

展示行列数据。

## 何时使用

- 当有大量结构化的数据需要展现时；

- 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。

## 代码演示

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

第一列是联动的选择框。

选择后进行操作，完成后清空选择。

配置选择框的默认属性。

使用受控属性对筛选和排序状态进行控制。

nzTable可以像 HTML table 标签 一样自定义表头和内容，通过配合 `nz-table-sort`与 `nz-table-filter`可以方便的自定义筛选和排序功能。

通过 `nz-dropdown`的 `nz-dropdown-custom`属性自定义筛选菜单

nzTable可以像 HTML table 标签 一样自定义表头和内容。

数据项较多时显示分页。

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

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

当表格内容较多不能一次性完全展示时。

nzTable可以像 HTML table 标签 一样使用 `rowspan`和 `colspan`标签

表格支持树形数据的展示，可以通过设置 `nzLevel` 以控制每一层的缩进宽度。

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

需要手动指定 `th`和 `td`的宽度，否则列头和内容可能不对齐。

通过自定义模板实现带行编辑功能的表格。

传入 nzIsPagination 为 false 即可。此时表格将完整显示 nzDataSource 内的数据，不进行任何分页。

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

## API

### nz-table

参数 | 说明 | 类型 | 默认值
--- | --- | --- | ---
nzAjaxData | 远程异步数据，与nzDataSource二选一 | Array | []
nzDataSource | 同步数据，与nzAjaxData二选一 | Array | []
nzDataChange | 当前分页数据回调，返回当前分页数据的内容 | Func | -
#模板引用变量 | 模板引用变量可以自由命名，经过分页之后的数据可以通过`模板引用变量.data`获取，最后通过*ngFor的方式渲染在table中，关于模板引用变量的知识可以参考 这里 | NzTableComponent | -
nzScroll | 纵向支持滚动，也可用于指定滚动区域的高度：{{ '{' }} y: 300 {{ '}' }} | Object | -
#nzFixedHeader | 用于定位固定表头，与 `nzScroll`配合使用 | ng-template | -
nzTotal | 数据总量，用于与nzAjaxData共同使用 | Number | -
nzPageIndex | 当前页码，可双向绑定 | Number | -
nzPageIndexChange | 当前页码变化回调 | Func | -
nzPageSize | 每页数量，可双向绑定 | Number | -
nzPageSizeChange | 每页数量变化回调 | Func | -
nzPageIndexChangeClick | 用户点击页码事件回调 | Func | -
nzBordered | 是否显示边框 | Boolean | false
nzSize | table大小 | 'small'|'middle'|'default' | 'default'
nzCustomNoResult | 是否自定义无数据时内容 | Boolean | false
[noResult] | 无数据时内容 | ng-content | -
nzShowFooter | 是否显示表脚 | Boolean | false
[nz-table-footer] | 表脚内容 | ng-content | -
nzShowTitle | 是否显示表头 | Boolean | false
[nz-table-title] | 表头内容 | ng-content | -
nzIsPagination | 是否分页 | Boolean | true
nzLoading | 是否显示加载中 | Boolean | false
nzShowSizeChanger | 是否显示pagination中改变页数 | Boolean | false
nzShowQuickJumper | 是否显示pagination中快速跳转 | Boolean | false
nzShowTotal | 是否显示总数据量 | Boolean | false
nzIsPageIndexReset | 数据变更后是否保留在数据变更前的页码 | Boolean | true

### nz-table-sort

嵌入th中显示排序状态

### nz-table-filter

与nz-dropdown结合使用，用于过滤表中的数据

参数 | 说明 | 类型
--- | --- | ---
[nz-table-filter-confirm] | 确定按钮的内容 | ng-content
[nz-table-filter-clear] | 重置按钮的内容 | ng-content

### [nz-thead]

标定thead

### [nz-th]

标定th

参数 | 说明 | 类型 | 默认值
--- | --- | --- | ---
nzCheckbox | 是否有checkbox出现在当前th上 | Boolean | false
nzExpand | 是否是展开按钮列 | Boolean | false
nzWidth | 当前列的宽度，暂时不支持合并列宽度 | String | -

### [nz-table-body]

标定tbody

### [nz-tbody-tr]

标定tbody中tr

### [nz-td]

标定td

参数 | 说明 | 类型 | 默认值
--- | --- | --- | ---
nzCheckbox | 是否有checkbox出现在当前td上 | Boolean | false
nzExpand | 是否是展开按钮列 | Boolean | false

### [nz-table-divider]

用于td中分隔数据

### nz-row-indent

与树形数据展示配合使用

参数 | 说明 | 类型 | 默认值
--- | --- | --- | ---
nzIndentSize | 控制每一层的缩进宽度 | Number | -

### nz-row-expand-icon

与可展开和树形数据展示配合使用

参数 | 说明 | 类型 | 默认值
--- | --- | --- | ---
nzExpand | 标识是否展开，可双向绑定 | Boolean | false
nzShowExpand | 是否显示此 展开/收缩 按钮 | Boolean | true