# Table

表格

## Usage

### Basic

<code src="./demos/jsx-column.tsx"></code>

你也可以省略类型声明，直接使用 `Table` / `TableColumn`，只是这样会失去对于 `record` / `render` 等信息的类型检查：

<code src="./demos/jsx-column-with-loose-type.tsx"></code>

### 使用 columns 配置

<code src="./demos/basic.tsx"></code>

### 使用 columns 数组而不是独立声明每项 column

非推荐写法，这种写法会导致 recordKey 和 render 的参数丢失类型信息

<code src="./demos/columns-array.tsx"></code>

### 自定义行类名
<code src="./demos/row-classname.tsx"></code>

### 自定义单元格类名
<code src="./demos/cell-classname.tsx"></code>

### 调整分页控件对齐方式
<code src="./demos/pagination-align.tsx"></code>

### 不使用分页会显示所有数据

<code src="./demos/no-pagination.tsx"></code>

### 空数据

<code src="./demos/placeholder.tsx"></code>

### 自定义空数据

<code src="./demos/placeholder-custom.tsx"></code>

### 行选择

如果不给 recordId，则选中的 id 为 每行的 index

<code src="./demos/selection.tsx"></code>

### 行选择 - 单选

<code src="./demos/selection-single.tsx"></code>

### 行选择与分页

<code src="./demos/selection-pagination.tsx"></code>

### 排序

通过在 column 上配置 `sort` 信息，可以实现基于某一列或某几列的排序功能：

<code src="./demos/sort.tsx"></code>

### 服务端排序

排序过程也可能发生在服务端，我们通过调用接口来获取排序后的结果：

<code src="./demos/sort-by-api.tsx"></code>

### 行合并

<code src="./demos/rowspan.tsx"></code>

### 动态的 `columns` 列表

如果 `columns`（或 `children` 中的 `<Column />`）列表会动态变化（如某列在特定条件下才会展示），为了避免列（`td`）中的内容丢失局部状态，需要给每个列添加 `id` 信息

`id` 之于 `columns`，正如 [`key`](https://reactjs.org/docs/lists-and-keys.html) 之于 React list，可以帮助 `Table` 组件将状态变更前后的 `column` 项正确地对应上

具体可以参考以下 demo：（注意 demo 中在“ID”对应的列被移除或添加时，“名称”对应列的局部状态不会丢失）

<code src="./demos/dynamic-columns.tsx"></code>

### 过滤

<code src="./demos/filter.tsx"></code>

### 过滤 - 单选

<code src="./demos/filter-single.tsx"></code>

### 过滤 - 后端过滤

<code src="./demos/filter-remote.tsx"></code>

### 边框 - 全边框

`border="full"`

<code src="./demos/border-full.tsx"></code>

### 边框 - 无边框

`border="none"`

<code src="./demos/border-none.tsx"></code>

### 斑马纹

设置 `zebra` 属性即可

> 设置此属性后，icecream 会把 `border` 的任意值都视为 `none` 处理

<code src="./demos/zebra.tsx"></code>

### 小尺寸的

`size="small"`

<code src="./demos/table-small"></code>

### 固定表头

设置 prop `fixHead`，并给 table 一个固定高度即可

<code src="./demos/fixed-head.tsx"></code>

### 固定列

需要设置 prop `fixColumn` 和 `Column` 的 props `fixed`，当 table 的宽度小于设置的宽度时，可以左右滑动，如果 table 的宽度大于设置的宽度，则平铺展示

<code src="./demos/fixed-column.tsx"></code>

### 固定表头和固定列同时存在
<code src="./demos/fixed-head-and-column.tsx"></code>

### 固定表头 + 非固定高度

<code src="./demos/fixed-head-max-height.tsx"></code>

### 全功能展示(WIP)

<code src="./demos/all-functions.tsx"></code>

<API src="./Table.tsx" exports='["default", "TableColumn"]'></API>

<API src="./apis/selection.tsx" exports='["TableSelectionOptions"]'></API>

<API src="./apis/pagination.tsx" exports='["TablePaginationOptions"]'></API>

<API src="./apis/sort.tsx" exports='["TableColumnSortOptions"]'></API>

<API src="./apis/filter.tsx" exports='["TableColumnFilterOptions"]'></API>