@king-design/intact 3.0.0-beta.0 → 3.0.0-beta.2

package/components/table/demos/title.md

@@ -6,7 +6,7 @@ order: 2
 给表格定义复杂的表头内容，只需要通过`TableColumn` `title`扩展点传入自定义内容即可
 
 ```vdt
-import {Table, TableColumn, Tooltip} from 'kpc';
+import {Table, TableColumn, Tooltip, Icon} from 'kpc';
 
 <Table data={this.get('data')}>
     <TableColumn key="a"
@@ -14,9 +14,9 @@ import {Table, TableColumn, Tooltip} from 'kpc';
         sortable
     >
         <b:title>
-            <span title="自定义表头内容" class="middle title">自定义表头内容</span>
+            <span title="自定义表头内容" class="title">自定义表头内容</span>
             <Tooltip content="tooltip content">
-                <i class="ion-ios-help-outline middle"></i>
+                <Icon class="k-icon-question" />
             </Tooltip>
         </b:title>
     </TableColumn>
@@ -26,8 +26,6 @@ import {Table, TableColumn, Tooltip} from 'kpc';
 
 ```styl
 .k-table
-    .middle
-        vertical-align middle
     .title
         margin-right 8px
 ```

package/components/table/index.md

@@ -43,6 +43,8 @@ sidebar: doc
 | widthStoreKey | 如果要保存表格拖动后的列宽信息，可以通过该属性设置保存到`localStorage`中的`key` | `string` | `undefined` |
 | draggable | 表格行是否可拖动 | `boolean` | `false` |
 | animation | 是否开启动效，默认开启。可以通过`true` `false`全部设置，或者通过数组单独设置行和列的动效 | `boolean` &#124 `[boolean, boolean]` | `true` |
+| hideHeader | 是否隐藏表头 | `boolean` | `false` |
+| pagination | 是否支持分页 | `boolean` | `PaginationProps` | `false` |
 
 ```ts
 import {Props} from 'intact';
@@ -74,6 +76,22 @@ type Position = {
 type Collision = 'left' | 'top' | 'none'
 
 export type Container = string | ((parentDom: Element, anchor: Node | null) => Element)
+
+export interface PaginationProps {
+    size?: Sizes,
+    counts?: number | string,
+    total?: number,
+    value?: number,
+    limit?: number,
+    limits?: number[],
+    noBorder?: boolean,
+    simple?: boolean,
+    showTotal?: boolean,
+    showGoto?: boolean,
+    showLimits?: boolean,
+    disableBtn?: (page: number, limit: number) => boolean,
+    disablePage?: (page: number, limit: number) => boolean,
+}
 ```
 
 ## TableColumn
@@ -145,3 +163,7 @@ export type TableColumnGroupItem = {
 | clickRow | 点击某行触发 | `(data: T, index: number, key: TableRowKey) => void` |
 | dragstart | 行拖动开始 | `(data: {key: TableRowKey, from: number}) => void` |
 | dragend | 行拖动结束 | `(data: {key: TableRowKey, from: number, to: number}) => void` |
+| checkRow | 手动选中某行触发 | `(data: T, index: number, key: TableRowKey) => void` |
+| uncheckRow | 手动取消选中某行触发 | `(data: T, index: number, key: TableRowKey) => void` |
+| checkAll | 手动全选触发 | `() => void` |
+| uncheckAll | 手动取消全选触发 | `() => void` |

package/components/table/index.spec.ts

@@ -20,6 +20,7 @@ import MergeCellDemo from '~/components/table/demos/mergeCell';
 import {Dropdown, DropdownMenu, DropdownItem} from '../dropdown';
 import {Icon} from '../icon';
 import {useChecked, AllCheckedStatus} from './useChecked';
+import PaginationDemo from '~/components/table/demos/pagination';
 
 describe('Table', () => {
     afterEach(() => {
@@ -36,34 +37,49 @@ describe('Table', () => {
         const spy = sinon.spy((v: number[]) => console.log(v));
         table.on('$change:checkedKeys', spy);
 
+        const spyCheckRow = sinon.spy((data: any, index: number, key: string) => console.log('checkRow', data, index, key));
+        table.on('checkRow', spyCheckRow);
+        const spyUncheckRow = sinon.spy((data: any, index: number, key: string) => console.log('uncheckRow', data, index, key));
+        table.on('uncheckRow', spyUncheckRow);
+        const spyCheckAll = sinon.spy(() => console.log('checkAll'));
+        table.on('checkAll', spyCheckAll);
+        const spyUncheckAll = sinon.spy(() => console.log('uncheckAll'));
+        table.on('uncheckAll', spyUncheckAll);
+
         // click row
         const [tr1, tr2] = element.querySelectorAll<HTMLElement>('tbody tr');
         tr1.click();
         await wait();
         expect(table.get('checkedKeys')).to.eql([0]);
+        expect(spyCheckRow.callCount).to.eql(1);
         tr2.click();
         await wait();
         expect(table.get('checkedKeys')).to.eql([0, 1]);
         expect(checked.getAllCheckedStatus()).eql(AllCheckedStatus.All);
+        expect(spyCheckRow.callCount).to.eql(2);
+        expect(spyCheckAll.callCount).to.eq(0);
 
         tr1.click();
         await wait();
         expect(table.get('checkedKeys')).to.eql([1]);
         expect(checked.getAllCheckedStatus()).eql(AllCheckedStatus.Indeterminate);
+        expect(spyUncheckRow.callCount).to.eql(1);
 
         const all = element.querySelector('.k-checkbox') as HTMLElement;
         all.click();
         await wait();
         expect(checked.getAllCheckedStatus()).eql(AllCheckedStatus.All);
+        expect(spyCheckAll.callCount).to.eql(1);
         all.click();
         await wait();
         expect(checked.getAllCheckedStatus()).eql(AllCheckedStatus.None);
         expect(table.get('checkedKeys')).to.eql([]);
+        expect(spyUncheckAll.callCount).to.eql(1);
 
         expect(spy.callCount).to.eql(5);
         // clear data of table should only trigger $change:checked event once, #407
         all.click();
-        table.set('data', []);
+        instance.set<{data: any[]}>('data', []);
         await wait();
         expect(spy.callCount).to.eql(7);
     });
@@ -214,12 +230,36 @@ describe('Table', () => {
         const [item1, item2] = dropdown2.querySelectorAll<HTMLElement>('.k-checkbox');
         item1.click();
         await wait();
-        expect(instance.get('multipleGroup')).to.eql({status: ['active']});
+        expect(instance.get('multipleGroup')).to.eql({status: []});
         expect(table2.innerHTML).to.matchSnapshot();
         item2.click();
         await wait();
+        expect(instance.get('multipleGroup')).to.eql({status: []});
+
+        // click confirm
+        const [reset, confirm] = dropdown2.querySelectorAll<HTMLElement>('.k-table-group-footer .k-btn');
+        confirm.click();
+        await wait();
         expect(instance.get('multipleGroup')).to.eql({status: ['active', 'stopped']});
         expect(table2.innerHTML).to.matchSnapshot();
+
+        // click reset
+        dispatchEvent(icon2, 'click');
+        await wait();
+        expect(dropdown2.innerHTML).to.matchSnapshot();
+        reset.click();
+        await wait();
+        expect(dropdown2.innerHTML).to.matchSnapshot();
+        confirm.click();
+        await wait();
+        expect(instance.get('multipleGroup')).to.eql({status: []});
+
+        // update group
+        instance.set('statusGroup', [{label: 'label', value: 'value'}]);
+        dispatchEvent(icon, 'click');
+        await wait(500);
+        const newDropdown= getElement('.k-table-group-dropdown')!;
+        expect(newDropdown.innerHTML).to.matchSnapshot();
     });
 
     it('fix columns', async () => {
@@ -559,4 +599,53 @@ describe('Table', () => {
         await wait();
         expect(update.callCount).to.eql(1);
     });
+
+    it('pagination', async () => {
+        const [instance, element] = mount(PaginationDemo);
+        const table = instance.refs.table as Table;
+        const pagination = table.pagination.paginationRef;
+        const spy = sinon.spy();
+
+        table.on('changePage', spy);
+
+        // check all
+        table.checkAll(); 
+        expect(table.getCheckedData()).to.have.length(10);
+
+        // next page
+        table.set('pagination', { value: 2 });
+        (table as any).trigger('$receive:pagination');
+        await wait();
+        expect(table.getCheckedData()).to.have.length(0);
+
+        // check all again
+        table.checkAll(); 
+        expect(table.getCheckedData()).to.have.length(10);
+
+        // change limit
+        table.set('pagination', { value: 1, limit: 20 });
+        (table as any).trigger('$receive:pagination');
+        await wait();
+        expect(table.getCheckedData()).to.have.length(10);
+
+        // check all again
+        table.checkAll(); 
+        expect(table.getCheckedData()).to.have.length(20);
+
+        // change limit from pagination
+        pagination.value!.set('limit', 10);
+        await wait();
+        expect(table.getCheckedData()).to.have.length(10);
+        // FIXME: Pagination component should no trigger change event multiple times
+        // when we set value and limit at the same time
+        expect(spy.callCount).to.eql(4);
+        expect(spy.lastCall.lastArg).to.eql({value: 1, limit: 10});
+
+        // change page from pagination
+        await wait();
+        pagination.value!.changePage(2);
+        expect(table.getCheckedData()).to.have.length(0);
+        expect(spy.callCount).to.eql(5);
+        expect(spy.lastCall.lastArg).to.eql({value: 2, limit: 10});
+    });
 });

package/components/table/row.ts

@@ -25,7 +25,7 @@ export interface TableRowProps {
     index: number
     disabled: boolean
     allDisabled: boolean
-    onChangeChecked: (index: number, checked: boolean) => void
+    onChangeChecked: (index: number, checked: boolean, key: TableRowKey) => void
     grid: TableGrid
     selected: boolean
     // hidden: boolean
@@ -91,8 +91,8 @@ export class TableRow extends Component<TableRowProps> {
 
     @bind
     onChangeChecked(v: boolean) {
-        const {index, onChangeChecked} = this.get();
-        onChangeChecked(index, v);
+        const {index, key, onChangeChecked} = this.get();
+        onChangeChecked(index, v, key);
     }
 
     @bind

package/components/table/styles.ts

@@ -17,6 +17,7 @@ const defaults = {
     // head
     thead: {
         get bgColor() { return theme.color.bg },
+        get color() { return theme.color.lightBlack },
         padding: `0 5px 0 12px`,
         fontSize: `12px`,
         fontWeight: `bold`,
@@ -37,10 +38,9 @@ const defaults = {
 
     // group
     group: {
-        width: `14px`,
-        gap: `10px`,
-        color: `#a6a6a6`,
+        gap: `8px`,
         menuMaxHeight: '200px',
+        menuMinWidth: '200px',
         get activeColor() { return theme.color.primary },
         headerPadding: `8px`,
         get headerBorder() { return `1px solid ${theme.color.bg}` },
@@ -49,9 +49,9 @@ const defaults = {
     // sort
     sort: {
         iconHeight: `7px`,
-        gap: `10px`,
-        color: `#d0d5d9`,
-        disabledColor: `#ddd`,
+        gap: `8px`,
+        // color: `#d0d5d9`,
+        get enabledColor() { return theme.color.primary },
     },
 
     expandBgColor: '#fdfcff',
@@ -133,10 +133,11 @@ export function makeStyles() {
             display: inline-flex;
             align-items: center;
             max-width: 100%;
-            color: ${theme.color.lightBlack};
+            color: ${table.thead.color};
         }
         .k-table-title-text {
             flex: 1;
+            display: inline-flex;
         }
 
         // tbody
@@ -241,23 +242,7 @@ export function makeStyles() {
 
         // group
         .k-table-group {
-            width: ${table.group.width} !important;
-            height: ${table.group.width} !important;
             margin-left: ${table.group.gap};
-            position: relative;
-            color: ${table.group.color};
-            &:hover {
-                color: ${theme.color.primary};
-            }
-            .k-icon {
-                // position: absolute;
-                // top: -1px;
-                // left: 2px;
-                transition: transform ${table.transition};
-            }
-            &.k-dropdown-open .k-icon {
-                transform: rotate(180deg);
-            }
         } 
 
         // force checkbox / radio vertical align middle
@@ -278,12 +263,11 @@ export function makeStyles() {
                 display: block;
                 height: ${table.sort.iconHeight};
                 line-height: ${table.sort.iconHeight};
-                margin-left: ${table.sort.gap};
-                color: ${table.sort.color};
+                margin: 0 0 1px ${table.sort.gap};
             }
-            &.k-asc .k-icon.k-desc,
-            &.k-desc .k-icon.k-asc {
-                color: ${table.sort.disabledColor};
+            &.k-desc .k-icon.k-desc,
+            &.k-asc .k-icon.k-asc {
+                color: ${table.sort.enabledColor};
             }
         }
 
@@ -368,12 +352,18 @@ export function makeStyles() {
                 }
             `;
         })}
+
+        // pagination
+        > .k-pagination {
+            margin: 16px 0;
+        }
     `;
 }
 
 export function makeGroupMenuStyles() {
     return css`
         max-height: ${table.group.menuMaxHeight};
+        min-width: ${table.group.menuMinWidth} !important;
         overflow: auto;
         .k-dropdown-item.k-active {
             color: ${table.group.activeColor};
@@ -382,5 +372,13 @@ export function makeGroupMenuStyles() {
             padding: ${table.group.headerPadding};
             border-bottom: ${table.group.headerBorder};
         }
+        .k-table-group-footer {
+            text-align: right;
+            border-top: ${table.group.headerBorder};
+            padding: 8px;
+            .k-btn {
+                margin-left: 8px;
+            }
+        }
     `
 }

package/components/table/table.ts

@@ -20,6 +20,8 @@ import {useStickyScrollbar} from './useStickyScrollbar';
 import {useWidth} from './useWidth';
 import {useScroll} from './useScroll';
 import type {Events} from '../types';
+import type {PaginationProps, PaginationChangeData} from '../pagination';
+import { usePagination } from './usePagination';
 
 export interface TableProps<
     T = any,
@@ -60,12 +62,19 @@ export interface TableProps<
     widthStoreKey?: string
     draggable?: boolean
     animation?: boolean | [boolean, boolean]
+    hideHeader?: boolean
+    pagination?: boolean | PaginationProps
 }
 
 export interface TableEvents<T = any, K extends TableRowKey = number> {
     clickRow: [T, number, K]
     dragstart: [{key: K, from: number}]
     dragend: [{key: K, from: number, to: number}]
+    checkRow: [T, number, K]
+    uncheckRow: [T, number, K]
+    checkAll: []
+    uncheckAll: []
+    changePage: [PaginationChangeData]
 }
 
 export interface TableBlocks<T = unknown> {
@@ -118,6 +127,8 @@ const typeDefs: Required<TypeDefs<TableProps<unknown>>> = {
     widthStoreKey: String,
     draggable: Boolean,
     animation: [Boolean, Array],
+    hideHeader: Boolean,
+    pagination: [Boolean, Object],
 };
 
 const defaults = (): Partial<TableProps> => ({
@@ -135,6 +146,11 @@ const events: Events<TableEvents> = {
     clickRow: true,
     dragstart: true,
     dragend: true,
+    checkRow: true,
+    uncheckRow: true,
+    checkAll: true,
+    uncheckAll: true,
+    changePage: true,
 };
 
 export class Table<
@@ -149,7 +165,9 @@ export class Table<
     static defaults = defaults;
     static events = events;
 
-    private tree = useTree();
+    // use public for unit test to get paginationRef
+    public pagination = usePagination();
+    private tree = useTree(this.pagination.data);
     private columns = useColumns();
     private scroll = useScroll();
     private stickyHeader = useStickyHeader(this.scroll.callbacks);
@@ -169,20 +187,27 @@ export class Table<
         this.scroll,
         this.width.widthMap,
     );
-    private disableRow = useDisableRow(this.tree.loopData);
-    private merge = useMerge(this.columns.getCols);
+    private disableRow = useDisableRow(
+        this.tree.loopData,
+        this.pagination.data,
+    );
+    private merge = useMerge(
+        this.columns.getCols,
+        this.pagination.data,
+    );
     private checked = useChecked(
         this.disableRow.getEnableKeys,
         this.disableRow.getAllKeys,
         this.disableRow.isDisabledKey,
         this.merge.getGrid,
         this.tree.loopData,
+        this.pagination.data,
     );
     private sortable = useSortable();
     private expandable = useExpandable();
     private selected = useSelected();
     private resetRowStatus = useRestRowStatus(this.disableRow.getAllKeys);
-    private draggable = useDraggable();
+    private draggable = useDraggable(this.pagination.data);
     private stickyScrollbar = useStickyScrollbar(
         this.stickyHeader.elementRef,
         this.scroll,

package/components/table/table.vdt

@@ -1,6 +1,6 @@
 import {eachChildren} from '../utils';
 import {makeStyles} from './styles';
-import {isStringOrNumber, isNull} from 'intact-shared';
+import {isStringOrNumber, isNull, isObject, EMPTY_OBJ} from 'intact-shared';
 import {getClassAndStyleForFixed} from './useFixedColumns';
 import {Affix} from '../affix';
 import {TableRow} from './row';
@@ -16,6 +16,7 @@ import {Tooltip} from '../tooltip';
 import {AllCheckedStatus} from './useChecked';
 import {context as ResizableContext} from './useResizable';
 import {context as FixedColumnsContext} from './useFixedColumns';
+import {Pagination} from '../pagination';
 
 const {
     data, children, className, fixHeader,
@@ -23,7 +24,8 @@ const {
     rowClassName, group, sort, loading,
     merge, childrenKey, indent, tooltipPosition,
     tooltipContainer, showIndeterminate, resizable,
-    draggable, animation: _animation,
+    draggable, animation: _animation, hideHeader,
+    pagination,
 } = this.get();
 const animation = !Array.isArray(_animation) ? [_animation, _animation] : _animation;
 const {columns, cols, maxRows, maxCols} = this.columns.getData();
@@ -64,7 +66,7 @@ const hasFixedLeft = getHasFixedLeft();
 const {getAllCheckedStatus, toggleCheckedAll, getAllStatus, onChangeChecked} = this.checked;
 const allCheckedStatus = getAllCheckedStatus(); 
 const offsetMap = getOffsetMap();
-const thead = (
+const thead = hideHeader ? null : (
     <TableContext.Provider value={checkType}>
         <GroupContext.Provider value={{group, onChange: this.onChangeGroup}}>
             <SortableContext.Provider value={{sort, onChange: this.sortable.onChange}}>
@@ -213,6 +215,13 @@ const {
     onScroll: onScrollbarScroll,
     tableActualWidth,
 } = this.stickyScrollbar;
+const {
+    value: pageValue,
+    limit: pageLimit,
+    onChange: onPageChange,
+    paginationRef,
+} = this.pagination;
+
 <div class={classNameObj} ref={elementRef}>
     <div class="k-table-wrapper" style={style} ref={scrollRef}>
         <Affix v-if={!isNull(stickHeader.value)}
@@ -231,6 +240,15 @@ const {
             <template>{tbody}</template>
         </table>
     </div>
+    <Pagination v-if={pagination}
+        ref={paginationRef}
+        total={data ? data.length : 0}
+        size="small"
+        {...(isObject(pagination) ? pagination : EMPTY_OBJ)}
+        value={pageValue.value}
+        limit={pageLimit.value}
+        ev-change={onPageChange}
+    />
     <Transition name="k-fade">
         <Spin v-if={loading} overlay size="small" class="k-table-spin" />
     </Transition>

package/components/table/useChecked.ts

@@ -1,5 +1,5 @@
 import {createRef, useInstance, onMounted, onBeforeUnmount} from 'intact';
-import {useState} from '../../hooks/useState';
+import {useState, State, watchState} from '../../hooks/useState';
 import type {Table, TableRowKey, TableCheckType} from './';
 import {toggleArray} from '../utils';
 import {useReceive} from '../../hooks/useReceive';
@@ -25,6 +25,7 @@ export function useChecked(
     isDisabledKey: (key: TableRowKey) => boolean,
     getGrid: () => TableGrid,
     loopData: ReturnType<typeof useTree>['loopData'],
+    data: State<any[] | undefined>,
 ) {
     const instance = useInstance() as Table<any, TableRowKey, TableCheckType>;
     let allStatus: RowStatus[] = [];
@@ -36,8 +37,13 @@ export function useChecked(
     function toggleChecked(key: TableRowKey, rowIndex: number) {
         if (instance.get('checkType') === 'checkbox') {
             instance.set('checkedKeys', toggleArray(instance.get('checkedKeys'), key));
+
+            // trigger check event for checkbox,
+            // radio check event trigger in onChangeChecked function
+            triggerEvent(isChecked(key), key, rowIndex);
         } else {
             if (isChecked(key)) return;
+
             const grid = getGrid();
             const gridRow = grid[rowIndex];
             if (gridRow) {
@@ -46,7 +52,7 @@ export function useChecked(
                     rowIndex--;
                 }
             }
-            onChangeChecked(rowIndex, true);
+            onChangeChecked(rowIndex, true, key);
         }
     }
 
@@ -66,6 +72,7 @@ export function useChecked(
 
     function toggleCheckedAll(v: boolean) {
         instance.set('checkedKeys', getCheckedAllOrUncheckedAllKeys(v));
+        instance.trigger(v ? 'checkAll' : 'uncheckAll');
     }
 
     /**
@@ -93,9 +100,9 @@ export function useChecked(
     function updateAllCheckedStatus() {
         allStatus = [];
 
-        const {data, rowKey, checkType, merge} = instance.get();
+        const {rowKey, checkType, merge} = instance.get();
 
-        if (!data || !data.length) return;
+        if (!data.value || !data.value.length) return;
 
         const allKeys = getAllKeys();
         allKeys.forEach((key) => {
@@ -152,7 +159,7 @@ export function useChecked(
         }
     }
 
-    function onChangeChecked(rowIndex: number, v: boolean) {
+    function onChangeChecked(rowIndex: number, v: boolean, key: TableRowKey) {
         // should check or uncheck all grouped rows
         const checkType = instance.get('checkType');
         const checkedKeys = (instance.get('checkedKeys') || []).slice();
@@ -190,16 +197,24 @@ export function useChecked(
         }
 
         instance.set('checkedKeys', checkedKeys);
+
+        // onChangeChecked will be called in clickRow and check in Row component
+        triggerEvent(v, key, rowIndex);
     }
 
     function getAllStatus() {
         return allStatus;
     }
 
+    function triggerEvent(isChecked: boolean, key: TableRowKey, rowIndex: number) {
+        instance.trigger(isChecked ? 'checkRow' : 'uncheckRow', data.value![rowIndex], rowIndex, key);
+    }
+
     instance.on('$receive:children', updateAllCheckedStatus);
     instance.on('$change:checkedKeys', updateAllCheckedStatus);
     // for draggable
-    instance.on('$change:data', updateAllCheckedStatus);
+    watchState(data, updateAllCheckedStatus);
+    // instance.on('$change:data', updateAllCheckedStatus);
 
     instance.on('clickRow', (data: any, index: number, key: TableRowKey) => {
         if (instance.get('rowCheckable') && instance.get('checkType') !== 'none') {

package/components/table/useDisableRow.ts

@@ -1,9 +1,11 @@
 import {useInstance} from 'intact';
 import type {Table, TableRowKey, TableCheckType} from './table';
 import type {useTree} from './useTree';
+import { State, watchState } from '../../hooks/useState';
 
 export function useDisableRow(
     loopData: ReturnType<typeof useTree>['loopData'],
+    data: State<any[] | undefined>,
 ) {
     const instance = useInstance() as Table<any, TableRowKey>;
     let enabledKeys: TableRowKey[] = [];
@@ -47,8 +49,7 @@ export function useDisableRow(
     }
 
     instance.on('$receive:children', setDisabledKeys);
-    // for draggable
-    instance.on('$change:data', setDisabledKeys);
+    watchState(data, setDisabledKeys);
 
     return {isDisabled, getEnableKeys, isDisabledKey, getAllKeys};
 }

package/components/table/useDraggable.ts

@@ -1,9 +1,10 @@
 import {useInstance, nextTick} from 'intact';
 import type {Table, TableRowKey} from './table';
-import {useState} from '../../hooks/useState';
+import {useState, State} from '../../hooks/useState';
 import type {TableRow} from './row';
+import {swap} from '../utils';
 
-export function useDraggable() {
+export function useDraggable(data: State<unknown[] | undefined>) {
     const instance = useInstance() as Table<any, TableRowKey>;
     const draggingKey = useState<TableRowKey | null>(null);
 
@@ -17,7 +18,7 @@ export function useDraggable() {
         const key = tableRow.get('key');
         draggingKey.set(key);
 
-        originData = instance.get('data')!;
+        originData = data.value!;
 
         instance.trigger('dragstart', {
             key,
@@ -29,24 +30,27 @@ export function useDraggable() {
         e.preventDefault();
         e.stopPropagation();
 
+        if (draggingKey.value === null) return;
+
         const newIndex = tableRow.get('index');
         if (newIndex === draggingIndex) return;
 
         // swap data
-        const data = instance.get('data')!.slice();
-        const item = data.splice(draggingIndex, 1)[0];
-        data.splice(newIndex, 0, item);
+        const newData = swap(data.value!, draggingIndex, newIndex);
 
         draggingIndex = newIndex;
 
-        instance.set('data', data);
+        data.set(newData);
     }
     
     function onRowDragEnd(e: MouseEvent, tableRow: TableRow) {
         e.preventDefault();
-        instance.set('data', originData);
+        // revert to origin data, then set to new data to trigger animation
+        const newData = data.value;
+        data.set(originData);
 
         nextTick(() => {
+            data.set(newData);
             draggingKey.set(null);
             instance.trigger('dragend', {
                 key: tableRow.get('key'),