# DataTable

表格

## Usage

### Basic

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

### 使用 columns 配置

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

### 自定义行类名

<code src="./demos/row-classname.tsx"></code>

### 空数据

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

### 自定义空数据

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

### 行选择

TODO: record ID

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

空 table 时的表现

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

### 行选择 - 单选

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

### 行选择 - 隐藏

<code src="./demos/selection-hidden.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>

### 动态的 `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>

### 固定表头

设置 prop `fixHead`，并限制 table 的高度即可

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

### 固定列

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

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

### 同时固定表头和列

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

### 全功能

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

<API src="./index.tsx"></API>