aio-table 2.1.0 → 5.0.1

package/index.js

@@ -11,18 +11,18 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _rDropdownButton = _interopRequireDefault(require("r-dropdown-button"));
+var _aioButton = _interopRequireDefault(require("aio-button"));
 
 var _react2 = require("@mdi/react");
 
 var _js = require("@mdi/js");
 
+var _jquery = _interopRequireDefault(require("jquery"));
+
 var _rRangeSlider = _interopRequireDefault(require("r-range-slider"));
 
 require("./index.css");
 
-var _jquery = _interopRequireDefault(require("jquery"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -57,7 +57,7 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
@@ -65,60 +65,110 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-var RTableContext = /*#__PURE__*/(0, _react.createContext)();
+var AioTableContext = /*#__PURE__*/(0, _react.createContext)();
 
-var RTable = /*#__PURE__*/function (_Component) {
-  _inherits(RTable, _Component);
+var AIOTable = /*#__PURE__*/function (_Component) {
+  _inherits(AIOTable, _Component);
 
-  var _super = _createSuper(RTable);
+  var _super = _createSuper(AIOTable);
 
-  function RTable(props) {
+  function AIOTable(props) {
     var _this;
 
-    _classCallCheck(this, RTable);
+    _classCallCheck(this, AIOTable);
 
     _this = _super.call(this, props);
     _this.touch = false;
     _this.dom = /*#__PURE__*/(0, _react.createRef)();
     var _this$props = _this.props,
         id = _this$props.id,
-        dataset = _this$props.dataset,
-        freezeSize = _this$props.freezeSize;
-    _this.dataset = dataset;
-    var openDictionary = {};
+        freezeSize = _this$props.freezeSize,
+        sorts = _this$props.sorts,
+        paging = _this$props.paging,
+        columns = _this$props.columns;
+    var openDictionary = {},
+        groupDictionary = {};
 
     if (id !== undefined) {
-      openDictionary = localStorage.getItem('r table ' + id);
+      openDictionary = localStorage.getItem('aio table ' + id);
 
       if (openDictionary === null || openDictionary === undefined) {
-        localStorage.setItem('r table ' + id, '{}');
+        localStorage.setItem('aio table ' + id, '{}');
         openDictionary = {};
       } else {
         openDictionary = JSON.parse(openDictionary);
       }
+
+      groupDictionary = localStorage.getItem('aio table group' + id);
+
+      if (groupDictionary === null || groupDictionary === undefined) {
+        localStorage.setItem('aio table group' + id, '{}');
+        groupDictionary = {};
+      } else {
+        groupDictionary = JSON.parse(groupDictionary);
+      }
     }
 
-    _this.activeTableIndex = 0;
+    (0, _jquery.default)(window).bind('click', function (e) {
+      var focused = _this.state.focused;
+
+      if (focused === false) {
+        return;
+      }
+
+      var target = (0, _jquery.default)(e.target);
+
+      if (target.parents('.aio-table-cell').length !== 0 || target.hasClass('aio-table-cell')) {
+        return;
+      }
+
+      _this.setState({
+        focused: false
+      });
+    });
     _this.state = {
       openDictionary: openDictionary,
       filterDictionary: {},
       groupsOpen: {},
-      freezeSize: freezeSize
+      freezeSize: freezeSize,
+      groupDictionary: groupDictionary,
+      sorts: sorts,
+      paging: paging,
+      columns: columns,
+      focused: false,
+      toggleAllState: true,
+      searchText: ''
     };
     return _this;
   }
 
-  _createClass(RTable, [{
+  _createClass(AIOTable, [{
     key: "onScroll",
     value: function onScroll(e, index) {
+      var _this2 = this;
+
       if (!this.freezeMode) {
         return;
       }
 
+      if (this.activeTableIndex === undefined) {
+        return;
+      }
+
       if (index !== this.activeTableIndex) {
+        this.onMouseEnter(index);
+        clearTimeout(this.timeo);
+        this.timeo = setTimeout(function () {
+          return _this2.bindScroll();
+        }, 40);
         return;
       }
 
+      this.bindScroll();
+    }
+  }, {
+    key: "bindScroll",
+    value: function bindScroll() {
       var units = (0, _jquery.default)(this.dom.current).find('.aio-table-unit');
       var scrollTop = units.eq(this.activeTableIndex).scrollTop();
       units.eq(this.deactiveTableIndex).scrollTop(scrollTop);
@@ -129,49 +179,20 @@ var RTable = /*#__PURE__*/function (_Component) {
       this.activeTableIndex = index;
       this.deactiveTableIndex = index === 0 ? 1 : 0;
     }
-  }, {
-    key: "getValueByField",
-    value: function getValueByField(obj, field) {
-      var fieldString = typeof field === 'function' ? field(obj) : field;
-
-      if (!fieldString || typeof fieldString !== 'string') {
-        console.error('Grid.getValueByField() receive invalid field');
-        return undefined;
-      }
-
-      var fields = fieldString.split('.');
-      var value = obj[fields[0]];
-
-      if (value === undefined) {
-        return;
-      }
-
-      for (var i = 1; i < fields.length; i++) {
-        value = value[fields[i]];
-
-        if (value === undefined || value === null) {
-          return;
-        }
-      }
-
-      return value;
-    }
   }, {
     key: "getGap",
     value: function getGap() {
-      var cellGap = this.props.cellGap;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "aio-table-gap",
         style: {
-          width: cellGap
+          width: this.props.cellGap
         }
       });
     }
   }, {
     key: "getClient",
     value: function getClient(e) {
-      var touch = this.context.touch;
-      return touch ? [e.changedTouches[0].clientX, e.changedTouches[0].clientY] : [e.clientX, e.clientY];
+      return this.context.touch ? [e.changedTouches[0].clientX, e.changedTouches[0].clientY] : [e.clientX, e.clientY];
     }
   }, {
     key: "resizeDown",
@@ -214,41 +235,67 @@ var RTable = /*#__PURE__*/function (_Component) {
         freezeSize: this.resizeDetails.newWidth
       });
     }
+  }, {
+    key: "getBodyStyle",
+    value: function getBodyStyle(Toolbar) {
+      var paging = this.state.paging;
+      var padding = this.props.padding;
+      var def = padding,
+          top = 0;
+
+      if (paging) {
+        def += 36;
+      }
+
+      if (Toolbar !== null) {
+        def += 36;
+        top += 36;
+      }
+
+      return {
+        height: "calc(100% - ".concat(def, "px)"),
+        top: top
+      };
+    }
   }, {
     key: "getTable",
-    value: function getTable() {
-      var _this2 = this;
+    value: function getTable(Toolbar) {
+      var _this3 = this;
 
       var rows = this.getRows();
+      this.rows = rows;
 
       if (!this.freezeMode) {
         return /*#__PURE__*/_react.default.createElement("div", {
-          className: 'aio-table-body'
+          className: 'aio-table-body',
+          style: this.getBodyStyle(Toolbar)
         }, /*#__PURE__*/_react.default.createElement(RTableUnit, {
           rows: rows,
-          columns: this.visibleColumns
+          columns: this.visibleColumns,
+          type: "cells"
         }));
       } else {
         var freezeSize = this.state.freezeSize;
         return /*#__PURE__*/_react.default.createElement("div", {
-          className: 'aio-table-body'
+          className: 'aio-table-body',
+          style: this.getBodyStyle(Toolbar)
         }, /*#__PURE__*/_react.default.createElement(RTableUnit, {
           key: 0,
           id: "aio-table-first-split",
           rows: rows,
           columns: this.freezeColumns,
           index: 0,
-          type: "freeze",
+          type: "freezeCells",
           style: {
             width: freezeSize
           }
         }), /*#__PURE__*/_react.default.createElement("div", {
           className: "aio-table-splitter",
           onMouseDown: function onMouseDown(e) {
-            return _this2.resizeDown(e);
+            return _this3.resizeDown(e);
           },
           onTouchStart: function onTouchStart(e) {
-            return _this2.resizeDown(e);
+            return _this3.resizeDown(e);
           }
         }), true && /*#__PURE__*/_react.default.createElement(RTableUnit, {
           key: 1,
@@ -256,54 +303,76 @@ var RTable = /*#__PURE__*/function (_Component) {
           rows: rows,
           columns: this.unFreezeColumns,
           index: 1,
-          type: "unFreeze"
+          type: "unFreezeCells"
         }));
       }
     }
   }, {
     key: "convertFlat",
-    value: function convertFlat(model) {
-      var _this3 = this;
-
+    value: function convertFlat(model, getId, getParentId, childsField) {
       var convertModelRecursive = function convertModelRecursive(array, parentId, parentObject) {
         for (var i = 0; i < array.length; i++) {
           var row = array[i];
+          var rowParentId = getParentId(row);
 
-          if (row._parentId === undefined) {
-            row._parentId = _this3.getValueByField(row, _this3.dataset.parentId);
-            _this3.perf++;
-          }
-
-          if (row._parentId !== parentId) {
+          if (rowParentId !== parentId) {
             continue;
           }
 
-          var rowId = _this3.getValueByField(row, _this3.dataset.id);
-
-          row._childs = [];
+          var rowId = getId(row);
+          row[childsField] = [];
           parentObject.push(row);
-
-          var newArray = _toConsumableArray(array);
-
-          newArray.splice(i, 1);
           array.splice(i, 1);
           i--;
-          convertModelRecursive(newArray, rowId, row._childs);
+          convertModelRecursive(_toConsumableArray(array), rowId, row[childsField]);
         }
       };
 
-      this.dataset.childs = '_childs';
       var result = [];
       convertModelRecursive(_toConsumableArray(model), undefined, result);
       return result;
     }
+  }, {
+    key: "sort",
+    value: function sort(model) {
+      var _this4 = this;
+
+      var newModel = model.sort(function (a, b) {
+        for (var i = 0; i < _this4.sorts.length; i++) {
+          var _this4$sorts$i = _this4.sorts[i],
+              getValue = _this4$sorts$i.getValue,
+              type = _this4$sorts$i.type;
+          var aValue = getValue(a),
+              bValue = getValue(b);
+
+          if (aValue < bValue) {
+            return -1 * (type === 'dec' ? -1 : 1);
+          }
+
+          if (aValue > bValue) {
+            return 1 * (type === 'dec' ? -1 : 1);
+          }
+
+          if (i !== _this4.sorts.length - 1) {
+            continue;
+          }
+
+          return 0;
+        }
+
+        return 0;
+      });
+      return newModel;
+    }
   }, {
     key: "getRows",
     value: function getRows() {
       var _this$props2 = this.props,
           model = _this$props2.model,
-          flat = _this$props2.flat,
-          paging = _this$props2.paging;
+          getRowId = _this$props2.getRowId,
+          getRowParentId = _this$props2.getRowParentId,
+          onChangeSort = _this$props2.onChangeSort;
+      var paging = this.state.paging;
 
       if (!model) {
         return false;
@@ -313,21 +382,19 @@ var RTable = /*#__PURE__*/function (_Component) {
       this.rowRenderIndex = 0;
       this.rowRealIndex = 0;
       this.perf = 0;
-      var convertedModel = flat ? this.convertFlat(_toConsumableArray(model)) : _toConsumableArray(model);
-      var groupedModel = this.getModelByGroup(convertedModel);
-      this.getRowsReq(groupedModel, rows, 0, []);
-      this.roots = [];
+      var convertedModel = getRowParentId ? this.convertFlat(_toConsumableArray(model), getRowId, getRowParentId, '_childs') : _toConsumableArray(model);
 
-      if (!paging || paging.outSide) {
-        return rows;
+      if (this.sorts.length && !onChangeSort) {
+        convertedModel = this.sort(convertedModel);
       }
 
+      this.getRowsReq(convertedModel, rows, 0, []);
       var roots = [];
 
-      for (var i = 0; i < rows.length; i++) {
-        var row = rows[i];
+      for (var _i = 0; _i < rows.length; _i++) {
+        var row = rows[_i];
 
-        if (row.show === false) {
+        if (row.row._show === false) {
           continue;
         }
 
@@ -338,16 +405,28 @@ var RTable = /*#__PURE__*/function (_Component) {
         roots[roots.length - 1].push(row);
       }
 
-      return this.getRowsByPaging(roots);
+      if (paging) {
+        roots = this.getRowsByPaging(roots);
+      }
+
+      if (this.groups.length) {
+        roots = this.getModelByGroup(roots);
+      }
+
+      var Rows = [];
+
+      for (var i = 0; i < roots.length; i++) {
+        Rows = Rows.concat(roots[i]);
+      }
+
+      return Rows;
     }
   }, {
     key: "getRowsByPaging",
     value: function getRowsByPaging(roots) {
-      var paging = this.props.paging;
-      var length = roots.length;
+      var paging = this.state.paging;
+      var length = paging.onChange ? paging.count : roots.length;
       paging.pages = Math.ceil(length / paging.size);
-      var start = 0;
-      var end = length;
 
       if (paging.number > Math.ceil(length / paging.size)) {
         paging.number = Math.ceil(length / paging.size);
@@ -357,53 +436,46 @@ var RTable = /*#__PURE__*/function (_Component) {
         }
       }
 
-      start = (paging.number - 1) * paging.size;
-      end = start + paging.size;
-      this.rowRealIndex = start;
-      var Rows = [];
+      if (paging.onChange) {
+        return roots;
+      } //اگر پیجینگ آنچنج داشت تغییری در ردیف ها نده و اجازه بده تغییرات در آنچنج روی مدل ورودی انجام شود
 
-      for (var i = start; i <= end; i++) {
-        var root = roots[i];
 
-        if (!root) {
-          continue;
-        }
+      var start = (paging.number - 1) * paging.size;
+      var end = start + paging.size;
 
-        Rows = Rows.concat(root);
+      if (end > length) {
+        end = length;
       }
 
-      return Rows;
+      this.rowRealIndex = start;
+      return roots.slice(start, end);
     }
   }, {
     key: "getModelByGroup",
-    value: function getModelByGroup(model) {
-      var _this4 = this;
-
-      if (!this.groupByMode) {
-        return model;
-      }
-
+    value: function getModelByGroup(roots) {
       var groupsOpen = this.state.groupsOpen;
       var groups = this.groups;
 
-      function msf(obj, _level) {
-        var _parentField = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-
+      function msf(obj, _level, parents) {
         if (Array.isArray(obj)) {
           groupedRows = groupedRows.concat(obj);
         } else {
           for (var prop in obj) {
-            groupsOpen[_parentField + prop] = groupsOpen[_parentField + prop] === undefined ? true : groupsOpen[_parentField + prop];
+            var newParents = parents.concat(prop);
+
+            var _groupId = newParents.toString();
+
+            groupsOpen[_groupId] = groupsOpen[_groupId] === undefined ? true : groupsOpen[_groupId];
             groupedRows.push({
-              _groupField: prop,
-              _groupText: prop,
+              _groupValue: prop,
+              _groupId: _groupId,
               _level: _level,
-              _opened: groupsOpen[_parentField + prop],
-              _parentField: _parentField
+              _opened: groupsOpen[_groupId]
             });
 
-            if (groupsOpen[_parentField + prop]) {
-              msf(obj[prop], _level + 1, _parentField + prop);
+            if (groupsOpen[_groupId]) {
+              msf(obj[prop], _level + 1, newParents);
             }
           }
         }
@@ -412,14 +484,10 @@ var RTable = /*#__PURE__*/function (_Component) {
       var newModel = {};
 
       var _loop = function _loop(i) {
-        var row = model[i];
+        var root = roots[i];
         obj = newModel;
         var values = groups.map(function (group) {
-          if (typeof group.field === 'function') {
-            return group.field(row);
-          } else {
-            return _this4.getValueByField(row, group.field);
-          }
+          return group.getValue(root[0].row);
         });
 
         for (var j = 0; j < values.length; j++) {
@@ -427,7 +495,7 @@ var RTable = /*#__PURE__*/function (_Component) {
 
           if (j === values.length - 1) {
             obj[value] = obj[value] || [];
-            obj[value].push(row);
+            obj[value].push(root);
           } else {
             obj[value] = obj[value] || {};
             obj = obj[value];
@@ -435,7 +503,7 @@ var RTable = /*#__PURE__*/function (_Component) {
         }
       };
 
-      for (var i = 0; i < model.length; i++) {
+      for (var i = 0; i < roots.length; i++) {
         var obj;
 
         _loop(i);
@@ -443,18 +511,33 @@ var RTable = /*#__PURE__*/function (_Component) {
 
       var groupedRows = [];
       var _level = 0;
-      msf(newModel, _level);
+      msf(newModel, _level, []);
       return groupedRows;
     }
   }, {
     key: "getRowsReq",
     value: function getRowsReq(model, rows, _level, parents) {
       var openDictionary = this.state.openDictionary;
+      var _this$props3 = this.props,
+          getRowId = _this$props3.getRowId,
+          getRowChilds = _this$props3.getRowChilds,
+          getRowVisible = _this$props3.getRowVisible,
+          getRowParentId = _this$props3.getRowParentId;
+
+      if (getRowParentId) {
+        getRowChilds = function getRowChilds(row) {
+          return row._childs;
+        };
+      }
 
       for (var i = 0; i < model.length; i++) {
         var row = model[i];
 
-        if (row._groupField) {
+        if (getRowVisible && getRowVisible(row) === false) {
+          continue;
+        }
+
+        if (row._groupId) {
           rows.push(row);
           continue;
         }
@@ -472,11 +555,11 @@ var RTable = /*#__PURE__*/function (_Component) {
           return parents;
         };
 
-        if (this.dataset && this.dataset.id) {
-          var id = this.getValueByField(row, this.dataset.id);
+        if (getRowId) {
+          var id = getRowId(row);
 
           if (id === undefined) {
-            console.error('RTable => id of row is not defined, please check getId props of RTable');
+            console.error('AIOTable => id of row is not defined, please check getRowId props of AIOTable');
           }
 
           openDictionary[id] = openDictionary[id] === false ? false : true;
@@ -489,8 +572,8 @@ var RTable = /*#__PURE__*/function (_Component) {
         row._childsLength = 0;
         var childs = [];
 
-        if (this.dataset && this.dataset.childs) {
-          childs = this.getValueByField(row, this.dataset.childs) || [];
+        if (getRowChilds) {
+          childs = getRowChilds(row) || [];
           row._childsLength = childs.length;
         }
 
@@ -499,10 +582,8 @@ var RTable = /*#__PURE__*/function (_Component) {
           row: row
         });
 
-        if (row._opened) {
-          if (row._childsLength) {
-            this.getRowsReq(childs, rows, _level + 1, parents.concat(row));
-          }
+        if (row._opened && row._childsLength) {
+          this.getRowsReq(childs, rows, _level + 1, parents.concat(row));
         } else {
           this.rowRealIndex += row._childsLength;
         }
@@ -511,6 +592,10 @@ var RTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "getFilterResult_and",
     value: function getFilterResult_and(filters, value) {
+      if (value === undefined) {
+        return false;
+      }
+
       for (var i = 0; i < filters.length; i++) {
         var filterItem = filters[i];
 
@@ -518,19 +603,19 @@ var RTable = /*#__PURE__*/function (_Component) {
           continue;
         }
 
-        if (filterItem.operator === 'contain' && value.indexOf(filterItem.value) === -1) {
+        if (filterItem.operator === 'contain' && value.toString().toLowerCase().indexOf(filterItem.value.toString().toLowerCase()) === -1) {
           return false;
         }
 
-        if (filterItem.operator === 'notContain' && value.indexOf(filterItem.value) !== -1) {
+        if (filterItem.operator === 'notContain' && value.toString().toLowerCase().indexOf(filterItem.value.toString().toLowerCase()) !== -1) {
           return false;
         }
 
-        if (filterItem.operator === 'equal' && value !== filterItem.value) {
+        if (filterItem.operator === 'equal' && value.toString().toLowerCase() !== filterItem.value.toString().toLowerCase()) {
           return false;
         }
 
-        if (filterItem.operator === 'notEqual' && value === filterItem.value) {
+        if (filterItem.operator === 'notEqual' && value.toString().toLowerCase() === filterItem.value.toString().toLowerCase()) {
           return false;
         }
 
@@ -548,6 +633,10 @@ var RTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "getFilterResult_or",
     value: function getFilterResult_or(filters, value) {
+      if (value === undefined) {
+        return false;
+      }
+
       for (var i = 0; i < filters.length; i++) {
         var filterItem = filters[i];
 
@@ -555,27 +644,27 @@ var RTable = /*#__PURE__*/function (_Component) {
           return true;
         }
 
-        if (filterItem.operator === 'contain' && value.indexOf(filterItem.value) !== -1) {
+        if (filterItem.operator === 'contain' && value.toString().toLowerCase().indexOf(filterItem.value.toString().toLowerCase()) !== -1) {
           return true;
         }
 
-        if (filterItem.operator === 'notContain' && value.indexOf(filterItem.value) === -1) {
+        if (filterItem.operator === 'notContain' && value.toString().toLowerCase().indexOf(filterItem.value.toString().toLowerCase()) === -1) {
           return true;
         }
 
-        if (filterItem.operator === 'equal' && value === filterItem.value) {
+        if (filterItem.operator === 'equal' && value.toString().toLowerCase() === filterItem.value.toString().toLowerCase()) {
           return true;
         }
 
-        if (filterItem.operator === 'notEqual' && value !== filterItem.value) {
+        if (filterItem.operator === 'notEqual' && value.toString().toLowerCase() !== filterItem.value.toString().toLowerCase()) {
           return true;
         }
 
-        if (filterItem.operator === 'greater' && value > filterItem.value) {
+        if (filterItem.operator === 'greater' && parseFloat(value) > parseFloat(filterItem.value)) {
           return true;
         }
 
-        if (filterItem.operator === 'less' && value < filterItem.value) {
+        if (filterItem.operator === 'less' && parseFloat(value) < parseFloat(filterItem.value)) {
           return true;
         }
       }
@@ -586,10 +675,6 @@ var RTable = /*#__PURE__*/function (_Component) {
     key: "getFilterResult",
     value: function getFilterResult(column, value) {
       var filterDictionary = this.state.filterDictionary;
-      filterDictionary[column._index] = filterDictionary[column._index] || {
-        items: [],
-        booleanType: 'or'
-      };
       var filters = filterDictionary[column._index].items;
 
       if (filters.length) {
@@ -602,34 +687,38 @@ var RTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "getRow",
     value: function getRow(row) {
+      var onChangeFilter = this.props.onChangeFilter;
+      var filterDictionary = this.state.filterDictionary;
       row._values = {};
-      var show = true;
-      var lastFreezedColumn;
-      var lastColumn;
-      var isThereAutoColumn = false;
-      var cells = [];
-      var freezeCells = [];
-      var unFreezeCells = [];
+      var show = true,
+          lastColumn,
+          isThereAutoColumn = false,
+          cells = [],
+          freezeCells = [],
+          unFreezeCells = [];
 
       for (var i = 0; i < this.visibleColumns.length; i++) {
         var column = this.visibleColumns[i],
             value = void 0;
 
-        if (typeof column.field === 'function') {
-          value = column.field(row);
-        } else {
-          value = column.field ? this.getValueByField(row, column.field) : undefined;
+        try {
+          value = typeof column.getValue === 'function' ? column.getValue(row) : undefined;
+        } catch {
+          value = undefined;
         }
 
         row._values[column._index] = value;
+        filterDictionary[column._index] = filterDictionary[column._index] || {
+          items: [],
+          booleanType: 'or'
+        };
 
-        if (show) {
+        if (show && !onChangeFilter) {
           show = show && this.getFilterResult(column, value);
         }
 
         var obj = {
           key: row._index + ',' + column._index,
-          row: row,
           column: column,
           value: value,
           freeze: column.freeze
@@ -639,7 +728,6 @@ var RTable = /*#__PURE__*/function (_Component) {
           if (column.freeze) {
             column._renderIndex = freezeCells.length;
             freezeCells.push(obj);
-            lastFreezedColumn = column;
           } else {
             column._renderIndex = unFreezeCells.length;
             lastColumn = column;
@@ -660,20 +748,18 @@ var RTable = /*#__PURE__*/function (_Component) {
         }
       }
 
+      row._show = show;
+
       if (show) {
         var parents = row._getParents();
 
-        for (var _i = 0; _i < parents.length; _i++) {
-          if (parents[_i].show === false) {
-            parents[_i].show = 'relativeFilter';
+        for (var _i2 = 0; _i2 < parents.length; _i2++) {
+          if (parents[_i2]._show === false) {
+            parents[_i2]._show = 'relativeFilter';
           }
         }
       }
 
-      if (lastFreezedColumn) {
-        lastFreezedColumn.width = 'auto';
-      }
-
       if (!isThereAutoColumn && lastColumn) {
         lastColumn.width = 'auto';
       }
@@ -681,86 +767,306 @@ var RTable = /*#__PURE__*/function (_Component) {
       return {
         cells: cells,
         freezeCells: freezeCells,
-        unFreezeCells: unFreezeCells,
-        show: show
+        unFreezeCells: unFreezeCells
+      };
+    }
+  }, {
+    key: "getRowById",
+    value: function getRowById(id) {
+      for (var i = 0; i < this.rows.length; i++) {
+        var row = this.rows[i];
+
+        if (!row.row) {
+          continue;
+        }
+
+        if (row.row._id === id) {
+          return row;
+        }
+      }
+    }
+  }, {
+    key: "toggleAll",
+    value: function toggleAll() {
+      var _this$state = this.state,
+          openDictionary = _this$state.openDictionary,
+          groupsOpen = _this$state.groupsOpen,
+          toggleAllState = _this$state.toggleAllState;
+      var _this$props4 = this.props,
+          id = _this$props4.id,
+          getRowId = _this$props4.getRowId;
+
+      if (getRowId) {
+        for (var prop in openDictionary) {
+          var row = this.getRowById(prop);
+
+          if (row && row.row && row.row._show === 'relativeFilter') {
+            continue;
+          }
+
+          openDictionary[prop] = toggleAllState;
+        }
+      } else {
+        for (var i = 0; i < this.rows.length; i++) {
+          var _row = this.rows[i];
+
+          if (!_row.row) {
+            continue;
+          }
+
+          if (_row.row._show === 'relativeFilter') {
+            continue;
+          }
+
+          _row.row._opened = toggleAllState;
+        }
+      }
+
+      for (var _prop in groupsOpen) {
+        groupsOpen[_prop] = toggleAllState;
+      }
+
+      localStorage.setItem('aio table ' + id, JSON.stringify(openDictionary));
+      var obj = {
+        openDictionary: openDictionary,
+        groupsOpen: groupsOpen,
+        toggleAllState: !toggleAllState
       };
+      this.setState(obj);
     }
   }, {
-    key: "setColumnWidth",
-    value: function setColumnWidth(column) {
-      if (column.template === 'checkbox' && !column.width) {
-        column.width = '48px';
+    key: "showColumnRelativeGroups",
+    value: function showColumnRelativeGroups(column) {
+      var groups = this.props.groups;
+      var groupDictionary = this.state.groupDictionary;
+
+      if (!groups) {
+        return true;
       }
 
-      if (typeof column.width !== 'string') {
-        column.width = 'auto';
+      if (!groups.length) {
+        return true;
       }
 
-      if (column.width !== 'auto' && column.width.indexOf('px') === -1) {
-        column.width = 'auto';
+      if (!column.groupName) {
+        return true;
       }
+
+      return groupDictionary[column.groupName] !== true;
     }
   }, {
     key: "updateColumns",
     value: function updateColumns() {
       var _this5 = this;
 
-      var _this$props3 = this.props,
-          columns = _this$props3.columns,
-          onChange = _this$props3.onChange,
-          _this$props3$freezeMo = _this$props3.freezeMode,
-          freezeMode = _this$props3$freezeMo === void 0 ? true : _this$props3$freezeMo,
-          _this$props3$groupByM = _this$props3.groupByMode,
-          groupByMode = _this$props3$groupByM === void 0 ? true : _this$props3$groupByM;
+      var _this$props5 = this.props,
+          _this$props5$freezeMo = _this$props5.freezeMode,
+          freezeMode = _this$props5$freezeMo === void 0 ? true : _this$props5$freezeMo,
+          translate = _this$props5.translate,
+          groups = _this$props5.groups,
+          cardTemplate = _this$props5.cardTemplate,
+          onChangeSort = _this$props5.onChangeSort,
+          _this$props5$toggleAl = _this$props5.toggleAll,
+          toggleAll = _this$props5$toggleAl === void 0 ? false : _this$props5$toggleAl,
+          id = _this$props5.id;
+      var _this$state2 = this.state,
+          groupDictionary = _this$state2.groupDictionary,
+          sorts = _this$state2.sorts,
+          columns = _this$state2.columns;
       this.groups = [];
+      this.sorts = [];
       this.freezeMode = false;
-      this.groupByMode = false;
       this.visibleColumns = [];
       this.freezeColumns = [];
       this.unFreezeColumns = [];
       this.toolbar = {
-        show: false,
-        toggle: [],
-        freeze: [],
-        groupBy: [],
+        show: toggleAll,
+        toggle: [{
+          text: translate('Show Columns')
+        }],
+        toggleAll: toggleAll ? this.toggleAll.bind(this) : false,
+        freeze: [{
+          text: translate('Freeze')
+        }],
+        groupBy: [{
+          text: translate('Group By')
+        }],
+        sort: [{
+          text: translate('Sort')
+        }],
         searchColumnIndex: false
       };
 
       var _loop2 = function _loop2(i) {
-        var column = columns[i];
+        var sort = sorts[i];
+        var getValue = sort.getValue,
+            _sort$type = sort.type,
+            type = _sort$type === void 0 ? 'inc' : _sort$type,
+            title = sort.title,
+            _sort$active = sort.active,
+            active = _sort$active === void 0 ? true : _sort$active,
+            _sort$toggle = sort.toggle,
+            toggle = _sort$toggle === void 0 ? true : _sort$toggle;
+
+        if (!title) {
+          console.error('aio table => missing sort title property');
+          return "continue";
+        }
+
+        if (typeof getValue !== 'function') {
+          console.error('aio table => sort getValue property is not a function');
+          return "continue";
+        }
+
+        if (active === true) {
+          _this5.sorts.push({
+            getValue: getValue,
+            type: type
+          });
+        }
 
-        _this5.setColumnWidth(column);
+        if (toggle) {
+          _this5.toolbar.show = true;
 
-        column._index = i;
+          _this5.toolbar.sort.push({
+            text: title,
+            checked: active === true,
+            after: /*#__PURE__*/_react.default.createElement("div", {
+              style: {
+                width: '30px',
+                display: 'flex',
+                justifyContent: 'flex-end'
+              }
+            }, /*#__PURE__*/_react.default.createElement(_react2.Icon, {
+              path: type === 'dec' ? _js.mdiArrowDown : _js.mdiArrowUp,
+              size: 0.8,
+              onClick: function onClick(e) {
+                e.stopPropagation();
+                sort.type = sort.type === 'dec' ? 'inc' : 'dec';
+
+                _this5.setState({
+                  sorts: sorts
+                });
 
-        if (groupByMode) {
-          if (column.groupBy) {
-            _this5.groups.push({
-              field: column.field,
-              text: column.title
-            });
+                if (onChangeSort) {
+                  onChangeSort(sorts.filter(function (o) {
+                    return o.active !== false;
+                  }));
+                }
+              }
+            })),
+            onClick: function onClick() {
+              sort.active = !active;
 
-            _this5.groupByMode = true;
-          }
+              _this5.setState({
+                sorts: sorts
+              });
 
-          if (column.toggleGroupBy) {
-            _this5.toolbar.show = true;
-
-            _this5.toolbar.groupBy.push({
-              field: column.field,
-              text: column.title,
-              checked: column.groupBy === true,
-              onClick: function onClick() {
-                column.groupBy = !column.groupBy;
-                onChange({
-                  columns: columns
-                });
+              if (onChangeSort) {
+                onChangeSort(sorts.filter(function (o) {
+                  return o.active !== false;
+                }));
               }
-            });
+            }
+          });
+        }
+      };
+
+      for (var i = 0; i < sorts.length; i++) {
+        var _ret = _loop2(i);
+
+        if (_ret === "continue") continue;
+      }
+
+      var _loop3 = function _loop3(_i3) {
+        var group = groups[_i3];
+        var title = group.title,
+            _group$active = group.active,
+            active = _group$active === void 0 ? true : _group$active,
+            _group$toggle = group.toggle,
+            toggle = _group$toggle === void 0 ? true : _group$toggle,
+            getValue = group.getValue;
+
+        if (!title) {
+          console.error('aio table => missing group title property');
+          return "continue";
+        }
+
+        if (typeof getValue !== 'function') {
+          console.error('aio table => group getValue property is not a function');
+          return "continue";
+        }
+
+        groupDictionary[title] = groupDictionary[title] === undefined ? active : groupDictionary[title];
+
+        if (groupDictionary[title]) {
+          _this5.groups.push(group);
+        }
+
+        if (toggle) {
+          _this5.toolbar.show = true;
+
+          _this5.toolbar.groupBy.push({
+            text: title,
+            checked: groupDictionary[title],
+            onClick: function onClick() {
+              groupDictionary[title] = !groupDictionary[title];
+
+              if (id) {
+                localStorage.setItem('aio table group' + id, JSON.stringify(groupDictionary));
+              }
+
+              _this5.setState({
+                groupDictionary: groupDictionary
+              });
+            }
+          });
+        }
+      };
+
+      for (var _i3 = 0; _i3 < groups.length; _i3++) {
+        var _ret2 = _loop3(_i3);
+
+        if (_ret2 === "continue") continue;
+      }
+
+      if (cardTemplate) {
+        return;
+      }
+
+      var _loop4 = function _loop4(_i4) {
+        var column = columns[_i4];
+        var show = void 0;
+
+        if (column.storageKey && column.toggleShow) {
+          var storageStr = localStorage.getItem('aio-table-column-storage-' + column.storageKey);
+
+          if (!storageStr || storageStr === null) {
+            column._storageObj = {};
+            localStorage.setItem('aio-table-column-storage-' + column.storageKey, JSON.stringify(column._storageObj));
+          } else {
+            column._storageObj = JSON.parse(storageStr);
+          }
+
+          if (column._storageObj.show !== undefined) {
+            show = column._storageObj.show;
+          } else {
+            show = column.show;
+          }
+
+          if (column._storageObj.width !== undefined) {
+            column.width = column._storageObj.width;
+          } else {
+            column.width = column.width || 'auto';
           }
+        } else {
+          show = column.show;
+          column.width = column.width || 'auto';
         }
 
-        if (column.show !== false && column.groupBy !== true) {
+        column._index = _i4;
+
+        if (show !== false && _this5.showColumnRelativeGroups(column)) {
           _this5.visibleColumns.push(column);
 
           if (freezeMode) {
@@ -781,7 +1087,8 @@ var RTable = /*#__PURE__*/function (_Component) {
                 onClick: function onClick() {
                   column.freeze = column.freeze === true ? true : false;
                   column.freeze = !column.freeze;
-                  onChange({
+
+                  _this5.setState({
                     columns: columns
                   });
                 }
@@ -795,11 +1102,20 @@ var RTable = /*#__PURE__*/function (_Component) {
 
           _this5.toolbar.toggle.push({
             text: column.title,
-            checked: column.show !== false,
+            checked: show !== false,
             onClick: function onClick() {
               column.show = column.show === false ? false : true;
-              column.show = !column.show;
-              onChange({
+
+              if (column.storageKey) {
+                column._storageObj.show = column._storageObj.show === false ? false : column._storageObj.show;
+                column._storageObj.show = !column._storageObj.show;
+                column.show = column._storageObj.show;
+                localStorage.setItem('aio-table-column-storage-' + column.storageKey, JSON.stringify(column._storageObj));
+              } else {
+                column.show = !column.show;
+              }
+
+              _this5.setState({
                 columns: columns
               });
             }
@@ -807,12 +1123,13 @@ var RTable = /*#__PURE__*/function (_Component) {
         }
 
         if (column.search) {
+          _this5.toolbar.show = true;
           _this5.toolbar.searchColumnIndex = column._index;
         }
       };
 
-      for (var i = 0; i < columns.length; i++) {
-        _loop2(i);
+      for (var _i4 = 0; _i4 < columns.length; _i4++) {
+        _loop4(_i4);
       }
 
       if (this.freezeColumns.length === 0 || this.unFreezeColumns.length === 0) {
@@ -822,24 +1139,27 @@ var RTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "getPaging",
     value: function getPaging() {
-      var _this$props4 = this.props,
-          paging = _this$props4.paging,
-          rtl = _this$props4.rtl,
-          translate = _this$props4.translate;
+      var _this6 = this;
+
+      var paging = this.state.paging;
 
       if (!paging) {
         return null;
       }
 
+      var _this$props6 = this.props,
+          rtl = _this$props6.rtl,
+          translate = _this$props6.translate;
       var number = paging.number,
           _paging$sizes = paging.sizes,
-          sizes = _paging$sizes === void 0 ? [1, 5, 10, 20, 30] : _paging$sizes,
+          sizes = _paging$sizes === void 0 ? [1, 5, 10, 20, 30, 40, 50, 60, 70, 80] : _paging$sizes,
           size = paging.size,
-          _paging$onChange = paging.onChange,
-          _onChange = _paging$onChange === void 0 ? function () {} : _paging$onChange,
-          pages = paging.pages;
+          _paging$pages = paging.pages,
+          pages = _paging$pages === void 0 ? 1 : _paging$pages;
 
       var changePage = function changePage(type) {
+        var _paging$pages2 = paging.pages,
+            pages = _paging$pages2 === void 0 ? 1 : _paging$pages2;
         var newNumber;
 
         if (type === 'prev') {
@@ -864,10 +1184,15 @@ var RTable = /*#__PURE__*/function (_Component) {
           return;
         }
 
-        _onChange({
-          number: newNumber,
-          size: size
+        paging.number = newNumber;
+
+        _this6.setState({
+          paging: paging
         });
+
+        if (paging.onChange) {
+          paging.onChange(paging);
+        }
       };
 
       return /*#__PURE__*/_react.default.createElement("div", {
@@ -917,10 +1242,15 @@ var RTable = /*#__PURE__*/function (_Component) {
         className: "aio-table-paging-button",
         value: size,
         onChange: function onChange(e) {
-          return _onChange({
-            number: number,
-            size: parseInt(e.target.value)
+          paging.size = parseInt(e.target.value);
+
+          _this6.setState({
+            paging: paging
           });
+
+          if (paging.onChange) {
+            paging.onChange(paging);
+          }
         },
         title: translate('Rows Count Per Page')
       }, sizes.map(function (s, i) {
@@ -977,7 +1307,7 @@ var RTable = /*#__PURE__*/function (_Component) {
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          background: '#fff'
+          background: 'transparent'
         }
       }, items);
     }
@@ -990,80 +1320,168 @@ var RTable = /*#__PURE__*/function (_Component) {
         thickness: [6, 40]
       }));
     }
+  }, {
+    key: "onChangeFilter",
+    value: function onChangeFilter(obj) {
+      var onChangeFilter = this.props.onChangeFilter;
+      var columns = this.state.columns;
+      var filters = [];
+
+      for (var prop in obj) {
+        if (obj[prop].items.length) {
+          filters.push({
+            column: columns[prop],
+            ...obj[prop]
+          });
+        }
+      }
+
+      onChangeFilter(filters);
+    }
+  }, {
+    key: "toggleRow",
+    value: function toggleRow(row) {
+      var openDictionary = this.state.openDictionary;
+      var id = this.props.id;
+
+      if (row._show === 'relativeFilter') {
+        return;
+      }
+
+      if (row._id !== undefined) {
+        openDictionary[row._id] = !openDictionary[row._id];
+
+        if (id !== undefined) {
+          localStorage.setItem('aio table ' + id, JSON.stringify(openDictionary));
+        }
+
+        this.setState({
+          openDictionary: openDictionary
+        });
+      } else {
+        row._opened = !row._opened;
+        this.setState({});
+      }
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this6 = this;
+      var _this7 = this;
 
-      var _this$props5 = this.props,
-          columns = _this$props5.columns,
-          rowHeight = _this$props5.rowHeight,
-          headerHeight = _this$props5.headerHeight,
-          toolbarHeight = _this$props5.toolbarHeight,
-          rowGap = _this$props5.rowGap,
-          className = _this$props5.className,
-          columnGap = _this$props5.columnGap,
-          rtl = _this$props5.rtl,
-          style = _this$props5.style,
-          _this$props5$attrs = _this$props5.attrs,
-          attrs = _this$props5$attrs === void 0 ? {} : _this$props5$attrs;
+      if (JSON.stringify(this.props.columns) !== JSON.stringify(this.state.columns)) {
+        this.setState({
+          columns: this.props.columns
+        }); //return null;
+      }
+
+      if (JSON.stringify(this.props.paging) !== JSON.stringify(this.state.paging)) {
+        this.setState({
+          paging: this.props.paging
+        }); //return null;
+      }
+
+      var _this$props7 = this.props,
+          rowHeight = _this$props7.rowHeight,
+          headerHeight = _this$props7.headerHeight,
+          toolbarHeight = _this$props7.toolbarHeight,
+          rowGap = _this$props7.rowGap,
+          className = _this$props7.className,
+          columnGap = _this$props7.columnGap,
+          rtl = _this$props7.rtl,
+          style = _this$props7.style,
+          _this$props7$attrs = _this$props7.attrs,
+          attrs = _this$props7$attrs === void 0 ? {} : _this$props7$attrs,
+          cardTemplate = _this$props7.cardTemplate,
+          onChangeFilter = _this$props7.onChangeFilter,
+          onSwap = _this$props7.onSwap,
+          padding = _this$props7.padding;
+      var columns = this.state.columns;
       this.rh = rowHeight;
       this.hh = headerHeight;
       this.th = toolbarHeight;
       this.rg = rowGap;
       this.cg = columnGap;
       this.updateColumns();
-      var table = columns ? this.getTable() : '';
+      var Toolbar = this.toolbar.show ? /*#__PURE__*/_react.default.createElement(RTableToolbar, this.toolbar) : null;
+      var table = columns ? this.getTable(Toolbar) : '';
+      var Paging = this.getPaging();
       var context = { ...this.props,
         ...this.state,
         touch: this.touch,
+        onDrag: function onDrag(obj) {
+          return _this7.dragStart = obj;
+        },
+        onDrop: function onDrop(obj) {
+          if (!_this7.dragStart) {
+            return;
+          }
+
+          if (_this7.dragStart._level !== obj._level) {
+            return;
+          }
+
+          if (_this7.dragStart._level === 0) {
+            onSwap(_this7.dragStart, obj);
+          } else {
+            var startParents = _this7.dragStart._getParents().map(function (o) {
+              return o._index;
+            }).toString();
+
+            var endParents = obj._getParents().map(function (o) {
+              return o._index;
+            }).toString();
+
+            if (startParents !== endParents) {
+              return;
+            }
+
+            onSwap(_this7.dragStart, obj);
+          }
+        },
+        onChangeFilter: onChangeFilter ? this.onChangeFilter.bind(this) : undefined,
         SetState: function SetState(obj) {
-          return _this6.setState(obj);
+          return _this7.setState(obj);
         },
         cubes2: this.cubes2.bind(this),
+        toggleRow: this.toggleRow.bind(this),
         getGap: this.getGap.bind(this),
-        getValueByField: this.getValueByField.bind(this),
         onScroll: this.onScroll.bind(this),
         onMouseEnter: this.onMouseEnter.bind(this),
         getClient: this.getClient.bind(this),
         getLoading: this.getLoading.bind(this),
         groups: this.groups
       };
-      return /*#__PURE__*/_react.default.createElement(RTableContext.Provider, {
+      return /*#__PURE__*/_react.default.createElement(AioTableContext.Provider, {
         value: context
       }, /*#__PURE__*/_react.default.createElement("div", _extends({
         className: 'aio-table' + (className ? ' ' + className : '') + (rtl ? ' rtl' : ''),
         tabIndex: 0,
         ref: this.dom,
-        style: style
-      }, attrs), /*#__PURE__*/_react.default.createElement(RTableToolbar, this.toolbar), this.visibleColumns.length === 0 && this.getLoading(), table, /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          height: rowGap
+        style: { ...style,
+          padding: padding
         }
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          flex: 1,
-          background: '#fff'
-        }
-      }), this.getPaging()));
+      }, attrs), Toolbar, !cardTemplate && this.visibleColumns.length === 0 && this.getLoading(), table, Paging));
     }
   }]);
 
-  return RTable;
+  return AIOTable;
 }(_react.Component);
 
-exports.default = RTable;
-RTable.defaultProps = {
+exports.default = AIOTable;
+AIOTable.defaultProps = {
   columns: [],
   headerHeight: 36,
   rowHeight: 36,
   toolbarHeight: 36,
   rowGap: 6,
+  padding: 12,
   indent: 20,
   translate: function translate(text) {
     return text;
   },
-  freezeSize: 300
+  freezeSize: 300,
+  sorts: [],
+  groups: []
 };
 
 var RTableToolbar = /*#__PURE__*/function (_Component2) {
@@ -1072,21 +1490,9 @@ var RTableToolbar = /*#__PURE__*/function (_Component2) {
   var _super2 = _createSuper(RTableToolbar);
 
   function RTableToolbar() {
-    var _this7;
-
     _classCallCheck(this, RTableToolbar);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this7 = _super2.call.apply(_super2, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this7), "state", {
-      searchText: ''
-    });
-
-    return _this7;
+    return _super2.apply(this, arguments);
   }
 
   _createClass(RTableToolbar, [{
@@ -1094,8 +1500,10 @@ var RTableToolbar = /*#__PURE__*/function (_Component2) {
     value: function changeSearch(value) {
       var _this8 = this;
 
+      var time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
+      var SetState = this.context.SetState;
       clearTimeout(this.searchTimeout);
-      this.setState({
+      SetState({
         searchText: value
       });
       this.searchTimeout = setTimeout(function () {
@@ -1113,7 +1521,7 @@ var RTableToolbar = /*#__PURE__*/function (_Component2) {
         SetState({
           filterDictionary: filterDictionary
         });
-      }, 1000);
+      }, time);
     }
   }, {
     key: "render",
@@ -1121,70 +1529,105 @@ var RTableToolbar = /*#__PURE__*/function (_Component2) {
       var _this9 = this;
 
       var _this$context = this.context,
+          searchText = _this$context.searchText,
           translate = _this$context.translate,
-          rtl = _this$context.rtl;
-      var searchText = this.state.searchText;
-      var _this$props6 = this.props,
-          show = _this$props6.show,
-          toggle = _this$props6.toggle,
-          freeze = _this$props6.freeze,
-          groupBy = _this$props6.groupBy,
-          searchColumnIndex = _this$props6.searchColumnIndex;
-
-      if (!show) {
-        return null;
-      }
-
+          rtl = _this$context.rtl,
+          toggleAllState = _this$context.toggleAllState,
+          padding = _this$context.padding;
+      var _this$props8 = this.props,
+          toggle = _this$props8.toggle,
+          freeze = _this$props8.freeze,
+          groupBy = _this$props8.groupBy,
+          sort = _this$props8.sort,
+          searchColumnIndex = _this$props8.searchColumnIndex,
+          toggleAll = _this$props8.toggleAll;
       var buttonProps = {
+        type: 'select',
+        caret: false,
         rtl: rtl,
-        className: 'aio-table-toolbar-dropdown',
+        className: 'aio-table-toolbar-button',
         animate: true
       };
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "aio-table-toolbar"
-      }, groupBy.length !== 0 && /*#__PURE__*/_react.default.createElement(_rDropdownButton.default, _extends({
+        className: "aio-table-toolbar",
+        style: {
+          marginBottom: padding
+        }
+      }, toggleAll !== false && /*#__PURE__*/_react.default.createElement(_aioButton.default, _extends({
         key: 0
       }, buttonProps, {
-        items: groupBy,
+        title: translate('Toggle All'),
+        onClick: function onClick() {
+          return toggleAll();
+        },
+        text: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
+          path: !toggleAllState ? _js.mdiCollapseAll : _js.mdiExpandAll,
+          size: 0.7
+        })
+      })), searchColumnIndex !== false && /*#__PURE__*/_react.default.createElement("div", {
+        key: 1,
+        className: "aio-table-search"
+      }, /*#__PURE__*/_react.default.createElement("input", {
+        className: "aio-table-search-input",
+        type: "text",
+        value: searchText,
+        placeholder: translate('Search'),
+        onChange: function onChange(e) {
+          return _this9.changeSearch(e.target.value);
+        }
+      }), /*#__PURE__*/_react.default.createElement(_react2.Icon, {
+        className: "aio-table-search-icon",
+        path: searchText ? _js.mdiClose : _js.mdiMagnify,
+        size: 0.8,
+        onClick: function onClick() {
+          if (!searchText) {
+            return;
+          }
+
+          _this9.changeSearch('', 0);
+        }
+      })), searchColumnIndex === false && /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          flex: 1
+        }
+      }), groupBy.length > 1 && /*#__PURE__*/_react.default.createElement(_aioButton.default, _extends({
+        key: 2
+      }, buttonProps, {
+        options: groupBy,
         title: translate('Group By'),
-        icon: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
+        text: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
           path: _js.mdiFileTree,
           size: 0.7,
           horizontal: rtl === true
         })
-      })), toggle.length !== 0 && /*#__PURE__*/_react.default.createElement(_rDropdownButton.default, _extends({
-        key: 1
+      })), sort.length > 1 && /*#__PURE__*/_react.default.createElement(_aioButton.default, _extends({
+        key: 3
       }, buttonProps, {
-        icon: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
+        options: sort,
+        title: translate('Sort'),
+        text: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
+          path: _js.mdiSort,
+          size: 0.7
+        })
+      })), toggle.length > 1 && /*#__PURE__*/_react.default.createElement(_aioButton.default, _extends({
+        key: 4
+      }, buttonProps, {
+        text: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
           path: _js.mdiEye,
           size: 0.7
         }),
-        items: toggle,
+        options: toggle,
         title: translate('Show Columns')
-      })), freeze.length !== 0 && /*#__PURE__*/_react.default.createElement(_rDropdownButton.default, _extends({
-        key: 2
+      })), freeze.length > 1 && /*#__PURE__*/_react.default.createElement(_aioButton.default, _extends({
+        key: 5
       }, buttonProps, {
-        icon: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
+        text: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
           path: _js.mdiAlignHorizontalLeft,
           size: 0.7,
           horizontal: rtl === true
         }),
-        items: freeze,
+        options: freeze,
         title: translate('Freeze Columns')
-      })), searchColumnIndex !== false && /*#__PURE__*/_react.default.createElement("div", {
-        key: 3,
-        className: "aio-table-search"
-      }, /*#__PURE__*/_react.default.createElement("input", {
-        className: "aio-table-search-input",
-        type: "text",
-        value: searchText,
-        onChange: function onChange(e) {
-          return _this9.changeSearch(e.target.value);
-        }
-      }), /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-        className: "aio-table-search-icon",
-        path: _js.mdiMagnify,
-        size: 0.8
       })));
     }
   }]);
@@ -1192,7 +1635,7 @@ var RTableToolbar = /*#__PURE__*/function (_Component2) {
   return RTableToolbar;
 }(_react.Component);
 
-_defineProperty(RTableToolbar, "contextType", RTableContext);
+_defineProperty(RTableToolbar, "contextType", AioTableContext);
 
 var RTableUnit = /*#__PURE__*/function (_Component3) {
   _inherits(RTableUnit, _Component3);
@@ -1212,22 +1655,24 @@ var RTableUnit = /*#__PURE__*/function (_Component3) {
   _createClass(RTableUnit, [{
     key: "getNoData",
     value: function getNoData() {
-      var rowHeight = this.context.rowHeight;
+      var _this$context2 = this.context,
+          rowHeight = _this$context2.rowHeight,
+          translate = _this$context2.translate;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "aio-table-nodata",
         style: { ...this.getFullCellStyle(),
           height: rowHeight
         }
-      }, "\u062F\u06CC\u062A\u0627\u06CC\u06CC \u0645\u0648\u062C\u0648\u062F \u0646\u06CC\u0633\u062A");
+      }, translate('No Data'));
     }
   }, {
     key: "getGroupToggleIcon",
     value: function getGroupToggleIcon(row) {
-      var _this$context2 = this.context,
-          rtl = _this$context2.rtl,
-          SetState = _this$context2.SetState,
-          groupsOpen = _this$context2.groupsOpen,
-          getGap = _this$context2.getGap;
+      var _this$context3 = this.context,
+          rtl = _this$context3.rtl,
+          SetState = _this$context3.SetState,
+          groupsOpen = _this$context3.groupsOpen,
+          getGap = _this$context3.getGap;
       var icon;
 
       if (row._opened) {
@@ -1243,12 +1688,11 @@ var RTableUnit = /*#__PURE__*/function (_Component3) {
         });
       }
 
-      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
         className: "aio-table-toggle",
         onClick: function onClick() {
-          var _groupField = row._groupField,
-              _parentField = row._parentField;
-          groupsOpen[_parentField + _groupField] = !groupsOpen[_parentField + _groupField];
+          var _groupId = row._groupId;
+          groupsOpen[_groupId] = !groupsOpen[_groupId];
           SetState({
             groupsOpen: groupsOpen
           });
@@ -1267,19 +1711,24 @@ var RTableUnit = /*#__PURE__*/function (_Component3) {
   }, {
     key: "getStyle",
     value: function getStyle() {
-      var _this$context3 = this.context,
-          rowGap = _this$context3.rowGap,
-          columnGap = _this$context3.columnGap;
-      var _this$props7 = this.props,
-          columns = _this$props7.columns,
-          index = _this$props7.index,
-          style = _this$props7.style;
+      var _this$context4 = this.context,
+          rowGap = _this$context4.rowGap,
+          columnGap = _this$context4.columnGap;
+      var _this$props9 = this.props,
+          columns = _this$props9.columns,
+          style = _this$props9.style;
       var gridTemplateColumns = '';
       this.gridTemplateColumns = [];
 
       for (var i = 0; i < columns.length; i++) {
         var _columns$i$width = columns[i].width,
             width = _columns$i$width === void 0 ? 'auto' : _columns$i$width;
+        width = width.toString();
+
+        if (width !== 'auto' && width.indexOf('px') === -1) {
+          width += 'px';
+        }
+
         this.gridTemplateColumns.push(width);
         gridTemplateColumns += width + (i < columns.length - 1 ? ' ' : '');
       }
@@ -1304,11 +1753,13 @@ var RTableUnit = /*#__PURE__*/function (_Component3) {
   }, {
     key: "getGanttTitle",
     value: function getGanttTitle(column) {
-      var _this$context4 = this.context,
-          headerHeight = _this$context4.headerHeight,
-          columnGap = _this$context4.columnGap;
-      var keys = column.keys,
-          padding = column.padding;
+      var _this$context5 = this.context,
+          headerHeight = _this$context5.headerHeight,
+          columnGap = _this$context5.columnGap;
+      var getKeys = column.getKeys,
+          _column$padding = column.padding,
+          padding = _column$padding === void 0 ? '36px' : _column$padding;
+      var keys = getKeys();
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "aio-table-title aio-table-title-gantt",
         style: {
@@ -1322,20 +1773,24 @@ var RTableUnit = /*#__PURE__*/function (_Component3) {
       }, /*#__PURE__*/_react.default.createElement(_rRangeSlider.default, {
         start: 0,
         end: keys.length - 1,
-        label: {
-          step: 1,
-          edit: function edit(value) {
-            return keys[value];
-          },
-          style: {
+        labelStep: 1,
+        editLabel: function editLabel(value) {
+          return keys[value];
+        },
+        labelStyle: function labelStyle() {
+          return {
             top: 0
-          }
+          };
         },
-        pointStyle: {
-          display: 'none'
+        pointStyle: function pointStyle() {
+          return {
+            display: 'none'
+          };
         },
-        lineStyle: {
-          display: 'none'
+        lineStyle: function lineStyle() {
+          return {
+            display: 'none'
+          };
         }
       }));
     }
@@ -1348,24 +1803,12 @@ var RTableUnit = /*#__PURE__*/function (_Component3) {
         return this.getGanttTitle(column);
       }
 
-      var _this$context5 = this.context,
-          onChange = _this$context5.onChange,
-          columns = _this$context5.columns,
-          headerHeight = _this$context5.headerHeight,
-          columnGap = _this$context5.columnGap,
-          touch = _this$context5.touch;
-
-      if (column.template === 'checkbox') {
-        if (column.checkAll) {
-          column.title = /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-            path: _js.mdiCheckboxMarkedOutline,
-            size: 1
-          });
-        }
-
-        column.center = true;
-      }
-
+      var _this$context6 = this.context,
+          SetState = _this$context6.SetState,
+          columns = _this$context6.columns,
+          headerHeight = _this$context6.headerHeight,
+          columnGap = _this$context6.columnGap,
+          touch = _this$context6.touch;
       var props = {
         style: {
           height: headerHeight,
@@ -1380,15 +1823,18 @@ var RTableUnit = /*#__PURE__*/function (_Component3) {
 
       var resizeProps = _defineProperty({
         className: 'aio-table-resize',
+        style: {
+          cursor: column.resizable ? 'col-resize' : 'default'
+        },
         draggable: false
       }, touch ? 'onTouchStart' : 'onMouseDown', function (e) {
-        return _this12.resizeDown(e, column);
+        return column.resizable ? _this12.resizeDown(e, column) : undefined;
       });
 
       var titleProps = {
         className: 'aio-table-title-text',
         style: {
-          justifyContent: column.center ? 'center' : undefined,
+          justifyContent: column.titleJustify !== false ? 'center' : undefined,
           cursor: column.movable === false ? undefined : 'move'
         },
         draggable: column.movable !== false,
@@ -1404,19 +1850,16 @@ var RTableUnit = /*#__PURE__*/function (_Component3) {
             return;
           }
 
-          if (_this12.startColumnSwap === _this12.endColumnSwap) {
+          if (_this12.startColumnSwap === undefined || _this12.startColumnSwap === _this12.endColumnSwap) {
             return;
           }
 
           var temp = columns[_this12.startColumnSwap];
           columns[_this12.startColumnSwap] = columns[_this12.endColumnSwap];
           columns[_this12.endColumnSwap] = temp;
-
-          if (onChange) {
-            onChange({
-              columns: columns
-            });
-          }
+          SetState({
+            columns: columns
+          });
         }
       };
       return /*#__PURE__*/_react.default.createElement("div", props, /*#__PURE__*/_react.default.createElement(RTableFilter, {
@@ -1426,9 +1869,9 @@ var RTableUnit = /*#__PURE__*/function (_Component3) {
   }, {
     key: "resizeDown",
     value: function resizeDown(e, column) {
-      var _this$context6 = this.context,
-          touch = _this$context6.touch,
-          getClient = _this$context6.getClient;
+      var _this$context7 = this.context,
+          touch = _this$context7.touch,
+          getClient = _this$context7.getClient;
       (0, _jquery.default)(window).bind(touch ? 'touchmove' : 'mousemove', _jquery.default.proxy(this.resizeMove, this));
       (0, _jquery.default)(window).bind(touch ? 'touchend' : 'mouseup', _jquery.default.proxy(this.resizeUp, this));
       this.resizeDetails = {
@@ -1442,9 +1885,9 @@ var RTableUnit = /*#__PURE__*/function (_Component3) {
   }, {
     key: "resizeMove",
     value: function resizeMove(e) {
-      var _this$context7 = this.context,
-          rtl = _this$context7.rtl,
-          getClient = _this$context7.getClient;
+      var _this$context8 = this.context,
+          rtl = _this$context8.rtl,
+          getClient = _this$context8.getClient;
       var Client = getClient(e);
       var _this$resizeDetails2 = this.resizeDetails,
           client = _this$resizeDetails2.client,
@@ -1471,27 +1914,46 @@ var RTableUnit = /*#__PURE__*/function (_Component3) {
       var touch = this.context.touch;
       (0, _jquery.default)(window).unbind(touch ? 'touchmove' : 'mousemove', this.resizeMove);
       (0, _jquery.default)(window).unbind(touch ? 'touchend' : 'mouseup', this.resizeUp);
-      var _this$context8 = this.context,
-          columns = _this$context8.columns,
-          _this$context8$onChan = _this$context8.onChange,
-          onChange = _this$context8$onChan === void 0 ? function () {} : _this$context8$onChan;
+      var _this$context9 = this.context,
+          columns = _this$context9.columns,
+          SetState = _this$context9.SetState;
       var _this$resizeDetails3 = this.resizeDetails,
           index = _this$resizeDetails3.index,
           newWidth = _this$resizeDetails3.newWidth;
-      columns[index].width = newWidth;
-      onChange({
+      var column = columns[index];
+      column.width = newWidth;
+
+      if (column.storageKey) {
+        column._storageObj.width = newWidth;
+        localStorage.setItem('aio-table-column-storage-' + column.storageKey, JSON.stringify(column._storageObj));
+      }
+
+      SetState({
         columns: columns
       });
     }
   }, {
     key: "keyDown",
     value: function keyDown(e) {
-      if ([37, 38, 39, 40].indexOf(e.keyCode) === -1) {
-        return;
-      }
+      var SetState = this.context.SetState;
 
+      if (e.keyCode === 27) {
+        (0, _jquery.default)('.aio-table-input').blur();
+        SetState({
+          focused: false
+        });
+      } else if ([37, 38, 39, 40].indexOf(e.keyCode) !== -1) {
+        this.arrow(e);
+      }
+    }
+  }, {
+    key: "arrow",
+    value: function arrow(e) {
       var container = (0, _jquery.default)(this.dom.current);
-      var rtl = this.context.rtl;
+      var _this$context10 = this.context,
+          rtl = _this$context10.rtl,
+          focused = _this$context10.focused,
+          SetState = _this$context10.SetState;
       var columns = this.props.columns;
       var inputs = container.find('.aio-table-input');
 
@@ -1501,8 +1963,20 @@ var RTableUnit = /*#__PURE__*/function (_Component3) {
 
       var focusedInput = inputs.filter(':focus');
 
-      if (focusedInput.length === 0) {
-        inputs.eq(0).focus().select();
+      if (focused === false) {
+        var inputCells = (0, _jquery.default)('.aio-table-cell-input');
+
+        if (inputCells.length) {
+          var cell = inputCells.eq(0);
+          var cellId = cell.attr('cellid');
+          SetState({
+            focused: cellId
+          });
+          setTimeout(function () {
+            (0, _jquery.default)('.aio-table-cell-input[cellid=' + cellId + '] .aio-table-input').focus().select();
+          }, 10);
+        }
+
         return;
       }
 
@@ -1561,29 +2035,50 @@ var RTableUnit = /*#__PURE__*/function (_Component3) {
       };
     }
   }, {
-    key: "render",
-    value: function render() {
+    key: "card",
+    value: function card() {
       var _this13 = this;
 
-      var _this$context9 = this.context,
-          indent = _this$context9.indent,
-          _onMouseEnter = _this$context9.onMouseEnter,
-          _onScroll = _this$context9.onScroll,
-          rowHeight = _this$context9.rowHeight,
-          groups = _this$context9.groups,
-          getLoading = _this$context9.getLoading;
-      var _this$props8 = this.props,
-          rows = _this$props8.rows,
-          id = _this$props8.id,
-          index = _this$props8.index,
-          type = _this$props8.type;
+      var _this$context11 = this.context,
+          indent = _this$context11.indent,
+          _onMouseEnter = _this$context11.onMouseEnter,
+          _onScroll = _this$context11.onScroll,
+          rowHeight = _this$context11.rowHeight,
+          _this$context11$cardG = _this$context11.cardGap,
+          cardGap = _this$context11$cardG === void 0 ? 0 : _this$context11$cardG,
+          getLoading = _this$context11.getLoading,
+          cardTemplate = _this$context11.cardTemplate,
+          _this$context11$cardR = _this$context11.cardRowCount,
+          cardRowCount = _this$context11$cardR === void 0 ? 1 : _this$context11$cardR,
+          rowGap = _this$context11.rowGap,
+          columnGap = _this$context11.columnGap,
+          toggleRow = _this$context11.toggleRow;
+      var _this$props10 = this.props,
+          rows = _this$props10.rows,
+          id = _this$props10.id,
+          index = _this$props10.index;
+      var groupStyle = {
+        gridColumnStart: 1,
+        gridColumnEnd: cardRowCount + 1,
+        height: rowHeight
+      };
+
+      if (cardRowCount === 'auto') {
+        groupStyle.gridColumnStart = undefined;
+        groupStyle.gridColumnEnd = undefined;
+      }
+
       return /*#__PURE__*/_react.default.createElement("div", {
         id: id,
         tabIndex: 0,
         className: "aio-table-unit",
         onKeyDown: this.keyDown.bind(this),
-        style: this.getStyle(),
         ref: this.dom,
+        style: {
+          gridRowGap: rowGap,
+          gridColumnGap: columnGap,
+          gridTemplateColumns: cardRowCount === 'auto' ? undefined : "repeat(".concat(cardRowCount, ",auto)")
+        },
         onMouseEnter: function onMouseEnter() {
           return _onMouseEnter(index);
         },
@@ -1593,47 +2088,95 @@ var RTableUnit = /*#__PURE__*/function (_Component3) {
         onScroll: function onScroll(e) {
           return _onScroll(e, index);
         }
-      }, this.getTitles(), rows && rows.length !== 0 && rows.map(function (row, i) {
-        if (row._groupField) {
+      }, rows && rows.length !== 0 && rows.map(function (row, i) {
+        if (row._groupId) {
           var width = indent * row._level;
           return /*#__PURE__*/_react.default.createElement("div", {
             className: "aio-table-group",
             key: 'group' + i + '-' + index,
-            style: { ..._this13.getFullCellStyle(),
-              height: rowHeight
-            }
-          }, index !== 1 && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+            style: groupStyle
+          }, index !== 1 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
             style: {
-              width: width
+              width: width,
+              flexShrink: 0
             }
-          }), _this13.getGroupToggleIcon(row), row._groupText));
+          }), _this13.getGroupToggleIcon(row), /*#__PURE__*/_react.default.createElement("div", {
+            className: "aio-table-group-text"
+          }, row._groupValue)));
         }
 
-        if (type === 'freeze') {
-          return row.freezeCells.map(function (r, j) {
-            return /*#__PURE__*/_react.default.createElement(RTableCell, _extends({
-              key: i + '-' + j + '-' + index
-            }, r, {
-              relativeFilter: row.show === 'relativeFilter'
-            }));
-          });
-        }
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: i + '-' + index,
+          className: "aio-table-card"
+        }, cardTemplate(row.row, function () {
+          return toggleRow(row.row);
+        }));
+      }), rows && rows.length === 0 && this.getNoData(), !rows && getLoading());
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this14 = this;
 
-        if (type === 'unFreeze') {
-          return row.unFreezeCells.map(function (r, j) {
-            return /*#__PURE__*/_react.default.createElement(RTableCell, _extends({
-              key: i + '-' + j + '-' + index
-            }, r, {
-              relativeFilter: row.show === 'relativeFilter'
-            }));
-          });
+      if (this.context.cardTemplate) {
+        return this.card();
+      }
+
+      var _this$context12 = this.context,
+          indent = _this$context12.indent,
+          _onMouseEnter2 = _this$context12.onMouseEnter,
+          _onScroll2 = _this$context12.onScroll,
+          rowHeight = _this$context12.rowHeight,
+          groups = _this$context12.groups,
+          getLoading = _this$context12.getLoading,
+          cardTemplate = _this$context12.cardTemplate;
+      var _this$props11 = this.props,
+          rows = _this$props11.rows,
+          id = _this$props11.id,
+          index = _this$props11.index,
+          type = _this$props11.type;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        id: id,
+        tabIndex: 0,
+        className: "aio-table-unit",
+        onKeyDown: this.keyDown.bind(this),
+        style: this.getStyle(),
+        ref: this.dom,
+        onMouseEnter: function onMouseEnter() {
+          return _onMouseEnter2(index);
+        },
+        onMouseDown: function onMouseDown() {
+          return _onMouseEnter2(index);
+        },
+        onScroll: function onScroll(e) {
+          return _onScroll2(e, index);
+        }
+      }, this.getTitles(), rows && rows.length !== 0 && rows.map(function (row, i) {
+        if (row._groupId) {
+          var width = indent * row._level;
+          return /*#__PURE__*/_react.default.createElement("div", {
+            className: "aio-table-group",
+            key: 'group' + i + '-' + index,
+            style: { ..._this14.getFullCellStyle(),
+              height: rowHeight
+            }
+          }, index !== 1 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+            style: {
+              width: width,
+              flexShrink: 0
+            }
+          }), _this14.getGroupToggleIcon(row), /*#__PURE__*/_react.default.createElement("div", {
+            className: "aio-table-group-text"
+          }, row._groupValue)));
         }
 
-        return row.cells.map(function (r, j) {
-          return /*#__PURE__*/_react.default.createElement(RTableCell, _extends({
-            key: i + '-' + j + '-' + index
+        return row[type].map(function (r, j) {
+          var id = i + '-' + j + '-' + index;
+          return /*#__PURE__*/_react.default.createElement(AIOTableCell, _extends({
+            key: id,
+            cellId: id
           }, r, {
-            relativeFilter: row.show === 'relativeFilter'
+            row: row.row
           }));
         });
       }), rows && rows.length === 0 && this.getNoData(), !rows && getLoading());
@@ -1643,73 +2186,74 @@ var RTableUnit = /*#__PURE__*/function (_Component3) {
   return RTableUnit;
 }(_react.Component);
 
-_defineProperty(RTableUnit, "contextType", RTableContext);
+_defineProperty(RTableUnit, "contextType", AioTableContext);
 
-var RTableCell = /*#__PURE__*/function (_Component4) {
-  _inherits(RTableCell, _Component4);
+var AIOTableCell = /*#__PURE__*/function (_Component4) {
+  _inherits(AIOTableCell, _Component4);
 
-  var _super4 = _createSuper(RTableCell);
+  var _super4 = _createSuper(AIOTableCell);
 
-  function RTableCell(props) {
-    var _this14;
+  function AIOTableCell(props) {
+    var _this15;
 
-    _classCallCheck(this, RTableCell);
+    _classCallCheck(this, AIOTableCell);
 
-    _this14 = _super4.call(this, props);
-    _this14.dom = /*#__PURE__*/(0, _react.createRef)();
-    var value = _this14.props.value;
-    _this14.state = {
+    _this15 = _super4.call(this, props);
+    _this15.dom = /*#__PURE__*/(0, _react.createRef)();
+    var value = _this15.props.value;
+    _this15.state = {
       value: value,
       error: false,
       prevValue: value
     };
-    return _this14;
+    return _this15;
   }
 
-  _createClass(RTableCell, [{
-    key: "getPrev",
-    value: function getPrev(row, column) {
-      if (!column.prev) {
+  _createClass(AIOTableCell, [{
+    key: "getBefore",
+    value: function getBefore(row, column) {
+      if (!column.before) {
         return '';
       }
 
-      var prev = typeof column.prev === 'function' ? column.prev(row, column) : column.prev;
-      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      var before = typeof column.before === 'function' ? column.before(row, column) : column.before;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
         className: "aio-table-icon"
-      }, prev), this.context.getGap());
+      }, before), this.context.getGap());
     }
   }, {
-    key: "getNext",
-    value: function getNext(row, column) {
-      if (!column.next) {
+    key: "getAfter",
+    value: function getAfter(row, column) {
+      if (!column.after) {
         return '';
       }
 
-      var next = typeof column.next === 'function' ? column.next(row, column) : column.next;
-      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      var after = typeof column.after === 'function' ? column.after(row, column) : column.after;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
         style: {
           flex: 1
         }
       }), /*#__PURE__*/_react.default.createElement("div", {
         className: "aio-table-icon"
-      }, next));
+      }, after));
     }
   }, {
     key: "getStyle",
     value: function getStyle(column) {
+      var _column$padding2 = column.padding,
+          padding = _column$padding2 === void 0 ? '36px' : _column$padding2,
+          template = column.template,
+          _column$minWidth = column.minWidth,
+          minWidth = _column$minWidth === void 0 ? '30px' : _column$minWidth;
       var rowHeight = this.context.rowHeight;
-      var _column$minWidth = column.minWidth,
-          minWidth = _column$minWidth === void 0 ? '30px' : _column$minWidth,
-          justify = column.justify;
       var style = {
         height: rowHeight,
-        overflow: column.template ? undefined : 'hidden',
-        minWidth: minWidth,
-        justifyContent: justify ? 'center' : undefined
+        overflow: template ? undefined : 'hidden',
+        minWidth: minWidth
       };
 
       if (column.template === 'gantt') {
-        style.padding = "0 ".concat(column.padding || '36px');
+        style.padding = "0 ".concat(padding);
       }
 
       return style;
@@ -1717,9 +2261,12 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
   }, {
     key: "getClassName",
     value: function getClassName(row, column) {
-      var relativeFilter = this.props.relativeFilter;
       var className = 'aio-table-cell';
 
+      if (column.template) {
+        className += ' aio-table-cell-template';
+      }
+
       if (column.template === 'gantt') {
         className += ' aio-table-cell-gantt';
       }
@@ -1728,11 +2275,11 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
         className += ' ' + column.className;
       }
 
-      if (column.input) {
+      if (column.inlineEdit) {
         className += ' aio-table-cell-input';
       }
 
-      if (relativeFilter) {
+      if (row._show === 'relativeFilter') {
         className += ' aio-table-relative-filter';
       }
 
@@ -1741,13 +2288,9 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
   }, {
     key: "getToggleIcon",
     value: function getToggleIcon(row) {
-      var _this$context10 = this.context,
-          rtl = _this$context10.rtl,
-          onChange = _this$context10.onChange,
-          model = _this$context10.model,
-          id = _this$context10.id,
-          openDictionary = _this$context10.openDictionary,
-          SetState = _this$context10.SetState;
+      var _this$context13 = this.context,
+          rtl = _this$context13.rtl,
+          toggleRow = _this$context13.toggleRow;
       var icon;
 
       if (!row._childsLength) {
@@ -1768,71 +2311,40 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
         });
       }
 
-      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
         className: "aio-table-toggle",
         onClick: function onClick() {
-          if (row._id !== undefined) {
-            openDictionary[row._id] = !openDictionary[row._id];
-
-            if (id !== undefined) {
-              localStorage.setItem('r table ' + id, JSON.stringify(openDictionary));
-            }
-
-            SetState({
-              openDictionary: openDictionary
-            });
-          } else {
-            row._opened = !row._opened;
-            onChange({
-              model: model
-            });
-          }
+          return toggleRow(row);
         }
       }, icon), this.context.getGap());
     }
-  }, {
-    key: "getCheckbox",
-    value: function getCheckbox(row, column) {
-      var _index = column._index,
-          _column$onChange = column.onChange,
-          onChange = _column$onChange === void 0 ? function () {} : _column$onChange,
-          _column$disabled = column.disabled,
-          disabled = _column$disabled === void 0 ? function () {
-        return false;
-      } : _column$disabled;
-      row._values[_index] = row._values[_index] === true ? true : false;
-      var value = row._values[_index];
-      var isDisabled = disabled(row);
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: 'aio-table-checkbox' + (isDisabled ? ' disabled' : ''),
-        onClick: function onClick() {
-          if (!isDisabled) {
-            onChange(row, !value);
-          }
-        }
-      }, /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-        path: value ? _js.mdiCheckboxMarkedOutline : _js.mdiCheckboxBlankOutline,
-        size: 1
-      }));
-    }
   }, {
     key: "getContent",
     value: function getContent(row, column, value) {
+      var focused = this.context.focused;
       var content = '';
+      var template = typeof column.template === 'function' ? column.template(row, column) : column.template;
 
-      if (column.template === 'checkbox') {
-        content = this.getCheckbox(row, column);
-      } else if (column.template === 'gantt') {
-        var _this$context11 = this.context,
-            getValueByField = _this$context11.getValueByField,
-            rtl = _this$context11.rtl;
-        var keys = column.keys,
-            _column$color = column.color,
-            color = _column$color === void 0 ? '#69bedb' : _column$color,
-            _column$progressColor = column.progressColor,
-            progressColor = _column$progressColor === void 0 ? '#1891be' : _column$progressColor,
-            _column$flags = column.flags,
-            flags = _column$flags === void 0 ? [] : _column$flags,
+      if (template === 'slider') {
+        content = /*#__PURE__*/_react.default.createElement(AIOSlider, {
+          row: row,
+          column: column
+        });
+      } else if (template === 'gantt') {
+        var rtl = this.context.rtl;
+        var getKeys = column.getKeys,
+            _column$getColor = column.getColor,
+            getColor = _column$getColor === void 0 ? function () {
+          return '#fff';
+        } : _column$getColor,
+            _column$getBackground = column.getBackgroundColor,
+            getBackgroundColor = _column$getBackground === void 0 ? function () {
+          return '#69bedb';
+        } : _column$getBackground,
+            _column$getFlags = column.getFlags,
+            getFlags = _column$getFlags === void 0 ? function () {
+          return [];
+        } : _column$getFlags,
             _column$getProgress = column.getProgress,
             getProgress = _column$getProgress === void 0 ? function () {
           return false;
@@ -1840,64 +2352,115 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
             _column$getText = column.getText,
             getText = _column$getText === void 0 ? function () {
           return false;
-        } : _column$getText;
+        } : _column$getText,
+            getStart = column.getStart,
+            getEnd = column.getEnd;
+
+        if (typeof getStart !== 'function') {
+          console.error('aio table => gantt column => column getStart property is not a function');
+          return '';
+        }
+
+        if (typeof getEnd !== 'function') {
+          console.error('aio table => gantt column => column getEnd property is not a function');
+          return '';
+        }
+
+        if (typeof getKeys !== 'function') {
+          console.error('aio table => gantt column => column getKeys property is not a function');
+          return '';
+        }
+
+        var keys = getKeys();
+
+        if (!Array.isArray(keys)) {
+          console.error('aio table => gantt column => column getKeys property must return an array of strings');
+          return '';
+        }
+
+        var color = getColor(row);
+        var backgroundColor = getBackgroundColor(row);
         var progress = getProgress(row);
         var text = getText(row);
-        var startIndex = keys.indexOf(getValueByField(row, column.startField));
-        var endIndex = keys.indexOf(getValueByField(row, column.endField));
-        var background = progress === false ? color : "linear-gradient(to ".concat(rtl ? 'left' : 'right', ",").concat(progressColor, " 0%,").concat(progressColor, " ").concat(progress, "% ,").concat(color, " ").concat(progress, "%,").concat(color, " 100%)");
+        var startIndex = keys.indexOf(getStart(row));
+        var endIndex = keys.indexOf(getEnd(row));
+        var background = progress === false ? color : "linear-gradient(to ".concat(rtl ? 'left' : 'right', ",rgba(0,0,0,.1) 0%,rgba(0,0,0,.1) ").concat(progress, "% ,transparent ").concat(progress, "%,transparent 100%)");
+        var flags = getFlags();
         content = /*#__PURE__*/_react.default.createElement(_rRangeSlider.default, {
           start: 0,
-          editValue: function editValue(_ref) {
-            var value = _ref.value;
+          editValue: function editValue(value) {
             return keys[value];
           },
           end: keys.length - 1,
-          points: [{
-            value: startIndex
-          }, {
-            value: endIndex,
-            fillStyle: {
-              background: background
-            },
-            text: text === false ? undefined : text
-          }],
-          pin: {
-            step: 1,
-            style: {
+          points: [startIndex, endIndex],
+          fillStyle: function fillStyle(index) {
+            if (index === 1) {
+              return {
+                background: backgroundColor,
+                backgroundImage: background
+              };
+            }
+          },
+          getText: function getText(index) {
+            if (index === 1 && text) {
+              return text;
+            }
+          },
+          textStyle: function textStyle() {
+            return {
+              color: color
+            };
+          },
+          scaleStep: 1,
+          scaleStyle: function scaleStyle(value) {
+            var flag = flags.filter(function (o) {
+              return keys.indexOf(o.value) === value;
+            })[0];
+
+            if (flag) {
+              return {
+                background: flag.color,
+                height: '100%',
+                top: 0,
+                zIndex: 100
+              };
+            }
+
+            return {
               height: '100%',
               top: 0,
               opacity: .4
-            },
-            items: flags.map(function (_ref2) {
-              var index = _ref2.index,
-                  value = _ref2.value,
-                  _ref2$color = _ref2.color,
-                  color = _ref2$color === void 0 ? 'red' : _ref2$color;
-              var flag = index !== undefined ? index : keys.indexOf(value);
-              return {
-                value: flag,
-                style: {
-                  background: color,
-                  height: '100%',
-                  top: 0
-                }
-              };
-            })
+            };
           },
-          lineStyle: {
-            opacity: .4
+          lineStyle: function lineStyle() {
+            return {
+              opacity: .4
+            };
           }
         });
-      } else if (column.template) {
-        content = column.template(row, column);
-      } else if (column.input) {
+      } else if (template && column.inlineEdit) {
+        if (!focused) {
+          content = template;
+        } else {
+          content = this.getInput(row, column);
+        }
+      } else if (template) {
+        content = template;
+      } else if (column.inlineEdit) {
         content = this.getInput(row, column);
-      } else if (column.field) {
+      } else if (column.getValue) {
         content = value;
       }
 
       if (column.subText) {
+        var subText;
+
+        try {
+          subText = column.subText(row);
+        } catch {
+          subText = '';
+        }
+
         return /*#__PURE__*/_react.default.createElement("div", {
           style: {
             flex: 1,
@@ -1923,7 +2486,7 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
             flex: 1,
             position: 'relative'
           }
-        }, column.subText(row)));
+        }, subText));
       }
 
       return content;
@@ -1931,39 +2494,47 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
   }, {
     key: "getInput",
     value: function getInput(row, column) {
-      var _this15 = this;
+      var _this16 = this;
 
-      var type = column.input.type;
+      var type = column.inlineEdit.type;
       var value = this.state.value;
-      var props = { ...column.input,
+      var _column$inlineEdit$di = column.inlineEdit.disabled,
+          disabled = _column$inlineEdit$di === void 0 ? function () {
+        return false;
+      } : _column$inlineEdit$di;
+      var props = { ...column.inlineEdit,
         className: 'aio-table-input',
         rowindex: row._renderIndex,
         colindex: column._renderIndex,
-        value: value
+        value: value === null ? '' : value,
+        disabled: disabled(row)
       };
 
       if (type === 'text' || type === 'number') {
         return /*#__PURE__*/_react.default.createElement("div", {
-          className: "aio-table-input-container"
+          className: 'aio-table-input-container'
         }, /*#__PURE__*/_react.default.createElement("input", _extends({}, props, {
+          style: {
+            textAlign: column.justify ? 'center' : undefined
+          },
           onChange: function onChange(e) {
-            return _this15.setState({
+            return _this16.setState({
               value: e.target.value
             });
           },
           onBlur: async function onBlur(e) {
-            _this15.setState({
+            _this16.setState({
               loading: true
             });
 
-            var error = await column.input.onChange(value, row);
+            var error = await column.inlineEdit.onChange(row, type === 'number' ? parseFloat(value) : value);
 
-            _this15.setState({
+            _this16.setState({
               loading: false
             });
 
             if (typeof error === 'string') {
-              _this15.setState({
+              _this16.setState({
                 error: error
               });
             }
@@ -1974,37 +2545,48 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
       }
 
       if (type === 'select') {
+        if (!column.inlineEdit.options) {
+          console.error('aio table => missing options property of column inlineEdit with type="select"');
+          return '';
+        }
+
+        if (!Array.isArray(column.inlineEdit.options)) {
+          console.error('aio table => options property of column inlineEdit with type="select" must be an array of objects . each object must have text and value property!!!');
+          return '';
+        }
+
         return /*#__PURE__*/_react.default.createElement("div", {
           className: "aio-table-input-container"
         }, /*#__PURE__*/_react.default.createElement("select", _extends({}, props, {
           onFocus: function onFocus() {
-            return _this15.focus = true;
+            return _this16.focus = true;
           },
           onBlur: function onBlur() {
-            return _this15.focus = false;
+            return _this16.focus = false;
           },
           onChange: async function onChange(e) {
             var value = e.target.value;
 
-            _this15.setState({
+            _this16.setState({
               loading: true,
               value: value
             });
 
-            var error = await column.input.onChange(e.target.value, row);
+            var error = await column.inlineEdit.onChange(row, e.target.value);
 
-            _this15.setState({
+            _this16.setState({
               loading: false
             });
 
             if (typeof error === 'string') {
-              _this15.setState({
+              _this16.setState({
                 error: error
               });
             }
           }
-        }), column.input.options.map(function (o) {
+        }), column.inlineEdit.options.map(function (o, i) {
           return /*#__PURE__*/_react.default.createElement("option", {
+            key: i,
             value: o.value
           }, o.text);
         })), /*#__PURE__*/_react.default.createElement("div", {
@@ -2012,6 +2594,7 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
         }));
       }
 
+      console.error('aio table => missing type property of column input');
       return '';
     }
   }, {
@@ -2019,23 +2602,28 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
     value: function componentDidUpdate() {
       var column = this.props.column;
 
-      if (column.input && column.input.type === 'select' && this.focus) {
+      if (column.inlineEdit && column.inlineEdit.type === 'select' && this.focus) {
         (0, _jquery.default)(this.dom.current).find('.aio-table-input').focus();
       }
     }
   }, {
     key: "render",
     value: function render() {
-      var _this16 = this;
+      var _this17 = this;
 
-      var _this$context12 = this.context,
-          indent = _this$context12.indent,
-          onChange = _this$context12.onChange,
-          cubes2 = _this$context12.cubes2;
-      var _this$props9 = this.props,
-          row = _this$props9.row,
-          column = _this$props9.column,
-          value = _this$props9.value;
+      var _this$context14 = this.context,
+          indent = _this$context14.indent,
+          cubes2 = _this$context14.cubes2,
+          focused = _this$context14.focused,
+          SetState = _this$context14.SetState,
+          onDrag = _this$context14.onDrag,
+          _onDrop = _this$context14.onDrop,
+          onSwap = _this$context14.onSwap;
+      var _this$props12 = this.props,
+          row = _this$props12.row,
+          column = _this$props12.column,
+          value = _this$props12.value,
+          cellId = _this$props12.cellId;
 
       if (this.state.prevValue !== value) {
         this.setState({
@@ -2044,13 +2632,13 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
         });
       }
 
-      var _this$state = this.state,
-          error = _this$state.error,
-          loading = _this$state.loading;
+      var _this$state3 = this.state,
+          error = _this$state3.error,
+          loading = _this$state3.loading;
       var content = this.getContent(row, column, value);
-      var prev = this.getPrev(row, column);
-      var next = this.getNext(row, column);
-      var showToggleIcon = column.treeMode && (row._id !== undefined || onChange);
+      var before = this.getBefore(row, column);
+      var after = this.getAfter(row, column);
+      var showToggleIcon = column.treeMode;
       var cell;
 
       if (loading) {
@@ -2061,25 +2649,33 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
         cell = /*#__PURE__*/_react.default.createElement("div", {
           className: "aio-table-error",
           onClick: function onClick() {
-            _this16.setState({
-              value: _this16.props.value,
+            _this17.setState({
+              value: _this17.props.value,
               error: false
             });
           }
         }, error);
       } else {
-        cell = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, column.treeMode && /*#__PURE__*/_react.default.createElement("div", {
+        var style = {
+          justifyContent: column.justify !== false && !column.treeMode ? 'center' : undefined
+        };
+        cell = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, column.treeMode && /*#__PURE__*/_react.default.createElement("div", {
           className: "aio-table-indent",
           style: {
             width: row._level * indent
           }
-        }), showToggleIcon && this.getToggleIcon(row), prev, content, next);
+        }), showToggleIcon && this.getToggleIcon(row), before, /*#__PURE__*/_react.default.createElement("div", {
+          className: "aio-table-content",
+          style: style
+        }, content), after);
       }
 
       return /*#__PURE__*/_react.default.createElement("div", {
         key: row._index + '-' + column._index,
         tabIndex: 0,
         ref: this.dom,
+        cellid: cellId,
+        title: typeof content === 'string' ? content : '',
         rowindex: row._renderIndex,
         colindex: column._renderIndex,
         childindex: row._childIndex,
@@ -2089,41 +2685,255 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
         childslength: row._childsLength,
         style: this.getStyle(column),
         className: this.getClassName(row, column),
-        onClick: function onClick(e) {}
+        draggable: typeof onSwap === 'function' && column.swap,
+        onDragOver: function onDragOver(e) {
+          return e.preventDefault();
+        },
+        onDragStart: function onDragStart() {
+          return onDrag(row);
+        },
+        onDrop: function onDrop() {
+          return _onDrop(row);
+        },
+        onClick: function onClick(e) {
+          if (column.inlineEdit) {
+            if (focused !== cellId) {
+              SetState({
+                focused: cellId
+              });
+              setTimeout(function () {
+                return (0, _jquery.default)('.aio-table-input:focus').select();
+              }, 10);
+            }
+          }
+        }
       }, cell);
     }
   }]);
 
-  return RTableCell;
+  return AIOTableCell;
 }(_react.Component);
 
-_defineProperty(RTableCell, "contextType", RTableContext);
+_defineProperty(AIOTableCell, "contextType", AioTableContext);
+
+var AIOSlider = /*#__PURE__*/function (_Component5) {
+  _inherits(AIOSlider, _Component5);
+
+  var _super5 = _createSuper(AIOSlider);
+
+  function AIOSlider(props) {
+    var _this18;
+
+    _classCallCheck(this, AIOSlider);
+
+    _this18 = _super5.call(this, props);
+    var _this18$props = _this18.props,
+        column = _this18$props.column,
+        row = _this18$props.row;
+    var getValue = column.getValue;
+    var value = getValue(row);
+
+    if (!Array.isArray(value)) {
+      value = [value];
+    }
+
+    _this18.state = {
+      value: value
+    };
+    _this18.updateMode = 'outside';
+    return _this18;
+  }
+
+  _createClass(AIOSlider, [{
+    key: "getBackground",
+    value: function getBackground(length, i, color) {
+      if (length === 1 && i === 0) {
+        return color;
+      }
+
+      if (length > 1 && i > 0 && i < length) {
+        return color;
+      }
+
+      return 'transparent';
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this19 = this;
+
+      var _this$props13 = this.props,
+          column = _this$props13.column,
+          row = _this$props13.row;
+      var getValue = column.getValue,
+          _column$getStart = column.getStart,
+          getStart = _column$getStart === void 0 ? function () {
+        return 0;
+      } : _column$getStart,
+          _column$getEnd = column.getEnd,
+          getEnd = _column$getEnd === void 0 ? function () {
+        return 100;
+      } : _column$getEnd,
+          _column$getColor2 = column.getColor,
+          getColor = _column$getColor2 === void 0 ? function () {
+        return 'dodgerblue';
+      } : _column$getColor2,
+          onChange = column.onChange,
+          _column$getMin = column.getMin,
+          getMin = _column$getMin === void 0 ? function () {} : _column$getMin,
+          _column$getMax = column.getMax,
+          getMax = _column$getMax === void 0 ? function () {} : _column$getMax,
+          _column$editValue = column.editValue,
+          editValue = _column$editValue === void 0 ? function (value) {
+        return value;
+      } : _column$editValue,
+          _column$getStep = column.getStep,
+          getStep = _column$getStep === void 0 ? function () {} : _column$getStep;
+      var value = this.state.value;
+      var Value = getValue(row);
+
+      if (Value === false) {
+        return null;
+      }
+
+      if (!Array.isArray(Value)) {
+        Value = [Value];
+      }
+
+      if (this.updateMode === 'onChange') {
+        this.updateMode = 'outside';
+        this.setState({
+          value: Value
+        });
+        return null;
+      } else if (this.updateMode === 'outside' && JSON.stringify(Value) !== JSON.stringify(value)) {
+        this.setState({
+          value: Value
+        });
+        return null;
+      }
+
+      var start = getStart(row);
+      var end = getEnd(row);
+      var color = getColor(row);
+      var min = getMin(row);
+      var max = getMax(row);
+      var step = getStep(row);
+      var pinItems = [];
+
+      if (min !== undefined) {
+        pinItems.push({
+          value: min,
+          style: {
+            height: 10
+          }
+        });
+      }
+
+      if (max !== undefined) {
+        pinItems.push({
+          value: max,
+          style: {
+            height: 10
+          }
+        });
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, value.length > 1 && /*#__PURE__*/_react.default.createElement("div", {
+        className: "aio-table-slider-value"
+      }, editValue(value[0])), /*#__PURE__*/_react.default.createElement(_rRangeSlider.default, {
+        start: start,
+        end: end,
+        min: min,
+        max: max,
+        step: step,
+        showValue: false,
+        points: value.map(function (o, i) {
+          return {
+            value: o,
+            fillStyle: {
+              height: '6px',
+              borderRadius: '24px',
+              background: _this19.getBackground(value.length, i, color)
+            }
+          };
+        }),
+        pointStyle: {
+          opacity: 0,
+          height: 24,
+          width: 24
+        },
+        lineStyle: {
+          height: 6,
+          borderRadius: '24px',
+          boxShadow: 'inset 0px 1px 3px 0px rgba(0,0,0,.1)',
+          background: '#d5d5d5'
+        },
+        editable: typeof onChange === 'function',
+        onchange: function onchange(_ref) {
+          var points = _ref.points;
+
+          if (!onChange) {
+            return;
+          }
+
+          _this19.updateMode = 'onChange';
+          onChange(row, points.length > 1 ? points.map(function (p) {
+            return p.value;
+          }) : points[0].value);
+        },
+        pin: pinItems.length === 0 ? undefined : {
+          items: pinItems
+        },
+        ondrag: function ondrag(_ref2) {
+          var points = _ref2.points;
+          _this19.updateMode = 'onDrag';
+
+          _this19.setState({
+            value: points.map(function (p) {
+              return p.value;
+            })
+          });
+        }
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: "aio-table-slider-value"
+      }, editValue(value.length > 1 ? value[1] : value[0])));
+    }
+  }]);
 
-var RTableFilter = /*#__PURE__*/function (_Component5) {
-  _inherits(RTableFilter, _Component5);
+  return AIOSlider;
+}(_react.Component);
 
-  var _super5 = _createSuper(RTableFilter);
+var RTableFilter = /*#__PURE__*/function (_Component6) {
+  _inherits(RTableFilter, _Component6);
+
+  var _super6 = _createSuper(RTableFilter);
 
   function RTableFilter() {
     _classCallCheck(this, RTableFilter);
 
-    return _super5.apply(this, arguments);
+    return _super6.apply(this, arguments);
   }
 
   _createClass(RTableFilter, [{
     key: "render",
     value: function render() {
-      var _this$context13 = this.context,
-          filterDictionary = _this$context13.filterDictionary,
-          rtl = _this$context13.rtl;
+      var _this$context15 = this.context,
+          filterDictionary = _this$context15.filterDictionary,
+          rtl = _this$context15.rtl;
       var column = this.props.column;
 
       if (!column.filter || column.search) {
         return null;
       }
 
+      if (!filterDictionary[column._index]) {
+        return null;
+      }
+
       var filters = filterDictionary[column._index].items;
       var icon = filters.length ? /*#__PURE__*/_react.default.createElement(_react2.Icon, {
+        className: "has-filter",
         path: _js.mdiFilterMenu,
         size: 0.7
       }) : /*#__PURE__*/_react.default.createElement(_react2.Icon, {
@@ -2132,11 +2942,12 @@ var RTableFilter = /*#__PURE__*/function (_Component5) {
       });
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "aio-table-filter-icon"
-      }, /*#__PURE__*/_react.default.createElement(_rDropdownButton.default, {
+      }, /*#__PURE__*/_react.default.createElement(_aioButton.default, {
+        type: "button",
         rtl: rtl,
         openRelatedTo: ".aio-table",
         text: icon,
-        items: function items() {
+        popOver: function popOver() {
           return /*#__PURE__*/_react.default.createElement(RTableFilterPopup, {
             column: column
           });
@@ -2148,25 +2959,26 @@ var RTableFilter = /*#__PURE__*/function (_Component5) {
   return RTableFilter;
 }(_react.Component);
 
-_defineProperty(RTableFilter, "contextType", RTableContext);
+_defineProperty(RTableFilter, "contextType", AioTableContext);
 
-var RTableFilterPopup = /*#__PURE__*/function (_Component6) {
-  _inherits(RTableFilterPopup, _Component6);
+var RTableFilterPopup = /*#__PURE__*/function (_Component7) {
+  _inherits(RTableFilterPopup, _Component7);
 
-  var _super6 = _createSuper(RTableFilterPopup);
+  var _super7 = _createSuper(RTableFilterPopup);
 
   function RTableFilterPopup() {
     _classCallCheck(this, RTableFilterPopup);
 
-    return _super6.apply(this, arguments);
+    return _super7.apply(this, arguments);
   }
 
   _createClass(RTableFilterPopup, [{
     key: "add",
     value: function add() {
-      var _this$context14 = this.context,
-          filterDictionary = _this$context14.filterDictionary,
-          SetState = _this$context14.SetState;
+      var _this$context16 = this.context,
+          filterDictionary = _this$context16.filterDictionary,
+          SetState = _this$context16.SetState,
+          onChangeFilter = _this$context16.onChangeFilter;
       var column = this.props.column;
 
       filterDictionary[column._index].items.push({
@@ -2174,6 +2986,10 @@ var RTableFilterPopup = /*#__PURE__*/function (_Component6) {
         value: ''
       });
 
+      if (onChangeFilter) {
+        onChangeFilter(filterDictionary);
+      }
+
       SetState({
         filterDictionary: filterDictionary
       });
@@ -2181,13 +2997,13 @@ var RTableFilterPopup = /*#__PURE__*/function (_Component6) {
   }, {
     key: "render",
     value: function render() {
-      var _this17 = this;
+      var _this20 = this;
 
       var column = this.props.column;
-      var _this$context15 = this.context,
-          filterDictionary = _this$context15.filterDictionary,
-          SetState = _this$context15.SetState,
-          translate = _this$context15.translate;
+      var _this$context17 = this.context,
+          filterDictionary = _this$context17.filterDictionary,
+          SetState = _this$context17.SetState,
+          translate = _this$context17.translate;
       var filters = filterDictionary[column._index].items;
       var booleanType = filterDictionary[column._index].booleanType;
       var filterItems = filters.map(function (filter, i) {
@@ -2218,7 +3034,7 @@ var RTableFilterPopup = /*#__PURE__*/function (_Component6) {
       }, /*#__PURE__*/_react.default.createElement("button", {
         className: "aio-table-filter-add",
         onClick: function onClick() {
-          return _this17.add();
+          return _this20.add();
         }
       }, translate('Add'))));
     }
@@ -2227,37 +3043,42 @@ var RTableFilterPopup = /*#__PURE__*/function (_Component6) {
   return RTableFilterPopup;
 }(_react.Component);
 
-_defineProperty(RTableFilterPopup, "contextType", RTableContext);
+_defineProperty(RTableFilterPopup, "contextType", AioTableContext);
 
-var RTableFilterItem = /*#__PURE__*/function (_Component7) {
-  _inherits(RTableFilterItem, _Component7);
+var RTableFilterItem = /*#__PURE__*/function (_Component8) {
+  _inherits(RTableFilterItem, _Component8);
 
-  var _super7 = _createSuper(RTableFilterItem);
+  var _super8 = _createSuper(RTableFilterItem);
 
   function RTableFilterItem(props) {
-    var _this18;
+    var _this21;
 
     _classCallCheck(this, RTableFilterItem);
 
-    _this18 = _super7.call(this, props);
-    var filter = _this18.props.filter;
-    _this18.state = {
+    _this21 = _super8.call(this, props);
+    var filter = _this21.props.filter;
+    _this21.state = {
       value: filter.value,
       prevValue: filter.value
     };
-    return _this18;
+    return _this21;
   }
 
   _createClass(RTableFilterItem, [{
     key: "remove",
     value: function remove(index) {
-      var _this$context16 = this.context,
-          filterDictionary = _this$context16.filterDictionary,
-          SetState = _this$context16.SetState;
+      var _this$context18 = this.context,
+          filterDictionary = _this$context18.filterDictionary,
+          SetState = _this$context18.SetState,
+          onChangeFilter = _this$context18.onChangeFilter;
       var column = this.props.column;
 
       filterDictionary[column._index].items.splice(index, 1);
 
+      if (onChangeFilter) {
+        onChangeFilter(filterDictionary);
+      }
+
       SetState({
         filterDictionary: filterDictionary
       });
@@ -2265,20 +3086,26 @@ var RTableFilterItem = /*#__PURE__*/function (_Component7) {
   }, {
     key: "changeValue",
     value: function changeValue(value) {
-      var _this19 = this;
+      var _this22 = this;
 
+      var onChangeFilter = this.context.onChangeFilter;
       clearTimeout(this.timeout);
       this.setState({
         value: value
       });
       this.timeout = setTimeout(function () {
-        var _this19$context = _this19.context,
-            SetState = _this19$context.SetState,
-            filterDictionary = _this19$context.filterDictionary;
-        var _this19$props = _this19.props,
-            column = _this19$props.column,
-            index = _this19$props.index;
+        var _this22$context = _this22.context,
+            SetState = _this22$context.SetState,
+            filterDictionary = _this22$context.filterDictionary;
+        var _this22$props = _this22.props,
+            column = _this22$props.column,
+            index = _this22$props.index;
         filterDictionary[column._index].items[index].value = value;
+
+        if (onChangeFilter) {
+          onChangeFilter(filterDictionary);
+        }
+
         SetState({
           filterDictionary: filterDictionary
         });
@@ -2287,16 +3114,17 @@ var RTableFilterItem = /*#__PURE__*/function (_Component7) {
   }, {
     key: "render",
     value: function render() {
-      var _this20 = this;
-
-      var _this$context17 = this.context,
-          filterDictionary = _this$context17.filterDictionary,
-          SetState = _this$context17.SetState,
-          translate = _this$context17.translate;
-      var _this$props10 = this.props,
-          filter = _this$props10.filter,
-          column = _this$props10.column,
-          index = _this$props10.index;
+      var _this23 = this;
+
+      var _this$context19 = this.context,
+          filterDictionary = _this$context19.filterDictionary,
+          SetState = _this$context19.SetState,
+          translate = _this$context19.translate,
+          onChangeFilter = _this$context19.onChangeFilter;
+      var _this$props14 = this.props,
+          filter = _this$props14.filter,
+          column = _this$props14.column,
+          index = _this$props14.index;
 
       if (this.state.prevValue !== filter.value) {
         this.setState({
@@ -2307,13 +3135,19 @@ var RTableFilterItem = /*#__PURE__*/function (_Component7) {
       }
 
       var value = this.state.value;
-      var type = column.filter.type;
+      var _column$filter$type = column.filter.type,
+          type = _column$filter$type === void 0 ? 'text' : _column$filter$type;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "aio-table-filter-item"
       }, /*#__PURE__*/_react.default.createElement("select", {
         value: filter.operator,
         onChange: function onChange(e) {
           filterDictionary[column._index].items[index].operator = e.target.value;
+
+          if (onChangeFilter) {
+            onChangeFilter(filterDictionary);
+          }
+
           SetState({
             filterDictionary: filterDictionary
           });
@@ -2338,7 +3172,7 @@ var RTableFilterItem = /*#__PURE__*/function (_Component7) {
         type: type,
         value: value,
         onChange: function onChange(e) {
-          return _this20.changeValue(e.target.value);
+          return _this23.changeValue(e.target.value);
         }
       }), /*#__PURE__*/_react.default.createElement("div", {
         style: {
@@ -2347,7 +3181,7 @@ var RTableFilterItem = /*#__PURE__*/function (_Component7) {
       }), /*#__PURE__*/_react.default.createElement("div", {
         className: "aio-table-filter-remove",
         onClick: function onClick() {
-          return _this20.remove(index);
+          return _this23.remove(index);
         }
       }, /*#__PURE__*/_react.default.createElement(_react2.Icon, {
         path: _js.mdiClose,
@@ -2359,4 +3193,4 @@ var RTableFilterItem = /*#__PURE__*/function (_Component7) {
   return RTableFilterItem;
 }(_react.Component);
 
-_defineProperty(RTableFilterItem, "contextType", RTableContext);
+_defineProperty(RTableFilterItem, "contextType", AioTableContext);