aio-table 6.1.5 → 6.3.1

package/index.js

@@ -9,10 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _aioButton = _interopRequireDefault(require("aio-button"));
 
-var _react2 = require("@mdi/react");
-
-var _js = require("@mdi/js");
-
 var _jquery = _interopRequireDefault(require("jquery"));
 
 var _rRangeSlider = _interopRequireDefault(require("r-range-slider"));
@@ -61,9 +57,20 @@ class AIOTable extends _react.Component {
       filterDictionary: {},
       groupsOpen: {},
       searchText: '',
+      addedSorts: [],
       freezeSize,
       groupDictionary,
-      sorts,
+      startIndex: 0,
+      //بخاطر شرایط خاص سورتس باید کاملا از پروپس ورودی ایموتیبل شود//
+      sorts: sorts.map(o => {
+        let res = {};
+
+        for (let prop in o) {
+          res[prop] = o[prop];
+        }
+
+        return res;
+      }),
       //make imutable to prevent change of props.paging because that will compaire with next input props.paging
       paging: paging ? { ...paging
       } : false,
@@ -71,8 +78,34 @@ class AIOTable extends _react.Component {
       columns: copiedColumns,
       prevColumns: JSON.stringify(copiedColumns),
       focused: false,
-      toggleAllState: true
+      toggleAllState: true,
+      getCellValue: (row, getValue, field) => {
+        try {
+          if (typeof getValue === 'function') {
+            return getValue(row);
+          }
+
+          if (field) {
+            let result;
+            eval('result = row.' + field);
+            return result;
+          }
+
+          return;
+        } catch {
+          return;
+        }
+      },
+      setCellValue: (row, field, value) => {
+        //row is used in eval
+        let {
+          model
+        } = this.props;
+        eval('row.' + field + ' = ' + value);
+        return model;
+      }
     };
+    console.log('in table', this.state.sorts);
   }
 
   copyJson(j) {
@@ -97,15 +130,6 @@ class AIOTable extends _react.Component {
     return a(j);
   }
 
-  getGap() {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "aio-table-gap",
-      style: {
-        width: this.props.cellGap
-      }
-    });
-  }
-
   resizeDown(e) {
     var {
       touch
@@ -339,7 +363,7 @@ class AIOTable extends _react.Component {
       setTimeout(() => this.setState({
         paging: { ...paging
         },
-        prevPaging: JSON.stringify(paging)
+        prevPaging: p
       }), 0);
     }
   }
@@ -372,7 +396,7 @@ class AIOTable extends _react.Component {
     this.rg = rowGap;
     this.cg = columnGap;
     this.updateColumns();
-    var Toolbar = this.toolbar.show ? /*#__PURE__*/_react.default.createElement(RTableToolbar, this.toolbar) : null;
+    var Toolbar = this.toolbar.show ? /*#__PURE__*/_react.default.createElement(AIOTableToolbar, this.toolbar) : null;
     var table = columns ? this.getTable(Toolbar) : '';
     var context = { ...this.props,
       ...this.state,
@@ -402,7 +426,6 @@ class AIOTable extends _react.Component {
       },
       onChangeFilter: onChangeFilter ? this.onChangeFilter.bind(this) : undefined,
       SetState: obj => this.setState(obj),
-      getGap: this.getGap.bind(this),
       onScroll: index => this.fn.onScroll(this.dom, index),
       groups: this.groups,
       fn: this.fn,
@@ -430,7 +453,7 @@ class AIOTable extends _react.Component {
           paging.onChange(obj);
         }
       }
-    })));
+    }), this.fn.getLoading(true)));
   }
 
 }
@@ -450,7 +473,7 @@ AIOTable.defaultProps = {
   groups: []
 };
 
-class RTableToolbar extends _react.Component {
+class AIOTableToolbar extends _react.Component {
   constructor(...args) {
     super(...args);
 
@@ -527,10 +550,7 @@ class RTableToolbar extends _react.Component {
       value: searchText,
       placeholder: translate('Search'),
       onChange: e => this.changeSearch(e.target.value)
-    }), /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-      className: "aio-table-search-icon",
-      path: searchText ? _js.mdiClose : _js.mdiMagnify,
-      size: 0.8,
+    }), aioTableGetSvg(searchText ? 'close' : 'magnify', {
       onClick: () => {
         if (!searchText) {
           return;
@@ -581,10 +601,7 @@ class RTableToolbar extends _react.Component {
       type: "button",
       title: translate('Toggle All'),
       onClick: () => toggleAll(),
-      text: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-        path: !toggleAllState ? _js.mdiCollapseAll : _js.mdiExpandAll,
-        size: iconSize
-      })
+      text: !toggleAllState ? aioTableGetSvg('toggleAllMinus') : aioTableGetSvg('toggleAllPlus')
     })), excelColumns.length > 0 && /*#__PURE__*/_react.default.createElement(_aioButton.default, _extends({
       key: "excel"
     }, buttonProps, {
@@ -593,10 +610,7 @@ class RTableToolbar extends _react.Component {
       onClick: () => {
         fn.exportToExcel(excelColumns, rows);
       },
-      text: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-        path: _js.mdiMicrosoftExcel,
-        size: iconSize
-      })
+      text: aioTableGetSvg('excel')
     })), toolbarItems.map((o, i) => /*#__PURE__*/_react.default.createElement(_aioButton.default, _extends({
       type: "button",
       rtl: rtl,
@@ -609,10 +623,8 @@ class RTableToolbar extends _react.Component {
     }, buttonProps, {
       options: groupBy,
       title: translate('Group By'),
-      text: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-        path: _js.mdiFileTree,
-        size: iconSize,
-        horizontal: rtl === true
+      text: aioTableGetSvg('group', {
+        flip: rtl === true
       }),
       onSwap: (start, end, swap) => {
         let {
@@ -627,10 +639,7 @@ class RTableToolbar extends _react.Component {
     }, buttonProps, {
       options: sort,
       title: translate('Sort'),
-      text: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-        path: _js.mdiSort,
-        size: iconSize
-      }),
+      text: aioTableGetSvg('sort'),
       onSwap: (start, end, swap) => {
         let {
           sorts
@@ -642,10 +651,7 @@ class RTableToolbar extends _react.Component {
     })), toggle.length > 1 && /*#__PURE__*/_react.default.createElement(_aioButton.default, _extends({
       key: "toggle"
     }, buttonProps, {
-      text: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-        path: _js.mdiEye,
-        size: iconSize
-      }),
+      text: aioTableGetSvg('eye'),
       options: toggle,
       title: translate('Show Columns'),
       popupStyle: {
@@ -654,10 +660,8 @@ class RTableToolbar extends _react.Component {
     })), freeze.length > 1 && /*#__PURE__*/_react.default.createElement(_aioButton.default, _extends({
       key: "freeze"
     }, buttonProps, {
-      text: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-        path: _js.mdiAlignHorizontalLeft,
-        size: iconSize,
-        horizontal: rtl === true
+      text: aioTableGetSvg('freeze', {
+        flip: rtl === true
       }),
       options: freeze,
       title: translate('Freeze Columns')
@@ -666,7 +670,7 @@ class RTableToolbar extends _react.Component {
 
 }
 
-_defineProperty(RTableToolbar, "contextType", AioTableContext);
+_defineProperty(AIOTableToolbar, "contextType", AioTableContext);
 
 class AIOTablePaging extends _react.Component {
   getPageNumber(type) {
@@ -741,33 +745,25 @@ class AIOTablePaging extends _react.Component {
       className: "aio-table-paging-button",
       onClick: () => this.changePage(rtl ? 'last' : 'first'),
       title: translate(rtl ? 'Last Page' : 'First Page')
-    }, /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-      path: _js.mdiChevronDoubleLeft,
-      size: .8
+    }, aioTableGetSvg('doubleChevronRight', {
+      flip: true
     })), /*#__PURE__*/_react.default.createElement("div", {
       className: "aio-table-paging-button",
       onClick: () => this.changePage(rtl ? 'next' : 'prev'),
       title: translate(rtl ? 'Next Page' : 'Previous Page')
-    }, /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-      path: _js.mdiChevronLeft,
-      size: .8
+    }, aioTableGetSvg('chevronRight', {
+      flip: true
     })), /*#__PURE__*/_react.default.createElement("div", {
       className: "aio-table-paging-number"
     }, rtl ? pages + ' / ' + number : number + ' / ' + pages), /*#__PURE__*/_react.default.createElement("div", {
       className: "aio-table-paging-button",
       onClick: () => this.changePage(rtl ? 'prev' : 'next'),
       title: translate(rtl ? 'Previous Page' : 'Next Page')
-    }, /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-      path: _js.mdiChevronRight,
-      size: .8
-    })), /*#__PURE__*/_react.default.createElement("div", {
+    }, aioTableGetSvg('chevronRight')), /*#__PURE__*/_react.default.createElement("div", {
       className: "aio-table-paging-button",
       onClick: () => this.changePage(rtl ? 'first' : 'last'),
       title: translate(rtl ? 'First Page' : 'Last Page')
-    }, /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-      path: _js.mdiChevronDoubleRight,
-      size: .8
-    })), /*#__PURE__*/_react.default.createElement("select", {
+    }, aioTableGetSvg('doubleChevronRight')), /*#__PURE__*/_react.default.createElement("select", {
       className: "aio-table-paging-button",
       value: size,
       onChange: e => onChange({ ...paging,
@@ -880,7 +876,8 @@ class AIOTableUnit extends _react.Component {
 
   keyDown(e) {
     var {
-      SetState
+      SetState,
+      focused
     } = this.context;
 
     if (e.keyCode === 27) {
@@ -916,12 +913,11 @@ class AIOTableUnit extends _react.Component {
 
       if (inputCells.length) {
         let cell = inputCells.eq(0);
-        let cellId = cell.attr('cellid');
         SetState({
-          focused: cellId
+          focused: cell.attr('data-cell-id')
         });
         setTimeout(() => {
-          (0, _jquery.default)('.aio-table-cell-input[cellid=' + cellId + '] .aio-table-input').focus().select();
+          cell.find('.aio-table-input').focus().select();
         }, 10);
       }
 
@@ -929,16 +925,17 @@ class AIOTableUnit extends _react.Component {
     }
 
     let [rowIndex, colIndex] = this.getCellIndex(focusedInput.parents('.aio-table-cell'));
+    console.log(rowIndex, colIndex);
 
     if (e.keyCode === 40 || e.keyCode === 38) {
       let sign = e.keyCode === 40 ? 1 : -1;
       e.preventDefault();
       rowIndex += sign;
-      let next = inputs.filter(`[rowindex=${rowIndex}][colindex=${colIndex}]`);
+      let next = inputs.filter(`[data-row-index=${rowIndex}][data-col-index=${colIndex}]`);
 
       while (rowIndex < this.renderIndex && rowIndex > 0 && next.length === 0) {
         rowIndex += sign;
-        next = inputs.filter(`[rowindex=${rowIndex}][colindex=${colIndex}]`);
+        next = inputs.filter(`[data-row-index=${rowIndex}][data-col-index=${colIndex}]`);
       }
 
       if (next.length) {
@@ -949,11 +946,11 @@ class AIOTableUnit extends _react.Component {
       e.preventDefault();
       let sign = (e.keyCode === 37 ? -1 : 1) * (rtl ? -1 : 1);
       colIndex += sign;
-      let next = inputs.filter(`[rowindex=${rowIndex}][colindex=${colIndex}]`);
+      let next = inputs.filter(`[data-row-index=${rowIndex}][data-col-index=${colIndex}]`);
 
       while (colIndex > 0 && colIndex < columns.length && next.length === 0) {
         colIndex += sign;
-        next = inputs.filter(`[rowindex=${rowIndex}][colindex=${colIndex}]`);
+        next = inputs.filter(`[data-row-index=${rowIndex}][data-col-index=${colIndex}]`);
       }
 
       if (next.length) {
@@ -964,7 +961,7 @@ class AIOTableUnit extends _react.Component {
   }
 
   getCellIndex(cell) {
-    return [parseInt(cell.attr('rowindex')), parseInt(cell.attr('colindex'))];
+    return [parseInt(cell.attr('data-row-index')), parseInt(cell.attr('data-col-index'))];
   }
 
   card(props) {
@@ -994,7 +991,17 @@ class AIOTableUnit extends _react.Component {
     let rows;
 
     if (search) {
-      rows = this.props.rows.filter(o => search(o.row, searchText));
+      rows = this.props.rows.filter(o => {
+        if (searchText === '') {
+          return true;
+        }
+
+        try {
+          return search(o.row, searchText);
+        } catch {
+          return false;
+        }
+      });
     } else {
       rows = this.props.rows;
     }
@@ -1019,10 +1026,20 @@ class AIOTableUnit extends _react.Component {
     }), rows && rows.length === 0 && fn.getNoData(columns), !rows && fn.getLoading());
   }
 
+  getPropValue(row, column, prop) {
+    return typeof prop === 'function' ? prop(row, column) : prop;
+  }
+
   render() {
     var {
       onScroll,
-      fn
+      onSwap,
+      onDrop,
+      onDrag,
+      fn,
+      focused,
+      SetState,
+      striped
     } = this.context;
     var {
       rows,
@@ -1046,23 +1063,61 @@ class AIOTableUnit extends _react.Component {
     }
 
     this.renderIndex = -1;
-    return /*#__PURE__*/_react.default.createElement("div", props, this.getTitles(), rows && rows.length !== 0 && rows.map((row, i) => {
-      if (row._groupId) {
+    return /*#__PURE__*/_react.default.createElement("div", props, this.getTitles(), rows && rows.length !== 0 && rows.map((o, i) => {
+      if (o._groupId) {
         return /*#__PURE__*/_react.default.createElement(AIOTableGroup, {
           tableIndex,
-          row,
+          row: o,
           columns,
           key: 'group' + i + '-' + tableIndex
         });
       }
 
       this.renderIndex++;
-      return row[type].map((r, j) => /*#__PURE__*/_react.default.createElement(AIOTableCell, _extends({
-        cellId: i + '-' + j + '-' + tableIndex,
-        renderIndex: this.renderIndex
-      }, r, {
-        row: row.row
-      })));
+      return o[type].map(({
+        value,
+        column
+      }, j) => {
+        let row = o.row;
+        let cellId = i + '-' + j + '-' + tableIndex;
+        let inlineEdit = this.getPropValue(row, column, column.inlineEdit);
+        return /*#__PURE__*/_react.default.createElement(AIOTableCell, {
+          key: cellId,
+          attrs: {
+            'data-row-index': this.renderIndex,
+            'data-col-index': column._renderIndex,
+            'data-real-row-index': row._index,
+            'data-real-col-index': column._index,
+            'data-child-index': row._childIndex,
+            'data-childs-length': row._childsLength,
+            'data-lavel': row._level,
+            'data-cell-id': cellId,
+            tabIndex: 0,
+            draggable: typeof onSwap === 'function' && column.swap,
+            onDrop: () => onDrop(row),
+            onDragOver: e => e.preventDefault(),
+            onDragStart: () => onDrag(row),
+            onClick: () => {
+              if (!inlineEdit || focused === cellId) {
+                return;
+              }
+
+              SetState({
+                focused: cellId
+              });
+              setTimeout(() => (0, _jquery.default)('.aio-table-input:focus').select(), 10);
+            }
+          },
+          striped: this.renderIndex % 2 === 0 && striped,
+          value: value,
+          column: column,
+          row: row,
+          inlineEdit: inlineEdit,
+          before: this.getPropValue(row, column, column.before),
+          after: this.getPropValue(row, column, column.after),
+          justify: column.justify !== false && !column.treeMode
+        });
+      });
     }), rows && rows.length === 0 && fn.getNoData(columns), !rows && fn.getLoading());
   }
 
@@ -1288,16 +1343,13 @@ class AIOTableGroup extends _react.Component {
     } = this.context;
 
     if (row._opened) {
-      return /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-        path: _js.mdiChevronDown,
-        size: 1
+      return aioTableGetSvg('chevronDown', {
+        box: '2 1 20 20'
       });
     }
 
-    return /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-      path: _js.mdiChevronRight,
-      size: 1,
-      horizontal: rtl === true
+    return aioTableGetSvg('chevronRight', {
+      flip: rtl === true
     });
   }
 
@@ -1317,8 +1369,7 @@ class AIOTableGroup extends _react.Component {
 
   render() {
     let {
-      indent,
-      getGap
+      indent
     } = this.context;
     let {
       row,
@@ -1336,7 +1387,9 @@ class AIOTableGroup extends _react.Component {
     }), /*#__PURE__*/_react.default.createElement("div", {
       className: "aio-table-toggle",
       onClick: () => this.click(row)
-    }, this.getIcon(row)), getGap(), /*#__PURE__*/_react.default.createElement("div", {
+    }, this.getIcon(row)), /*#__PURE__*/_react.default.createElement("div", {
+      className: "aio-table-cell-gap"
+    }), /*#__PURE__*/_react.default.createElement("div", {
       className: "aio-table-group-text"
     }, row._groupValue)));
   }
@@ -1359,32 +1412,6 @@ class AIOTableCell extends _react.Component {
     };
   }
 
-  getBefore(row, column) {
-    if (!column.before) {
-      return '';
-    }
-
-    var before = typeof column.before === 'function' ? column.before(row, column) : column.before;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      className: "aio-table-icon"
-    }, before), this.context.getGap());
-  }
-
-  getAfter(row, column) {
-    if (!column.after) {
-      return '';
-    }
-
-    var after = typeof column.after === 'function' ? column.after(row, column) : column.after;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        flex: 1
-      }
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "aio-table-icon"
-    }, after));
-  }
-
   getStyle(column, row) {
     var {
       padding = '36px',
@@ -1393,7 +1420,6 @@ class AIOTableCell extends _react.Component {
     } = column;
     var {
       rowHeight,
-      striped,
       getCellStyle = () => {
         return {};
       }
@@ -1404,17 +1430,6 @@ class AIOTableCell extends _react.Component {
       minWidth
     };
 
-    if (row._index % 2 === 0) {
-      if (typeof striped === 'string') {
-        style.background = striped;
-      }
-
-      if (Array.isArray(striped)) {
-        style.background = striped[0];
-        style.color = striped[1];
-      }
-    }
-
     if (column.template === 'gantt') {
       style.padding = `0 ${padding}`;
     }
@@ -1429,12 +1444,9 @@ class AIOTableCell extends _react.Component {
     var className = 'aio-table-cell';
     let {
       striped
-    } = this.context;
-    let {
-      renderIndex
     } = this.props;
 
-    if (renderIndex % 2 === 0 && striped === true) {
+    if (striped) {
       className += ' striped';
     }
 
@@ -1442,11 +1454,7 @@ class AIOTableCell extends _react.Component {
       className += ' aio-table-cell-selectable';
     }
 
-    if (column.template) {
-      className += ' aio-table-cell-template';
-    }
-
-    if (column.template === 'gantt') {
+    if (column.template && column.template.type === 'gantt') {
       className += ' aio-table-cell-gantt';
     }
 
@@ -1466,6 +1474,14 @@ class AIOTableCell extends _react.Component {
       className += ' aio-table-cell-hidden';
     }
 
+    if (row._isFirstChild) {
+      className += ' first-child';
+    }
+
+    if (row._isLastChild) {
+      className += ' last-child';
+    }
+
     return className;
   }
 
@@ -1477,27 +1493,21 @@ class AIOTableCell extends _react.Component {
     let icon;
 
     if (!row._childsLength) {
-      icon = /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-        path: '',
-        size: 1
-      });
+      icon = '';
     } else if (row._opened) {
-      icon = /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-        path: _js.mdiChevronDown,
-        size: 1
-      });
+      icon = aioTableGetSvg('chevronDown');
     } else {
-      icon = /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-        path: _js.mdiChevronRight,
-        size: 1,
-        horizontal: rtl === true
+      icon = aioTableGetSvg('chevronRight', {
+        flip: rtl === true
       });
     }
 
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: "aio-table-toggle",
       onClick: () => fn.toggleRow(row)
-    }, icon), this.context.getGap());
+    }, icon), /*#__PURE__*/_react.default.createElement("div", {
+      className: "aio-table-cell-gap"
+    }));
   }
 
   getContent(row, column, value) {
@@ -1505,6 +1515,9 @@ class AIOTableCell extends _react.Component {
       focused,
       fn
     } = this.context;
+    let {
+      inlineEdit
+    } = this.props;
     var content = '';
     let template = typeof column.template === 'function' ? column.template(row, column) : column.template;
 
@@ -1512,19 +1525,15 @@ class AIOTableCell extends _react.Component {
       content = fn.getSliderCell(template);
     } else if (template && template.type === 'options') {
       content = fn.getOptionsCell(template);
-    } else if (template === 'gantt') {
-      content = fn.getGanttCell(row, column);
-    } else if (template && this.inlineEdit) {
-      if (!focused) {
-        content = template;
-      } else {
-        content = this.getInput(row, column);
-      }
+    } else if (template && template.type === 'gantt') {
+      content = fn.getGanttCell(row, template);
+    } else if (template && inlineEdit) {
+      content = focused ? this.getInput(row, column) : template;
     } else if (template) {
       content = template;
-    } else if (this.inlineEdit) {
+    } else if (inlineEdit) {
       content = this.getInput(row, column);
-    } else if (column.getValue) {
+    } else {
       content = value;
     }
 
@@ -1549,21 +1558,52 @@ class AIOTableCell extends _react.Component {
     return content;
   }
 
+  async changeCell(value) {
+    let {
+      row,
+      column,
+      inlineEdit
+    } = this.props;
+    let {
+      setCellValue
+    } = this.context;
+    let res;
+    this.setState({
+      loading: true
+    });
+
+    if (inlineEdit.onChange) {
+      res = await inlineEdit.onChange(row, value);
+    } else {
+      res = await this.context.onChange(setCellValue(row, column.field, value));
+    }
+
+    this.setState({
+      loading: false
+    });
+    return res;
+  }
+
   getInput(row, column) {
     let {
-      type,
-      getValue,
-      disabled = () => false
-    } = this.inlineEdit;
+      getCellValue
+    } = this.context;
     let {
-      renderIndex
+      attrs,
+      inlineEdit
     } = this.props;
+    let {
+      type,
+      getValue,
+      disabled = () => false,
+      options
+    } = inlineEdit;
     let {
       value
     } = this.state;
 
     if (getValue) {
-      value = getValue(row);
+      value = getCellValue(row, getValue, column.field);
     }
 
     if (disabled(row)) {
@@ -1574,10 +1614,10 @@ class AIOTableCell extends _react.Component {
       return value;
     }
 
-    let props = { ...this.inlineEdit,
+    let props = { ...inlineEdit,
       className: 'aio-table-input',
-      rowindex: renderIndex,
-      colindex: column._renderIndex,
+      'data-row-index': attrs['data-row-index'],
+      'data-col-index': attrs['data-col-index'],
       value: value === null || value === undefined ? '' : value
     };
 
@@ -1592,23 +1632,31 @@ class AIOTableCell extends _react.Component {
           value: e.target.value
         }),
         onBlur: async e => {
+          let {
+            value
+          } = this.state;
+
           if (value === this.props.value) {
             return;
           }
 
-          this.setState({
-            loading: true
-          });
-          let res = await this.inlineEdit.onChange(row, type === 'number' ? parseFloat(value) : value);
-          this.setState({
-            loading: false
-          });
+          let newValue = value;
+
+          if (type === 'number') {
+            newValue = parseFloat(newValue);
+
+            if (isNaN(newValue)) {
+              newValue = 0;
+            }
+          }
+
+          let res = await this.changeCell(newValue);
 
           if (typeof res === 'string') {
             this.setState({
               error: res
             });
-          } else if (res === false) {
+          } else {
             this.setState({
               value: this.props.value
             });
@@ -1620,12 +1668,12 @@ class AIOTableCell extends _react.Component {
     }
 
     if (type === 'select') {
-      if (!this.inlineEdit.options) {
+      if (!options) {
         console.error('aio table => missing options property of column inlineEdit with type="select"');
         return '';
       }
 
-      if (!Array.isArray(this.inlineEdit.options)) {
+      if (!Array.isArray(options)) {
         console.error('aio table => options property of column inlineEdit with type="select" must be an array of objects . each object must have text and value property!!!');
         return '';
       }
@@ -1647,13 +1695,9 @@ class AIOTableCell extends _react.Component {
           }
 
           this.setState({
-            loading: true,
             value
           });
-          let res = await this.inlineEdit.onChange(row, value);
-          this.setState({
-            loading: false
-          });
+          let res = await this.changeCell(value);
 
           if (typeof res === 'string') {
             this.setState({
@@ -1665,7 +1709,7 @@ class AIOTableCell extends _react.Component {
             });
           }
         }
-      }), this.inlineEdit.options.map((o, i) => /*#__PURE__*/_react.default.createElement("option", {
+      }), options.map((o, i) => /*#__PURE__*/_react.default.createElement("option", {
         key: i,
         value: o.value
       }, o.text))), /*#__PURE__*/_react.default.createElement("div", {
@@ -1673,34 +1717,75 @@ class AIOTableCell extends _react.Component {
       }));
     }
 
+    if (type === 'checkbox') {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: 'aio-table-input-container',
+        tabIndex: 0,
+        onKeyDown: async e => {
+          if (e.keyCode === 13) {
+            value = value === true ? true : false;
+            await this.changeCell(!value);
+          }
+        }
+      }, /*#__PURE__*/_react.default.createElement("input", _extends({}, props, {
+        onFocus: () => this.focus = true,
+        onBlur: () => this.focus = false,
+        checked: value === true ? true : false,
+        onChange: async e => {
+          let value = e.target.checked;
+          this.setState({
+            loading: true
+          });
+          await this.changeCell(value);
+          this.setState({
+            loading: false
+          });
+        }
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        className: "aio-table-input-border"
+      }));
+    }
+
     console.error('aio table => missing type property of column input');
     return '';
   }
 
   componentDidUpdate() {
-    if (this.inlineEdit && this.inlineEdit.type === 'select' && this.focus) {
-      (0, _jquery.default)(this.dom.current).find('.aio-table-input').focus();
+    let {
+      inlineEdit
+    } = this.props;
+
+    if (inlineEdit && this.focus) {
+      if (inlineEdit.type === 'select' || inlineEdit.type === 'checkbox') {
+        (0, _jquery.default)(this.dom.current).find('.aio-table-input').focus();
+      }
     }
   }
 
+  getProps(row, column, content) {
+    let title = column.getTooltip ? column.getTooltip(row) : typeof content === 'string' ? content : undefined;
+    return {
+      ref: this.dom,
+      title,
+      style: this.getStyle(column, row),
+      className: this.getClassName(row, column)
+    };
+  }
+
   render() {
     let {
       indent,
-      fn,
-      focused,
-      SetState,
-      onDrag,
-      onDrop,
-      onSwap
+      fn
     } = this.context;
     let {
       row,
       column,
       value,
-      cellId,
-      renderIndex
+      before,
+      after,
+      justify,
+      attrs
     } = this.props;
-    this.inlineEdit = typeof column.inlineEdit === 'function' ? column.inlineEdit(row, column) : column.inlineEdit;
 
     if (this.state.prevValue !== value) {
       setTimeout(() => this.setState({
@@ -1714,9 +1799,6 @@ class AIOTableCell extends _react.Component {
       loading
     } = this.state;
     let content = this.getContent(row, column, value);
-    let before = this.getBefore(row, column);
-    let after = this.getAfter(row, column);
-    let showToggleIcon = column.treeMode;
     let cell;
 
     if (loading) {
@@ -1734,51 +1816,30 @@ class AIOTableCell extends _react.Component {
         }
       }, error);
     } else {
-      let 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
+          width: row._level * indent,
+          flexShrink: 0
+        }
+      }), column.treeMode && this.getToggleIcon(row), before !== undefined && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: "aio-table-icon"
+      }, before), /*#__PURE__*/_react.default.createElement("div", {
+        className: "aio-table-cell-gap"
+      })), content !== undefined && /*#__PURE__*/_react.default.createElement("div", {
+        className: "aio-table-cell-content",
+        style: {
+          justifyContent: justify ? 'center' : undefined
         }
-      }), showToggleIcon && this.getToggleIcon(row), before, /*#__PURE__*/_react.default.createElement("div", {
-        className: "aio-table-content",
-        style: style
-      }, content), after);
+      }, content), after !== undefined && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          flex: 1
+        }
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: "aio-table-icon"
+      }, after)));
     }
 
-    return /*#__PURE__*/_react.default.createElement("div", {
-      key: cellId,
-      tabIndex: 0,
-      ref: this.dom,
-      cellid: cellId,
-      title: typeof content === 'string' ? content : '',
-      "data-evenodd": row._index % 2 === 0 ? 'even' : 'odd',
-      rowindex: renderIndex,
-      colindex: column._renderIndex,
-      childindex: row._childIndex,
-      level: row._level,
-      isfirstchild: row._isFirstChild ? 1 : 0,
-      islastchild: row._isLastChild ? 1 : 0,
-      childslength: row._childsLength,
-      style: this.getStyle(column, row),
-      className: this.getClassName(row, column),
-      draggable: typeof onSwap === 'function' && column.swap,
-      onDragOver: e => e.preventDefault(),
-      onDragStart: () => onDrag(row),
-      onDrop: () => onDrop(row),
-      onClick: e => {
-        if (this.inlineEdit) {
-          if (focused !== cellId) {
-            SetState({
-              focused: cellId
-            });
-            setTimeout(() => (0, _jquery.default)('.aio-table-input:focus').select(), 10);
-          }
-        }
-      }
-    }, cell);
+    return /*#__PURE__*/_react.default.createElement("div", _extends({}, attrs, this.getProps(row, column, content)), cell);
   }
 
 }
@@ -1833,14 +1894,9 @@ class AIOTableFilter extends _react.Component {
     let {
       type
     } = column.filter;
-    let icon = items.length ? /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-      className: "has-filter",
-      path: _js.mdiFilterMenu,
-      size: 0.7
-    }) : /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-      path: _js.mdiFilter,
-      size: 0.7
-    });
+    let icon = items.length ? aioTableGetSvg('filterActive', {
+      className: 'has-filter'
+    }) : aioTableGetSvg('filter');
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "aio-table-filter-icon"
     }, /*#__PURE__*/_react.default.createElement(_aioButton.default, {
@@ -2024,10 +2080,7 @@ class AIOTableFilterItem extends _react.Component {
     }), /*#__PURE__*/_react.default.createElement("div", {
       className: "aio-table-filter-remove",
       onClick: () => onRemove()
-    }, /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-      path: _js.mdiClose,
-      size: 0.7
-    })));
+    }, aioTableGetSvg('close')));
   }
 
 }
@@ -2083,7 +2136,7 @@ function ATFN({
       } = getProps();
       let name = window.prompt(translate('Inter Excel File Name')); // if (name === false || name === undefined || name === null) { return; }
 
-      if (!name.length) return;
+      if (!name || name === null || !name.length) return;
       var data = $$.getJSON(columns, rows);
       var arrData = typeof data != "object" ? JSON.parse(data) : data;
       var CSV = ""; // CSV += 'title';
@@ -2137,7 +2190,8 @@ function ATFN({
       editValue = value => value
     }) {
       let {
-        rowHeight
+        rowHeight,
+        rtl
       } = getProps();
       let [clr1 = '#eee', clr2 = 'dodgerblue'] = colors;
       let points = Array.isArray(value) ? value : [value];
@@ -2158,6 +2212,7 @@ function ATFN({
         style: {
           height: rowHeight
         },
+        direction: rtl ? 'left' : 'right',
         start: start,
         end: end,
         step: 0.1,
@@ -2199,10 +2254,7 @@ function ATFN({
         type: "select",
         caret: false,
         className: "aio-table-options",
-        text: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-          path: _js.mdiDotsHorizontal,
-          size: 0.7
-        }),
+        text: aioTableGetSvg('dots'),
         options: options.map(({
           text,
           icon,
@@ -2221,7 +2273,7 @@ function ATFN({
       });
     },
 
-    getGanttCell(row, column) {
+    getGanttCell(row, template) {
       let {
         rtl
       } = getProps();
@@ -2234,7 +2286,7 @@ function ATFN({
         getText = () => false,
         getStart,
         getEnd
-      } = column;
+      } = template;
 
       if (typeof getStart !== 'function') {
         console.error('aio table => gantt column => column getStart property is not a function');
@@ -2367,7 +2419,56 @@ function ATFN({
       return result;
     },
 
-    onScroll(dom, index) {
+    async onScroll(dom, index) {
+      let {
+        onScrollEnd
+      } = getProps();
+
+      if (onScrollEnd) {
+        if (index === undefined || index === 0) {
+          let table = (0, _jquery.default)(dom.current).find('.aio-table-unit');
+          let scrollTop = table.scrollTop();
+          let scrollHeight = table[0].scrollHeight;
+          let height = table.height();
+
+          if (scrollTop + height === scrollHeight) {
+            let {
+              startIndex
+            } = getState();
+            let {
+              scrollLoadLength,
+              scrollTotalLength
+            } = getProps();
+            let from = startIndex + scrollLoadLength;
+
+            if (from > scrollTotalLength) {
+              return;
+            }
+
+            let to = from + scrollLoadLength;
+
+            if (to > scrollTotalLength) {
+              to = scrollTotalLength;
+            }
+
+            let a = (0, _jquery.default)(dom.current).find('.aio-table-main-loading');
+            a.css({
+              display: 'flex'
+            });
+            let res = await onScrollEnd(from, to);
+            a.css({
+              display: 'none'
+            });
+
+            if (res !== false) {
+              setState({
+                startIndex: from
+              });
+            }
+          }
+        }
+      }
+
       if (index === undefined) {
         return;
       }
@@ -2442,19 +2543,91 @@ function ATFN({
         onChangeSort
       } = getProps();
       let {
-        sorts
+        sorts,
+        columns = [],
+        getCellValue
       } = getState();
+      let sortTitles = sorts.map(o => o.title);
+
+      for (let i = 0; i < columns.length; i++) {
+        if (!columns[i].sort) {
+          continue;
+        }
+
+        if (sortTitles.indexOf(columns[i].title) !== -1) {
+          continue;
+        }
+
+        columns[i]._addedToSorts = true;
+        let column = columns[i];
+
+        if (column.sort === true) {
+          column.sort = {};
+        }
+
+        let {
+          sort
+        } = columns[i];
+        let a = sort.title || column.title || '';
+        let title = typeof a === 'function' ? a() : a;
+        let getValue = sort.getValue || column.getValue;
+        let field = sort.field || column.field;
+        let {
+          toggle = true,
+          dir = 'inc',
+          active = true,
+          type
+        } = sort;
+        sorts.push({
+          title,
+          dir,
+          active,
+          toggle,
+          getValue,
+          type,
+          field
+        });
+      }
+
+      let Sorts = sorts.map(o => {
+        return { ...o,
+          onChangeDir: () => {
+            o.dir = o.dir === 'dec' ? 'inc' : 'dec';
+            setState({
+              sorts
+            });
+
+            if (onChangeSort) {
+              onChangeSort(Sorts.filter(o => o.active !== false));
+            }
+          },
+          onChangeActive: () => {
+            o.active = o.active === undefined ? true : o.active;
+            o.active = !o.active;
+            setState({
+              sorts
+            });
+
+            if (onChangeSort) {
+              onChangeSort(Sorts.filter(o => o.active !== false));
+            }
+          }
+        };
+      });
       let result = [];
 
-      for (let i = 0; i < sorts.length; i++) {
-        let sort = sorts[i];
+      for (let i = 0; i < Sorts.length; i++) {
+        let sort = Sorts[i];
         let {
           getValue,
-          type = 'inc',
+          dir = 'inc',
           title,
           active = true,
           toggle = true,
-          isDate
+          type,
+          onChangeDir,
+          onChangeActive,
+          field
         } = sort;
 
         if (!title) {
@@ -2462,15 +2635,10 @@ function ATFN({
           continue;
         }
 
-        if (typeof getValue !== 'function') {
-          console.error('aio table => sort getValue property is not a function');
-          continue;
-        }
-
         if (active === true) {
-          if (isDate) {
+          if (type === 'date') {
             let newGetValue = row => {
-              let value = getValue(row);
+              let value = getCellValue(row, getValue, field);
 
               if (typeof value !== 'string') {
                 return 0;
@@ -2481,12 +2649,12 @@ function ATFN({
 
             result.push({
               getValue: row => newGetValue(row),
-              type
+              dir
             });
           } else {
             result.push({
               getValue,
-              type
+              dir
             });
           }
         }
@@ -2502,31 +2670,13 @@ function ATFN({
                 display: 'flex',
                 justifyContent: 'flex-end'
               }
-            }, /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-              path: type === 'dec' ? _js.mdiArrowDown : _js.mdiArrowUp,
-              size: 0.8,
+            }, aioTableGetSvg(dir === 'dec' ? 'arrowDown' : 'arrowUp', {
               onClick: e => {
                 e.stopPropagation();
-                sort.type = sort.type === 'dec' ? 'inc' : 'dec';
-                setState({
-                  sorts
-                });
-
-                if (onChangeSort) {
-                  onChangeSort(sorts.filter(o => o.active !== false));
-                }
+                onChangeDir();
               }
             })),
-            onClick: () => {
-              sort.active = !active;
-              setState({
-                sorts
-              });
-
-              if (onChangeSort) {
-                onChangeSort(sorts.filter(o => o.active !== false));
-              }
-            }
+            onClick: () => onChangeActive()
           });
         }
       }
@@ -2549,8 +2699,7 @@ function ATFN({
         let {
           title,
           active = true,
-          toggle = true,
-          getValue
+          toggle = true
         } = group;
 
         if (!title) {
@@ -2558,11 +2707,6 @@ function ATFN({
           continue;
         }
 
-        if (typeof getValue !== 'function') {
-          console.error('aio table => group getValue property is not a function');
-          continue;
-        }
-
         groupDictionary[title] = groupDictionary[title] === undefined ? active : groupDictionary[title];
 
         if (groupDictionary[title]) {
@@ -2664,10 +2808,10 @@ function ATFN({
       } = getState();
       let column = columns[index];
       let {
-        title,
         show,
         storageKey
       } = column;
+      let title = typeof column.title === 'function' ? column.title() : column.title;
       toolbar.show = true;
       toolbar.toggle.push({
         text: title,
@@ -2927,7 +3071,18 @@ function ATFN({
       }, items);
     },
 
-    getLoading() {
+    getLoading(isMain) {
+      if (isMain) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "aio-table-loading aio-table-main-loading",
+          style: {
+            display: 'none'
+          }
+        }, $$.cubes2({
+          thickness: [6, 40]
+        }));
+      }
+
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "aio-table-loading"
       }, $$.cubes2({
@@ -2994,7 +3149,8 @@ function ATFN({
       } = getProps();
       let {
         filterDictionary,
-        searchText
+        searchText,
+        getCellValue
       } = getState();
       row._values = {};
       let show = true,
@@ -3006,14 +3162,7 @@ function ATFN({
 
       for (let i = 0; i < columns.length; i++) {
         let column = columns[i],
-            value;
-
-        try {
-          value = typeof column.getValue === 'function' ? column.getValue(row) : undefined;
-        } catch {
-          value = undefined;
-        }
-
+            value = getCellValue(row, column.getValue, column.field);
         row._values[column._index] = value;
         filterDictionary[column._index] = filterDictionary[column._index] || {
           items: [],
@@ -3021,7 +3170,15 @@ function ATFN({
         };
 
         if (show && search) {
-          show = search(row, searchText);
+          if (searchText === '') {
+            show = true;
+          } else {
+            try {
+              show = search(row, searchText);
+            } catch {
+              show = false;
+            }
+          }
         }
 
         if (show && !onChangeFilter) {
@@ -3268,6 +3425,10 @@ function ATFN({
     },
 
     getRowsBySort(rows, sorts) {
+      let {
+        getCellValue
+      } = getState();
+
       if (!sorts.length) {
         return rows;
       }
@@ -3280,17 +3441,18 @@ function ATFN({
         for (let i = 0; i < sorts.length; i++) {
           let {
             getValue,
-            type
+            dir,
+            field
           } = sorts[i];
-          let aValue = getValue(a),
-              bValue = getValue(b);
+          let aValue = getCellValue(a, getValue, field),
+              bValue = getCellValue(b, getValue, field);
 
           if (aValue < bValue) {
-            return -1 * (type === 'dec' ? -1 : 1);
+            return -1 * (dir === 'dec' ? -1 : 1);
           }
 
           if (aValue > bValue) {
-            return 1 * (type === 'dec' ? -1 : 1);
+            return 1 * (dir === 'dec' ? -1 : 1);
           }
 
           if (i !== sorts.length - 1) {
@@ -3370,7 +3532,8 @@ function ATFN({
       }
 
       var {
-        groupsOpen
+        groupsOpen,
+        getCellValue
       } = getState();
 
       function msf(obj, _level, parents) {
@@ -3402,7 +3565,7 @@ function ATFN({
       for (let i = 0; i < roots.length; i++) {
         let root = roots[i];
         var obj = newModel;
-        let values = groups.map(group => group.getValue(root[0].row));
+        let values = groups.map(group => getCellValue(root[0].row, group.getValue, group.field));
 
         for (let j = 0; j < values.length; j++) {
           let value = values[j];
@@ -3497,4 +3660,159 @@ function ATFN({
     getFullCellStyle: $$.getFullCellStyle,
     getNoData: $$.getNoData
   };
+}
+
+function aioTableGetSvg(type, conf = {}) {
+  let {
+    className,
+    flip,
+    onClick,
+    box = '0 0 24 24'
+  } = conf;
+  let style1 = {
+    width: '1.05rem',
+    height: '1.05rem'
+  };
+  style1.background = '';
+
+  if (flip) {
+    style1.transform = 'scaleX(-1)';
+    style1.transformOrigin = 'center center';
+  }
+
+  let style2 = {
+    fill: 'currentcolor'
+  };
+  let Attrs = {
+    viewBox: box,
+    role: "presentation",
+    style: style1
+  };
+
+  if (className) {
+    Attrs.className = className;
+  }
+
+  if (onClick) {
+    Attrs.onClick = onClick;
+  }
+
+  if (type === 'eye') {
+    return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
+      d: "M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z",
+      style: style2
+    }));
+  }
+
+  if (type === 'magnify') {
+    return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
+      d: "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z",
+      style: style2
+    }));
+  }
+
+  if (type === 'close') {
+    return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
+      d: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z",
+      style: style2
+    }));
+  }
+
+  if (type === 'toggleAllPlus') {
+    return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
+      d: "M18,8H8V18H6V8A2,2 0 0,1 8,6H18V8M14,2H4A2,2 0 0,0 2,4V14H4V4H14V2M22,12V20A2,2 0 0,1 20,22H12A2,2 0 0,1 10,20V12A2,2 0 0,1 12,10H20A2,2 0 0,1 22,12M20,15H17V12H15V15H12V17H15V20H17V17H20V15Z",
+      style: style2
+    }));
+  }
+
+  if (type === 'toggleAllMinus') {
+    return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
+      d: "M14,4H4V14H2V4A2,2 0 0,1 4,2H14V4M18,6H8A2,2 0 0,0 6,8V18H8V8H18V6M22,12V20A2,2 0 0,1 20,22H12A2,2 0 0,1 10,20V12A2,2 0 0,1 12,10H20A2,2 0 0,1 22,12M20,15H12V17H20V15Z",
+      style: style2
+    }));
+  }
+
+  if (type === 'excel') {
+    return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
+      d: "M21.17 3.25Q21.5 3.25 21.76 3.5 22 3.74 22 4.08V19.92Q22 20.26 21.76 20.5 21.5 20.75 21.17 20.75H7.83Q7.5 20.75 7.24 20.5 7 20.26 7 19.92V17H2.83Q2.5 17 2.24 16.76 2 16.5 2 16.17V7.83Q2 7.5 2.24 7.24 2.5 7 2.83 7H7V4.08Q7 3.74 7.24 3.5 7.5 3.25 7.83 3.25M7 13.06L8.18 15.28H9.97L8 12.06L9.93 8.89H8.22L7.13 10.9L7.09 10.96L7.06 11.03Q6.8 10.5 6.5 9.96 6.25 9.43 5.97 8.89H4.16L6.05 12.08L4 15.28H5.78M13.88 19.5V17H8.25V19.5M13.88 15.75V12.63H12V15.75M13.88 11.38V8.25H12V11.38M13.88 7V4.5H8.25V7M20.75 19.5V17H15.13V19.5M20.75 15.75V12.63H15.13V15.75M20.75 11.38V8.25H15.13V11.38M20.75 7V4.5H15.13V7Z",
+      style: style2
+    }));
+  }
+
+  if (type === 'sort') {
+    return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
+      d: "M18 21L14 17H17V7H14L18 3L22 7H19V17H22M2 19V17H12V19M2 13V11H9V13M2 7V5H6V7H2Z",
+      style: style2
+    }));
+  }
+
+  if (type === 'group') {
+    return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
+      d: "M3,3H9V7H3V3M15,10H21V14H15V10M15,17H21V21H15V17M13,13H7V18H13V20H7L5,20V9H7V11H13V13Z",
+      style: style2
+    }));
+  }
+
+  if (type === 'freeze') {
+    return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
+      d: "M4 22H2V2H4V22M22 7H6V10H22V7M16 14H6V17H16V14Z",
+      style: style2
+    }));
+  }
+
+  if (type === 'filter') {
+    return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
+      d: "M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z",
+      style: style2
+    }));
+  }
+
+  if (type === 'filterActive') {
+    return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
+      d: "M11 11L16.76 3.62A1 1 0 0 0 16.59 2.22A1 1 0 0 0 16 2H2A1 1 0 0 0 1.38 2.22A1 1 0 0 0 1.21 3.62L7 11V16.87A1 1 0 0 0 7.29 17.7L9.29 19.7A1 1 0 0 0 10.7 19.7A1 1 0 0 0 11 18.87V11M13 16L18 21L23 16Z",
+      style: style2
+    }));
+  }
+
+  if (type === 'dots') {
+    return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
+      d: "M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z",
+      style: style2
+    }));
+  }
+
+  if (type === 'chevronDown') {
+    return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
+      d: "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z",
+      style: style2
+    }));
+  }
+
+  if (type === 'chevronRight') {
+    return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
+      d: "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z",
+      style: style2
+    }));
+  }
+
+  if (type === 'doubleChevronRight') {
+    return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
+      d: "M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z",
+      style: style2
+    }));
+  }
+
+  if (type === 'arrowUp') {
+    return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
+      d: "M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z",
+      style: style2
+    }));
+  }
+
+  if (type === 'arrowDown') {
+    return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
+      d: "M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z",
+      style: style2
+    }));
+  }
 }