@king-design/intact 2.0.0-beta.1 → 2.0.0

package/components/table/demos/animation.md

@@ -0,0 +1,92 @@
+---
+title: 动效
+order: 20
+---
+
+一个简单的`Table`，点击按钮，即可查看新增表格的动效。
+
+```vdt
+import {Table, TableColumn, Button} from 'kpc';
+
+<div>
+    <Button type="primary" ev-click={this.addRow}>增加一行</Button>
+    <Button type="primary" ev-click={this.removeRow}>删除一行</Button>
+    <Button type="primary" ev-click={this.toggleColumn}>
+        <template v-if={this.get('isShow')}>删除</template>
+        <template v-else>增加</template>
+        一列
+    </Button>
+    <Table data={this.get('data')} resizable rowKey={row => row.a}>
+        <TableColumn key="a" title="Title 1" />
+        <TableColumn v-if={this.get('isShow')} key="b" title="Title 2"/>
+        <TableColumn key="c" title="Title 3" />
+    </Table>
+</div>
+```
+
+```styl
+.k-btn
+    margin-right 20px
+.k-table, .k-btn
+    margin-bottom 20px
+```
+
+```ts
+import {bind} from 'kpc/components/utils';
+
+interface Props {
+    data: any[]
+    num: number
+    isShow: boolean
+}
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            data: [
+                {
+                    a: 'Cell 1-1', 
+                    b: 'Cell 1-2', 
+                    c: 'Cell 1-3'
+                },
+                {
+                    a: 'Cell 2-1', 
+                    b: 'Cell 2-2', 
+                    c: 'Cell 2-3'
+                }
+            ],
+            num: 3,
+            isShow: false,
+        }
+    }
+            
+    @bind
+    addRow() {
+        const num = this.get('num');
+        const data = this.get('data').slice();
+        data.push({
+            a: `Cell ${num}-1`, 
+            b: `Cell ${num}-2`, 
+            c: `Cell ${num}-3`
+        });
+        this.set({
+            data,
+            num: num + 1
+        });
+    }
+
+    @bind
+    removeRow() {
+        const data = this.get('data').slice();
+        data.shift();
+        this.set({data});
+    }
+
+    @bind
+    toggleColumn() {
+        this.set('isShow', !this.get('isShow'));
+    }
+}
+```

package/components/table/demos/basic.md

@@ -3,7 +3,7 @@ title: 基本用法
 order: 0
 ---
 
-上面是一个简单的`Table`，通过`data`属性设置表格展示的数据，通过`scheme`属性或者`TableColumn`
+一个简单的`Table`，通过`data`属性设置表格展示的数据，通过`TableColumn`
 组件定义表格结构，详见”定义表格结构“说明
 
 ```vdt

package/components/table/demos/checkedKeys.md

@@ -3,9 +3,8 @@ title: 行选中
 order: 4
 ---
 
-通过`checkedKeys`来控制哪些列被选中，默认他们的取值
-为行的索引或索引数组。但我们也可以通过`rowKey`函数为每一行指定唯一的`key`，此时他们的取值为`key`值
-或`key`值的数组
+通过`checkedKeys`来控制哪些列被选中，默认他们的取值为行`key`组成的数组。通过`rowKey`函数为每一行
+指定唯一的`key`，否则`key`和行号`index`等价
 
 ```vdt
 import {Table, TableColumn} from 'kpc';

package/components/table/demos/disableRow.md

@@ -3,8 +3,8 @@ title: 禁用行可选
 order: 9
 ---
 
-`disableRow`：禁用某一行可选状态，类型：`Function`，默认：`function(data, index) { return false }`，该函数
-如果返回`true`，则表示禁用该行可选
+`disableRow`：禁用某一行可选状态，类型：`(data: T, index: number, key: TableRowKey) => boolean`，
+默认：`(data: T, index: number) => false`，该函数如果返回`true`，则表示禁用该行可选
 
 对于`disabled`的行，它的选中状态不会随全选/反全选而改变
 

package/components/table/demos/empty.md

@@ -3,7 +3,7 @@ title: 自定义无内容时的展示信息
 order: 16
 ---
 
-当`data`为空数组`[]`时, 通过`empty`扩展点，来定义无数据是展示的内容
+当`data`为空时, 通过`empty`扩展点，来定义无数据是展示的内容
 
 ```vdt
 import {Table, TableColumn} from 'kpc';

package/components/table/demos/export.md

@@ -3,19 +3,20 @@ title: 导出表格
 order: 22
 ---
 
-调用`Table`的`exportTable([data, [filename]])`方法，可以导出当前表格内容成`csv`格式。导出的文本
-默认为当前单元格下的`textContent`内容，当需要自定义导出文本时，我们可以给`TableColumn`指定`exportCell`
-函数来返回要导出的单元格内容。当需要自定义导出标题时，我们可以给当前列`TableColumn`组件添加`exportTitle`
-属性来指定。另外如果给当前列设置`ignore`属性，则会忽略该列内容，例如：本例中我们忽略”操作“栏内容
+调用`Table`的`exportTable: (data: T[] = this.get('data'), filename = 'table') => Promise<string>`方法，
+可以导出当前表格内容成`csv`格式。导出的文本默认为当前单元格下的`textContent`内容，当需要自定义导出文本时，
+我们可以给`TableColumn`指定`exportCell`函数来返回要导出的单元格内容。当需要自定义导出标题时，我们可以给
+当前列`TableColumn`组件添加`exportTitle`属性来指定。另外如果给当前列设置`ignore`属性，则会忽略该列内容，
+例如：本例中我们忽略”操作“栏内容
 
-1. `data` 要导出的数据，默认为当前表格的数据
+1. `data` 要导出的数据，默认为当前表格的数据，我们可以利用传入自定义的`data`数据来全量导出，而非仅仅当前
+    表格的内容
 2. `filename` 下载的文件名，默认为`table`
 
 > 对于合并了表头和单元格的表格，不支持导出（csv格式文件不能合并单元格）
 
 ```vdt
-import {Table, TableColumn} from 'kpc';
-import {Button} from 'kpc';
+import {Table, TableColumn, Button} from 'kpc';
 
 <div>
     <Button type="primary" ev-click={this.exportTable}>导出表格</Button>

package/components/table/demos/fixColumn.md

@@ -3,10 +3,10 @@ title: 列固定
 order: 14
 ---
 
-给`TableColumn`或者`scheme`添加`fixed`属性，可以将列固定，其中`left`固定在左侧，`right`固定在右侧；
+给`TableColumn`添加`fixed`属性，可以将列固定，其中`left`固定在左侧，`right`固定在右侧；
 固定的列依然支持`resizable`表头拖动，`stickHeader`表头吸顶，以及`fixHeader`表头固定
 
-> 固定列通过`position: sticky`来实现，所以对于不是首列或者尾列的列，需要指定它们之前或之后的列的固定宽度`width`来
+> 固定列通过`position: sticky`来实现，所以对于非首/尾列，需要指定它们之前或之后的列的固定宽度`width`来
 > 帮助该列来确定固定的位置 
 
 ```vdt

package/components/table/demos/fixHeader.md

@@ -3,10 +3,10 @@ title: 表头固定
 order: 10
 ---
 
-`fixHeader`：设置表头固定，类型`Boolean` | `Number`，默认：`false`
+`fixHeader`：设置表头固定，类型`boolean` | `number`，默认：`false`
 
-1. 如果取值为`Boolean`，`false`表示不固定表头，`true`表示固定高度，`tbody`的高度自适应，但需要自己定义表格高度
-2. 如果取值为`Number`，则表示，当表格超出该高度时即展示滚动条，并固定表头
+1. 如果取值为`boolean`，`false`表示不固定表头，`true`表示固定高度，`tbody`的高度自适应，但需要自己定义表格高度
+2. 如果取值为`number`，则表示，当表格超出该高度时即展示滚动条，并固定表头
 
 ```vdt
 import {Table, TableColumn} from 'kpc';

package/components/table/demos/group.md

@@ -5,13 +5,13 @@ order: 18
 
 分组需要两个`group`来指定：
 
-1. 第一个是`Table`上的`group`属性，该属性指定当前分组的方式，形式为：`{["分组的列的key"]: ["当前列选择的分组的值"]}`
-2. 第二个是`TableColumn`或者`scheme`上的`group`属性，该属性指定当前列有哪些可选的分组方式，
+1. 第一个是`Table`上的`group`属性，该属性指定当前分组的方式，形式为：`{key: ["分组的列的key"], value: ["当前列选择的分组的值"]}`
+2. 第二个是`TableColumn`的`group`属性，该属性指定当前列有哪些可选的分组方式，
 如果该列支持多选，还可以添加`multiple`属性，默认为单选。形式为：`[{label: "分组展示文案", value: "选择后的值"}]`
 
 当分组方式改变时，可以监听默认事件`$change:group`来执行自定义分组逻辑
 
-> `group`改变时，你应该同步更新当前属性值(`sort`也一样)
+> `group`改变时，你应该双向同步更新当前属性值(`sort`也一样)
 
 ```vdt
 import {Table, TableColumn} from 'kpc';

package/components/table/demos/mergeCell.md

@@ -3,7 +3,7 @@ title: 合并单元格
 order: 15
 ---
 
-通过`merge`属性指定一个函数来定义合并单元格的逻辑，函数返回的结果`{colspan, rowspan}`用来定义单元格占用的行列数。
+通过`merge`属性指定一个函数来定义合并单元格的逻辑，函数返回的结果`{colspan?: number, rowspan?: number}`用来定义单元格占用的行列数。
 组件传入函数的参数如下：
 
 1. `row` 当前行数据

package/components/table/demos/resizable.md

@@ -3,7 +3,7 @@ title: 表头是否可拖动
 order: 20
 ---
 
-`resizable`：表头是否可拖动，类型`Boolean`，`false`(默认)。`Table`支持持久化存储列宽信息，只需要通过
+`resizable`：表头是否可拖动，类型`boolean`，`false`(默认)。`Table`支持持久化存储列宽信息，只需要通过
 `widthStoreKey`指定保存到`localStorage`中的`key`就可以了，这样下次渲染`Table`时会使用上次的列宽信息
 进行渲染
 

package/components/table/demos/rowClassName.md

@@ -3,7 +3,7 @@ title: 行样式
 order: 7
 ---
 
-`rowClassName`：给行添加样式，类型`Function`，默认：`function(value, index) {  }`，该函数返回的
+`rowClassName`：给行添加样式，类型`(value: T, index: number, key: TableRowKey) => string | undefined`，该函数返回的
 字符串将被当做`className`添加到该行上
 
 你也可以直接添加`stripe`属性，使相邻行展示不同的背景色

package/components/table/demos/rowExpandable.md

@@ -3,13 +3,9 @@ title: 行展开
 order: 8
 ---
 
-通过`expand`block指定行展开后的模板内容。是否支持点击该行任何区域都展开内容，
+通过`expand`扩展点指定行展开后的模板内容。是否支持点击该行任何区域都展开内容，
 是由`rowExpandable`控制的，默认情况下它为`true`。你也可以将它设为`false`，来自定义展开逻辑。例如：
-点击某个`icon`后展开改行，而点击其它元素无效。自定义展开逻辑，需要调用`shrinkRow(key)`和`expandRow(key)`
-方法来实现收起和展开，或者修改`expandedKeys`属性值，来指定哪些`key`对应的行展开。
-
-* `rowExpandable`：是否点击整行即展开，类型`Boolean`，默认`true`
-* `expandedKeys`：指定哪些`key`对应行展开，类型`Array`，默认`[]`
+点击某个`icon`后展开改行，而点击其它元素无效。自定义展开逻辑，修改`expandedKeys`属性值，来指定哪些`key`对应的行展开。
 
 ```vdt
 import {Table, TableColumn} from 'kpc';

package/components/table/demos/sort.md

@@ -7,7 +7,7 @@ order: 17
 
 `{ key: '当前排序的列的key', type: '当前排序方式（desc: 降序，asc: 升序）' }`
 
-当该列可排序时，只需要在定义表格结构的`scheme`或者`TableColumn`中加入`sortable`并且取值为`true`即可
+当该列可排序时，只需要在`TableColumn`中加入`sortable`即可
 
 当排序方式改变时，可以监听默认事件`$change:sort`来执行自定义排序逻辑
 
@@ -17,6 +17,7 @@ import {Table, TableColumn} from 'kpc';
 <Table data={this.get('data')} 
     sort={this.get('sort')}
     ev-$change:sort={this._onSort}
+    rowKey={item => item.name}
 >
     <TableColumn title='姓名' key='name' sortable />
     <TableColumn title='年龄' key='age' sortable />

package/components/table/demos/stickHeader.md

@@ -3,10 +3,10 @@ title: 表头吸顶
 order: 11
 ---
 
-`stickHeader`：设置表头是否当表格滚动超出规定高度时，将表头固定在页面顶部，类型`Boolean` | `Number`，默认：`false`
+`stickHeader`：设置页面滚动使表头距视窗超出小于等于当前取值（默认为：0）时，将表头固定在页面顶部，类型`boolean` | `number`，默认：`false`
 
-1. 如果取值为`Boolean`，`false`表示不吸顶，`true`表示吸顶，此时等价于`0`，表示固定的位置的`top`为`0`
-2. 如果取值为`Number`，用来指定固定的位置距离视窗顶部的距离，例如本例中，固定在`top = 87px`的地方
+1. 如果取值为`boolean`，`false`表示不吸顶，`true`表示吸顶，此时等价于`0`，表示固定的位置的`top`为`0`
+2. 如果取值为`number`，用来指定固定的位置距离视窗顶部的距离，例如本例中，固定在`top = 64px`的地方
 
 > 表头吸顶后会`fixed`，此时`document.body`不要出现横向滚动条，否则横向滚动后，表格体位置变了而表头位置不会变
 

package/components/table/demos/stickScrollbar.md

@@ -3,10 +3,10 @@ title: 横向滚动条吸底
 order: 13
 ---
 
-`stickScrollbar`：当出现横向滚动条时，设置是否当表格底部没有滚动到视窗中时，将横向滚动条固定在页面底部，类型`Boolean` | `Number`，默认：`false`
+`stickScrollbar`：当出现横向滚动条时，设置是否当表格底部没有滚动到视窗中时，将横向滚动条固定在页面底部，类型`boolean` | `number`，默认：`false`
 
-1. 如果取值为`Boolean`，`false`表示不吸底，`true`表示吸底，此时等价于`0`，表示固定的位置的`bottom`为`0`
-2. 如果取值为`Number`，用来指定固定位置距离视窗底部的距离
+1. 如果取值为`boolean`，`false`表示不吸底，`true`表示吸底，此时等价于`0`，表示固定的位置的`bottom`为`0`
+2. 如果取值为`number`，用来指定固定位置距离视窗底部的距离
 
 > 滚动条吸底后会`fixed`，此时`document.body`不要出现横向滚动条，否则横向滚动后，表格位置而滚动条位置不会变
 

package/components/table/demos/tooltip.md

@@ -4,8 +4,7 @@ order: 23
 ---
 
 通过`tooltip`扩展点，可以定义表格行的提示信息，通过`tooltipPosition`属性可以定义提示信息的弹出位置，
-通过`tooltipContainer`指定提示层元素插入的位置。
-组件会将当前行的数据和索引传入该扩展点
+通过`tooltipContainer`指定提示层元素插入的位置。组件会将当前行的数据和索引传入该扩展点
 
 ```vdt
 import {Table, TableColumn} from 'kpc';

package/components/table/index.md

@@ -11,62 +11,96 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| data | 表格数据 | `Array` | `[]` |
-| scheme |  定义表格结构：表头，单元格内容 | `Object` | `{}` |
+| data | 表格数据 | `T[]` | `undefined` |
+| fixHeader | 表头固定，给定需要固定高度的具体数值，当超出改值时，展示滚动条 | `boolean` | `number` | `string` | `false` |
+| stickHeader | 表头吸顶，给定需要吸顶的高度，当表头在页面滚动滚动时，距离视窗顶部的距离等于该高度时，将表头固定在此高度处 | `boolean` | `number` | `string` | `false` |
+| stickScrollbar | 当出现横向滚动条时，设置是否当表格底部没有滚动到视窗中时，将横向滚动条固定在页面底部；取值为`number`类型时，用来指定距离视窗底部的距离 | `boolean` | `number` | `string` | `false` |
 | checkType | 当行可选择时，定义选择的类型: 单选 `"radio"` , 复选 `"checkbox"`, 不可选`"none"` | `"checkbox"` | `"radio"` | `"none"` | `"checkbox"` |
-| fixHeader | 表头固定，给定需要固定高度的具体数值，当超出改值时，展示滚动条 | `Boolean` | `Number` | `String` | `false` |
-| stickHeader | 表头吸顶，给定需要吸顶的高度，表格滚动超出该高度时，将表头固定在顶部 | `Boolean` | `Number` | `String` | `false` |
-| stickScrollbar | 当出现横向滚动条时，设置是否当表格底部没有滚动到视窗中时，将横向滚动条固定在页面底部；取值为`Number`类型时，用来指定距离视窗底部的距离 | `Boolean` | `Number` | `String` | `false` |
-| rowKey | 设置行的key | `Function` | function(value, index) {  return `index`; } |
-| checkedKeys | 通过`key`数组来指定哪些行被选中 | `Array` | `[]` |
-| resizable | 是否可以表头拖动 | `Boolean` | `false` |
-| rowCheckable | 当行可选时，是否点击该行任意区域都可选中 | `Boolean` | `true` |
-| rowClassName | 通过一个函数定义行的`className`，该函数会传入该行数据和索引当做参数，返回的字符串将被设为该行`className` | `Function` | `function(value, index) {  }` |
-| disableRow | 定义行禁用可选的逻辑，返回`true`，则改行被禁用选择 | `Function` | `function(data, index) { return false }` |
-| rowExpandable | 是否点击改行任意区域即展开 | `Boolean` | `true` |
-| expandedKeys | 通过`key`来指定哪些行展开 | `Array` | `[]` |
+| checkedKeys | 通过`key`数组来指定哪些行被选中 | `TableRowKey[]` | `[]` |
+| rowKey | 设置每行的key | `(value: T, index: number) => TableRowKey` | `(value: T, index: number) => index` |
+| rowCheckable | 当行可选时，是否点击该行任意区域都可选中 | `boolean` | `true` |
+| disableRow | 定义行禁用可选的逻辑，返回`true`，则改行被禁用选择 | `(value: T, index: number, key: TableRowKey) => boolean` | `undefined` |
 | type | 表格类型，默认左右无边框，`"border"`类型会添加边框, `"grid"`类型会展示栅格边框 | `"default"` | `"border"` | `"grid"` | `"default"` |
-| sort | 排序，详见示例说明 | `Object` | `{}` |
-| group | 分组，详见示例说明 | `Object` | `{}` |
-| minColWidth | 指定所有列拖动时的最小宽度 | `Number` | `40` |
-| loading | 是否展示加载状态 | `Boolean` | `false` |
-| container | 指定`group`弹出菜单追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Function` | `String` | `undefined` |
-| stripe | 相邻行是否展示不同的背景色 | `Boolean` | `false` |
-| rowSelectable | 是否点击行时高亮改行，取值为`multiple`时，可以同时高亮多行 | `Boolean` | `"single"` | `"multiple"` | `false` |
-| selectedKeys | 当`rowSelectable`取值为非`false`时，指定哪些行高亮 | `Array` | `[]` |
-| defaultWidth | 指定表格初始化宽度，可以指定百分比，像素值必须带上单位`px` | `String` | `undefined` |
-| defaultWidthMap | 指定表格初始化每列列宽，该值为`Object`，`key`对应为每列的`key`，`value`为每列列宽像素值，不带单位`px`，不能指定百分比。它的优先级高于`TableColumn`中的`width`定义 | `Object` | `{}` |
-| widthStoreKey | 如果要保存表格拖动后的列宽信息，可以通过该属性设置保存到`localStorage`中的`key` | `String` | `undefined` |
-| merge | 指定表格单元格合并逻辑 | `Function` | `undefined` |
-| tooltipPosition | 行提示的位置 | `"left"` | `"bottom"` | `"right"` | `"top"` | `Object` | `"top"` |
-| tooltipContainer | 指定弹出提示内容追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Function` | `String` | `undefined` |
-| childrenKey | 树形表格指定子元素键名 | `String` | `"children"` |
-| indent | 树形表格指定子元素缩进宽度 | `Number` | `32` |
-| spreadKeys | 树形表格指定展开的行 | `Array` | `[]` |
-| draggable | 表格行是否可拖动 | `Boolean` | `false` |
-| keepStatus | 是否在行销毁的时候，保持该行在`checkedKeys` | `selectedKeys` | `spreadKeys` | `expandedKeys`中的`key`值，默认会同步删除（仅在销毁行的时候有效，如果整个`Table`被销毁，则不会执行该逻辑） | `Boolean` | `false` |
+| stripe | 相邻行是否展示不同的背景色 | `boolean` | `false` |
+| rowClassName | 通过一个函数定义行的`className`，该函数会传入该行数据，索引和`key`当做参数，返回的字符串将被设为该行的`className` | <code>(value: T, index: number, key: TableRowKey) => string &#124; undefined</code> | `undefined` |
+| group | 分组，详见示例说明 | `TableGroupValue` | `undefined` |
+| sort | 排序，详见示例说明 | `TableSortValue` | `undefined` |
+| loading | 是否展示加载状态 | `boolean` | `false` |
+| merge | 指定表格单元格合并逻辑 | `TableMerge` | `undefined` |
+| expandedKeys | 通过`key`来指定哪些行展开 | `TableRowKey[]` | `undefined` |
+| rowExpandable | 是否点击改行任意区域即展开 | `boolean` | `true` |
+| selectedKeys | 当`rowSelectable`取值为非`false`时，指定哪些行高亮 | `TableRowKey[]` | `undefined` |
+| rowSelectable | 是否点击行时高亮改行，取值为`multiple`时，可以同时高亮多行 | `boolean` &#124; `"single"` &#124; `"multiple"` | `false` |
+| childrenKey | 树形表格指定子元素键名 | `string` | `"children"` |
+| indent | 树形表格指定子元素缩进宽度 | `number` | `32` |
+| spreadKeys | 树形表格指定展开的行 | `TableRowKey[]` | `undefined` |
+| tooltipPosition | 行提示的位置 | `"left"` &#124; `"bottom"` &#124; `"right"` &#124; `"top"` &#124; `Position` | `"top"` |
+| tooltipContainer | 指定行提示弹层追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Container` | `undefined` |
+| keepStatus | 是否在行销毁的时候，保持该行在`checkedKeys` &#124; `selectedKeys` &#124; `spreadKeys` &#124; `expandedKeys`中的`key`值，默认会同步删除（仅在销毁行的时候有效，如果整个`Table`被销毁，则不会执行该逻辑） | `boolean` | `false` |
+| showIndeterminate | 表头的`Checkbox`是否支持展示半选中状态 | `boolean` | `false` |
+| resizable | 是否可以表头拖动 | `boolean` | `false` |
+| minColWidth | 指定所有列拖动时的最小宽度 | `number` | `40` |
+| widthStoreKey | 如果要保存表格拖动后的列宽信息，可以通过该属性设置保存到`localStorage`中的`key` | `string` | `undefined` |
+| draggable | 表格行是否可拖动 | `boolean` | `false` |
+
+```ts
+import {Props} from 'intact';
+
+export type TableRowKey = string | number;
+export type TableGroupValue<T extends string | number | symbol = string | number | symbol> = Record<T, any | any[]> 
+export type TableSortValue<T = string> = {
+    key?: T 
+    type?: 'desc' | 'asc'
+}
+export type TableMerge<T = any, CheckType = 'checkbox'> = (
+    row: T,
+    column: CheckType extends 'none' ? Props<TableColumnProps> : Props<TableColumnProps> | null,
+    rowIndex: number,
+    columnIndex: number
+) => TableMergeConfig | undefined
+
+export type TableMergeConfig = {
+    colspan?: number
+    rowspan?: number
+}
+
+type Position = {
+    my?: string | [string, string]
+    at?: string | [string, string]
+    collision?: Collision | [Collision, Collision] 
+}
+
+type Collision = 'left' | 'top' | 'none'
+
+export type Container = string | ((parentDom: Element, anchor: Node | null) => Element)
+```
 
 ## TableColumn
 
-除了通过`Table`的`scheme`属性指定表格的结构外，还以通过`TableColumn`来指定，它的属性值跟`scheme`
-数据结构一一对应
-
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| title | 标题 | `String` | `""` |
-| template | 指定当前列，单元格渲染模板函数 | `Function` | `(data, index) => {}`,
-| key | 指定当前列的`key`，__必须指定，并且为了保证顺序正确，不要以数字开头__ | `String` | `""` |
-| sortable | 是否可排序 | `Boolean` | `false` |
-| width | 列宽，可以指定百分比或像素(像素不需要加单位) | `String` | `undefined` |
-| group | 指定分组数组，每一项格式为`{value: '选中后的值', label: '展示的文案'}` | `Array<Object>` | `undefined` |
-| multiple | 分组是否支持多选 | `Boolean` | `false` |
-| minWidth | 指定当前列拖动时的最小宽度，优先级高于`Table`的`minColWidth` | `Number` | `40` |
+| key | 指定当前列的`key`，__必须指定__ | `string` | `undefined` |
+| title | 标题 | `string` &#124; `VNode` | `undefined` |
+| sortable | 是否可排序 | `boolean` | `false` |
+| width | 列宽，可以指定百分比或像素(像素不需要加单位) | `string` | `undefined` |
+| group | 指定分组数组，每一项格式为`{value: '选中后的值', label: '展示的文案'}` | `TableColumnGroupItem[]` | `undefined` |
+| multiple | 分组是否支持多选 | `boolean` | `false` |
+| ignore | 是否忽略当前列的导出 | `boolean` | `false` |
 | fixed | 是否将列固定，`"left"`固定在左侧；`"right"`固定在右侧 | `"left"` &#124; `"right"` | `undefined` |
-| className | 给当前列添加className | `String` &#124; `Object` | `undefined` |
-| ignore | 是否忽略当前列的导出 | `Boolean` | `false` |
 | align | 当前列对齐方式 | `"left"` &#124; `"center"` &#124; `"right"` | `undefined` |
-| exportTitle | 自定义导出的标题 | `String` | `undefined` |
+| exportTitle | 自定义导出的标题 | `string` | `undefined` |
 | exportCell | 自定义导出的单元格内容 | `(data: any, index: number) => string` | `undefined` |
+| minWidth | 指定当前列拖动时的最小宽度，优先级高于`Table`的`minColWidth` | `number` | `undefined` |
+| className | 给当前列添加className | `string` &#124; `Record<string, any>` | `undefined` |
+
+```ts
+import {VNode} from 'intact';
+
+export type TableColumnGroupItem = {
+    label: string | VNode
+    value: any
+}
+```
 
 # 扩展点
 
@@ -75,16 +109,16 @@ sidebar: doc
 | 名称 | 说明 | 参数 |
 | --- | --- | --- |
 | empty | 自定义无数据展示模板 | - |
-| expand | 指定行展开后要展示的模板内容 | `data, index` |
-| tooltip | 行提示内容 | `data, index` |
+| expand | 指定行展开后要展示的模板内容 | `([data: T, index: number]) => Children` |
+| tooltip | 行提示内容 | `([data: T, index: number]) => Children` |
 
 ## TableColumn
 
 | 名称 | 说明 | 参数 |
 | --- | --- | --- |
 | title | 自定义复杂表头内容 | - |
-| template | 自定义单元格内容 | `data, index` |
-| default | 与`template`扩展点等价，为了方便vue中使用的别名 | `data， index` |
+| template | 自定义单元格内容 | `([data: T, index: number]) => Children` |
+| default | 与`template`扩展点等价，为了方便vue中使用的别名 | `([data: T，index: number]) => Children` |
 
 
 # 方法
@@ -93,19 +127,13 @@ sidebar: doc
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| getCheckedData | 获取选中数据信息 | - | `Array` |
-| getSelectedData | 获取高亮行数据信息 | - | `Array` |
+| getCheckedData | 获取选中数据信息 | - | `T[]` |
+| getSelectedData | 获取高亮行数据信息 | - | `T[]` |
 | checkAll | 全部选中 | - | `undefined` |
 | uncheckAll | 全不选中 | - | `undefined` |
-| isCheckAll | 判断是否全选 | - | `Boolean` |
-| isChecked | 判断某行是否选中 | `key` | `Boolean` |
-| checkRow | 选中某行 | `key` | `undefined` |
-| uncheckRow | 取消选中某行 | `key` | `undefined` |
-| expandRow | 展开某行 | `key` | `undefined` |
-| shrinkRow | 收起某行 | `key` | `undefined` |
-| scrollToRowByIndex | 通过索引指定滚动的行 | `index` | `undefined` |
-| scrollToRowByKey | 通过key指定滚动的行 | `key` | `undefined` |
-| refreshHeader | 如果固定了表头，`Table`会在是否展示滚动条的时候自动设置表头的`padding`值，某些特殊情况下如果没有正确`padding`值，可以调用该方法强制更新 | - | `undefined` |
+| scrollToRowByIndex | 通过索引指定滚动的行 | `(index: number) => Promise<void>` | `undefined` |
+| scrollToRowByKey | 通过key指定滚动的行 | `(key: TableRowKey) => Promise<void>` | `undefined` |
+| exportTable | 导出表格 | `(data: T[] = this.get('data'), filename = 'table') => Promise<string>` | `Promise<string>`返回导出的内容 |
 
 # 事件
 
@@ -113,8 +141,6 @@ sidebar: doc
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| $change:checked | 选中的数据变化会触发的事件 | `instance, newValue, oldValue` |
-| changeWidth | 当列宽拖动发生变化后触发 | `widthMap, tableWidth` |
-| click:row | 点击某行触发 | `data, index, key, event` |
-| dragstart | 行拖动开始 | `{key, from}` |
-| dragend | 行拖动结束 | `{key, from, to}` |
+| clickRow | 点击某行触发 | `(data: T, index: number, key: TableRowKey) => void` |
+| dragstart | 行拖动开始 | `(data: {key: TableRowKey, from: number}) => void` |
+| dragend | 行拖动结束 | `(data: {key: TableRowKey, from: number, to: number}) => void` |

package/components/table/index.spec.ts

@@ -22,7 +22,10 @@ import {Icon} from '../icon';
 import {useChecked, AllCheckedStatus} from './useChecked';
 
 describe('Table', () => {
-    afterEach(() => unmount());
+    afterEach(() => {
+        unmount();
+        localStorage.removeItem('resizableTable');
+    });
 
     it('check & uncheck', async () => {
         const [instance, element] = mount(BasicDemo);

package/components/table/index.ts

@@ -1,2 +1,3 @@
 export * from './table';
 export * from './column';
+export type {TableMerge, TableMergeConfig} from './useMerge';

package/components/table/row.vdt

@@ -1,3 +1,4 @@
+import {TransitionGroup} from 'intact';
 import {getClassAndStyleForFixed} from './useFixedColumns';
 import {Checkbox} from '../checkbox';
 import {Radio} from '../radio';
@@ -88,9 +89,12 @@ cols.forEach((props, columnIndex) => {
     );
 });
 
+const rows = <TransitionGroup name="k-fade-expand" move={false}>{vNodes}</TransitionGroup>
+/* const rows = vNodes; */
+
 // for performance, no normalize
 <template>
-    {createElementVNode(2, 'tr', vNodes, 8 /* HasKeyedChildren */, cx(classNameObj), {
+    {createElementVNode(2, 'tr', rows, 2, cx(classNameObj), {
         'data-key': key,
         'ev-mouseenter': this.onMouseEnter,
         'ev-mouseleave': this.onMouseLeave,