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

package/components/table/index.spec.js

@@ -23,13 +23,14 @@ import { Table, TableColumn } from './';
 import DraggableTable from '~/components/table/demos/draggable';
 import MergeCellDemo from '~/components/table/demos/mergeCell';
 import { AllCheckedStatus } from './useChecked';
+import PaginationDemo from '~/components/table/demos/pagination';
 describe('Table', function () {
   afterEach(function () {
     unmount();
     localStorage.removeItem('resizableTable');
   });
   it('check & uncheck', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-    var _mount, instance, element, table, checked, spy, _element$querySelecto, tr1, tr2, all;
+    var _mount, instance, element, table, checked, spy, spyCheckRow, spyUncheckRow, spyCheckAll, spyUncheckAll, _element$querySelecto, tr1, tr2, all;
 
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
@@ -42,54 +43,76 @@ describe('Table', function () {
             spy = sinon.spy(function (v) {
               return console.log(v);
             });
-            table.on('$change:checkedKeys', spy); // click row
+            table.on('$change:checkedKeys', spy);
+            spyCheckRow = sinon.spy(function (data, index, key) {
+              return console.log('checkRow', data, index, key);
+            });
+            table.on('checkRow', spyCheckRow);
+            spyUncheckRow = sinon.spy(function (data, index, key) {
+              return console.log('uncheckRow', data, index, key);
+            });
+            table.on('uncheckRow', spyUncheckRow);
+            spyCheckAll = sinon.spy(function () {
+              return console.log('checkAll');
+            });
+            table.on('checkAll', spyCheckAll);
+            spyUncheckAll = sinon.spy(function () {
+              return console.log('uncheckAll');
+            });
+            table.on('uncheckAll', spyUncheckAll); // click row
 
             _element$querySelecto = element.querySelectorAll('tbody tr'), tr1 = _element$querySelecto[0], tr2 = _element$querySelecto[1];
             tr1.click();
-            _context.next = 9;
+            _context.next = 17;
             return wait();
 
-          case 9:
+          case 17:
             expect(table.get('checkedKeys')).to.eql([0]);
+            expect(spyCheckRow.callCount).to.eql(1);
             tr2.click();
-            _context.next = 13;
+            _context.next = 22;
             return wait();
 
-          case 13:
+          case 22:
             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();
-            _context.next = 18;
+            _context.next = 29;
             return wait();
 
-          case 18:
+          case 29:
             expect(table.get('checkedKeys')).to.eql([1]);
             expect(checked.getAllCheckedStatus()).eql(AllCheckedStatus.Indeterminate);
+            expect(spyUncheckRow.callCount).to.eql(1);
             all = element.querySelector('.k-checkbox');
             all.click();
-            _context.next = 24;
+            _context.next = 36;
             return wait();
 
-          case 24:
+          case 36:
             expect(checked.getAllCheckedStatus()).eql(AllCheckedStatus.All);
+            expect(spyCheckAll.callCount).to.eql(1);
             all.click();
-            _context.next = 28;
+            _context.next = 41;
             return wait();
 
-          case 28:
+          case 41:
             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', []);
-            _context.next = 35;
+            instance.set('data', []);
+            _context.next = 49;
             return wait();
 
-          case 35:
+          case 49:
             expect(spy.callCount).to.eql(7);
 
-          case 36:
+          case 50:
           case "end":
             return _context.stop();
         }
@@ -342,7 +365,7 @@ describe('Table', function () {
     }, _callee6);
   })));
   it('group', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
-    var _mount7, instance, element, _instance$refs4, __test1, __test2, _element$querySelecto8, table1, table2, icon, dropdown, item, icon2, dropdown2, _dropdown2$querySelec, item1, item2;
+    var _mount7, instance, element, _instance$refs4, __test1, __test2, _element$querySelecto8, table1, table2, icon, dropdown, item, icon2, dropdown2, _dropdown2$querySelec, item1, item2, _dropdown2$querySelec2, reset, confirm, newDropdown;
 
     return _regeneratorRuntime.wrap(function _callee7$(_context7) {
       while (1) {
@@ -384,7 +407,7 @@ describe('Table', function () {
 
           case 25:
             expect(instance.get('multipleGroup')).to.eql({
-              status: ['active']
+              status: []
             });
             expect(table2.innerHTML).to.matchSnapshot();
             item2.click();
@@ -392,12 +415,55 @@ describe('Table', function () {
             return wait();
 
           case 30:
+            expect(instance.get('multipleGroup')).to.eql({
+              status: []
+            }); // click confirm
+
+            _dropdown2$querySelec2 = dropdown2.querySelectorAll('.k-table-group-footer .k-btn'), reset = _dropdown2$querySelec2[0], confirm = _dropdown2$querySelec2[1];
+            confirm.click();
+            _context7.next = 35;
+            return wait();
+
+          case 35:
             expect(instance.get('multipleGroup')).to.eql({
               status: ['active', 'stopped']
             });
-            expect(table2.innerHTML).to.matchSnapshot();
+            expect(table2.innerHTML).to.matchSnapshot(); // click reset
 
-          case 32:
+            dispatchEvent(icon2, 'click');
+            _context7.next = 40;
+            return wait();
+
+          case 40:
+            expect(dropdown2.innerHTML).to.matchSnapshot();
+            reset.click();
+            _context7.next = 44;
+            return wait();
+
+          case 44:
+            expect(dropdown2.innerHTML).to.matchSnapshot();
+            confirm.click();
+            _context7.next = 48;
+            return wait();
+
+          case 48:
+            expect(instance.get('multipleGroup')).to.eql({
+              status: []
+            }); // update group
+
+            instance.set('statusGroup', [{
+              label: 'label',
+              value: 'value'
+            }]);
+            dispatchEvent(icon, 'click');
+            _context7.next = 53;
+            return wait(500);
+
+          case 53:
+            newDropdown = getElement('.k-table-group-dropdown');
+            expect(newDropdown.innerHTML).to.matchSnapshot();
+
+          case 55:
           case "end":
             return _context7.stop();
         }
@@ -1064,4 +1130,80 @@ describe('Table', function () {
       }
     }, _callee22);
   })));
+  it('pagination', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee23() {
+    var _mount25, instance, element, table, pagination, spy;
+
+    return _regeneratorRuntime.wrap(function _callee23$(_context26) {
+      while (1) {
+        switch (_context26.prev = _context26.next) {
+          case 0:
+            _mount25 = mount(PaginationDemo), instance = _mount25[0], element = _mount25[1];
+            table = instance.refs.table;
+            pagination = table.pagination.paginationRef;
+            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.trigger('$receive:pagination');
+            _context26.next = 11;
+            return wait();
+
+          case 11:
+            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.trigger('$receive:pagination');
+            _context26.next = 18;
+            return wait();
+
+          case 18:
+            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);
+            _context26.next = 24;
+            return wait();
+
+          case 24:
+            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
+
+            _context26.next = 29;
+            return wait();
+
+          case 29:
+            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
+            });
+
+          case 33:
+          case "end":
+            return _context26.stop();
+        }
+      }
+    }, _callee23);
+  })));
 });

package/components/table/row.d.ts

@@ -14,7 +14,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;
     spreaded: boolean;

package/components/table/row.js

@@ -56,9 +56,10 @@ export var TableRow = /*#__PURE__*/function (_Component) {
   _proto.onChangeChecked = function onChangeChecked(v) {
     var _this$get2 = this.get(),
         index = _this$get2.index,
+        key = _this$get2.key,
         onChangeChecked = _this$get2.onChangeChecked;
 
-    onChangeChecked(index, v);
+    onChangeChecked(index, v, key);
   };
 
   _proto.onClickArrow = function onClickArrow(e) {

package/components/table/styles.js

@@ -31,6 +31,10 @@ var defaults = {
       return theme.color.bg;
     },
 
+    get color() {
+      return theme.color.lightBlack;
+    },
+
     padding: "0 5px 0 12px",
     fontSize: "12px",
     fontWeight: "bold",
@@ -51,10 +55,9 @@ var defaults = {
   stripeBgColor: '#f9f9fc',
   // group
   group: {
-    width: "14px",
-    gap: "10px",
-    color: "#a6a6a6",
+    gap: "8px",
     menuMaxHeight: '200px',
+    menuMinWidth: '200px',
 
     get activeColor() {
       return theme.color.primary;
@@ -70,9 +73,13 @@ var defaults = {
   // sort
   sort: {
     iconHeight: "7px",
-    gap: "10px",
-    color: "#d0d5d9",
-    disabledColor: "#ddd"
+    gap: "8px",
+
+    // color: `#d0d5d9`,
+    get enabledColor() {
+      return theme.color.primary;
+    }
+
   },
   expandBgColor: '#fdfcff',
 
@@ -95,10 +102,10 @@ setDefault(function () {
   }).table;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.k-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-spacing:0;table-layout:fixed;td,th{transition:all ", table.transition, ";}}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&:first-of-type:before{display:none;}}.k-table-title{display:inline-flex;align-items:center;max-width:100%;color:", theme.color.lightBlack, ";}.k-table-title-text{flex:1;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.k-fixed-left,.k-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.k-fixed-left:after{right:-11px;}.k-fixed-right:after{left:-11px;}&.k-scroll-left .k-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.k-scroll-right .k-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.k-scroll-middle{.k-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.k-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.k-fixed-right+.k-fixed-right:after{display:none;}.k-table-affix-header{position:sticky;top:0;left:0;.k-affix-wrapper{overflow:hidden;}&.k-fixed{position:relative;}}&.k-border,&.k-grid{.k-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.k-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.k-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.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{transition:transform ", table.transition, ";}&.k-dropdown-open .k-icon{transform:rotate(180deg);}}.k-table-check{.k-checkbox,.k-radio{position:relative;top:-1px;}}.k-column-sortable{cursor:pointer;}.k-column-sort{.k-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin-left:", _sortInstanceProperty(table).gap, ";color:", _sortInstanceProperty(table).color, ";}&.k-asc .k-icon.k-desc,&.k-desc .k-icon.k-asc{color:", _sortInstanceProperty(table).disabledColor, ";}}.k-table-spin.k-overlay{z-index:2;}.k-table-empty{text-align:center;}tr.k-expand{td{padding:0;background:#fdfcff;}}&.k-with-expand{tr:not(.k-expand){td{border-bottom:none;}}}.k-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.k-selected td{background:", table.selectedBgColor, ";}.k-table-arrow{margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.k-spreaded{.k-table-arrow{transform:rotate(90deg);}}.k-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.k-dragging{opacity:", table.draggingOpacity, ";}.k-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.k-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
+  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.k-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-spacing:0;table-layout:fixed;td,th{transition:all ", table.transition, ";}}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&:first-of-type:before{display:none;}}.k-table-title{display:inline-flex;align-items:center;max-width:100%;color:", table.thead.color, ";}.k-table-title-text{flex:1;display:inline-flex;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.k-fixed-left,.k-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.k-fixed-left:after{right:-11px;}.k-fixed-right:after{left:-11px;}&.k-scroll-left .k-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.k-scroll-right .k-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.k-scroll-middle{.k-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.k-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.k-fixed-right+.k-fixed-right:after{display:none;}.k-table-affix-header{position:sticky;top:0;left:0;.k-affix-wrapper{overflow:hidden;}&.k-fixed{position:relative;}}&.k-border,&.k-grid{.k-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.k-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.k-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.k-table-group{margin-left:", table.group.gap, ";}.k-table-check{.k-checkbox,.k-radio{position:relative;top:-1px;}}.k-column-sortable{cursor:pointer;}.k-column-sort{.k-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin:0 0 1px ", _sortInstanceProperty(table).gap, ";}&.k-desc .k-icon.k-desc,&.k-asc .k-icon.k-asc{color:", _sortInstanceProperty(table).enabledColor, ";}}.k-table-spin.k-overlay{z-index:2;}.k-table-empty{text-align:center;}tr.k-expand{td{padding:0;background:#fdfcff;}}&.k-with-expand{tr:not(.k-expand){td{border-bottom:none;}}}.k-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.k-selected td{background:", table.selectedBgColor, ";}.k-table-arrow{margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.k-spreaded{.k-table-arrow{transform:rotate(90deg);}}.k-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.k-dragging{opacity:", table.draggingOpacity, ";}.k-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.k-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
     return /*#__PURE__*/css(".k-align-", type, "{text-align:", type, ";}");
-  }), ";");
+  }), ">.k-pagination{margin:16px 0;}");
 }
 export function makeGroupMenuStyles() {
-  return /*#__PURE__*/css("max-height:", table.group.menuMaxHeight, ";overflow:auto;.k-dropdown-item.k-active{color:", table.group.activeColor, ";}.k-table-group-header{padding:", table.group.headerPadding, ";border-bottom:", table.group.headerBorder, ";}");
+  return /*#__PURE__*/css("max-height:", table.group.menuMaxHeight, ";min-width:", table.group.menuMinWidth, "!important;overflow:auto;.k-dropdown-item.k-active{color:", table.group.activeColor, ";}.k-table-group-header{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.d.ts

@@ -2,6 +2,7 @@ import { Component, TypeDefs } from 'intact-react';
 import { TableMerge } from './useMerge';
 import { TooltipProps } from '../tooltip/tooltip';
 import type { Events } from '../types';
+import type { PaginationProps, PaginationChangeData } from '../pagination';
 export interface TableProps<T = any, K extends TableRowKey = TableRowKey, C extends CheckType = CheckType, S extends string = string, G extends TableGroupValue = TableGroupValue> {
     data?: T[];
     fixHeader?: boolean | string | number;
@@ -35,6 +36,8 @@ export interface TableProps<T = any, K extends TableRowKey = TableRowKey, C exte
     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];
@@ -47,6 +50,11 @@ export interface TableEvents<T = any, K extends TableRowKey = number> {
         from: number;
         to: number;
     }];
+    checkRow: [T, number, K];
+    uncheckRow: [T, number, K];
+    checkAll: [];
+    uncheckAll: [];
+    changePage: [PaginationChangeData];
 }
 export interface TableBlocks<T = unknown> {
     empty: null;
@@ -66,6 +74,13 @@ export declare class Table<T = any, RowKey extends TableRowKey = TableRowKey, Ch
     static typeDefs: Required<TypeDefs<TableProps<unknown, TableRowKey, CheckType, string, TableGroupValue<string | number | symbol>>>>;
     static defaults: () => Partial<TableProps<any, TableRowKey, CheckType, string, TableGroupValue<string | number | symbol>>>;
     static events: Events<TableEvents<any, number>>;
+    pagination: {
+        data: import("../../hooks/useState").State<any[] | undefined>;
+        value: import("../../hooks/useState").State<number>;
+        limit: import("../../hooks/useState").State<number>;
+        onChange: (data: PaginationChangeData) => void;
+        paginationRef: import("intact").RefObject<import("../pagination").Pagination>;
+    };
     private tree;
     private columns;
     private scroll;

package/components/table/table.js

@@ -25,6 +25,7 @@ import { useDraggable } from './useDraggable';
 import { useStickyScrollbar } from './useStickyScrollbar';
 import { useWidth } from './useWidth';
 import { useScroll } from './useScroll';
+import { usePagination } from './usePagination';
 var typeDefs = {
   data: Array,
   fixHeader: [Boolean, String, Number],
@@ -57,7 +58,9 @@ var typeDefs = {
   minColWidth: Number,
   widthStoreKey: String,
   draggable: Boolean,
-  animation: [Boolean, Array]
+  animation: [Boolean, Array],
+  hideHeader: Boolean,
+  pagination: [Boolean, Object]
 };
 
 var defaults = function defaults() {
@@ -78,7 +81,12 @@ var defaults = function defaults() {
 var events = {
   clickRow: true,
   dragstart: true,
-  dragend: true
+  dragend: true,
+  checkRow: true,
+  uncheckRow: true,
+  checkAll: true,
+  uncheckAll: true,
+  changePage: true
 };
 export var Table = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Table, _Component);
@@ -93,21 +101,22 @@ export var Table = /*#__PURE__*/function (_Component) {
     }
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
-    _this.tree = useTree();
+    _this.pagination = usePagination();
+    _this.tree = useTree(_this.pagination.data);
     _this.columns = useColumns();
     _this.scroll = useScroll();
     _this.stickyHeader = useStickyHeader(_this.scroll.callbacks);
     _this.width = useWidth(_this.scroll.scrollRef, _this.columns.getColumns);
     _this.resizable = useResizable(_this.scroll.scrollRef, _this.width.tableRef, _this.width.tableWidth, _this.width.widthMap, _this.width.storeWidth);
     _this.fixedColumns = useFixedColumns(_this.columns.getColumns, _this.scroll, _this.width.widthMap);
-    _this.disableRow = useDisableRow(_this.tree.loopData);
-    _this.merge = useMerge(_this.columns.getCols);
-    _this.checked = useChecked(_this.disableRow.getEnableKeys, _this.disableRow.getAllKeys, _this.disableRow.isDisabledKey, _this.merge.getGrid, _this.tree.loopData);
+    _this.disableRow = useDisableRow(_this.tree.loopData, _this.pagination.data);
+    _this.merge = useMerge(_this.columns.getCols, _this.pagination.data);
+    _this.checked = useChecked(_this.disableRow.getEnableKeys, _this.disableRow.getAllKeys, _this.disableRow.isDisabledKey, _this.merge.getGrid, _this.tree.loopData, _this.pagination.data);
     _this.sortable = useSortable();
     _this.expandable = useExpandable();
     _this.selected = useSelected();
     _this.resetRowStatus = useRestRowStatus(_this.disableRow.getAllKeys);
-    _this.draggable = useDraggable();
+    _this.draggable = useDraggable(_this.pagination.data);
     _this.stickyScrollbar = useStickyScrollbar(_this.stickyHeader.elementRef, _this.scroll, _this.width.tableRef, _this.fixedColumns.setScrollPosition);
     return _this;
   }

package/components/table/table.vdt.js

@@ -3,7 +3,7 @@ import _sortInstanceProperty from "@babel/runtime-corejs3/core-js/instance/sort"
 import { createElementVNode as _$ce, map as _$ma, className as _$cn, createUnknownComponentVNode as _$cc, createVNode as _$cv, noop as _$no, extend as _$ex, EMPTY_OBJ as _$em } from 'intact-react';
 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';
@@ -19,6 +19,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';
 var _$tmp0 = {
   'width': '40'
 };
@@ -58,7 +59,9 @@ export default function ($props, $blocks, $__proto__) {
       showIndeterminate = _this$get.showIndeterminate,
       resizable = _this$get.resizable,
       draggable = _this$get.draggable,
-      _animation = _this$get.animation;
+      _animation = _this$get.animation,
+      hideHeader = _this$get.hideHeader,
+      pagination = _this$get.pagination;
 
   var animation = !Array.isArray(_animation) ? [_animation, _animation] : _animation;
 
@@ -112,8 +115,7 @@ export default function ($props, $blocks, $__proto__) {
       onChangeChecked = _this$checked.onChangeChecked;
   var allCheckedStatus = getAllCheckedStatus();
   var offsetMap = getOffsetMap();
-
-  var thead = _$cc(TableContext.Provider, {
+  var thead = hideHeader ? null : _$cc(TableContext.Provider, {
     'value': checkType,
     'children': _$cc(GroupContext.Provider, {
       'value': {
@@ -157,7 +159,6 @@ export default function ($props, $blocks, $__proto__) {
       })
     })
   });
-
   var getAllKeys = this.disableRow.getAllKeys;
   var getGrid = this.merge.getGrid;
   var allStatus = getAllStatus();
@@ -306,6 +307,11 @@ export default function ($props, $blocks, $__proto__) {
       scrollbarRef = _this$stickyScrollbar.scrollbarRef,
       onScrollbarScroll = _this$stickyScrollbar.onScroll,
       tableActualWidth = _this$stickyScrollbar.tableActualWidth;
+  var _this$pagination = this.pagination,
+      pageValue = _this$pagination.value,
+      pageLimit = _this$pagination.limit,
+      onPageChange = _this$pagination.onChange,
+      paginationRef = _this$pagination.paginationRef;
   return _$ce(2, 'div', [_$ce(2, 'div', [!isNull(stickHeader.value) ? _$cc(Affix, {
     'top': stickHeader.value,
     'exclude': excludeStickHeader,
@@ -321,7 +327,15 @@ export default function ($props, $blocks, $__proto__) {
     }
   }, null, tableRef)], 0, 'k-table-wrapper', {
     'style': style
-  }, null, scrollRef), _$cc(Transition, {
+  }, null, scrollRef), pagination ? _$cc(Pagination, _extends({
+    'ref': paginationRef,
+    'total': data ? data.length : 0,
+    'size': 'small'
+  }, isObject(pagination) ? pagination : EMPTY_OBJ, {
+    'value': pageValue.value,
+    'limit': pageLimit.value,
+    'ev-change': onPageChange
+  }), null, paginationRef) : undefined, _$cc(Transition, {
     'name': 'k-fade',
     'children': loading ? _$cc(Spin, _$tmp1) : undefined
   }), !isNull(stickScrollbar.value) ? _$cc(Affix, {

package/components/table/useChecked.d.ts

@@ -1,3 +1,4 @@
+import { State } from '../../hooks/useState';
 import type { TableRowKey } from './';
 import type { TableGrid } from './useMerge';
 import type { useTree } from './useTree';
@@ -12,12 +13,12 @@ export declare enum AllCheckedStatus {
     Indeterminate = 1,
     None = 2
 }
-export declare function useChecked(getEnableKeys: () => TableRowKey[], getAllKeys: () => TableRowKey[], isDisabledKey: (key: TableRowKey) => boolean, getGrid: () => TableGrid, loopData: ReturnType<typeof useTree>['loopData']): {
+export declare function useChecked(getEnableKeys: () => TableRowKey[], getAllKeys: () => TableRowKey[], isDisabledKey: (key: TableRowKey) => boolean, getGrid: () => TableGrid, loopData: ReturnType<typeof useTree>['loopData'], data: State<any[] | undefined>): {
     isChecked: (key: TableRowKey) => boolean;
     getAllCheckedStatus: () => AllCheckedStatus;
     toggleCheckedAll: (v: boolean) => void;
     getAllStatus: () => RowStatus[];
-    onChangeChecked: (rowIndex: number, v: boolean) => void;
+    onChangeChecked: (rowIndex: number, v: boolean, key: TableRowKey) => void;
 };
 export declare function inArray<T>(arr: T[] | undefined, v: T): boolean;
 export declare function addOrRemove(keys: TableRowKey[], key: TableRowKey, isAdd: boolean): void;

package/components/table/useChecked.js

@@ -2,6 +2,7 @@ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/i
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
 import { useInstance } from 'intact-react';
+import { watchState } from '../../hooks/useState';
 import { toggleArray } from '../utils';
 export var AllCheckedStatus;
 
@@ -11,7 +12,7 @@ export var AllCheckedStatus;
   AllCheckedStatus[AllCheckedStatus["None"] = 2] = "None";
 })(AllCheckedStatus || (AllCheckedStatus = {}));
 
-export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, loopData) {
+export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, loopData, data) {
   var instance = useInstance();
   var allStatus = [];
 
@@ -21,7 +22,10 @@ export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, lo
 
   function toggleChecked(key, rowIndex) {
     if (instance.get('checkType') === 'checkbox') {
-      instance.set('checkedKeys', toggleArray(instance.get('checkedKeys'), key));
+      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;
       var grid = getGrid();
@@ -34,7 +38,7 @@ export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, lo
         }
       }
 
-      onChangeChecked(rowIndex, true);
+      onChangeChecked(rowIndex, true, key);
     }
   }
 
@@ -61,6 +65,7 @@ export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, lo
 
   function toggleCheckedAll(v) {
     instance.set('checkedKeys', getCheckedAllOrUncheckedAllKeys(v));
+    instance.trigger(v ? 'checkAll' : 'uncheckAll');
   }
   /**
    * keep the original keys which don't exist in the enableKeys,
@@ -92,12 +97,11 @@ export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, lo
     allStatus = [];
 
     var _instance$get2 = instance.get(),
-        data = _instance$get2.data,
         rowKey = _instance$get2.rowKey,
         checkType = _instance$get2.checkType,
         merge = _instance$get2.merge;
 
-    if (!data || !data.length) return;
+    if (!data.value || !data.value.length) return;
     var allKeys = getAllKeys();
     allKeys.forEach(function (key) {
       var disabled = isDisabledKey(key);
@@ -161,7 +165,7 @@ export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, lo
     }
   }
 
-  function onChangeChecked(rowIndex, v) {
+  function onChangeChecked(rowIndex, v, key) {
     var _context;
 
     // should check or uncheck all grouped rows
@@ -172,9 +176,9 @@ export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, lo
 
     if (checkType === 'radio') {
       for (var i = 0; i < checkedKeys.length; i++) {
-        var key = checkedKeys[i]; // FIXME: should ignore the disabled status, if we remove the radio keys
+        var _key = checkedKeys[i]; // FIXME: should ignore the disabled status, if we remove the radio keys
 
-        if (isDisabledKey(key)) continue;
+        if (isDisabledKey(_key)) continue;
 
         _spliceInstanceProperty(checkedKeys).call(checkedKeys, i, 1);
 
@@ -189,27 +193,34 @@ export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, lo
     if ((rowspan = grid[rowIndex]) && (rowspan = rowspan[0]) && (rowspan = rowspan.spans) && (rowspan = rowspan.rowspan) && rowspan > 1) {
       for (var _i = rowIndex; _i < rowspan + rowIndex; _i++) {
         var status = allStatus[_i];
-        var _key = allKeys[_i];
+        var _key2 = allKeys[_i];
 
         if (!status.disabled) {
-          addOrRemove(checkedKeys, _key, v);
+          addOrRemove(checkedKeys, _key2, v);
         }
       }
     } else {
       addOrRemove(checkedKeys, allKeys[rowIndex], v);
     }
 
-    instance.set('checkedKeys', checkedKeys);
+    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, key, rowIndex) {
+    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', function (data, index, key) {
     if (instance.get('rowCheckable') && instance.get('checkType') !== 'none') {
       toggleChecked(key, index);