aio-table 3.0.0 → 5.0.2

package/index.js

@@ -11,14 +11,14 @@ 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 _jquery = _interopRequireDefault(require("jquery"));
-
 var _js = require("@mdi/js");
 
+var _jquery = _interopRequireDefault(require("jquery"));
+
 var _rRangeSlider = _interopRequireDefault(require("r-range-slider"));
 
 require("./index.css");
@@ -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; }
 
@@ -67,15 +67,15 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 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;
@@ -84,20 +84,29 @@ var RTable = /*#__PURE__*/function (_Component) {
         id = _this$props.id,
         freezeSize = _this$props.freezeSize,
         sorts = _this$props.sorts,
-        selectives = _this$props.selectives,
         paging = _this$props.paging,
         columns = _this$props.columns;
-    var openDictionary = {};
+    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);
+      }
     }
 
     (0, _jquery.default)(window).bind('click', function (e) {
@@ -117,34 +126,49 @@ var RTable = /*#__PURE__*/function (_Component) {
         focused: false
       });
     });
-    _this.activeTableIndex = 0;
     _this.state = {
       openDictionary: openDictionary,
       filterDictionary: {},
       groupsOpen: {},
       freezeSize: freezeSize,
-      groupDictionary: {},
+      groupDictionary: groupDictionary,
       sorts: sorts,
-      selectives: selectives,
-      selectivesDictionary: [],
       paging: paging,
       columns: columns,
-      focused: false
+      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);
@@ -211,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,
@@ -253,36 +303,28 @@ var RTable = /*#__PURE__*/function (_Component) {
           rows: rows,
           columns: this.unFreezeColumns,
           index: 1,
-          type: "unFreeze"
+          type: "unFreezeCells"
         }));
       }
     }
   }, {
     key: "convertFlat",
-    value: function convertFlat(model) {
-      var _this$props2 = this.props,
-          getRowId = _this$props2.getRowId,
-          getRowParentId = _this$props2.getRowParentId;
-
+    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];
-          row._parentId = getRowParentId(row);
+          var rowParentId = getParentId(row);
 
-          if (row._parentId !== parentId) {
+          if (rowParentId !== parentId) {
             continue;
           }
 
-          var rowId = getRowId(row);
-          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]);
         }
       };
 
@@ -293,13 +335,13 @@ var RTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "sort",
     value: function sort(model) {
-      var _this3 = this;
+      var _this4 = this;
 
       var newModel = model.sort(function (a, b) {
-        for (var i = 0; i < _this3.sorts.length; i++) {
-          var _this3$sorts$i = _this3.sorts[i],
-              getValue = _this3$sorts$i.getValue,
-              type = _this3$sorts$i.type;
+        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);
 
@@ -311,74 +353,25 @@ var RTable = /*#__PURE__*/function (_Component) {
             return 1 * (type === 'dec' ? -1 : 1);
           }
 
-          if (i !== _this3.sorts.length - 1) {
+          if (i !== _this4.sorts.length - 1) {
             continue;
           }
 
           return 0;
         }
+
+        return 0;
       });
       return newModel;
     }
-  }, {
-    key: "getRowBySelectives",
-    value: function getRowBySelectives(row, index) {
-      var _this4 = this;
-
-      var selectives = this.state.selectives;
-
-      if (row.show === false || row.row._level !== 0 || selectives.length === 0) {
-        return;
-      }
-
-      var _loop = function _loop(j) {
-        var selective = selectives[j];
-        var value = selective.getValue(row.row);
-
-        if (index === 0) {
-          selective.items = [];
-          selective.repeat = {};
-          selective.dictionary = selective.dictionary || {};
-        }
-
-        if (selective.dictionary[value] === false) {
-          row.show = false;
-        }
-
-        if (selective.repeat[value]) {
-          return "continue";
-        }
-
-        selective.dictionary[value] = selective.dictionary[value] === undefined ? true : selective.dictionary[value];
-        selective.repeat[value] = true;
-        var text = selective.getText(row.row);
-        selective.items.push({
-          text: text,
-          value: value,
-          checked: selective.dictionary[value],
-          onClick: function onClick() {
-            selective.dictionary[value] = !selective.dictionary[value];
-
-            _this4.setState({
-              selectives: selectives
-            });
-          }
-        });
-      };
-
-      for (var j = 0; j < selectives.length; j++) {
-        var _ret = _loop(j);
-
-        if (_ret === "continue") continue;
-      }
-    }
   }, {
     key: "getRows",
     value: function getRows() {
-      var _this$props3 = this.props,
-          model = _this$props3.model,
-          flat = _this$props3.flat,
-          onChangeSort = _this$props3.onChangeSort;
+      var _this$props2 = this.props,
+          model = _this$props2.model,
+          getRowId = _this$props2.getRowId,
+          getRowParentId = _this$props2.getRowParentId,
+          onChangeSort = _this$props2.onChangeSort;
       var paging = this.state.paging;
 
       if (!model) {
@@ -389,7 +382,7 @@ var RTable = /*#__PURE__*/function (_Component) {
       this.rowRenderIndex = 0;
       this.rowRealIndex = 0;
       this.perf = 0;
-      var convertedModel = flat ? this.convertFlat(_toConsumableArray(model)) : _toConsumableArray(model);
+      var convertedModel = getRowParentId ? this.convertFlat(_toConsumableArray(model), getRowId, getRowParentId, '_childs') : _toConsumableArray(model);
 
       if (this.sorts.length && !onChangeSort) {
         convertedModel = this.sort(convertedModel);
@@ -400,9 +393,8 @@ var RTable = /*#__PURE__*/function (_Component) {
 
       for (var _i = 0; _i < rows.length; _i++) {
         var row = rows[_i];
-        this.getRowBySelectives(row, _i);
 
-        if (row.show === false) {
+        if (row.row._show === false) {
           continue;
         }
 
@@ -444,10 +436,6 @@ var RTable = /*#__PURE__*/function (_Component) {
         }
       }
 
-      if (!paging.sizes) {
-        paging.sizes = [5, 10, 20, 30, 40, 50, 60, 70, 80];
-      }
-
       if (paging.onChange) {
         return roots;
       } //اگر پیجینگ آنچنج داشت تغییری در ردیف ها نده و اجازه بده تغییرات در آنچنج روی مدل ورودی انجام شود
@@ -469,24 +457,25 @@ var RTable = /*#__PURE__*/function (_Component) {
       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);
             }
           }
         }
@@ -494,7 +483,7 @@ var RTable = /*#__PURE__*/function (_Component) {
 
       var newModel = {};
 
-      var _loop2 = function _loop2(i) {
+      var _loop = function _loop(i) {
         var root = roots[i];
         obj = newModel;
         var values = groups.map(function (group) {
@@ -517,24 +506,25 @@ var RTable = /*#__PURE__*/function (_Component) {
       for (var i = 0; i < roots.length; i++) {
         var obj;
 
-        _loop2(i);
+        _loop(i);
       }
 
       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$props4 = this.props,
-          getRowId = _this$props4.getRowId,
-          getRowChilds = _this$props4.getRowChilds,
-          flat = _this$props4.flat;
+      var _this$props3 = this.props,
+          getRowId = _this$props3.getRowId,
+          getRowChilds = _this$props3.getRowChilds,
+          getRowVisible = _this$props3.getRowVisible,
+          getRowParentId = _this$props3.getRowParentId;
 
-      if (flat) {
+      if (getRowParentId) {
         getRowChilds = function getRowChilds(row) {
           return row._childs;
         };
@@ -543,7 +533,11 @@ var RTable = /*#__PURE__*/function (_Component) {
       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;
         }
@@ -565,7 +559,7 @@ var RTable = /*#__PURE__*/function (_Component) {
           var id = getRowId(row);
 
           if (id === undefined) {
-            console.error('RTable => id of row is not defined, please check getRowId 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;
@@ -588,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;
         }
@@ -600,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];
 
@@ -637,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];
 
@@ -719,7 +719,6 @@ var RTable = /*#__PURE__*/function (_Component) {
 
         var obj = {
           key: row._index + ',' + column._index,
-          row: row,
           column: column,
           value: value,
           freeze: column.freeze
@@ -749,12 +748,14 @@ var RTable = /*#__PURE__*/function (_Component) {
         }
       }
 
+      row._show = show;
+
       if (show) {
         var parents = row._getParents();
 
         for (var _i2 = 0; _i2 < parents.length; _i2++) {
-          if (parents[_i2].show === false) {
-            parents[_i2].show = 'relativeFilter';
+          if (parents[_i2]._show === false) {
+            parents[_i2]._show = 'relativeFilter';
           }
         }
       }
@@ -766,20 +767,92 @@ var RTable = /*#__PURE__*/function (_Component) {
       return {
         cells: cells,
         freezeCells: freezeCells,
-        unFreezeCells: unFreezeCells,
-        show: show
+        unFreezeCells: unFreezeCells
       };
     }
   }, {
-    key: "setColumnWidth",
-    value: function setColumnWidth(column) {
-      if (typeof column.width !== 'string') {
-        column.width = 'auto';
+    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;
+        }
       }
 
-      if (column.width !== 'auto' && column.width.indexOf('px') === -1) {
-        column.width = 'auto';
+      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: "showColumnRelativeGroups",
+    value: function showColumnRelativeGroups(column) {
+      var groups = this.props.groups;
+      var groupDictionary = this.state.groupDictionary;
+
+      if (!groups) {
+        return true;
+      }
+
+      if (!groups.length) {
+        return true;
+      }
+
+      if (!column.groupName) {
+        return true;
+      }
+
+      return groupDictionary[column.groupName] !== true;
     }
   }, {
     key: "updateColumns",
@@ -792,24 +865,26 @@ var RTable = /*#__PURE__*/function (_Component) {
           translate = _this$props5.translate,
           groups = _this$props5.groups,
           cardTemplate = _this$props5.cardTemplate,
-          onChangeSort = _this$props5.onChangeSort;
-      var _this$state = this.state,
-          groupDictionary = _this$state.groupDictionary,
-          sorts = _this$state.sorts,
-          selectives = _this$state.selectives,
-          columns = _this$state.columns;
+          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.selectives = [];
       this.freezeMode = false;
       this.visibleColumns = [];
       this.freezeColumns = [];
       this.unFreezeColumns = [];
       this.toolbar = {
-        show: selectives.length !== 0,
+        show: toggleAll,
         toggle: [{
-          text: translate('Show')
+          text: translate('Show Columns')
         }],
+        toggleAll: toggleAll ? this.toggleAll.bind(this) : false,
         freeze: [{
           text: translate('Freeze')
         }],
@@ -819,11 +894,10 @@ var RTable = /*#__PURE__*/function (_Component) {
         sort: [{
           text: translate('Sort')
         }],
-        selectives: selectives,
         searchColumnIndex: false
       };
 
-      var _loop3 = function _loop3(i) {
+      var _loop2 = function _loop2(i) {
         var sort = sorts[i];
         var getValue = sort.getValue,
             _sort$type = sort.type,
@@ -866,7 +940,8 @@ var RTable = /*#__PURE__*/function (_Component) {
             }, /*#__PURE__*/_react.default.createElement(_react2.Icon, {
               path: type === 'dec' ? _js.mdiArrowDown : _js.mdiArrowUp,
               size: 0.8,
-              onClick: function onClick() {
+              onClick: function onClick(e) {
+                e.stopPropagation();
                 sort.type = sort.type === 'dec' ? 'inc' : 'dec';
 
                 _this5.setState({
@@ -898,12 +973,12 @@ var RTable = /*#__PURE__*/function (_Component) {
       };
 
       for (var i = 0; i < sorts.length; i++) {
-        var _ret2 = _loop3(i);
+        var _ret = _loop2(i);
 
-        if (_ret2 === "continue") continue;
+        if (_ret === "continue") continue;
       }
 
-      var _loop4 = function _loop4(_i3) {
+      var _loop3 = function _loop3(_i3) {
         var group = groups[_i3];
         var title = group.title,
             _group$active = group.active,
@@ -937,6 +1012,10 @@ var RTable = /*#__PURE__*/function (_Component) {
             onClick: function onClick() {
               groupDictionary[title] = !groupDictionary[title];
 
+              if (id) {
+                localStorage.setItem('aio table group' + id, JSON.stringify(groupDictionary));
+              }
+
               _this5.setState({
                 groupDictionary: groupDictionary
               });
@@ -946,23 +1025,48 @@ var RTable = /*#__PURE__*/function (_Component) {
       };
 
       for (var _i3 = 0; _i3 < groups.length; _i3++) {
-        var _ret3 = _loop4(_i3);
+        var _ret2 = _loop3(_i3);
 
-        if (_ret3 === "continue") continue;
+        if (_ret2 === "continue") continue;
       }
 
       if (cardTemplate) {
         return;
       }
 
-      var _loop5 = function _loop5(_i4) {
+      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;
+          }
 
-        _this5.setColumnWidth(column);
+          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';
+        }
 
         column._index = _i4;
 
-        if (column.show !== false) {
+        if (show !== false && _this5.showColumnRelativeGroups(column)) {
           _this5.visibleColumns.push(column);
 
           if (freezeMode) {
@@ -998,10 +1102,18 @@ 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;
+
+              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
@@ -1017,7 +1129,7 @@ var RTable = /*#__PURE__*/function (_Component) {
       };
 
       for (var _i4 = 0; _i4 < columns.length; _i4++) {
-        _loop5(_i4);
+        _loop4(_i4);
       }
 
       if (this.freezeColumns.length === 0 || this.unFreezeColumns.length === 0) {
@@ -1029,7 +1141,7 @@ var RTable = /*#__PURE__*/function (_Component) {
     value: function getPaging() {
       var _this6 = this;
 
-      var paging = this.props.paging;
+      var paging = this.state.paging;
 
       if (!paging) {
         return null;
@@ -1039,11 +1151,15 @@ var RTable = /*#__PURE__*/function (_Component) {
           rtl = _this$props6.rtl,
           translate = _this$props6.translate;
       var number = paging.number,
-          sizes = paging.sizes,
+          _paging$sizes = paging.sizes,
+          sizes = _paging$sizes === void 0 ? [1, 5, 10, 20, 30, 40, 50, 60, 70, 80] : _paging$sizes,
           size = paging.size,
-          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') {
@@ -1191,7 +1307,7 @@ var RTable = /*#__PURE__*/function (_Component) {
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          background: '#fff'
+          background: 'transparent'
         }
       }, items);
     }
@@ -1222,11 +1338,48 @@ var RTable = /*#__PURE__*/function (_Component) {
 
       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 _this7 = this;
 
+      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,
@@ -1239,7 +1392,9 @@ var RTable = /*#__PURE__*/function (_Component) {
           _this$props7$attrs = _this$props7.attrs,
           attrs = _this$props7$attrs === void 0 ? {} : _this$props7$attrs,
           cardTemplate = _this$props7.cardTemplate,
-          onChangeFilter = _this$props7.onChangeFilter;
+          onChangeFilter = _this$props7.onChangeFilter,
+          onSwap = _this$props7.onSwap,
+          padding = _this$props7.padding;
       var columns = this.state.columns;
       this.rh = rowHeight;
       this.hh = headerHeight;
@@ -1247,15 +1402,48 @@ var RTable = /*#__PURE__*/function (_Component) {
       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 _this7.setState(obj);
         },
         cubes2: this.cubes2.bind(this),
+        toggleRow: this.toggleRow.bind(this),
         getGap: this.getGap.bind(this),
         onScroll: this.onScroll.bind(this),
         onMouseEnter: this.onMouseEnter.bind(this),
@@ -1269,38 +1457,31 @@ var RTable = /*#__PURE__*/function (_Component) {
         className: 'aio-table' + (className ? ' ' + className : '') + (rtl ? ' rtl' : ''),
         tabIndex: 0,
         ref: this.dom,
-        style: style
-      }, attrs), /*#__PURE__*/_react.default.createElement(RTableToolbar, this.toolbar), !cardTemplate && this.visibleColumns.length === 0 && this.getLoading(), table, /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          height: rowGap
-        }
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          flex: 1,
-          background: '#fff'
+        style: { ...style,
+          padding: padding
         }
-      }), 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,
   sorts: [],
-  groups: [],
-  selectives: []
+  groups: []
 };
 
 var RTableToolbar = /*#__PURE__*/function (_Component2) {
@@ -1309,37 +1490,27 @@ var RTableToolbar = /*#__PURE__*/function (_Component2) {
   var _super2 = _createSuper(RTableToolbar);
 
   function RTableToolbar() {
-    var _this8;
-
     _classCallCheck(this, RTableToolbar);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this8 = _super2.call.apply(_super2, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this8), "state", {
-      searchText: ''
-    });
-
-    return _this8;
+    return _super2.apply(this, arguments);
   }
 
   _createClass(RTableToolbar, [{
     key: "changeSearch",
     value: function changeSearch(value) {
-      var _this9 = this;
+      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 () {
-        var _this9$context = _this9.context,
-            filterDictionary = _this9$context.filterDictionary,
-            SetState = _this9$context.SetState;
-        var searchColumnIndex = _this9.props.searchColumnIndex;
+        var _this8$context = _this8.context,
+            filterDictionary = _this8$context.filterDictionary,
+            SetState = _this8$context.SetState;
+        var searchColumnIndex = _this8.props.searchColumnIndex;
         filterDictionary[searchColumnIndex] = {
           items: value ? [{
             operator: 'contain',
@@ -1350,104 +1521,124 @@ var RTableToolbar = /*#__PURE__*/function (_Component2) {
         SetState({
           filterDictionary: filterDictionary
         });
-      }, 1000);
+      }, time);
     }
   }, {
     key: "render",
     value: function render() {
-      var _this10 = this;
+      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;
+          rtl = _this$context.rtl,
+          toggleAllState = _this$context.toggleAllState,
+          padding = _this$context.padding,
+          _this$context$toolbar = _this$context.toolbarItems,
+          toolbarItems = _this$context$toolbar === void 0 ? [] : _this$context$toolbar;
       var _this$props8 = this.props,
-          show = _this$props8.show,
           toggle = _this$props8.toggle,
           freeze = _this$props8.freeze,
           groupBy = _this$props8.groupBy,
           sort = _this$props8.sort,
           searchColumnIndex = _this$props8.searchColumnIndex,
-          selectives = _this$props8.selectives;
-
-      if (!show) {
-        return null;
-      }
-
+          toggleAll = _this$props8.toggleAll;
       var buttonProps = {
+        type: 'select',
+        caret: false,
         rtl: rtl,
-        className: 'aio-table-toolbar-dropdown',
+        className: 'aio-table-toolbar-button',
         animate: true
       };
-      var Selectives = selectives.map(function (selective, i) {
-        return /*#__PURE__*/_react.default.createElement(_rDropdownButton.default, _extends({
-          key: 'selectives' + i
-        }, buttonProps, {
-          items: selective.items,
-          style: {
-            width: 'auto'
-          },
-          text: selective.title,
-          icon: selective.icon
-        }));
-      });
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "aio-table-toolbar"
-      }, Selectives, searchColumnIndex !== false && /*#__PURE__*/_react.default.createElement("div", {
-        key: 3,
+        className: "aio-table-toolbar",
+        style: {
+          marginBottom: padding
+        }
+      }, toggleAll !== false && /*#__PURE__*/_react.default.createElement(_aioButton.default, _extends({
+        key: 0
+      }, buttonProps, {
+        type: "button",
+        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
+        })
+      })), toolbarItems.map(function (o, i) {
+        return /*#__PURE__*/_react.default.createElement(_aioButton.default, _extends({
+          type: "button"
+        }, o, {
+          rtl: rtl,
+          className: "aio-table-toolbar-button",
+          animate: true,
+          key: 'ti' + i
+        }));
+      }), 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 _this10.changeSearch(e.target.value);
+          return _this9.changeSearch(e.target.value);
         }
       }), /*#__PURE__*/_react.default.createElement(_react2.Icon, {
         className: "aio-table-search-icon",
-        path: _js.mdiMagnify,
-        size: 0.8
+        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(_rDropdownButton.default, _extends({
-        key: 0
+      }), groupBy.length > 1 && /*#__PURE__*/_react.default.createElement(_aioButton.default, _extends({
+        key: 2
       }, buttonProps, {
-        items: groupBy,
+        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
         })
-      })), sort.length > 1 && /*#__PURE__*/_react.default.createElement(_rDropdownButton.default, _extends({
-        key: 1
+      })), sort.length > 1 && /*#__PURE__*/_react.default.createElement(_aioButton.default, _extends({
+        key: 3
       }, buttonProps, {
-        items: sort,
+        options: sort,
         title: translate('Sort'),
-        icon: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
+        text: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
           path: _js.mdiSort,
           size: 0.7
         })
-      })), toggle.length > 1 && /*#__PURE__*/_react.default.createElement(_rDropdownButton.default, _extends({
-        key: 2
+      })), toggle.length > 1 && /*#__PURE__*/_react.default.createElement(_aioButton.default, _extends({
+        key: 4
       }, buttonProps, {
-        icon: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
+        text: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
           path: _js.mdiEye,
           size: 0.7
         }),
-        items: toggle,
+        options: toggle,
         title: translate('Show Columns')
-      })), freeze.length > 1 && /*#__PURE__*/_react.default.createElement(_rDropdownButton.default, _extends({
-        key: 3
+      })), 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')
       })));
     }
@@ -1464,34 +1655,36 @@ var RTableUnit = /*#__PURE__*/function (_Component3) {
   var _super3 = _createSuper(RTableUnit);
 
   function RTableUnit(props) {
-    var _this11;
+    var _this10;
 
     _classCallCheck(this, RTableUnit);
 
-    _this11 = _super3.call(this, props);
-    _this11.dom = /*#__PURE__*/(0, _react.createRef)();
-    return _this11;
+    _this10 = _super3.call(this, props);
+    _this10.dom = /*#__PURE__*/(0, _react.createRef)();
+    return _this10;
   }
 
   _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) {
@@ -1507,12 +1700,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
           });
@@ -1531,9 +1723,9 @@ 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$context4 = this.context,
+          rowGap = _this$context4.rowGap,
+          columnGap = _this$context4.columnGap;
       var _this$props9 = this.props,
           columns = _this$props9.columns,
           style = _this$props9.style;
@@ -1543,6 +1735,12 @@ var RTableUnit = /*#__PURE__*/function (_Component3) {
       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 ? ' ' : '');
       }
@@ -1557,19 +1755,19 @@ var RTableUnit = /*#__PURE__*/function (_Component3) {
   }, {
     key: "getTitles",
     value: function getTitles() {
-      var _this12 = this;
+      var _this11 = this;
 
       var columns = this.props.columns;
       return columns.map(function (column) {
-        return _this12.getTitle(column);
+        return _this11.getTitle(column);
       });
     }
   }, {
     key: "getGanttTitle",
     value: function getGanttTitle(column) {
-      var _this$context4 = this.context,
-          headerHeight = _this$context4.headerHeight,
-          columnGap = _this$context4.columnGap;
+      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;
@@ -1587,38 +1785,42 @@ 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'
+          };
         }
       }));
     }
   }, {
     key: "getTitle",
     value: function getTitle(column) {
-      var _this13 = this;
+      var _this12 = this;
 
       if (column.template === 'gantt') {
         return this.getGanttTitle(column);
       }
 
-      var _this$context5 = this.context,
-          SetState = _this$context5.SetState,
-          columns = _this$context5.columns,
-          headerHeight = _this$context5.headerHeight,
-          columnGap = _this$context5.columnGap,
-          touch = _this$context5.touch;
+      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,
@@ -1638,35 +1840,35 @@ var RTableUnit = /*#__PURE__*/function (_Component3) {
         },
         draggable: false
       }, touch ? 'onTouchStart' : 'onMouseDown', function (e) {
-        return column.resizable ? _this13.resizeDown(e, column) : undefined;
+        return column.resizable ? _this12.resizeDown(e, column) : undefined;
       });
 
       var titleProps = {
         className: 'aio-table-title-text',
         style: {
-          justifyContent: column.titleJustify ? 'center' : undefined,
+          justifyContent: column.titleJustify !== false ? 'center' : undefined,
           cursor: column.movable === false ? undefined : 'move'
         },
         draggable: column.movable !== false,
         onDragStart: function onDragStart(e) {
-          _this13.startColumnSwap = column._index;
+          _this12.startColumnSwap = column._index;
         },
         onDragOver: function onDragOver(e) {
           e.preventDefault();
-          _this13.endColumnSwap = column._index;
+          _this12.endColumnSwap = column._index;
         },
         onDrop: function onDrop(e) {
           if (column.movable === false) {
             return;
           }
 
-          if (_this13.startColumnSwap === _this13.endColumnSwap) {
+          if (_this12.startColumnSwap === undefined || _this12.startColumnSwap === _this12.endColumnSwap) {
             return;
           }
 
-          var temp = columns[_this13.startColumnSwap];
-          columns[_this13.startColumnSwap] = columns[_this13.endColumnSwap];
-          columns[_this13.endColumnSwap] = temp;
+          var temp = columns[_this12.startColumnSwap];
+          columns[_this12.startColumnSwap] = columns[_this12.endColumnSwap];
+          columns[_this12.endColumnSwap] = temp;
           SetState({
             columns: columns
           });
@@ -1679,9 +1881,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 = {
@@ -1695,9 +1897,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,
@@ -1724,13 +1926,20 @@ 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,
-          SetState = _this$context8.SetState;
+      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;
+      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
       });
@@ -1753,10 +1962,10 @@ var RTableUnit = /*#__PURE__*/function (_Component3) {
     key: "arrow",
     value: function arrow(e) {
       var container = (0, _jquery.default)(this.dom.current);
-      var _this$context9 = this.context,
-          rtl = _this$context9.rtl,
-          focused = _this$context9.focused,
-          SetState = _this$context9.SetState;
+      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');
 
@@ -1840,23 +2049,22 @@ var RTableUnit = /*#__PURE__*/function (_Component3) {
   }, {
     key: "card",
     value: function card() {
-      var _this14 = this;
+      var _this13 = this;
 
-      var _this$context10 = this.context,
-          indent = _this$context10.indent,
-          _onMouseEnter = _this$context10.onMouseEnter,
-          _onScroll = _this$context10.onScroll,
-          rowHeight = _this$context10.rowHeight,
-          _this$context10$cardG = _this$context10.cardGap,
-          cardGap = _this$context10$cardG === void 0 ? 0 : _this$context10$cardG,
-          getLoading = _this$context10.getLoading,
-          cardTemplate = _this$context10.cardTemplate,
-          _this$context10$cardR = _this$context10.cardRowCount,
-          cardRowCount = _this$context10$cardR === void 0 ? 1 : _this$context10$cardR,
-          rowGap = _this$context10.rowGap,
-          _this$context10$cardT = _this$context10.cardType,
-          cardType = _this$context10$cardT === void 0 ? 'html' : _this$context10$cardT,
-          columnGap = _this$context10.columnGap;
+      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,
@@ -1893,50 +2101,47 @@ var RTableUnit = /*#__PURE__*/function (_Component3) {
           return _onScroll(e, index);
         }
       }, rows && rows.length !== 0 && rows.map(function (row, i) {
-        if (row._groupField) {
+        if (row._groupId) {
           var width = indent * row._level;
           return /*#__PURE__*/_react.default.createElement("div", {
             className: "aio-table-group",
             key: 'group' + i + '-' + index,
             style: groupStyle
-          }, index !== 1 && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+          }, index !== 1 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
             style: {
-              width: width
+              width: width,
+              flexShrink: 0
             }
-          }), _this14.getGroupToggleIcon(row), row._groupText));
-        }
-
-        if (cardType === 'layout') {
-          return /*#__PURE__*/_react.default.createElement("div", {
-            className: "aio-table-card"
-          }, /*#__PURE__*/_react.default.createElement(RLayout, {
-            gap: cardGap,
-            layout: cardTemplate(row.row)
-          }));
+          }), _this13.getGroupToggleIcon(row), /*#__PURE__*/_react.default.createElement("div", {
+            className: "aio-table-group-text"
+          }, row._groupValue)));
         }
 
         return /*#__PURE__*/_react.default.createElement("div", {
+          key: i + '-' + index,
           className: "aio-table-card"
-        }, cardTemplate(row.row));
+        }, cardTemplate(row.row, function () {
+          return toggleRow(row.row);
+        }));
       }), rows && rows.length === 0 && this.getNoData(), !rows && getLoading());
     }
   }, {
     key: "render",
     value: function render() {
-      var _this15 = this;
+      var _this14 = this;
 
       if (this.context.cardTemplate) {
         return this.card();
       }
 
-      var _this$context11 = this.context,
-          indent = _this$context11.indent,
-          _onMouseEnter2 = _this$context11.onMouseEnter,
-          _onScroll2 = _this$context11.onScroll,
-          rowHeight = _this$context11.rowHeight,
-          groups = _this$context11.groups,
-          getLoading = _this$context11.getLoading,
-          cardTemplate = _this$context11.cardTemplate;
+      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,
@@ -1959,49 +2164,31 @@ var RTableUnit = /*#__PURE__*/function (_Component3) {
           return _onScroll2(e, index);
         }
       }, this.getTitles(), rows && rows.length !== 0 && rows.map(function (row, i) {
-        if (row._groupField) {
+        if (row._groupId) {
           var width = indent * row._level;
           return /*#__PURE__*/_react.default.createElement("div", {
             className: "aio-table-group",
             key: 'group' + i + '-' + index,
-            style: { ..._this15.getFullCellStyle(),
+            style: { ..._this14.getFullCellStyle(),
               height: rowHeight
             }
-          }, index !== 1 && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+          }, index !== 1 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
             style: {
-              width: width
+              width: width,
+              flexShrink: 0
             }
-          }), _this15.getGroupToggleIcon(row), row._groupText));
-        }
-
-        if (type === 'freeze') {
-          return row.freezeCells.map(function (r, j) {
-            return /*#__PURE__*/_react.default.createElement(RTableCell, _extends({
-              key: i + '-' + j + '-' + index,
-              cellId: i + '-' + j + '-' + index
-            }, r, {
-              relativeFilter: row.show === 'relativeFilter'
-            }));
-          });
+          }), _this14.getGroupToggleIcon(row), /*#__PURE__*/_react.default.createElement("div", {
+            className: "aio-table-group-text"
+          }, row._groupValue)));
         }
 
-        if (type === 'unFreeze') {
-          return row.unFreezeCells.map(function (r, j) {
-            return /*#__PURE__*/_react.default.createElement(RTableCell, _extends({
-              key: i + '-' + j + '-' + index,
-              cellId: i + '-' + j + '-' + index
-            }, r, {
-              relativeFilter: row.show === 'relativeFilter'
-            }));
-          });
-        }
-
-        return row.cells.map(function (r, j) {
-          return /*#__PURE__*/_react.default.createElement(RTableCell, _extends({
-            key: i + '-' + j + '-' + index,
-            cellId: 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());
@@ -2013,28 +2200,28 @@ var RTableUnit = /*#__PURE__*/function (_Component3) {
 
 _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 _this16;
+  function AIOTableCell(props) {
+    var _this15;
 
-    _classCallCheck(this, RTableCell);
+    _classCallCheck(this, AIOTableCell);
 
-    _this16 = _super4.call(this, props);
-    _this16.dom = /*#__PURE__*/(0, _react.createRef)();
-    var value = _this16.props.value;
-    _this16.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 _this16;
+    return _this15;
   }
 
-  _createClass(RTableCell, [{
+  _createClass(AIOTableCell, [{
     key: "getBefore",
     value: function getBefore(row, column) {
       if (!column.before) {
@@ -2042,7 +2229,7 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
       }
 
       var before = typeof column.before === 'function' ? column.before(row, column) : column.before;
-      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-icon"
       }, before), this.context.getGap());
     }
@@ -2054,7 +2241,7 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
       }
 
       var after = typeof column.after === 'function' ? column.after(row, column) : column.after;
-      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", {
         style: {
           flex: 1
         }
@@ -2069,14 +2256,12 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
           padding = _column$padding2 === void 0 ? '36px' : _column$padding2,
           template = column.template,
           _column$minWidth = column.minWidth,
-          minWidth = _column$minWidth === void 0 ? '30px' : _column$minWidth,
-          justify = column.justify;
+          minWidth = _column$minWidth === void 0 ? '30px' : _column$minWidth;
       var rowHeight = this.context.rowHeight;
       var style = {
         height: rowHeight,
         overflow: template ? undefined : 'hidden',
-        minWidth: minWidth,
-        justifyContent: justify ? 'center' : undefined
+        minWidth: minWidth
       };
 
       if (column.template === 'gantt') {
@@ -2088,7 +2273,6 @@ 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) {
@@ -2107,7 +2291,7 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
         className += ' aio-table-cell-input';
       }
 
-      if (relativeFilter) {
+      if (row._show === 'relativeFilter') {
         className += ' aio-table-relative-filter';
       }
 
@@ -2116,11 +2300,9 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
   }, {
     key: "getToggleIcon",
     value: function getToggleIcon(row) {
-      var _this$context12 = this.context,
-          rtl = _this$context12.rtl,
-          id = _this$context12.id,
-          openDictionary = _this$context12.openDictionary,
-          SetState = _this$context12.SetState;
+      var _this$context13 = this.context,
+          rtl = _this$context13.rtl,
+          toggleRow = _this$context13.toggleRow;
       var icon;
 
       if (!row._childsLength) {
@@ -2141,23 +2323,10 @@ 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;
-            SetState({});
-          }
+          return toggleRow(row);
         }
       }, icon), this.context.getGap());
     }
@@ -2166,13 +2335,14 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
     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 === 'slider') {
+      if (template === 'slider') {
         content = /*#__PURE__*/_react.default.createElement(AIOSlider, {
           row: row,
           column: column
         });
-      } else if (column.template === 'gantt') {
+      } else if (template === 'gantt') {
         var rtl = this.context.rtl;
         var getKeys = column.getKeys,
             _column$getColor = column.getColor,
@@ -2230,60 +2400,64 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
         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: backgroundColor,
-              backgroundImage: background
-            },
-            text: text === false ? undefined : /*#__PURE__*/_react.default.createElement("div", {
-              style: {
-                color: color
-              }
-            }, 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 && column.inlineEdit) {
+      } else if (template && column.inlineEdit) {
         if (!focused) {
-          content = column.template(row, column);
+          content = template;
         } else {
           content = this.getInput(row, column);
         }
-      } else if (column.template) {
-        content = column.template(row, column);
+      } else if (template) {
+        content = template;
       } else if (column.inlineEdit) {
         content = this.getInput(row, column);
       } else if (column.getValue) {
@@ -2291,6 +2465,14 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
       }
 
       if (column.subText) {
+        var subText;
+
+        try {
+          subText = column.subText(row);
+        } catch {
+          subText = '';
+        }
+
         return /*#__PURE__*/_react.default.createElement("div", {
           style: {
             flex: 1,
@@ -2316,7 +2498,7 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
             flex: 1,
             position: 'relative'
           }
-        }, column.subText(row)));
+        }, subText));
       }
 
       return content;
@@ -2324,7 +2506,7 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
   }, {
     key: "getInput",
     value: function getInput(row, column) {
-      var _this17 = this;
+      var _this16 = this;
 
       var type = column.inlineEdit.type;
       var value = this.state.value;
@@ -2336,7 +2518,7 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
         className: 'aio-table-input',
         rowindex: row._renderIndex,
         colindex: column._renderIndex,
-        value: value,
+        value: value === null ? '' : value,
         disabled: disabled(row)
       };
 
@@ -2344,24 +2526,27 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
         return /*#__PURE__*/_react.default.createElement("div", {
           className: 'aio-table-input-container'
         }, /*#__PURE__*/_react.default.createElement("input", _extends({}, props, {
+          style: {
+            textAlign: column.justify ? 'center' : undefined
+          },
           onChange: function onChange(e) {
-            return _this17.setState({
+            return _this16.setState({
               value: e.target.value
             });
           },
           onBlur: async function onBlur(e) {
-            _this17.setState({
+            _this16.setState({
               loading: true
             });
 
-            var error = await column.inlineEdit.onChange(row, value);
+            var error = await column.inlineEdit.onChange(row, type === 'number' ? parseFloat(value) : value);
 
-            _this17.setState({
+            _this16.setState({
               loading: false
             });
 
             if (typeof error === 'string') {
-              _this17.setState({
+              _this16.setState({
                 error: error
               });
             }
@@ -2386,27 +2571,27 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
           className: "aio-table-input-container"
         }, /*#__PURE__*/_react.default.createElement("select", _extends({}, props, {
           onFocus: function onFocus() {
-            return _this17.focus = true;
+            return _this16.focus = true;
           },
           onBlur: function onBlur() {
-            return _this17.focus = false;
+            return _this16.focus = false;
           },
           onChange: async function onChange(e) {
             var value = e.target.value;
 
-            _this17.setState({
+            _this16.setState({
               loading: true,
               value: value
             });
 
             var error = await column.inlineEdit.onChange(row, e.target.value);
 
-            _this17.setState({
+            _this16.setState({
               loading: false
             });
 
             if (typeof error === 'string') {
-              _this17.setState({
+              _this16.setState({
                 error: error
               });
             }
@@ -2436,13 +2621,16 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
   }, {
     key: "render",
     value: function render() {
-      var _this18 = this;
+      var _this17 = this;
 
-      var _this$context13 = this.context,
-          indent = _this$context13.indent,
-          cubes2 = _this$context13.cubes2,
-          focused = _this$context13.focused,
-          SetState = _this$context13.SetState;
+      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,
@@ -2456,9 +2644,9 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
         });
       }
 
-      var _this$state2 = this.state,
-          error = _this$state2.error,
-          loading = _this$state2.loading;
+      var _this$state3 = this.state,
+          error = _this$state3.error,
+          loading = _this$state3.loading;
       var content = this.getContent(row, column, value);
       var before = this.getBefore(row, column);
       var after = this.getAfter(row, column);
@@ -2473,19 +2661,25 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
         cell = /*#__PURE__*/_react.default.createElement("div", {
           className: "aio-table-error",
           onClick: function onClick() {
-            _this18.setState({
-              value: _this18.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), before, content, after);
+        }), showToggleIcon && this.getToggleIcon(row), before, /*#__PURE__*/_react.default.createElement("div", {
+          className: "aio-table-content",
+          style: style
+        }, content), after);
       }
 
       return /*#__PURE__*/_react.default.createElement("div", {
@@ -2493,6 +2687,7 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
         tabIndex: 0,
         ref: this.dom,
         cellid: cellId,
+        title: typeof content === 'string' ? content : '',
         rowindex: row._renderIndex,
         colindex: column._renderIndex,
         childindex: row._childIndex,
@@ -2502,6 +2697,16 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
         childslength: row._childsLength,
         style: this.getStyle(column),
         className: this.getClassName(row, column),
+        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) {
@@ -2518,10 +2723,10 @@ var RTableCell = /*#__PURE__*/function (_Component4) {
     }
   }]);
 
-  return RTableCell;
+  return AIOTableCell;
 }(_react.Component);
 
-_defineProperty(RTableCell, "contextType", AioTableContext);
+_defineProperty(AIOTableCell, "contextType", AioTableContext);
 
 var AIOSlider = /*#__PURE__*/function (_Component5) {
   _inherits(AIOSlider, _Component5);
@@ -2529,14 +2734,14 @@ var AIOSlider = /*#__PURE__*/function (_Component5) {
   var _super5 = _createSuper(AIOSlider);
 
   function AIOSlider(props) {
-    var _this19;
+    var _this18;
 
     _classCallCheck(this, AIOSlider);
 
-    _this19 = _super5.call(this, props);
-    var _this19$props = _this19.props,
-        column = _this19$props.column,
-        row = _this19$props.row;
+    _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);
 
@@ -2544,11 +2749,11 @@ var AIOSlider = /*#__PURE__*/function (_Component5) {
       value = [value];
     }
 
-    _this19.state = {
+    _this18.state = {
       value: value
     };
-    _this19.updateMode = 'outside';
-    return _this19;
+    _this18.updateMode = 'outside';
+    return _this18;
   }
 
   _createClass(AIOSlider, [{
@@ -2567,7 +2772,7 @@ var AIOSlider = /*#__PURE__*/function (_Component5) {
   }, {
     key: "render",
     value: function render() {
-      var _this20 = this;
+      var _this19 = this;
 
       var _this$props13 = this.props,
           column = _this$props13.column,
@@ -2646,7 +2851,7 @@ var AIOSlider = /*#__PURE__*/function (_Component5) {
         });
       }
 
-      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, value.length > 1 && /*#__PURE__*/_react.default.createElement("div", {
+      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,
@@ -2661,7 +2866,7 @@ var AIOSlider = /*#__PURE__*/function (_Component5) {
             fillStyle: {
               height: '6px',
               borderRadius: '24px',
-              background: _this20.getBackground(value.length, i, color)
+              background: _this19.getBackground(value.length, i, color)
             }
           };
         }),
@@ -2677,14 +2882,14 @@ var AIOSlider = /*#__PURE__*/function (_Component5) {
           background: '#d5d5d5'
         },
         editable: typeof onChange === 'function',
-        onchange: function onchange(_ref3) {
-          var points = _ref3.points;
+        onchange: function onchange(_ref) {
+          var points = _ref.points;
 
           if (!onChange) {
             return;
           }
 
-          _this20.updateMode = 'onChange';
+          _this19.updateMode = 'onChange';
           onChange(row, points.length > 1 ? points.map(function (p) {
             return p.value;
           }) : points[0].value);
@@ -2692,11 +2897,11 @@ var AIOSlider = /*#__PURE__*/function (_Component5) {
         pin: pinItems.length === 0 ? undefined : {
           items: pinItems
         },
-        ondrag: function ondrag(_ref4) {
-          var points = _ref4.points;
-          _this20.updateMode = 'onDrag';
+        ondrag: function ondrag(_ref2) {
+          var points = _ref2.points;
+          _this19.updateMode = 'onDrag';
 
-          _this20.setState({
+          _this19.setState({
             value: points.map(function (p) {
               return p.value;
             })
@@ -2725,17 +2930,22 @@ var RTableFilter = /*#__PURE__*/function (_Component6) {
   _createClass(RTableFilter, [{
     key: "render",
     value: function render() {
-      var _this$context14 = this.context,
-          filterDictionary = _this$context14.filterDictionary,
-          rtl = _this$context14.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, {
@@ -2744,11 +2954,12 @@ var RTableFilter = /*#__PURE__*/function (_Component6) {
       });
       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
           });
@@ -2776,10 +2987,10 @@ var RTableFilterPopup = /*#__PURE__*/function (_Component7) {
   _createClass(RTableFilterPopup, [{
     key: "add",
     value: function add() {
-      var _this$context15 = this.context,
-          filterDictionary = _this$context15.filterDictionary,
-          SetState = _this$context15.SetState,
-          onChangeFilter = _this$context15.onChangeFilter;
+      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({
@@ -2798,13 +3009,13 @@ var RTableFilterPopup = /*#__PURE__*/function (_Component7) {
   }, {
     key: "render",
     value: function render() {
-      var _this21 = this;
+      var _this20 = this;
 
       var column = this.props.column;
-      var _this$context16 = this.context,
-          filterDictionary = _this$context16.filterDictionary,
-          SetState = _this$context16.SetState,
-          translate = _this$context16.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) {
@@ -2835,7 +3046,7 @@ var RTableFilterPopup = /*#__PURE__*/function (_Component7) {
       }, /*#__PURE__*/_react.default.createElement("button", {
         className: "aio-table-filter-add",
         onClick: function onClick() {
-          return _this21.add();
+          return _this20.add();
         }
       }, translate('Add'))));
     }
@@ -2852,26 +3063,26 @@ var RTableFilterItem = /*#__PURE__*/function (_Component8) {
   var _super8 = _createSuper(RTableFilterItem);
 
   function RTableFilterItem(props) {
-    var _this22;
+    var _this21;
 
     _classCallCheck(this, RTableFilterItem);
 
-    _this22 = _super8.call(this, props);
-    var filter = _this22.props.filter;
-    _this22.state = {
+    _this21 = _super8.call(this, props);
+    var filter = _this21.props.filter;
+    _this21.state = {
       value: filter.value,
       prevValue: filter.value
     };
-    return _this22;
+    return _this21;
   }
 
   _createClass(RTableFilterItem, [{
     key: "remove",
     value: function remove(index) {
-      var _this$context17 = this.context,
-          filterDictionary = _this$context17.filterDictionary,
-          SetState = _this$context17.SetState,
-          onChangeFilter = _this$context17.onChangeFilter;
+      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);
@@ -2887,7 +3098,7 @@ var RTableFilterItem = /*#__PURE__*/function (_Component8) {
   }, {
     key: "changeValue",
     value: function changeValue(value) {
-      var _this23 = this;
+      var _this22 = this;
 
       var onChangeFilter = this.context.onChangeFilter;
       clearTimeout(this.timeout);
@@ -2895,12 +3106,12 @@ var RTableFilterItem = /*#__PURE__*/function (_Component8) {
         value: value
       });
       this.timeout = setTimeout(function () {
-        var _this23$context = _this23.context,
-            SetState = _this23$context.SetState,
-            filterDictionary = _this23$context.filterDictionary;
-        var _this23$props = _this23.props,
-            column = _this23$props.column,
-            index = _this23$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) {
@@ -2915,13 +3126,13 @@ var RTableFilterItem = /*#__PURE__*/function (_Component8) {
   }, {
     key: "render",
     value: function render() {
-      var _this24 = this;
+      var _this23 = this;
 
-      var _this$context18 = this.context,
-          filterDictionary = _this$context18.filterDictionary,
-          SetState = _this$context18.SetState,
-          translate = _this$context18.translate,
-          onChangeFilter = _this$context18.onChangeFilter;
+      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,
@@ -2973,7 +3184,7 @@ var RTableFilterItem = /*#__PURE__*/function (_Component8) {
         type: type,
         value: value,
         onChange: function onChange(e) {
-          return _this24.changeValue(e.target.value);
+          return _this23.changeValue(e.target.value);
         }
       }), /*#__PURE__*/_react.default.createElement("div", {
         style: {
@@ -2982,7 +3193,7 @@ var RTableFilterItem = /*#__PURE__*/function (_Component8) {
       }), /*#__PURE__*/_react.default.createElement("div", {
         className: "aio-table-filter-remove",
         onClick: function onClick() {
-          return _this24.remove(index);
+          return _this23.remove(index);
         }
       }, /*#__PURE__*/_react.default.createElement(_react2.Icon, {
         path: _js.mdiClose,
@@ -2994,238 +3205,4 @@ var RTableFilterItem = /*#__PURE__*/function (_Component8) {
   return RTableFilterItem;
 }(_react.Component);
 
-_defineProperty(RTableFilterItem, "contextType", AioTableContext);
-
-var RLayout = /*#__PURE__*/function (_Component9) {
-  _inherits(RLayout, _Component9);
-
-  var _super9 = _createSuper(RLayout);
-
-  function RLayout() {
-    var _this25;
-
-    _classCallCheck(this, RLayout);
-
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-
-    _this25 = _super9.call.apply(_super9, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this25), "touch", 'ontouchstart' in document.documentElement);
-
-    return _this25;
-  }
-
-  _createClass(RLayout, [{
-    key: "eventHandler",
-    value: function eventHandler(event, action) {
-      var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'bind';
-      event = this.touch ? {
-        mousemove: "touchmove",
-        mouseup: "touchend"
-      }[event] : event;
-      (0, _jquery.default)(window).unbind(event, action);
-
-      if (type === 'bind') {
-        (0, _jquery.default)(window).bind(event, action);
-      }
-    }
-  }, {
-    key: "getClient",
-    value: function getClient(e) {
-      return this.touch ? {
-        x: e.changedTouches[0].clientX,
-        y: e.changedTouches[0].clientY
-      } : {
-        x: e.clientX,
-        y: e.clientY
-      };
-    }
-  }, {
-    key: "getHtml",
-    value: function getHtml(obj, index, parentObj) {
-      var _this26 = this,
-          _ref6;
-
-      var parent = parentObj || {};
-      var show = typeof obj.show === 'function' ? obj.show() : obj.show;
-
-      if (show === false) {
-        return null;
-      }
-
-      var childsAttrs = (typeof parent.childsAttrs === 'function' ? parent.childsAttrs(obj, index) : parent.childsAttrs) || {};
-      var childsProps = (typeof parent.childsProps === 'function' ? parent.childsProps(obj, index) : parent.childsProps) || {};
-      var parentDir = parent.row ? 'row' : 'column';
-      var dir = obj.row ? 'row' : 'column';
-      var gap = parent.gap === undefined ? this.gap : parent.gap;
-      var Size = obj.size === undefined ? childsProps.size : obj.size;
-      var size = typeof Size === 'function' ? Size() : Size;
-      var flex = obj.flex === undefined ? childsProps.flex : obj.flex;
-
-      if (parentObj) {
-        flex = flex || 1;
-      }
-
-      var hideInSmall = obj.hideInSmall === undefined ? childsProps.hideInSmall : obj.hideInSmall;
-      var hideInLarge = obj.hideInLarge === undefined ? childsProps.hideInLarge : obj.hideInLarge;
-      var align = obj.align === undefined ? childsProps.align : obj.align;
-      var onResize = obj.onResize;
-      var Childs = obj[dir] || [];
-      var childs = typeof Childs === 'function' ? Childs() : Childs;
-      var html = typeof obj.html === 'function' ? obj.html() : obj.html;
-      var attrs = (typeof obj.attrs === 'function' ? obj.attrs() : obj.attrs) || {};
-      var className = childs.length ? 'r-layout-parent' : 'r-layout-item';
-      var gapClassName = 'r-layout-gap';
-
-      if (childsAttrs.className) {
-        className += ' ' + childsAttrs.className;
-      }
-
-      if (attrs.className) {
-        className += ' ' + attrs.className;
-      }
-
-      if (hideInLarge) {
-        className += ' r-layout-hide-in-large';
-        gapClassName += ' r-layout-hide-in-large';
-      }
-
-      if (hideInSmall) {
-        className += ' r-layout-hide-in-small';
-        gapClassName += ' r-layout-hide-in-small';
-      }
-
-      var style = { ...childsAttrs.style,
-        ...attrs.style
-      };
-
-      if (align === 'v') {
-        style.alignItems = 'center';
-      } else if (align === 'h') {
-        style.justifyContent = 'center';
-      } else if (align === 'vh' || align === 'hv') {
-        style.alignItems = 'center';
-        style.justifyContent = 'center';
-      }
-
-      var result;
-      var dataId = 'a' + Math.random();
-
-      if (!childs.length) {
-        var _ref5;
-
-        result = /*#__PURE__*/_react.default.createElement("div", _extends({}, childsAttrs, attrs, {
-          "data-id": dataId,
-          className: className,
-          style: (_ref5 = { ...style
-          }, _defineProperty(_ref5, parentDir === 'row' ? 'width' : 'height', size), _defineProperty(_ref5, "flex", !size ? flex : undefined), _ref5)
-        }), html);
-      } else {
-        var _Style;
-
-        var Style = (_Style = { ...style,
-          flexDirection: dir
-        }, _defineProperty(_Style, parentDir === 'row' ? 'width' : 'height', size), _defineProperty(_Style, "flex", !size ? flex || 1 : undefined), _Style);
-        result = /*#__PURE__*/_react.default.createElement("div", _extends({}, childsAttrs, attrs, {
-          "data-id": dataId,
-          className: className,
-          style: Style
-        }), childs.map(function (o, i) {
-          return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
-            key: i
-          }, _this26.getHtml(o, i, obj));
-        }));
-      }
-
-      var event = {},
-          axis,
-          cursor = '';
-
-      if (size && onResize) {
-        if (parentDir === 'row') {
-          axis = 'x';
-          cursor = 'col-resize';
-        } else {
-          axis = 'y';
-          cursor = 'row-resize';
-        }
-
-        event[this.touch ? 'onTouchStart' : 'onMouseDown'] = function (e) {
-          var pos = _this26.getClient(e);
-
-          _this26.so = {
-            pos: pos,
-            onResize: onResize,
-            axis: axis,
-            size: size,
-            dataId: dataId
-          };
-
-          _this26.eventHandler('mousemove', _jquery.default.proxy(_this26.mouseMove, _this26));
-
-          _this26.eventHandler('mouseup', _jquery.default.proxy(_this26.mouseUp, _this26));
-        };
-      }
-
-      return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
-        key: index
-      }, result, /*#__PURE__*/_react.default.createElement("div", _extends({
-        className: gapClassName,
-        draggable: false,
-        onDragStart: function onDragStart(e) {
-          return e.preventDefault();
-        },
-        style: (_ref6 = {}, _defineProperty(_ref6, {
-          'row': 'width',
-          'column': 'height'
-        }[parentDir], gap), _defineProperty(_ref6, "cursor", cursor), _ref6)
-      }, event)));
-    }
-  }, {
-    key: "mouseMove",
-    value: function mouseMove(e) {
-      var rtl = this.props.rtl;
-      var _this$so = this.so,
-          pos = _this$so.pos,
-          axis = _this$so.axis,
-          size = _this$so.size,
-          dataId = _this$so.dataId;
-      var client = this.getClient(e);
-      var offset = (client[axis] - pos[axis]) * (rtl ? -1 : 1);
-      this.so.newSize = offset + size;
-      var panel = (0, _jquery.default)('[data-id="' + dataId + '"]');
-      panel.css(_defineProperty({}, {
-        'x': 'width',
-        'y': 'height'
-      }[axis], this.so.newSize));
-    }
-  }, {
-    key: "mouseUp",
-    value: function mouseUp() {
-      this.eventHandler('mousemove', this.mouseMove, 'unbind');
-      this.eventHandler('mouseup', this.mouseUp, 'unbind');
-      var _this$so2 = this.so,
-          onResize = _this$so2.onResize,
-          newSize = _this$so2.newSize;
-      onResize(newSize);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props15 = this.props,
-          gap = _this$props15.gap,
-          layout = _this$props15.layout;
-      this.gap = gap;
-      return this.getHtml(layout, 0);
-    }
-  }]);
-
-  return RLayout;
-}(_react.Component);
-
-RLayout.defaultProps = {
-  gap: 12,
-  layout: {}
-};
+_defineProperty(RTableFilterItem, "contextType", AioTableContext);