@clake/react-bootstrap4-window 0.4.6 → 0.5.0

package/lib/CTable.js

@@ -1,6 +1,6 @@
-/* @clake/react-bootstrap4-window v0.4.6 | by Clake
+/* @clake/react-bootstrap4-window v0.5.0 | by Clake
  * Copyright (c) 2021 Clake,
- * 2021-02-19T15:58:51+0800
+ * 2021-12-29T15:26:43+0800
  */
 "use strict";
 
@@ -69,6 +69,18 @@ function (_React$Component) {
 
     _this = _possibleConstructorReturn(this, _getPrototypeOf(CTable).call(this, props));
 
+    _defineProperty(_assertThisInitialized(_this), "equals", function (a, b) {
+      if (a === b) return true;
+      if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
+      if (!a || !b || _typeof(a) !== 'object' && _typeof(b) !== 'object') return a === b;
+      if (a.prototype !== b.prototype) return false;
+      var keys = Object.keys(a);
+      if (keys.length !== Object.keys(b).length) return false;
+      return keys.every(function (k) {
+        return _this.equals(a[k], b[k]);
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "sortHandler", function (e) {
       var dom = e.currentTarget;
       var sort_type = dom.dataset.sort || 'asc';
@@ -85,22 +97,6 @@ function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "menuContextHandler", function (e) {
-      e.preventDefault();
-      e.stopPropagation();
-      var data = {
-        field: e.currentTarget.dataset.field || '',
-        data: _this.state.data[e.currentTarget.dataset.row],
-        index: e.currentTarget.dataset.row
-      };
-
-      _this.mainMenu.show({
-        evt: e,
-        type: 'mouse',
-        data: data
-      });
-    });
-
     _defineProperty(_assertThisInitialized(_this), "menuClickHandler", function (field, data) {
       switch (field) {
         case "asc":
@@ -148,7 +144,11 @@ function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "editHandler", function (e, val, row) {
       var index = parseInt(e.target.dataset.row);
-      var field = e.target.dataset.field;
+      var field = e.target.dataset.field; //如果是check组件
+
+      if (row === 'chk') {
+        val = val ? 1 : 0;
+      }
 
       if (_this.editRows.indexOf(index) === -1) {
         _this.editRows.push(index);
@@ -238,7 +238,7 @@ function (_React$Component) {
     value: function componentWillReceiveProps(nextProps) {
       if (this.state.data !== nextProps.data) {
         if (this.props.edit) {
-          if (this.originalData === nextProps.data) {
+          if (this.equals(this.originalData, nextProps.data)) {
             return;
           }
 
@@ -344,6 +344,13 @@ function (_React$Component) {
             _this4.filter = [];
             break;
 
+          case "":
+            return {
+              field: item.field,
+              value: item.text,
+              flag: '='
+            };
+
           default:
             return {
               field: item.field,
@@ -491,6 +498,40 @@ function (_React$Component) {
      * @param e
      */
 
+  }, {
+    key: "menuContextHandler",
+
+    /**
+     * show menu list
+     * @param dataType
+     */
+    value: function menuContextHandler(dataType) {
+      var _this7 = this;
+
+      return function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var data = {
+          field: e.currentTarget.dataset.field || '',
+          data: _this7.state.data[e.currentTarget.dataset.row],
+          index: e.currentTarget.dataset.row
+        };
+
+        if (dataType === "text") {
+          _this7.mainMenu.show({
+            evt: e,
+            type: 'mouse',
+            data: data
+          });
+        } else {
+          _this7.numMenu.show({
+            evt: e,
+            type: 'mouse',
+            data: data
+          });
+        }
+      };
+    }
   }, {
     key: "localFilter",
 
@@ -546,6 +587,7 @@ function (_React$Component) {
         }
       });
       this.mainMenu.hide();
+      this.numMenu.hide();
 
       if (typeof this.props.onFilter === 'function') {
         this.props.onFilter(text, field, type);
@@ -579,13 +621,13 @@ function (_React$Component) {
   }, {
     key: "filterChangeHandler",
     value: function filterChangeHandler(field) {
-      var _this7 = this;
+      var _this8 = this;
 
       return function (val) {
-        var filter = _this7.state.filter;
+        var filter = _this8.state.filter;
         filter[field] = val;
 
-        _this7.setState({
+        _this8.setState({
           filter: filter
         });
       };
@@ -641,7 +683,7 @@ function (_React$Component) {
   }, {
     key: "deleteRow",
     value: function deleteRow(row_index) {
-      var _this8 = this;
+      var _this9 = this;
 
       if (row_index < 0 || row_index >= this.state.data.length) {
         return;
@@ -656,7 +698,7 @@ function (_React$Component) {
 
       this.editRows.forEach(function (item, index) {
         if (item > row_index) {
-          _this8.editRows[index] = item - 1;
+          _this9.editRows[index] = item - 1;
         }
       });
       this.setState({
@@ -688,10 +730,10 @@ function (_React$Component) {
      * @returns {*}
      */
     value: function getSelectRows() {
-      var _this9 = this;
+      var _this10 = this;
 
       return this.selectRows.map(function (item) {
-        return _this9.state.data[item];
+        return _this10.state.data[item];
       });
     }
     /**
@@ -703,17 +745,17 @@ function (_React$Component) {
   }, {
     key: "setSelectRows",
     value: function setSelectRows(key, list) {
-      var _this10 = this;
+      var _this11 = this;
 
       this.state.data.forEach(function (row, i) {
         if (list.indexOf(row[key]) !== -1) {
-          _this10.refs['row_' + i].setChecked(true);
+          _this11.refs['row_' + i].setChecked(true);
 
-          _this10.setRowCheck(true, i);
+          _this11.setRowCheck(true, i);
         } else {
-          _this10.refs['row_' + i].setChecked(false);
+          _this11.refs['row_' + i].setChecked(false);
 
-          _this10.setRowCheck(false, i);
+          _this11.setRowCheck(false, i);
         }
       });
       this.checkAllCheckHalf();
@@ -725,50 +767,50 @@ function (_React$Component) {
   }, {
     key: "bindSplit",
     value: function bindSplit() {
-      var _this11 = this;
+      var _this12 = this;
 
       if (this.props.move) {
         this.headerSplits.forEach(function (split) {
-          if (!_this11.drag) {
-            _this11.dragColumnLeft = 0;
-            _this11.dragWidth = 0;
-            _this11.drag = new _Drag["default"](_this11.split, split, {
+          if (!_this12.drag) {
+            _this12.dragColumnLeft = 0;
+            _this12.dragWidth = 0;
+            _this12.drag = new _Drag["default"](_this12.split, split, {
               start: function start(dragDom, eventDom) {
-                var xy = _reactBootstrap.Common.GetDomXY(eventDom, _this11.mainDom);
+                var xy = _reactBootstrap.Common.GetDomXY(eventDom, _this12.mainDom);
 
-                _this11.dragWidth = parseInt(eventDom.parentNode.style.width);
-                _this11.dragColumnLeft = xy.left - _this11.table_rows.scrollLeft;
-                dragDom.style.left = _this11.dragColumnLeft + 'px';
+                _this12.dragWidth = parseInt(eventDom.parentNode.style.width);
+                _this12.dragColumnLeft = xy.left - _this12.table_rows.scrollLeft;
+                dragDom.style.left = _this12.dragColumnLeft + 'px';
                 dragDom.classList.remove('d-none');
                 return true;
               },
               move: function move(_move, dragDom, eventDom) {
-                if (_this11.dragWidth + (_move.x - _this11.dragColumnLeft) < 50) {
-                  _move.x = _this11.dragColumnLeft - _this11.dragWidth + 50;
+                if (_this12.dragWidth + (_move.x - _this12.dragColumnLeft) < 50) {
+                  _move.x = _this12.dragColumnLeft - _this12.dragWidth + 50;
                 }
               },
               end: function end(dragDom, eventDom) {
                 dragDom.classList.add('d-none');
                 var column_key = eventDom.dataset.key;
 
-                var diff = parseInt(dragDom.style.left) - _this11.dragColumnLeft;
+                var diff = parseInt(dragDom.style.left) - _this12.dragColumnLeft;
 
-                _this11.width = parseInt(_this11.width) + diff + 'px';
-                _this11.table_head.style.width = _this11.width;
-                _this11.table_body.style.width = _this11.width;
+                _this12.width = parseInt(_this12.width) + diff + 'px';
+                _this12.table_head.style.width = _this12.width;
+                _this12.table_body.style.width = _this12.width;
 
-                if (_this11.table_total) {
-                  _this11.table_total.style.width = _this11.width;
+                if (_this12.table_total) {
+                  _this12.table_total.style.width = _this12.width;
                 }
 
                 document.querySelectorAll("#".concat(column_key)).forEach(function (item) {
-                  item.style.width = "".concat(_this11.dragWidth + diff, "px");
+                  item.style.width = "".concat(_this12.dragWidth + diff, "px");
                 });
                 return true;
               }
             });
           } else {
-            _this11.drag.setEventDom(split);
+            _this12.drag.setEventDom(split);
           }
         });
       }
@@ -902,11 +944,11 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this12 = this;
+      var _this13 = this;
 
       return _react["default"].createElement("div", {
         ref: function ref(c) {
-          return _this12.mainDom = c;
+          return _this13.mainDom = c;
         },
         className: this.getMainClasses(),
         style: this.getStyles()
@@ -918,7 +960,7 @@ function (_React$Component) {
         selector: "#table-body-com-".concat(this.domId)
       })), this.renderFoot(), _react["default"].createElement("div", {
         ref: function ref(c) {
-          return _this12.split = c;
+          return _this13.split = c;
         },
         className: "ck-split d-none"
       }));
@@ -926,15 +968,15 @@ function (_React$Component) {
   }, {
     key: "renderHeader",
     value: function renderHeader() {
-      var _this13 = this;
+      var _this14 = this;
 
       return _react["default"].createElement("div", {
         ref: function ref(c) {
-          return _this13.tableHeader = c;
+          return _this14.tableHeader = c;
         }
       }, _react["default"].createElement("table", {
         ref: function ref(c) {
-          return _this13.table_head = c;
+          return _this14.table_head = c;
         },
         id: "table-head-".concat(this.domId),
         className: this.getClasses(),
@@ -950,11 +992,11 @@ function (_React$Component) {
         icon: "list"
       }) : _react["default"].createElement(_reactBootstrap.CCheckbox, {
         ref: function ref(c) {
-          return _this13.allchk = c;
+          return _this14.allchk = c;
         },
         onChange: this.selectAll
       })) : null, _react["default"].Children.map(this.props.children, function (item, key) {
-        _this13.cacheRow[item.props.field] = '';
+        _this14.cacheRow[item.props.field] = '';
 
         if (!item || item.props.hide) {
           return null;
@@ -971,28 +1013,28 @@ function (_React$Component) {
 
         var sort_icon = '';
 
-        if (_this13.sortList[item.props.field]) {
-          sort_icon = 'sort-alpha-' + (_this13.sortList[item.props.field] === 'asc' ? 'down' : 'up');
+        if (_this14.sortList[item.props.field]) {
+          sort_icon = 'sort-alpha-' + (_this14.sortList[item.props.field] === 'asc' ? 'down' : 'up');
         }
 
         return _react["default"].createElement("th", {
-          onContextMenu: _this13.menuContextHandler,
-          id: _this13.domId + '-' + key,
+          onContextMenu: _this14.menuContextHandler,
+          id: _this14.domId + '-' + key,
           "data-key": 'head_' + key,
           style: style
-        }, _this13.is_sort ? _react["default"].createElement("a", {
+        }, _this14.is_sort ? _react["default"].createElement("a", {
           className: "ck-ctable-sort",
           href: "javascript://",
-          id: "".concat(_this13.domId, "-sort-").concat(item.props.field),
+          id: "".concat(_this14.domId, "-sort-").concat(item.props.field),
           "data-field": item.props.field,
-          onClick: _this13.sortHandler
+          onClick: _this14.sortHandler
         }, item.props.text, " ", _react["default"].createElement(_reactBootstrap.Icon, {
           icon: sort_icon
-        })) : item.props.text, _this13.props.move ? _react["default"].createElement("span", {
+        })) : item.props.text, _this14.props.move ? _react["default"].createElement("span", {
           ref: function ref(c) {
-            return _this13.headerSplits.push(c);
+            return _this14.headerSplits.push(c);
           },
-          "data-key": _this13.domId + '-' + key,
+          "data-key": _this14.domId + '-' + key,
           className: "ck-column-split"
         }) : null);
       })))));
@@ -1000,34 +1042,34 @@ function (_React$Component) {
   }, {
     key: "renderRows",
     value: function renderRows() {
-      var _this14 = this;
+      var _this15 = this;
 
       return _react["default"].createElement("div", {
         ref: function ref(c) {
-          return _this14.table_rows = c;
+          return _this15.table_rows = c;
         },
         id: "table-body-com-".concat(this.domId),
         className: "flex-grow-1 rows",
         onScroll: this.scrollHandler
       }, _react["default"].createElement("table", {
         ref: function ref(c) {
-          return _this14.table_body = c;
+          return _this15.table_body = c;
         },
         id: "table-body-".concat(this.domId),
         className: this.getClasses(),
         style: this.getTableStyles()
       }, _react["default"].createElement("tbody", null, this.state.data.map(function (row, i) {
-        if (_this14.props.edit) {
-          return _this14.renderEditRow(row, i);
+        if (_this15.props.edit) {
+          return _this15.renderEditRow(row, i);
         }
 
-        return _this14.renderRow(row, i);
-      }), this.props.edit ? this.renderEditAddRow() : null)), this.props.menu ? this.renderMenu() : null);
+        return _this15.renderRow(row, i);
+      }), this.props.edit ? this.renderEditAddRow() : null)), this.props.menu ? this.renderMenu() : null, this.props.menu ? this.renderNumberMenu() : null);
     }
   }, {
     key: "renderRow",
     value: function renderRow(row, i, parentRow) {
-      var _this15 = this;
+      var _this16 = this;
 
       return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("tr", {
         className: this.props.onClick ? 'click-row' : null,
@@ -1046,18 +1088,33 @@ function (_React$Component) {
         } //set style
 
 
-        var style = _objectSpread({}, _this15.props.columnStyle);
+        var style = _objectSpread({}, _this16.props.columnStyle);
 
-        style.textAlign = item.props.align || _this15.props.align;
+        style.textAlign = item.props.align || _this16.props.align;
 
         if (item.props.width) {
           style.width = item.props.width;
         }
 
+        var dataType;
+
+        switch (item.props.dataType) {
+          case "number":
+            dataType = "number";
+            break;
+
+          case "date":
+            dataType = "date";
+            break;
+
+          default:
+            dataType = "text";
+        }
+
         if (item.props.children) {
           return _react["default"].createElement("td", {
-            onContextMenu: _this15.menuContextHandler,
-            id: _this15.domId + '-' + key,
+            onContextMenu: _this16.menuContextHandler(dataType),
+            id: _this16.domId + '-' + key,
             "data-row": "".concat(i),
             "data-field": item.props.field,
             className: item.props.className,
@@ -1071,9 +1128,13 @@ function (_React$Component) {
             value: row[item.props.field]
           }));
         } else {
+          if (item.props.type) {
+            item.props.disabled = true;
+          }
+
           return _react["default"].createElement("td", {
-            onContextMenu: _this15.menuContextHandler,
-            id: _this15.domId + '-' + key,
+            onContextMenu: _this16.menuContextHandler(dataType),
+            id: _this16.domId + '-' + key,
             "data-field": item.props.field,
             style: style,
             onClick: function onClick(e) {
@@ -1087,14 +1148,14 @@ function (_React$Component) {
               }
             },
             "data-row": "".concat(i)
-          }, item.props.onFormat ? item.props.onFormat(row[item.props.field], row, item.props.field) : row[item.props.field]);
+          }, item.props.type ? _this16.renderEditComponent(item.props, row, i) : item.props.onFormat ? item.props.onFormat(row[item.props.field], row, item.props.field) : row[item.props.field]);
         }
       })));
     }
   }, {
     key: "renderEditRow",
     value: function renderEditRow(row, i) {
-      var _this16 = this;
+      var _this17 = this;
 
       return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("tr", {
         className: this.props.onClick ? 'click-row' : null,
@@ -1114,18 +1175,19 @@ function (_React$Component) {
         } //set style
 
 
-        var style = _objectSpread({}, _this16.props.columnStyle);
+        var style = _objectSpread({}, _this17.props.columnStyle);
 
-        style.textAlign = item.props.align || _this16.props.align;
+        style.textAlign = item.props.align || _this17.props.align;
 
         if (item.props.width) {
           style.width = item.props.width;
         }
 
+        var dataType = 'text';
         return _react["default"].createElement("td", {
-          onContextMenu: _this16.menuContextHandler,
+          onContextMenu: _this17.menuContextHandler(dataType),
           className: item.props.disabled ? 'disabled' : '',
-          id: _this16.domId + '-' + key,
+          id: _this17.domId + '-' + key,
           "data-field": item.props.field,
           style: style,
           onClick: function onClick(e) {
@@ -1139,13 +1201,13 @@ function (_React$Component) {
             }
           },
           "data-row": "".concat(i)
-        }, _this16.props.disabled ? item.props.onFormat ? item.props.onFormat(row[item.props.field], row, item.props.field) : row[item.props.field] : _this16.renderEditComponent(item.props, row, i));
+        }, item.props.disabled ? item.props.onFormat ? item.props.onFormat(row[item.props.field], row, item.props.field) : row[item.props.field] : _this17.renderEditComponent(item.props, row, i));
       })));
     }
   }, {
     key: "renderEditAddRow",
     value: function renderEditAddRow() {
-      var _this17 = this;
+      var _this18 = this;
 
       return _react["default"].createElement("tr", {
         id: this.domId + '-edit'
@@ -1167,13 +1229,15 @@ function (_React$Component) {
         return _react["default"].createElement("td", {
           style: style
         }, _react["default"].createElement(_CTableInput["default"], {
-          onFocus: _this17.addNewHandler
+          onFocus: _this18.addNewHandler
         }));
       }));
     }
   }, {
     key: "renderEditComponent",
     value: function renderEditComponent(item, row, i) {
+      var _this19 = this;
+
       switch (item.type) {
         case "combo":
           return _react["default"].createElement(_CTableInput["default"], {
@@ -1200,7 +1264,16 @@ function (_React$Component) {
           });
 
         case "checkbox":
-          break;
+          return _react["default"].createElement(_reactBootstrap.CCheckbox, {
+            width: "20px",
+            onChange: function onChange(chk, e) {
+              _this19.editHandler(e, chk, 'chk');
+            },
+            "data-row": i,
+            "data-field": item.field,
+            checked: !!row[item.field],
+            disabled: item.disabled
+          });
 
         default:
           return _react["default"].createElement(_CTableInput["default"], {
@@ -1232,7 +1305,7 @@ function (_React$Component) {
   }, {
     key: "renderTotal",
     value: function renderTotal() {
-      var _this18 = this;
+      var _this20 = this;
 
       if (!this.state.total) {
         return null;
@@ -1241,11 +1314,11 @@ function (_React$Component) {
       var total = this.state.total;
       return _react["default"].createElement("div", {
         ref: function ref(c) {
-          return _this18.tableTotal = c;
+          return _this20.tableTotal = c;
         }
       }, _react["default"].createElement("table", {
         ref: function ref(c) {
-          return _this18.table_total = c;
+          return _this20.table_total = c;
         },
         id: "table-total-".concat(this.domId),
         className: this.getClasses(),
@@ -1259,7 +1332,7 @@ function (_React$Component) {
           return null;
         }
 
-        var align = item.props.align || _this18.props.align;
+        var align = item.props.align || _this20.props.align;
         var style = {
           'textAlign': align
         };
@@ -1269,7 +1342,7 @@ function (_React$Component) {
         }
 
         return _react["default"].createElement("td", {
-          id: _this18.domId + '-' + key,
+          id: _this20.domId + '-' + key,
           "data-field": item.props.field,
           style: style
         }, item.props.onFormat ? item.props.onFormat(total[item.props.field], total, item.props.field) : total[item.props.field]);
@@ -1278,7 +1351,7 @@ function (_React$Component) {
   }, {
     key: "renderMenu",
     value: function renderMenu() {
-      var _this19 = this;
+      var _this21 = this;
 
       var lang = this.props.lang;
 
@@ -1289,9 +1362,9 @@ function (_React$Component) {
         lang = _CTable2["default"][langStr];
       }
 
-      return _react["default"].createElement(_reactBootstrap.Menu, {
+      return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactBootstrap.Menu, {
         ref: function ref(c) {
-          return _this19.mainMenu = c;
+          return _this21.mainMenu = c;
         },
         onClick: this.menuClickHandler
       }, _react["default"].createElement(_reactBootstrap.Menu.Item, {
@@ -1302,22 +1375,14 @@ function (_React$Component) {
       }, _react["default"].createElement(_reactBootstrap.Icon, {
         className: "mr-1",
         icon: "copy"
-      }), lang['Copy']), _react["default"].createElement(_reactBootstrap.Menu.Item, {
-        field: "cut",
-        onClick: function onClick() {
-          document.execCommand("cut");
-        }
-      }, _react["default"].createElement(_reactBootstrap.Icon, {
-        className: "mr-1",
-        icon: "cut"
-      }), lang['Cut']), this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
+      }), lang['Copy']), this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         step: true
       }) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         field: "select_filter",
         onClick: function onClick(e, field, data) {
           var select = document.getSelection();
 
-          _this19.filterHandler(select.toString(), data.field, 'contain');
+          _this21.filterHandler(select.toString(), data.field, 'contain');
         }
       }, _react["default"].createElement(_reactBootstrap.Icon, {
         className: "mr-1",
@@ -1327,7 +1392,7 @@ function (_React$Component) {
         onClick: function onClick(e, field, data) {
           var select = document.getSelection();
 
-          _this19.filterHandler(select.toString(), data.field, 'exclude');
+          _this21.filterHandler(select.toString(), data.field, 'exclude');
         }
       }, _react["default"].createElement(_reactBootstrap.Icon, {
         className: "mr-1",
@@ -1335,7 +1400,7 @@ function (_React$Component) {
       }), lang['Filter Excluding Selection']) : null, this.is_filter || this.is_sort ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         field: "clear_filter",
         onClick: function onClick() {
-          _this19.clearFilter();
+          _this21.clearFilter();
         }
       }, _react["default"].createElement("span", {
         className: "text-danger"
@@ -1345,6 +1410,28 @@ function (_React$Component) {
       }), lang['Clear Filter / Sort'])) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         step: true
       }) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
+        field: "equal"
+      }, _react["default"].createElement("span", {
+        className: "mr-1",
+        style: inputStyle
+      }, lang['Equal With']), _react["default"].createElement(_reactBootstrap.Input, {
+        className: "mr-1",
+        size: "xs",
+        width: "120px",
+        data: this.state.filter.equal,
+        onChange: this.filterChangeHandler('equal'),
+        onMouseDown: stopEvent,
+        onEnter: function onEnter() {
+          _this21.filterHandler(_this21.state.filter.equal, _this21.mainMenu.data.field, 'equal');
+        }
+      }), _react["default"].createElement(_reactBootstrap.Button, {
+        size: "xs",
+        onMouseDown: stopEvent,
+        onClick: function onClick(e) {
+          _this21.filterHandler(_this21.state.filter.equal, _this21.mainMenu.data.field, 'equal');
+        },
+        icon: "search"
+      })) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         field: "filter"
       }, _react["default"].createElement("span", {
         className: "mr-1",
@@ -1357,13 +1444,13 @@ function (_React$Component) {
         onChange: this.filterChangeHandler('start'),
         onMouseDown: stopEvent,
         onEnter: function onEnter() {
-          _this19.filterHandler(_this19.state.filter.start, _this19.mainMenu.data.field, 'start');
+          _this21.filterHandler(_this21.state.filter.start, _this21.mainMenu.data.field, 'start');
         }
       }), _react["default"].createElement(_reactBootstrap.Button, {
         size: "xs",
         onMouseDown: stopEvent,
         onClick: function onClick(e) {
-          _this19.filterHandler(_this19.state.filter.start, _this19.mainMenu.data.field, 'start');
+          _this21.filterHandler(_this21.state.filter.start, _this21.mainMenu.data.field, 'start');
         },
         icon: "search"
       })) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
@@ -1379,13 +1466,13 @@ function (_React$Component) {
         onChange: this.filterChangeHandler('end'),
         onMouseDown: stopEvent,
         onEnter: function onEnter() {
-          _this19.filterHandler(_this19.state.filter.start, _this19.mainMenu.data.field, 'end');
+          _this21.filterHandler(_this21.state.filter.end, _this21.mainMenu.data.field, 'end');
         }
       }), _react["default"].createElement(_reactBootstrap.Button, {
         size: "xs",
         onMouseDown: stopEvent,
         onClick: function onClick(e) {
-          _this19.filterHandler(_this19.state.filter.end, _this19.mainMenu.data.field, 'end');
+          _this21.filterHandler(_this21.state.filter.end, _this21.mainMenu.data.field, 'end');
         },
         icon: "search"
       })) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
@@ -1401,28 +1488,32 @@ function (_React$Component) {
         onChange: this.filterChangeHandler('contain'),
         onMouseDown: stopEvent,
         onEnter: function onEnter() {
-          _this19.filterHandler(_this19.state.filter.start, _this19.mainMenu.data.field, 'contain');
+          _this21.filterHandler(_this21.state.filter.contain, _this21.mainMenu.data.field, 'contain');
         }
       }), _react["default"].createElement(_reactBootstrap.Button, {
         size: "xs",
         onMouseDown: stopEvent,
         onClick: function onClick(e) {
-          _this19.filterHandler(_this19.state.filter.contain, _this19.mainMenu.data.field, 'contain');
+          _this21.filterHandler(_this21.state.filter.contain, _this21.mainMenu.data.field, 'contain');
         },
         icon: "search"
-      })) : null, this.is_sort ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
+      })) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         step: true
-      }) : null, this.is_sort ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
-        field: "asc"
-      }, _react["default"].createElement(_reactBootstrap.Icon, {
-        className: "mr-1",
-        icon: "sort-alpha-down"
-      }), lang['Sort Ascending']) : null, this.is_sort ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
-        field: "desc"
-      }, _react["default"].createElement(_reactBootstrap.Icon, {
-        className: "mr-1",
-        icon: "sort-alpha-up"
-      }), lang['Sort Descending']) : null, this.props.edit ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
+      }) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
+        field: "filter",
+        className: "flex-column"
+      }, _react["default"].createElement("div", {
+        className: "w-100"
+      }, lang['Condition Filter']), _react["default"].createElement(_reactBootstrap.Input, {
+        size: "xs",
+        width: "100%",
+        data: this.state.filter.condition,
+        onChange: this.filterChangeHandler('condition'),
+        onMouseDown: stopEvent,
+        onEnter: function onEnter() {
+          _this21.filterHandler(_this21.state.filter.condition, _this21.mainMenu.data.field, 'condition');
+        }
+      })) : null, this.props.edit ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         step: true
       }) : null, this.props.edit ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         field: "delete_row"
@@ -1431,13 +1522,90 @@ function (_React$Component) {
       }, lang['Clone Row']) : null, this.props.customMenu ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         step: true
       }) : null, this.props.customMenu ? this.props.customMenu.map(function (menu) {
-        return _this19.explainCustomMenu(menu);
-      }) : null);
+        return _this21.explainCustomMenu(menu);
+      }) : null));
+    }
+  }, {
+    key: "renderNumberMenu",
+    value: function renderNumberMenu() {
+      var _this22 = this;
+
+      var lang = this.props.lang;
+
+      if (!lang) {
+        var i18 = _reactBootstrap.i18n.getLang();
+
+        var langStr = typeof lang === 'string' ? lang : i18["short"];
+        lang = _CTable2["default"][langStr];
+      }
+
+      return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactBootstrap.Menu, {
+        ref: function ref(c) {
+          return _this22.numMenu = c;
+        },
+        onClick: this.menuClickHandler
+      }, _react["default"].createElement(_reactBootstrap.Menu.Item, {
+        field: "copy",
+        onClick: function onClick() {
+          document.execCommand("copy");
+        }
+      }, _react["default"].createElement(_reactBootstrap.Icon, {
+        className: "mr-1",
+        icon: "copy"
+      }), lang['Copy']), this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
+        step: true
+      }) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
+        field: "select_filter",
+        onClick: function onClick(e, field, data) {
+          var select = document.getSelection();
+
+          _this22.filterHandler(select.toString(), data.field, 'contain');
+        }
+      }, _react["default"].createElement(_reactBootstrap.Icon, {
+        className: "mr-1",
+        icon: "filter"
+      }), lang['Filter By Selection']) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
+        field: "select_exclude",
+        onClick: function onClick(e, field, data) {
+          var select = document.getSelection();
+
+          _this22.filterHandler(select.toString(), data.field, 'exclude');
+        }
+      }, _react["default"].createElement(_reactBootstrap.Icon, {
+        className: "mr-1",
+        icon: "filter"
+      }), lang['Filter Excluding Selection']) : null, this.is_filter || this.is_sort ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
+        field: "clear_filter",
+        onClick: function onClick() {
+          _this22.clearFilter();
+        }
+      }, _react["default"].createElement("span", {
+        className: "text-danger"
+      }, _react["default"].createElement(_reactBootstrap.Icon, {
+        className: "mr-1",
+        icon: "brush"
+      }), lang['Clear Filter / Sort'])) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
+        step: true
+      }) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
+        field: "filter",
+        className: "flex-column"
+      }, _react["default"].createElement("div", {
+        className: "w-100"
+      }, lang['Condition Filter']), _react["default"].createElement(_reactBootstrap.Input, {
+        size: "xs",
+        width: "100%",
+        data: this.state.filter.condition,
+        onChange: this.filterChangeHandler('condition'),
+        onMouseDown: stopEvent,
+        onEnter: function onEnter() {
+          _this22.filterHandler(_this22.state.filter.condition, _this22.numMenu.data.field, 'condition');
+        }
+      }), _react["default"].createElement("div", null, "and,or,between,>,>=,<,<=,=")) : null));
     }
   }, {
     key: "explainCustomMenu",
     value: function explainCustomMenu(menu) {
-      var _this20 = this;
+      var _this23 = this;
 
       if (menu.children && menu.children instanceof Array) {
         return _react["default"].createElement(_reactBootstrap.Menu.Item, {
@@ -1445,7 +1613,7 @@ function (_React$Component) {
           text: menu.text,
           child: true
         }, menu.children.map(function (item) {
-          return _this20.explainCustomMenu(item);
+          return _this23.explainCustomMenu(item);
         }));
       } else {
         return _react["default"].createElement(_reactBootstrap.Menu.Item, {