aio-table 8.0.0 → 9.0.0

package/index.js

@@ -1,2870 +1,523 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.convertFlatModel = convertFlatModel;
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@mdi/react");
-var _js = require("@mdi/js");
-var _aioButton = _interopRequireDefault(require("aio-button"));
-var _reactVirtualDom = _interopRequireDefault(require("react-virtual-dom"));
-var _jquery = _interopRequireDefault(require("jquery"));
-require("./index.css");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-let TableContext = /*#__PURE__*/(0, _react.createContext)();
-let TableCLS = {
-  row: 'row',
-  header: 'table-header',
-  title: 'table-title',
-  resizeHandle: 'title-resize-handle',
-  rows: 'rows',
-  table: 'table',
-  toolbarIconButton: 'toolbar-icon',
-  searchBox: 'aio-table-search',
-  toolbar: 'table-toolbar',
-  rowToggle: 'table-toggle',
-  cellBefore: 'cell-before',
-  cellAfter: 'cell-after',
-  cellContent: 'cell-content',
-  cellSubtext: 'cell-subtext',
-  cell: 'cell',
-  filterPopup: 'table-filter-popup',
-  loading: 'table-loading',
-  addFilter: 'table-filter-add',
-  filterOperator: 'table-filter-operator',
-  filterItem: 'table-filter-item',
-  filterValue: 'table-filter-value',
-  filterRemove: 'table-filter-remove',
-  groupRow: 'table-group-row',
-  inlineEditInput: 'table-inline-edit-input',
-  freezeContainer: 'table-freeze-container',
-  unfreezeContainer: 'table-unfreeze-container',
-  splitter: 'table-splitter',
-  paging: 'table-paging',
-  toolbarPopupHeader: 'toolbar-popup-header',
-  rowTemplate: 'row-template',
-  toolbarItem: 'table-toolbar-item'
-};
-class Table extends _react.Component {
-  constructor(props) {
-    super(props);
-    this.dom = /*#__PURE__*/(0, _react.createRef)();
-    (0, _jquery.default)('body').on('focus', '.' + TableCLS.inlineEditInput, e => {
-      (0, _jquery.default)(e.target).select();
-    });
-    this.getSearchs = functions.getSearchs.bind(this);
-    this.getFilterResult = functions.getFilterResult.bind(this);
-    this.isRowOpen = functions.isRowOpen.bind(this);
-    this.onScroll = functions.onScroll.bind(this);
-    let openDictionary = {};
-    if (props.getRowId && props.tableId) {
-      openDictionary = localStorage.getItem('tableopendic' + props.tableId);
-      if (!openDictionary || openDictionary === null) {
-        localStorage.setItem('tableopendic' + props.tableId, '{}');
-      } else {
-        openDictionary = JSON.parse(openDictionary);
-      }
-    }
-    this.state = {
-      openDictionary,
-      filters: [],
-      searchText: '',
-      touch: 'ontouchstart' in document.documentElement,
-      groupsOpen: {},
-      rowHeight: props.rowHeight,
-      freezeSize: 240,
-      paging: props.paging,
-      getValueByField: functions.getValueByField,
-      Excel: Excel(() => this.props),
-      Sort: Sort(() => this.props, () => this.state, this.setColumns.bind(this)),
-      Group: Group(() => this.props, () => this.state, this.setColumns.bind(this)),
-      columns: (props.columns || []).map(c => {
-        return {
-          ...c
-        };
-      }),
-      prevColumns: JSON.stringify(props.columns),
-      saveColumnInStorage: this.saveColumnInStorage.bind(this),
-      setColumn: this.setColumn.bind(this)
-    };
-    this.updateColumnsByStorageKey();
-  }
-  translate(text) {
-    let {
-      translate = o => o,
-      lang
-    } = this.props;
-    if (lang) {
-      if (lang === 'farsi') {
-        text = {
-          'Search': 'جستجو',
-          'Contain': 'شامل',
-          'Not Contain': 'غیر شامل',
-          'Equal': 'برابر',
-          'Not Equal': 'مخالف',
-          'Greater Than': 'بزرگتر از',
-          'Less Than': 'کوچکتر از',
-          'and': 'و',
-          'or': 'یا',
-          'add': 'افزودن',
-          'Inter Excel File Name': 'نام فایل اکسل را وارد کنید',
-          'Sort By': 'مرتب سازی بر اساس',
-          'Show Columns': 'نمایش ستون ها',
-          'Group By': 'گروه بندی بر اساس'
-        }[text];
-      } else if (lang === 'english') {} else {
-        console.error('aio-table => lang props should be "english" or "farsi"');
-      }
-    }
-    return translate(text) || text;
-  }
-  updateColumnsByStorageKey() {
-    let {
-      columns = []
-    } = this.state;
-    for (let i = 0; i < columns.length; i++) {
-      let column = columns[i];
-      let {
-        storageKey
-      } = column;
-      if (!storageKey) {
-        continue;
-      }
-      let storageObj = localStorage.getItem('tablecolumnstorage' + storageKey) || '{}';
-      storageObj = JSON.parse(storageObj);
-      storageObj = {
-        ...storageObj,
-        group: column.group ? storageObj.group : undefined,
-        sort: column.sort ? storageObj.sort : undefined,
-        show: column.toggleShow ? storageObj.show : column.show,
-        //اگر تاگل نداشت از استوریج نمی خونیم چون ممکنه تاگل حذف شده باشه و دیگه نشه ستون رو ویزیبل کرد
-        width: column.resizable !== false ? storageObj.width : column.width //اگر ریسایزبل نبود از استوریج نمی خونیم چون ممکنه ریسایزبل فالس شده باشه و دیگه نشه اندازه ستون رو کنترل کرد
-      };
-
-      localStorage.setItem('tablecolumnstorage' + storageKey, JSON.stringify(storageObj));
-      this.setColumn(column, {
-        _storageObj: storageObj
-      });
-      for (let prop in storageObj) {
-        column[prop] = storageObj[prop];
-      }
-    }
-  }
-  saveColumnInStorage(column, key, value) {
-    if (!column.storageKey) {
-      return;
-    }
-    let storageObj = {
-      ...column._storageObj
-    };
-    storageObj[key] = value;
-    this.setColumn(column, {
-      _storageObj: storageObj
-    });
-    localStorage.setItem('tablecolumnstorage' + column.storageKey, JSON.stringify(column._storageObj));
-  }
-  setColumns(columns) {
-    this.setState({
-      columns
-    });
-  }
-  setColumn(column, obj) {
-    for (let prop in obj) {
-      column[prop] = obj[prop];
-    }
-  }
-  getRowById(id) {
-    return {
-      ...this.rows_object[id],
-      _detail: this.details_object[id]
-    };
-  }
-  getRowDetailById(id) {
-    if (id === undefined) {
-      return false;
-    }
-    return this.details_object[id];
-  }
-  getRowDetailsByColumns(row, id) {
-    let {
-      columns = [],
-      getValueByField
-    } = this.state;
-    let cells = [];
-    let freezeCells = [];
-    let unfreezeCells = [];
-    let values = {};
-    let json = {};
-    for (let j = 0; j < columns.length; j++) {
-      let column = columns[j];
-      if (column.show === false) {
-        continue;
-      }
-      let value = getValueByField(row, column);
-      values[column.dataColumnId] = value;
-      json[column.title] = value === undefined ? '' : value;
-      let cell = striped => {
-        let {
-          _show
-        } = this.getRowDetailById(id);
-        if (_show === false) {
-          return null;
-        }
-        if (!this.isRowOpen(id)) {
-          return null;
-        }
-        let {
-          width,
-          flex,
-          minWidth = 36,
-          dataColumnId
-        } = column;
-        if (width === undefined && flex === undefined) {
-          flex = 1;
-        }
-        return {
-          html: /*#__PURE__*/_react.default.createElement(Cell, {
-            striped: striped,
-            key: id + dataColumnId + column.freeze,
-            colId: j,
-            rowId: id,
-            column: column,
-            value: value
-          }),
-          size: width,
-          flex,
-          minWidth,
-          attrs: {
-            'data-column-id': dataColumnId
-          }
-        };
-      };
-      if (column.freeze) {
-        this.freezeMode = true;
-        freezeCells.push(cell);
-      } else {
-        unfreezeCells.push(cell);
-      }
-      cells.push(cell);
-    }
-    return {
-      cells,
-      freezeCells,
-      unfreezeCells,
-      values,
-      json
-    };
-  }
-  getRowId(row) {
-    if (row._id === undefined) {
-      let {
-        getRowId
-      } = this.props;
-      if (getRowId) {
-        let {
-          getValueByField
-        } = this.state;
-        return getValueByField(row, undefined, getRowId);
-      } else {
-        return 'row' + Math.random();
-      }
-    } else {
-      return row._id;
-    }
-  }
-  getModelDetails_req(model = [], parents) {
-    let {
-      rowChilds
-    } = this.props;
-    let {
-      getValueByField
-    } = this.state;
-    for (let i = 0; i < model.length; i++) {
-      let detail = {};
-      let row = model[i];
-      let id = this.getRowId(row);
-      row._id = id;
-      detail._id = id;
-      let {
-        cells,
-        freezeCells,
-        unfreezeCells,
-        values,
-        json
-      } = this.getRowDetailsByColumns(row, id);
-      detail._json = json;
-      detail._cells = cells;
-      detail._freezeCells = freezeCells;
-      detail._unfreezeCells = unfreezeCells;
-      detail._values = values;
-      detail._show = this.getFilterResult(row, detail);
-      this.rows_object[id] = row;
-      this.rows_array.push(row);
-      this.details_object[id] = detail;
-      if (rowChilds) {
-        let childs = getValueByField(row, undefined, rowChilds) || [];
-        detail._childs = childs;
-        detail._parentIds = parents.map(o => o._id);
-        detail._parentId = detail._parentIds[detail._parentIds.length - 1];
-        if (detail._show) {
-          for (let j = 0; j < detail._parentIds.length; j++) {
-            let parentId = detail._parentIds[j];
-            let parentRowDetail = this.details_object[parentId];
-            if (parentRowDetail._show === false) {
-              parentRowDetail._show = 'relative';
-            }
-          }
-        }
-        if (childs.length) {
-          this.getModelDetails_req(childs, parents.concat(row));
-        }
-      }
-    }
-  }
-  getTreeDetails(model = [], level, parents, nestedIndex) {
-    let childIndex = 0;
-    let {
-      openDictionary
-    } = this.state;
-    for (let i = 0; i < model.length; i++) {
-      let row = model[i];
-      let detail = this.details_object[row._id];
-      let parentDetail = this.details_object[detail._parentId];
-      detail._level = level;
-      detail._open = openDictionary[row._id] === undefined ? true : openDictionary[row._id];
-      detail._nestedIndex = nestedIndex.concat(i);
-      detail._getParents = () => parents;
-      detail._isLastChild = () => {
-        let detail = this.details_object[row._id];
-        let {
-          _parentId,
-          _id
-        } = detail;
-        let res = false;
-        if (_parentId !== undefined) {
-          let {
-            _lastChildId
-          } = this.details_object[_parentId];
-          res = _lastChildId === _id;
-        }
-        return res;
-      };
-      if (detail._show !== false) {
-        detail._childIndex = childIndex;
-        detail._isFirstChild = () => detail._childIndex === 0;
-        childIndex++;
-        detail._renderIndex = this.rowRenderIndex;
-        this.rowRenderIndex++;
-        if (parentDetail) {
-          parentDetail._lastChildId = detail._id;
-        }
-      }
-      if (detail._childs.length) {
-        this.getTreeDetails(detail._childs, level + 1, parents.concat(row), detail._nestedIndex);
-      }
-    }
-  }
-  getModelDetails(model) {
-    let {
-      paging,
-      Group
-    } = this.state;
-    let {
-      rowChilds
-    } = this.props;
-    if (paging) {
-      let {
-        number = 1,
-        sizes = [1, 5, 10, 15, 20, 30, 40, 50, 70, 100, 150, 200],
-        size = sizes[0],
-        length = model.length,
-        onChange
-      } = paging;
-      let pages = Math.ceil(length / size);
-      paging.sizes = sizes;
-      paging.pages = pages;
-      paging.size = size;
-      paging.number = number;
-      if (!onChange) {
-        let start = (paging.number - 1) * paging.size;
-        let end = start + paging.size;
-        if (end > length) {
-          end = length;
-        }
-        model = model.slice(start, end);
-      }
-    }
-    this.details_object = {};
-    this.rows_object = {};
-    this.rows_array = [];
-    this.getModelDetails_req(model, []);
-    this.rowRenderIndex = 0;
-    if (rowChilds) {
-      this.getTreeDetails(model, 0, [], []);
-    }
-    this.groups = Group.get();
-    if (this.groups.length) {
-      this.rows_array = Group.groupBy(this.rows_array.filter(o => this.details_object[o._id]._show), this.groups.filter(o => o.active));
-    }
-  }
-  toggleRow(id) {
-    let {
-      getRowId,
-      tableId
-    } = this.props;
-    let {
-      openDictionary
-    } = this.state;
-    if (this.details_object[id]._show === 'relative') {
-      return;
-    }
-    openDictionary[id] = openDictionary[id] === undefined ? true : openDictionary[id];
-    openDictionary[id] = !openDictionary[id];
-    this.setState({
-      openDictionary
-    });
-    if (getRowId && tableId) {
-      localStorage.setItem('tableopendic' + tableId, JSON.stringify(openDictionary));
-    }
-  }
-  toggle_layout(id, gap) {
-    let icon;
-    let {
-      getToggleIcon,
-      rtl,
-      indent
-    } = this.props;
-    let {
-      _childs,
-      _open,
-      _show
-    } = this.details_object[id];
-    if (getToggleIcon) {
-      icon = getToggleIcon(!!_open);
-    } else if (!_childs.length) {
-      icon = /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-        path: _js.mdiCircleMedium,
-        size: 0.8
-      });
-    } else {
-      icon = /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-        path: _open ? _js.mdiChevronDown : rtl ? _js.mdiChevronLeft : _js.mdiChevronRight,
-        size: 0.8
-      });
-    }
-    return {
-      row: [{
-        size: indent,
-        className: TableCLS.rowToggle,
-        html: icon,
-        align: 'v',
-        style: {
-          cursor: _show === 'relative' ? 'not-allowed' : 'pointer',
-          background: 'rgba(0,0,0,0.03)',
-          height: '100%'
-        },
-        attrs: {
-          onClick: () => {
-            if (_show === 'relative') {
-              return;
-            }
-            this.toggleRow(id);
-          }
-        }
-      }, {
-        size: 6
-      }]
-    };
-  }
-  indent_layout(rowId) {
-    let {
-      indent,
-      rowGap,
-      rowHeight,
-      indentColor = 'lightblue'
-    } = this.props;
-    let detail = this.getRowDetailById(rowId);
-    if (!detail._level) {
-      return false;
-    }
-    let getPath = () => {
-      let dasharray = [1, 3];
-      let {
-        _level: level,
-        _parentIds,
-        _isLastChild
-      } = detail;
-      let isLastChild = _isLastChild();
-      let x0 = indent * (level - 1) + indent / 2,
-        x1 = x0 + indent / 2,
-        y0 = 0,
-        y1 = rowHeight / 2 + rowGap,
-        y2 = rowHeight + rowGap;
-      let pathes = [];
-      pathes.push( /*#__PURE__*/_react.default.createElement("path", {
-        d: `M${x0} ${y0} L${x0} ${isLastChild ? y1 : y2} Z`,
-        stroke: indentColor,
-        strokeWidth: 1,
-        strokeDasharray: dasharray
-      }));
-      pathes.push( /*#__PURE__*/_react.default.createElement("path", {
-        d: `M${x0} ${y1} L${x1} ${y1} Z`,
-        stroke: indentColor,
-        strokeWidth: 1,
-        strokeDasharray: dasharray
-      }));
-      for (let i = 1; i < _parentIds.length; i++) {
-        let {
-          _isLastChild
-        } = this.getRowDetailById(_parentIds[i]);
-        if (_isLastChild()) {
-          continue;
-        }
-        let x = (i - 0.5) * indent;
-        pathes.push( /*#__PURE__*/_react.default.createElement("path", {
-          d: `M${x} ${y0} L${x} ${y2} Z`,
-          stroke: indentColor,
-          strokeWidth: 1,
-          strokeDasharray: dasharray
-        }));
-      }
-      return pathes;
-    };
-    return {
-      size: detail._level * indent,
-      style: {
-        height: '100%',
-        overflow: 'visible'
-      },
-      html: /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          width: detail._level * indent,
-          height: '100%',
-          position: 'relative'
-        }
-      }, /*#__PURE__*/_react.default.createElement("svg", {
-        width: 20,
-        height: 20,
-        style: {
-          height: `calc(100% + ${rowGap}px)`,
-          width: '100%',
-          position: 'absolute',
-          top: -rowGap
-        }
-      }, getPath(indent, detail)))
-    };
-  }
-  getContext() {
-    let {
-      details_object,
-      rows_object,
-      rows_array
-    } = this;
-    let {
-      openDictionary
-    } = this.state;
-    return {
-      ...this.props,
-      openDictionary,
-      state: this.state,
-      details_object,
-      rows_object,
-      rows_array,
-      getRowById: this.getRowById.bind(this),
-      getRowDetailById: this.getRowDetailById.bind(this),
-      isRowOpen: this.isRowOpen.bind(this),
-      SetState: obj => this.setState(obj),
-      setColumns: this.setColumns.bind(this),
-      getSearchs: this.getSearchs.bind(this),
-      toggleRow: this.toggleRow.bind(this),
-      indent_layout: this.indent_layout.bind(this),
-      toggle_layout: this.toggle_layout.bind(this),
-      translate: this.translate.bind(this),
-      groups: this.groups
-    };
-  }
-  keyDown(e) {
-    if (e.keyCode === 27) {
-      (0, _jquery.default)('.' + TableCLS.inlineEditInput).blur();
-    }
-    //else if([37,38,39,40].indexOf(e.keyCode) !== -1){this.arrow(e);}
-  }
-
-  arrow(e) {
-    var container = (0, _jquery.default)(this.dom.current);
-    var {
-      rtl
-    } = this.context;
-    let inputs = container.find('.' + TableCLS.inlineEditInput);
-    if (inputs.length === 0) {
-      return;
-    }
-    let focusedInput = inputs.filter(':focus');
-    if (!focusedInput.length) {
-      inputs.eq(1).focus().select();
-      return;
-    }
-    let rowId = focusedInput.attr('data-row-id');
-    let colId = focusedInput.attr('data-col-id');
-    if (e.keyCode === 40 || e.keyCode === 38) {
-      let sign = e.keyCode === 40 ? 'next' : 'prev';
-      e.preventDefault();
-      let next = inputs[sign](`[data-col-id='${colId}']`);
-      if (next.length) {
-        next.focus().select();
-      }
-    } else if (e.keyCode === 39 || e.keyCode === 37) {
-      e.preventDefault();
-      let sign = (e.keyCode === 37 ? -1 : 1) * (rtl ? -1 : 1) === 1 ? 'next' : 'prev';
-      let next = focusedInput[sign](`[data-row-id='${rowId}']`);
-      console.log(next.length);
-      if (next.length) {
-        next.focus().select();
-      }
-    }
-  }
-  toolbar_layout() {
-    return {
-      html: /*#__PURE__*/_react.default.createElement(Toolbar, null)
-    };
-  }
-  async componentDidMount() {
-    this.state.Sort.set();
-  }
-  units_layout() {
-    let {
-      columns
-    } = this.state;
-    if (this.freezeMode) {
-      let {
-        freezeSize
-      } = this.state;
-      return {
-        flex: 1,
-        gap: 8,
-        row: [{
-          gapAttrs: {
-            className: TableCLS.splitter
-          },
-          size: freezeSize,
-          onResize: freezeSize => this.setState({
-            freezeSize
-          }),
-          html: /*#__PURE__*/_react.default.createElement(TableUnit, {
-            onScroll: () => this.onScroll(0),
-            cellsType: "freezeCells",
-            columns: columns.filter(({
-              freeze
-            }) => freeze)
-          })
-        }, {
-          flex: 1,
-          html: /*#__PURE__*/_react.default.createElement(TableUnit, {
-            cellsType: "unfreezeCells",
-            columns: columns.filter(({
-              freeze
-            }) => !freeze),
-            onScroll: () => this.onScroll(1)
-          })
-        }]
-      };
-    }
-    return {
-      flex: 1,
-      html: /*#__PURE__*/_react.default.createElement(TableUnit, {
-        cellsType: "cells",
-        columns: columns,
-        onScroll: e => this.onScroll()
-      })
-    };
-  }
-  async changePaging(type, value) {
-    let {
-      paging
-    } = this.state;
-    let {
-      pages,
-      number,
-      size,
-      onChange
-    } = paging;
-    let newNumber = number;
-    let newSize = size;
-    if (type === 'prev') {
-      newNumber = number - 1;
-    } else if (type === 'next') {
-      newNumber = number + 1;
-    } else if (type === 'first') {
-      newNumber = 1;
-    } else if (type === 'last') {
-      newNumber = pages;
-    } else if (type === 'size') {
-      newSize = value;
-    }
-    if (newNumber < 1) {
-      newNumber = 1;
-    }
-    if (newNumber > pages) {
-      newNumber = pages;
-    }
-    let newPaging = {
-      ...paging,
-      number: newNumber,
-      size: newSize
-    };
-    if (onChange) {
-      let res = await onChange(newPaging);
-      if (res !== false) {
-        this.setState({
-          paging: newPaging
-        });
-      }
-    } else {
-      this.setState({
-        paging: newPaging
-      });
-    }
-  }
-  paging_layout() {
-    let {
-      paging
-    } = this.state;
-    if (!paging) {
-      return false;
-    }
-    let {
-      rtl,
-      model
-    } = this.props;
-    let {
-      number = 1,
-      sizes = [1, 5, 10, 15, 20, 30, 40, 50, 70, 100, 150, 200],
-      size = sizes[0],
-      length = model.length
-    } = paging;
-    let pages = Math.ceil(length / size);
-    paging.sizes = sizes;
-    paging.pages = pages;
-    paging.size = size;
-    paging.number = number;
-    return {
-      className: TableCLS.paging,
-      style: {
-        direction: 'ltr'
-      },
-      row: [{
-        flex: 1
-      }, {
-        html: /*#__PURE__*/_react.default.createElement("button", {
-          className: TableCLS.toolbarIconButton
-        }, /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-          path: _js.mdiChevronDoubleLeft,
-          size: 0.8
-        })),
-        attrs: {
-          onClick: () => this.changePaging(rtl ? 'last' : 'first')
-        }
-      }, {
-        html: /*#__PURE__*/_react.default.createElement("button", {
-          className: TableCLS.toolbarIconButton
-        }, /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-          path: _js.mdiChevronLeft,
-          size: 0.8
-        })),
-        attrs: {
-          onClick: () => this.changePaging(rtl ? 'next' : 'prev')
-        }
-      }, {
-        html: rtl ? pages + ' / ' + number : number + ' / ' + pages,
-        style: {
-          fontSize: 12,
-          padding: '0 12px'
-        },
-        align: 'vh'
-      }, {
-        html: /*#__PURE__*/_react.default.createElement("button", {
-          className: TableCLS.toolbarIconButton
-        }, /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-          path: _js.mdiChevronRight,
-          size: 0.8
-        })),
-        attrs: {
-          onClick: () => this.changePaging(rtl ? 'prev' : 'next')
-        }
-      }, {
-        html: /*#__PURE__*/_react.default.createElement("button", {
-          className: TableCLS.toolbarIconButton
-        }, /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-          path: _js.mdiChevronDoubleRight,
-          size: 0.8
-        })),
-        attrs: {
-          onClick: () => this.changePaging(rtl ? 'first' : 'last')
-        }
-      }, {
-        html: /*#__PURE__*/_react.default.createElement(_aioButton.default, {
-          className: TableCLS.toolbarIconButton,
-          type: "select",
-          options: sizes,
-          optionValue: "option",
-          optionText: "option",
-          search: false,
-          caret: false,
-          text: size,
-          optionStyle: "{height:24}",
-          onChange: value => this.changePaging('size', value)
-        })
-      }, {
-        flex: 1
-      }]
-    };
-  }
-  setColumnIds() {
-    let {
-      columns = []
-    } = this.state;
-    for (let i = 0; i < columns.length; i++) {
-      if (!columns[i].dataColumnId) {
-        columns[i].dataColumnId = 'col' + Math.random();
-      }
-    }
-  }
-  render() {
-    let {
-      model,
-      columns,
-      className,
-      style
-    } = this.props;
-    let {
-      prevColumns
-    } = this.state;
-    let columnsStr = JSON.stringify(columns);
-    if (columnsStr !== prevColumns) {
-      let newColumns = JSON.parse(columnsStr);
-      setTimeout(() => this.setState({
-        columns: newColumns,
-        prevColumns: columnsStr
-      }, () => this.updateColumnsByStorageKey()), 0);
-    }
-    this.setColumnIds();
-    //پیجینگ را زود تر می سازیم که دیفالت هاش محاسبه بشه
-    let pagingLayout = this.paging_layout();
-    this.getModelDetails(model);
-    let context = this.getContext();
-    return /*#__PURE__*/_react.default.createElement(TableContext.Provider, {
-      value: context
-    }, /*#__PURE__*/_react.default.createElement(_reactVirtualDom.default, {
-      layout: {
-        className: TableCLS.table + (className ? ' ' + className : ''),
-        attrs: {
-          ref: this.dom,
-          onKeyDown: e => this.keyDown(e)
-        },
-        style,
-        column: [this.toolbar_layout(), this.units_layout(), pagingLayout]
-      }
-    }));
-  }
-}
-exports.default = Table;
-Table.defaultProps = {
-  indent: 16,
-  columnGap: 1,
-  rowGap: 1,
-  headerHeight: 48
-};
-class TableUnit extends _react.Component {
-  constructor(props) {
-    super(props);
-    this.rowsRef = /*#__PURE__*/(0, _react.createRef)();
-    this.resizeDown = functions.resizeDown;
-    this.resizeMove = functions.resizeMove;
-    this.resizeUp = functions.resizeUp;
-    this.getClient = functions.getClient;
-  }
-  title_layout(column, setFlex) {
-    if (column.show === false) {
-      return false;
-    }
-    let resizable = column.resizable !== false && column.width && !column.flex;
-    let {
-      rowHeight,
-      headerHeight
-    } = this.context;
-    let {
-      width,
-      flex,
-      minWidth = 36,
-      titleAttrs = {}
-    } = column;
-    if (setFlex) {
-      width = undefined;
-      flex = 1;
-    }
-    if (width === undefined && flex === undefined) {
-      flex = 1;
-    }
-    return {
-      size: width,
-      align: 'vh',
-      flex,
-      style: {
-        minWidth,
-        height: headerHeight || rowHeight,
-        ...titleAttrs.style
-      },
-      attrs: {
-        ...titleAttrs,
-        'data-column-id': column.dataColumnId,
-        className: undefined,
-        style: undefined,
-        draggable: column.swap !== false,
-        onDragStart: e => {
-          if (this.downOnResizeHandle) {
-            e.stopPropagation();
-            e.preventDefault();
-          }
-          this.startColumnSwap = column;
-        },
-        onDragOver: e => {
-          e.preventDefault();
-        },
-        onDrop: () => {
-          this.endColumnSwap = column;
-          let {
-            setColumns,
-            state
-          } = this.context;
-          let {
-            columns
-          } = state;
-          if (column.swap === false) {
-            return;
-          }
-          if (this.startColumnSwap === undefined || this.startColumnSwap.dataColumnId === this.endColumnSwap.dataColumnId) {
-            return;
-          }
-          let newColumns = columns.map((c, j) => {
-            if (c.dataColumnId === this.startColumnSwap.dataColumnId) {
-              return this.endColumnSwap;
-            }
-            if (c.dataColumnId === this.endColumnSwap.dataColumnId) {
-              return this.startColumnSwap;
-            }
-            return c;
-          });
-          setColumns(newColumns);
-        }
-      },
-      className: TableCLS.title + (titleAttrs.className ? ' ' + titleAttrs.className : ''),
-      row: [this.resize_layout(column, resizable, 'start'), {
-        html: column.title || '',
-        flex: 1,
-        align: column.titleJustify !== false ? 'h' : undefined
-      }, this.filter_layout(column), this.resize_layout(column, resizable, 'end')]
-    };
-  }
-  resize_layout(column, resizable, type) {
-    if (!resizable) {
-      return {
-        size: 12
-      };
-    }
-    return {
-      size: 12,
-      className: TableCLS.resizeHandle,
-      style: {
-        cursor: 'col-resize',
-        height: '100%'
-      },
-      attrs: {
-        onMouseDown: e => this.resizeDown(e, column, type),
-        onTouchStart: e => this.resizeDown(e, column, type),
-        draggable: false
-      }
-    };
-  }
-  filter_layout(column) {
-    let {
-      translate,
-      rtl,
-      state,
-      setColumns
-    } = this.context;
-    let {
-      setColumn
-    } = state;
-    let {
-      filter,
-      type = 'text'
-    } = column;
-    if (!filter) {
-      return false;
-    }
-    if (filter === true) {
-      filter = {};
-      setColumn(column, {
-        filter: {}
-      });
-    }
-    let {
-      items = [],
-      booleanType = 'or',
-      add,
-      operators,
-      valueOptions
-    } = filter;
-    return {
-      html: /*#__PURE__*/_react.default.createElement(_aioButton.default, {
-        style: {
-          background: 'none',
-          color: 'inherit'
-        },
-        type: "button",
-        rtl: rtl,
-        caret: false,
-        text: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-          path: items.length ? _js.mdiFilterMenu : _js.mdiFilter,
-          size: 0.6
-        }),
-        popOver: () => {
-          let {
-            columns
-          } = this.props;
-          return /*#__PURE__*/_react.default.createElement(AIOTableFilterPopup, {
-            translate: translate,
-            type: type,
-            items: items,
-            booleanType: booleanType,
-            add: add,
-            operators: operators,
-            valueOptions: valueOptions,
-            onChangeBooleanType: booleanType => {
-              let {
-                filter
-              } = column;
-              filter.booleanType = booleanType;
-              setColumn(column, {
-                filter
-              });
-              state.saveColumnInStorage(column, 'filter', column.filter);
-              setColumns(columns);
-              if (column.onChangeFilter) {
-                column.onChangeFilter(column);
-              }
-            },
-            onChange: async items => {
-              let {
-                filter
-              } = column;
-              filter.items = items;
-              setColumn(column, {
-                filter
-              });
-              state.saveColumnInStorage(column, 'filter', column.filter);
-              setColumns(columns);
-              if (column.onChangeFilter) {
-                column.onChangeFilter(column);
-              }
-            }
-          });
-        }
-      })
-    };
-  }
-  group_layout(o) {
-    let {
-      groupHeight,
-      rowHeight,
-      indent,
-      rtl,
-      editGroupName = o => o
-    } = this.context;
-    let {
-      cellsType
-    } = this.props;
-    return {
-      style: {
-        position: 'sticky',
-        [rtl ? 'right' : 'left']: 0,
-        height: groupHeight || rowHeight
-      },
-      className: TableCLS.groupRow,
-      row: cellsType === 'unfreezeCells' ? [{
-        flex: 1
-      }] : [{
-        size: 12
-      }, {
-        size: o.groupLevel * indent
-      }, this.groupToggle_layout(o), {
-        html: editGroupName(o.value),
-        align: 'v'
-      }]
-    };
-  }
-  getGroupToggleIcon(open) {
-    let {
-      getToggleIcon,
-      rtl
-    } = this.context;
-    if (getToggleIcon) {
-      return getToggleIcon(!!open);
-    }
-    return /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-      path: open ? _js.mdiChevronDown : rtl ? _js.mdiChevronLeft : _js.mdiChevronRight,
-      size: 0.8
-    });
-  }
-  groupToggle_layout(o) {
-    let {
-      state,
-      SetState
-    } = this.context;
-    let {
-      groupsOpen
-    } = state;
-    return {
-      align: 'vh',
-      row: [{
-        className: TableCLS.rowToggle,
-        html: this.getGroupToggleIcon(o.groupOpen),
-        align: 'vh',
-        attrs: {
-          onClick: () => SetState({
-            groupsOpen: {
-              ...groupsOpen,
-              [o.id]: !groupsOpen[o.id]
-            }
-          })
-        }
-      }, {
-        size: 6
-      }]
-    };
-  }
-  row_layout(rowId, striped) {
-    let {
-      isRowOpen,
-      getRowDetailById,
-      columnGap,
-      rowTemplate,
-      getRowById,
-      toggleRow,
-      rowChilds,
-      indent_layout,
-      toggle_layout,
-      rowHeight
-    } = this.context;
-    if (!isRowOpen(rowId)) {
-      return false;
-    }
-    let rowDetail = getRowDetailById(rowId);
-    if (rowDetail._show === false) {
-      return false;
-    }
-    if (rowTemplate) {
-      let row = getRowById(rowId);
-      if (rowChilds) {
-        return {
-          style: {
-            overflow: 'visible'
-          },
-          size: rowHeight,
-          row: [indent_layout(rowId), toggle_layout(rowId, false), {
-            flex: 1,
-            html: rowTemplate(row, rowDetail),
-            className: TableCLS.rowTemplate,
-            style: {
-              overflow: 'visible'
-            }
-          }, {
-            size: 6
-          }]
-        };
-      }
-      return {
-        html: rowTemplate(row, rowDetail, () => toggleRow(rowId))
-      };
-    }
-    let {
-      cellsType
-    } = this.props;
-    let cells = rowDetail['_' + cellsType];
-    let isThereAnyFlex = false;
-    return {
-      className: TableCLS.row + (rowDetail._show === 'relative' ? ' row-relative-filter' : ''),
-      gap: columnGap,
-      style: {
-        overflow: 'visible'
-      },
-      row: cells.map((cell, i) => {
-        let res = cell(striped);
-        let {
-          html,
-          size,
-          flex,
-          minWidth = 36,
-          attrs
-        } = res;
-        if (size === undefined && flex === undefined) {
-          flex = 1;
-        }
-        if (flex !== undefined) {
-          isThereAnyFlex = true;
-        }
-        if (i === cells.length - 1 && !isThereAnyFlex) {
-          size = undefined;
-          flex = 1;
-        }
-        return {
-          style: {
-            height: '100%',
-            minWidth,
-            overflow: 'visible'
-          },
-          html,
-          size,
-          flex,
-          attrs
-        };
-      })
-    };
-  }
-  onSwap(f, t) {
-    debugger;
-  }
-  render() {
-    let {
-        rowGap
-      } = this.context,
-      {
-        cellsType,
-        onScroll
-      } = this.props;
-    let headerLayout = this.header_layout();
-    let rowsLayout = this.rows_layout();
-    let className = TableCLS.rows;
-    if (cellsType === 'freezeCells') {
-      className += ' ' + TableCLS.freezeContainer;
-    } else if (cellsType === 'unfreezeCells') {
-      className += ' ' + TableCLS.unfreezeContainer;
-    }
-    return /*#__PURE__*/_react.default.createElement(_reactVirtualDom.default, {
-      onSwap: (f, t) => this.onSwap(f, t),
-      layout: {
-        className,
-        column: [headerLayout, ...rowsLayout],
-        scroll: 'vh',
-        gap: rowGap,
-        flex: 1,
-        attrs: {
-          onScroll: () => onScroll(),
-          ref: this.rowsRef
-        }
-      }
-    });
-  }
-  header_layout() {
-    let {
-      rowTemplate,
-      columnGap,
-      showHeader
-    } = this.context;
-    let {
-      columns = []
-    } = this.props;
-    if (rowTemplate || showHeader === false) {
-      return false;
-    }
-    let isThereAnyFlex = false;
-    return {
-      gap: columnGap,
-      className: TableCLS.header,
-      row: columns.map((column, i) => {
-        let {
-          width,
-          flex
-        } = column;
-        if (width === undefined && flex === undefined) {
-          flex = 1;
-        }
-        if (flex !== undefined) {
-          isThereAnyFlex = true;
-        }
-        let setFlex = false;
-        if (i === columns.length - 1 && !isThereAnyFlex) {
-          setFlex = true;
-        }
-        return this.title_layout(column, setFlex);
-      })
-    };
-  }
-  rows_layout() {
-    let {
-      rows_array,
-      striped
-    } = this.context;
-    let index = -1;
-    return rows_array.map((o, i) => {
-      if (o._isGroup_) {
-        return this.group_layout(o);
-      }
-      index++;
-      return this.row_layout(o._id, index % 2 === 0 ? striped : undefined);
-    });
-  }
-}
-_defineProperty(TableUnit, "contextType", TableContext);
-class Toolbar extends _react.Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "state", {
-      searchText: ''
-    });
-  }
-  changeSearch(value, time = 1000) {
-    clearTimeout(this.searchTimeout);
-    this.setState({
-      searchText: value
-    });
-    this.searchTimeout = setTimeout(() => this.context.SetState({
-      searchText: value
-    }), time);
-  }
-  getSearchbox() {
-    let {
-      translate,
-      getSearchs
-    } = this.context;
-    let searchs = getSearchs();
-    let {
-      searchText
-    } = this.state;
-    if (!searchs.length) {
-      return false;
-    }
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: TableCLS.searchBox,
-      key: "search"
-    }, /*#__PURE__*/_react.default.createElement("input", {
-      type: "text",
-      value: searchText,
-      placeholder: translate('Search'),
-      onChange: e => this.changeSearch(e.target.value)
-    }), /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-      path: searchText ? _js.mdiClose : _js.mdiMagnify,
-      size: 0.7,
-      onClick: () => {
-        if (!searchText) {
-          return;
-        }
-        this.changeSearch('', 0);
-      }
-    }));
-  }
-  getToggleButton() {
-    let {
-      state,
-      translate
-    } = this.context;
-    let {
-      columns,
-      setColumn
-    } = state;
-    if (!columns || !columns.length) {
-      return false;
-    }
-    let options = columns.filter(({
-      toggle
-    }) => toggle).map(column => {
-      return {
-        column,
-        text: column.title,
-        checked: column.show !== false
-      };
-    });
-    if (!options.length) {
-      return false;
-    }
-    return /*#__PURE__*/_react.default.createElement(_aioButton.default, {
-      popupHeader: /*#__PURE__*/_react.default.createElement("div", {
-        className: TableCLS.toolbarPopupHeader
-      }, translate('Show Columns')),
-      key: "togglebutton",
-      caret: false,
-      type: "select",
-      options: options,
-      className: TableCLS.toolbarIconButton,
-      text: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-        path: _js.mdiEye,
-        size: 0.7
-      }),
-      onChange: (value, obj) => {
-        let {
-          state,
-          setColumns
-        } = this.context;
-        let {
-          columns
-        } = state;
-        let {
-          column
-        } = obj.option;
-        let {
-          show = true
-        } = column;
-        setColumn(column, {
-          show: !show
-        });
-        state.saveColumnInStorage(column, 'show', obj.option.column.show);
-        setColumns(columns);
-      }
-    });
-  }
-  getSortButton() {
-    let {
-      state,
-      model = [],
-      translate
-    } = this.context;
-    let sorts = state.Sort.get();
-    if (!sorts.length || !model.length) {
-      return false;
-    }
-    let options = sorts.map((sort, i) => {
-      return {
-        text: sort.title,
-        checked: !!sort.active,
-        after: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-          path: sort.dir === 'dec' ? _js.mdiArrowDown : _js.mdiArrowUp,
-          size: 0.8,
-          onClick: e => {
-            e.stopPropagation();
-            sorts[i].dir = sort.dir === 'dec' ? 'inc' : 'dec';
-            state.Sort.set(sorts);
-          }
-        })
-      };
-    });
-    return /*#__PURE__*/_react.default.createElement(_aioButton.default, {
-      popupHeader: /*#__PURE__*/_react.default.createElement("div", {
-        className: TableCLS.toolbarPopupHeader
-      }, translate('Sort By')),
-      key: "sortbutton",
-      caret: false,
-      type: "select",
-      options: options,
-      className: TableCLS.toolbarIconButton,
-      text: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-        path: _js.mdiSort,
-        size: 0.7
-      }),
-      onChange: (value, obj) => {
-        sorts[obj.realIndex].active = !sorts[obj.realIndex].active;
-        state.Sort.set(sorts);
-      },
-      onSwap: (from, to, swap) => state.Sort.set(swap(sorts, from, to))
-    });
-  }
-  getExcelButton() {
-    let {
-      state,
-      rows_array,
-      getRowDetailById
-    } = this.context;
-    return /*#__PURE__*/_react.default.createElement(_aioButton.default, {
-      key: "excelbutton",
-      caret: false,
-      type: "button",
-      className: TableCLS.toolbarIconButton,
-      text: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-        path: _js.mdiFileExcel,
-        size: 0.7
-      }),
-      onClick: () => state.Excel.export(rows_array.filter(({
-        _isGroup_
-      }) => !_isGroup_).map(({
-        _id
-      }) => getRowDetailById(_id)._json))
-    });
-  }
-  getGroupButton() {
-    var {
-      model,
-      state,
-      groups,
-      translate
-    } = this.context;
-    if (!groups.length || !model.length) {
-      return false;
-    }
-    let options = groups.map(group => {
-      return {
-        text: group.title,
-        checked: !!group.active
-      };
-    });
-    return /*#__PURE__*/_react.default.createElement(_aioButton.default, {
-      popupHeader: /*#__PURE__*/_react.default.createElement("div", {
-        className: TableCLS.toolbarPopupHeader
-      }, translate('Group By')),
-      key: "groupbutton",
-      caret: false,
-      type: "select",
-      options: options,
-      className: TableCLS.toolbarIconButton,
-      text: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-        path: _js.mdiFileTree,
-        size: 0.7
-      }),
-      onChange: (value, obj) => {
-        groups[obj.realIndex].active = !groups[obj.realIndex].active;
-        state.Group.set(groups);
-      },
-      onSwap: (from, to, swap) => state.Group.set(swap(groups, from, to))
-    });
-  }
-  getToolbarItems() {
-    var {
-      toolbarItems = []
-    } = this.context;
-    return toolbarItems.map(o => {
-      return /*#__PURE__*/_react.default.createElement(_aioButton.default, _extends({}, o, {
-        className: TableCLS.toolbarItem + (o.className ? ' ' + o.className : '')
-      }));
-    });
-  }
-  getItems() {
-    let {
-      excel
-    } = this.context;
-    let items = [];
-    let searchBox = this.getSearchbox();
-    if (searchBox) {
-      items.push(searchBox);
-    }
-    let toggleButton = this.getToggleButton();
-    if (toggleButton) {
-      items.push(toggleButton);
-    }
-    let sortButton = this.getSortButton();
-    if (sortButton) {
-      items.push(sortButton);
-    }
-    let groupButton = this.getGroupButton();
-    if (groupButton) {
-      items.push(groupButton);
-    }
-    if (excel) {
-      items.push(this.getExcelButton());
-    }
-    let toolbarItems = this.getToolbarItems();
-    items = items.concat(toolbarItems);
-    return items;
-  }
-  render() {
-    let items = this.getItems();
-    if (!items.length) {
-      return null;
-    }
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: TableCLS.toolbar
-    }, items);
-  }
-}
-_defineProperty(Toolbar, "contextType", TableContext);
-class Cell extends _react.Component {
-  constructor(props) {
-    super(props);
-    this.dataUniqId = 'cell' + Math.random();
-  }
-  getContent(row, column, value) {
-    let {
-      rows_object,
-      details_object,
-      verticalTabIndex
-    } = this.context;
-    let {
-      rowId,
-      colId
-    } = this.props;
-    if (this.inlineEdit) {
-      if (this.inlineEdit.type === 'text' || this.inlineEdit.type === 'number') {
-        let props = {
-          type: column.type,
-          className: TableCLS.inlineEditInput,
-          defaultValue: value,
-          tabIndex: verticalTabIndex ? colId : 0,
-          style: {
-            textAlign: column.justify ? 'center' : undefined
-          },
-          'data-col-id': colId,
-          'data-row-id': rowId,
-          onBlur: e => this.onChange(e.target.value)
-        };
-        return /*#__PURE__*/_react.default.createElement("input", props);
-      }
-      if (this.inlineEdit.type === 'select') {
-        return /*#__PURE__*/_react.default.createElement(_aioButton.default, _extends({
-          attrs: {
-            'data-col-id': colId,
-            'data-row-id': rowId,
-            tabIndex: verticalTabIndex ? colId : 0
-          }
-        }, this.inlineEdit, {
-          className: TableCLS.inlineEditInput,
-          onChange: value => this.onChange(value),
-          text: value
-        }));
-      }
-      if (this.inlineEdit.type === 'checkbox') {
-        return /*#__PURE__*/_react.default.createElement(_aioButton.default, _extends({
-          attrs: {
-            'data-col-id': colId,
-            'data-row-id': rowId,
-            tabIndex: verticalTabIndex ? colId : 0
-          }
-        }, this.inlineEdit, {
-          className: TableCLS.inlineEditInput,
-          value: value,
-          style: {
-            padding: 0
-          },
-          onChange: value => this.onChange(!value)
-        }));
-      }
-    }
-    let {
-      templates = {}
-    } = this.context;
-    if (column.template && templates[column.template]) {
-      return templates[column.template](rows_object[rowId], details_object[rowId]);
-    } else {
-      return value;
-    }
-  }
-  async onChange(value) {
-    let {
-      column,
-      rowId
-    } = this.props;
-    let {
-      rows_object,
-      setModel
-    } = this.context;
-    let row = rows_object[rowId];
-    this.setState({
-      loading: true
-    });
-    if (this.inlineEdit.type === 'number' && !isNaN(+value)) {
-      value = +value;
-    }
-    if (this.inlineEdit.onChange) {
-      await this.inlineEdit.onChange(row, value);
-    } else {
-      setModel(this.setCellValue(row, column.field, value));
-    }
-    this.setState({
-      loading: false
-    });
-  }
-  setCellValue(row, field, value) {
-    //row is used in eval
-    let {
-      model
-    } = this.context;
-    let evalText;
-    if (typeof value === 'string') {
-      evalText = `${field} = "${value}"`;
-    } else {
-      evalText = field + ' = ' + JSON.stringify(value);
-    }
-    eval(evalText);
-    return model;
-  }
-  getInlineEdit(row, column) {
-    let inlineEdit = typeof column.inlineEdit === 'function' ? column.inlineEdit(row) : column.inlineEdit;
-    if (!inlineEdit) {
-      return false;
-    }
-    if (inlineEdit === true) {
-      inlineEdit = {};
-    }
-    let {
-      disabled = () => false,
-      type = column.type || 'text'
-    } = inlineEdit;
-    if (disabled(row)) {
-      return false;
-    }
-    return {
-      ...inlineEdit,
-      type
-    };
-  }
-  render() {
-    let {
-      getRowById,
-      rowHeight
-    } = this.context;
-    let {
-      column,
-      rowId,
-      value,
-      striped
-    } = this.props;
-    let row = getRowById(rowId);
-    let attrs = {},
-      style = {
-        overflow: 'visible'
-      };
-    if (column.cellAttrs) {
-      attrs = column.cellAttrs(row) || {};
-      if (attrs.style) {
-        style = attrs.style;
-      }
-    }
-    if (rowHeight) {
-      style.height = rowHeight;
-    }
-    if (typeof striped === 'string') {
-      style.background = striped;
-    } else if (Array.isArray(striped)) {
-      style.background = striped[0];
-      style.color = striped[1];
-    }
-    style = {
-      justifyContent: column.justify ? 'center' : undefined,
-      ...style
-    };
-    this.inlineEdit = this.getInlineEdit(row, column);
-    return /*#__PURE__*/_react.default.createElement(_reactVirtualDom.default, {
-      layout: {
-        className: TableCLS.cell + (attrs.className ? ' ' + attrs.className : '') + (striped === true ? ' striped' : ''),
-        attrs: {
-          ...attrs,
-          'data-uniq-id': this.dataUniqId,
-          style: undefined,
-          className: undefined,
-          onClick: attrs.onClick ? () => attrs.onClick(row) : undefined
-        },
-        style,
-        row: [this.indent_layout(column.treeMode, rowId), this.toggle_layout(), this.before_layout(row, column), this.content_layout(row, column, value), this.after_layout(row, column)]
-      }
-    });
-  }
-  indent_layout(treeMode, rowId) {
-    if (!treeMode) {
-      return false;
-    }
-    return this.context.indent_layout(rowId);
-  }
-  toggle_layout() {
-    let {
-      column,
-      rowId
-    } = this.props;
-    if (!column.treeMode) {
-      return false;
-    }
-    let {
-      toggle_layout
-    } = this.context;
-    return toggle_layout(rowId);
-  }
-  before_layout(row, column) {
-    if (!column.before) {
-      return false;
-    }
-    let {
-      state
-    } = this.context;
-    let html = state.getValueByField(row, undefined, column.before);
-    return {
-      row: [{
-        className: TableCLS.cellBefore,
-        html
-      }, {
-        size: 6
-      }]
-    };
-  }
-  content_layout(row, column, value) {
-    let {
-      state
-    } = this.context;
-    let subtext = state.getValueByField(row, undefined, column.subtext);
-    if (subtext) {
-      return {
-        className: TableCLS.cellContent,
-        style: {
-          height: '100%'
-        },
-        align: 'v',
-        flex: 1,
-        column: [{
-          html: this.getContent(row, column, value),
-          align: column.justify ? 'vh' : 'v',
-          style: {
-            overflow: 'visible'
-          }
-        }, {
-          size: 3
-        }, {
-          html: subtext,
-          className: TableCLS.cellSubtext,
-          align: column.justify ? 'vh' : 'v'
-        }]
-      };
-    } else {
-      return {
-        className: TableCLS.cellContent,
-        align: column.justify ? 'vh' : 'v',
-        flex: 1,
-        html: this.getContent(row, column, value),
-        style: {
-          height: '100%'
-        }
-      };
-    }
-  }
-  after_layout(row, column) {
-    if (!column.after) {
-      return false;
-    }
-    let {
-      state
-    } = this.context;
-    let html = state.getValueByField(row, undefined, column.after);
-    return {
-      row: [{
-        className: TableCLS.cellAfter,
-        html
-      }]
-    };
-  }
-}
-_defineProperty(Cell, "contextType", TableContext);
-function FilterResult(items = [], booleanType = 'or', value, reverse) {
-  let fn = {
-    and() {
-      if (value === undefined) {
-        return false;
-      }
-      for (let i = 0; i < items.length; i++) {
-        let {
-          operator: o,
-          value: v,
-          type
-        } = items[i];
-        if (v === '' || v === undefined) {
-          continue;
-        }
-        let a, b;
-        if (reverse) {
-          a = v;
-          b = value;
-        } else {
-          a = value;
-          b = v;
-        }
-        if (o === 'contain') {
-          if (!this.isContain(a, b)) {
-            return false;
-          }
-          continue;
-        }
-        if (o === 'notContain') {
-          if (this.isContain(a, b)) {
-            return false;
-          }
-          continue;
-        }
-        if (o === 'equal') {
-          if (!this.isEqual(a, b)) {
-            return false;
-          }
-          continue;
-        }
-        if (o === 'notEqual') {
-          if (this.isEqual(a, b)) {
-            return false;
-          }
-          continue;
-        }
-        if (o === 'greater') {
-          if (!this.isGreater(a, b, type)) {
-            return false;
-          }
-          continue;
-        }
-        if (o === 'less') {
-          if (!this.isLess(a, b, type)) {
-            return false;
-          }
-          continue;
-        }
-      }
-      return true;
-    },
-    or() {
-      if (value === undefined) {
-        return false;
-      }
-      for (let i = 0; i < items.length; i++) {
-        let {
-          operator: o,
-          value: v,
-          type
-        } = items[i];
-        if (v === '' || v === undefined) {
-          return true;
-        }
-        let a, b;
-        if (reverse) {
-          a = v;
-          b = value;
-        } else {
-          a = value;
-          b = v;
-        }
-        if (o === 'contain') {
-          if (this.isContain(a, b)) {
-            return true;
-          }
-          continue;
-        }
-        if (o === 'notContain') {
-          if (!this.isContain(a, b)) {
-            return true;
-          }
-          continue;
-        }
-        if (o === 'equal') {
-          if (this.isEqual(a, b)) {
-            return true;
-          }
-          continue;
-        }
-        if (o === 'notEqual') {
-          if (!this.isEqual(a, b)) {
-            return true;
-          }
-          continue;
-        }
-        if (o === 'greater') {
-          if (this.isGreater(a, b, type)) {
-            return true;
-          }
-          continue;
-        }
-        if (o === 'less') {
-          if (this.isLess(a, b, type)) {
-            return true;
-          }
-          continue;
-        }
-      }
-      return false;
-    },
-    isContain(text, subtext) {
-      return text.toString().toLowerCase().indexOf(subtext.toString().toLowerCase()) !== -1;
-    },
-    isEqual(a, b) {
-      return a.toString().toLowerCase() === b.toString().toLowerCase();
-    },
-    isGreater(a, b, type) {
-      if (type === 'date') {
-        return this.getDateNumber(a) > this.getDateNumber(b);
-      }
-      return parseFloat(a) > parseFloat(b);
-    },
-    getDateNumber(value) {
-      let splitter;
-      for (let i = 0; i < value.length; i++) {
-        if (isNaN(parseInt(value[i]))) {
-          splitter = value[i];
-          break;
-        }
-      }
-      let [year, month = '01', day = '01'] = value.split(splitter);
-      let list = [year, month, day];
-      return parseInt(list.map(o => o.length === 1 ? '0' + o : o).join(''));
-    },
-    isLess(a, b, type) {
-      if (type === 'date') {
-        return this.getDateNumber(a) < this.getDateNumber(b);
-      }
-      return parseFloat(a) < parseFloat(b);
-    }
-  };
-  if (items.length) {
-    return fn[booleanType]();
-  }
-  return true;
-}
-class AIOTableFilterPopup extends _react.Component {
-  items_layout() {
-    let {
-      items
-    } = this.props;
-    return {
-      column: items.map((item, i) => {
-        return {
-          column: [this.item_layout(item, i), this.boolean_layout(i)]
-        };
-      })
-    };
-  }
-  item_layout(item, itemIndex) {
-    let {
-      type,
-      items,
-      onChange,
-      translate = str => str,
-      add,
-      operators,
-      valueOptions
-    } = this.props;
-    return {
-      html: /*#__PURE__*/_react.default.createElement(AIOfilterItem, {
-        operator: item.operator,
-        value: item.value,
-        type: type,
-        translate: translate,
-        operators: operators,
-        operatorOptions: this.operatorOptions,
-        valueOptions: valueOptions,
-        add: add,
-        onChange: (key, value) => {
-          onChange(items.map((o, i) => {
-            if (itemIndex === i) {
-              return {
-                ...o,
-                [key]: value
-              };
-            }
-            return o;
-          }));
-        },
-        onRemove: add === false ? undefined : () => onChange(items.filter((o, i) => i !== itemIndex))
-      })
-    };
-  }
-  getOperatorOptions() {
-    let {
-      translate,
-      type,
-      operators = ['contain', 'notContain', 'equal', 'notEqual', 'greater', 'less']
-    } = this.props;
-    return [{
-      text: translate('Contain'),
-      value: 'contain',
-      show: type === 'text' && operators.indexOf('contain') !== -1
-    }, {
-      text: translate('Not Contain'),
-      value: 'notContain',
-      show: type === 'text' && operators.indexOf('notContain') !== -1
-    }, {
-      text: translate('Equal'),
-      value: 'equal',
-      show: operators.indexOf('equal') !== -1
-    }, {
-      text: translate('Not Equal'),
-      value: 'notEqual',
-      show: operators.indexOf('notEqual') !== -1
-    }, {
-      text: translate('Greater Than'),
-      value: 'greater',
-      show: (type === 'date' || type === 'number') && operators.indexOf('greater') !== -1
-    }, {
-      text: translate('Less Than'),
-      value: 'less',
-      show: (type === 'date' || type === 'number') && operators.indexOf('less') !== -1
-    }];
-  }
-  boolean_layout(index) {
-    let {
-      items,
-      translate = text => text,
-      booleanType,
-      onChangeBooleanType
-    } = this.props;
-    if (index >= items.length - 1) {
-      return false;
-    }
-    return {
-      html: translate(booleanType),
-      attrs: {
-        onClick: () => onChangeBooleanType(booleanType === 'or' ? 'and' : 'or')
-      },
-      align: 'vh'
-    };
-  }
-  add_layout() {
-    var {
-      type,
-      items,
-      onChange,
-      translate = str => str,
-      add
-    } = this.props;
-    if (add === false) {
-      return false;
-    }
-    return {
-      html: /*#__PURE__*/_react.default.createElement("button", {
-        className: TableCLS.addFilter,
-        onClick: () => onChange(items.concat({
-          operator: this.operatorOptions[0].value,
-          value: '',
-          type
-        }))
-      }, translate('Add'))
-    };
-  }
-  render() {
-    this.operatorOptions = this.getOperatorOptions();
-    return /*#__PURE__*/_react.default.createElement(_reactVirtualDom.default, {
-      layout: {
-        className: TableCLS.filterPopup,
-        style: {
-          minWidth: 250
-        },
-        column: [this.items_layout(), this.add_layout()]
-      }
-    });
-  }
-}
-class AIOfilterItem extends _react.Component {
-  constructor(props) {
-    super(props);
-    let {
-      value
-    } = this.props;
-    this.state = {
-      value,
-      prevValue: value
-    };
-  }
-  operator_layout() {
-    let {
-      onChange,
-      operator,
-      operatorOptions,
-      add
-    } = this.props;
-    if (add === false) {
-      return false;
-    }
-    return {
-      size: 90,
-      html: /*#__PURE__*/_react.default.createElement(_aioButton.default, {
-        style: {
-          width: '100%'
-        },
-        type: "select",
-        className: TableCLS.filterOperator,
-        value: operator,
-        options: operatorOptions,
-        onChange: value => onChange('operator', value)
-      })
-    };
-  }
-  value_layout() {
-    let {
-      type,
-      onChange,
-      valueOptions
-    } = this.props;
-    let {
-      value
-    } = this.state;
-    if (valueOptions) {
-      return {
-        flex: 1,
-        html: /*#__PURE__*/_react.default.createElement("select", {
-          className: TableCLS.filterValue,
-          type: type === 'number' ? 'number' : 'text',
-          value: value,
-          onChange: e => {
-            let value = e.target.value;
-            clearTimeout(this.timeout);
-            this.setState({
-              value
-            });
-            onChange('value', value);
-          }
-        }, valueOptions.map(({
-          value,
-          text
-        }) => {
-          return /*#__PURE__*/_react.default.createElement("option", {
-            value: value
-          }, text);
-        }))
-      };
-    }
-    return {
-      flex: 1,
-      html: /*#__PURE__*/_react.default.createElement("input", {
-        className: TableCLS.filterValue,
-        type: type === 'number' ? 'number' : 'text',
-        value: value,
-        onChange: e => {
-          let value = e.target.value;
-          clearTimeout(this.timeout);
-          this.setState({
-            value
-          });
-          this.timeout = setTimeout(() => onChange('value', value), 1000);
-        }
-      })
-    };
-  }
-  remove_layout() {
-    let {
-      onRemove
-    } = this.props;
-    if (!onRemove) {
-      return false;
-    }
-    return {
-      size: 24,
-      html: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
-        path: _js.mdiClose,
-        size: 0.6,
-        onClick: () => onRemove()
-      }),
-      align: 'vh',
-      className: TableCLS.filterRemove
-    };
-  }
-  render() {
-    if (this.state.prevValue !== this.props.value) {
-      setTimeout(() => this.setState({
-        value: this.props.value,
-        prevValue: this.props.value
-      }), 0);
-    }
-    return /*#__PURE__*/_react.default.createElement(_reactVirtualDom.default, {
-      layout: {
-        className: TableCLS.filterItem,
-        gap: 3,
-        row: [this.operator_layout(), this.value_layout(), this.remove_layout()]
-      }
-    });
-  }
-}
-function Sort(getProps, getState, setColumns) {
-  let o = {
-    get() {
-      let {
-        columns = [],
-        setColumn
-      } = getState();
-      let sorts = [];
-      for (let i = 0; i < columns.length; i++) {
-        if (!columns[i].sort) {
-          continue;
-        }
-        if (typeof columns[i].sort !== 'object') {
-          let column = columns[i];
-          setColumn(column, {
-            sort: {}
-          });
-        }
-        let {
-          sort,
-          type = 'text',
-          field,
-          dataColumnId,
-          title
-        } = columns[i];
-        let {
-          dir = 'inc',
-          order,
-          active = true,
-          toggle = true
-        } = sort;
-        if (order === undefined) {
-          let newOrder = 0;
-          let orders = columns.filter(({
-            sort
-          }) => sort && sort.order !== undefined).map(({
-            sort
-          }) => sort.order);
-          while (orders.indexOf(newOrder) !== -1) {
-            newOrder++;
-          }
-          sort.order = newOrder;
-        }
-        sorts.push({
-          dir,
-          order: sort.order,
-          type,
-          field,
-          active,
-          toggle,
-          dataColumnId,
-          title
-        });
-      }
-      sorts = sorts.sort(({
-        order: a
-      }, {
-        order: b
-      }) => a - b);
-      return sorts;
-    },
-    sort(model, sorts) {
-      let {
-        getValueByField
-      } = getState();
-      return model.sort((a, b) => {
-        for (let i = 0; i < sorts.length; i++) {
-          let {
-            field,
-            dir,
-            active
-          } = sorts[i];
-          if (!active) {
-            continue;
-          }
-          let aValue = getValueByField(a, undefined, field),
-            bValue = getValueByField(b, undefined, field);
-          if (aValue < bValue) {
-            return -1 * (dir === 'dec' ? -1 : 1);
-          }
-          if (aValue > bValue) {
-            return 1 * (dir === 'dec' ? -1 : 1);
-          }
-          if (i === sorts.length - 1) {
-            return 0;
-          }
-        }
-        return 0;
-      });
-    },
-    updateColumns(sorts) {
-      let {
-        columns,
-        saveColumnInStorage
-      } = getState();
-      for (let i = 0; i < sorts.length; i++) {
-        let sort = sorts[i];
-        let {
-          dir,
-          active,
-          dataColumnId
-        } = sort;
-        let column = columns.filter(c => c.dataColumnId === dataColumnId)[0];
-        column.sort = {
-          ...column.sort,
-          dir,
-          active,
-          order: i
-        };
-        saveColumnInStorage(column, 'sort', column.sort);
-      }
-      setColumns(columns);
-    },
-    async set(sorts) {
-      sorts = sorts || this.get();
-      if (!sorts.length) {
-        return;
-      }
-      let {
-        model,
-        onChangeSorts,
-        setModel
-      } = getProps();
-      if (onChangeSorts) {
-        let res = await onChangeSorts(sorts, this.sort(model, sorts));
-        if (res !== false) {
-          this.updateColumns(sorts);
-        }
-      } else if (setModel) {
-        setModel(this.sort(model, sorts));
-        this.updateColumns(sorts);
-      } else {
-        console.error('AIOTable Error => you set sort in columns but missing setModel or onChangeSort props.');
-      }
-    }
-  };
-  return {
-    set: o.set.bind(o),
-    get: o.get.bind(o)
-  };
-}
-function Group(getProps, getState, setColumns) {
-  let o = {
-    getGroupModel(model, groups) {
-      let {
-        getValueByField
-      } = getState();
-      let newModel = {};
-      for (let i = 0; i < model.length; i++) {
-        let row = model[i],
-          obj = newModel,
-          values = groups.map(group => getValueByField(row, undefined, group.field));
-        //let show = row._detail._show
-        for (let j = 0; j < values.length; j++) {
-          let value = values[j];
-          if (j === values.length - 1) {
-            obj[value] = obj[value] || [];
-            obj[value].push(row);
-          } else {
-            obj[value] = obj[value] || {};
-            obj = obj[value];
-          }
-        }
-      }
-      return newModel;
-    },
-    getGroupRows(model) {
-      var {
-        groupsOpen
-      } = getState();
-      function msf(obj, level, parents) {
-        if (Array.isArray(obj)) {
-          groupedRows = groupedRows.concat(obj);
-        } else {
-          for (var prop in obj) {
-            let newParents = parents.concat(prop),
-              id = newParents.toString();
-            groupsOpen[id] = groupsOpen[id] === undefined ? true : groupsOpen[id];
-            groupedRows.push({
-              _isGroup_: true,
-              value: prop,
-              id,
-              groupLevel: level,
-              groupOpen: groupsOpen[id]
-            });
-            if (groupsOpen[id]) {
-              msf(obj[prop], level + 1, newParents);
-            }
-          }
-        }
-      }
-      var groupedRows = [],
-        level = 0;
-      msf(model, level, []);
-      return groupedRows;
-    },
-    groupBy(model, groups = []) {
-      if (!groups.length) {
-        return model;
-      }
-      const groupModel = this.getGroupModel(model, groups);
-      return this.getGroupRows(groupModel);
-    },
-    updateColumns(groups) {
-      let {
-        columns = [],
-        saveColumnInStorage
-      } = getState();
-      for (let i = 0; i < groups.length; i++) {
-        let group = groups[i];
-        let {
-          active,
-          dataColumnId
-        } = group;
-        let column = columns.filter(c => c.dataColumnId === dataColumnId)[0];
-        column.group = {
-          ...column.group,
-          active,
-          order: i
-        };
-        saveColumnInStorage(column, 'group', column.group);
-      }
-      setColumns(columns);
-    },
-    get() {
-      let {
-        columns = []
-      } = getState();
-      let groups = [];
-      for (let i = 0; i < columns.length; i++) {
-        if (!columns[i].group) {
-          continue;
-        }
-        if (typeof columns[i].group !== 'object') {
-          columns[i].group = {};
-        }
-        let {
-          group,
-          type = 'text',
-          field,
-          dataColumnId,
-          title
-        } = columns[i];
-        let {
-          order,
-          active = true
-        } = group;
-        if (order === undefined) {
-          let newOrder = 0;
-          let orders = columns.filter(({
-            group
-          }) => group && group.order !== undefined).map(({
-            group
-          }) => group.order);
-          while (orders.indexOf(newOrder) !== -1) {
-            newOrder++;
-          }
-          group.order = newOrder;
-        }
-        groups.push({
-          order: group.order,
-          type,
-          field,
-          active,
-          dataColumnId,
-          title
-        });
-      }
-      groups = groups.sort(({
-        order: a
-      }, {
-        order: b
-      }) => a - b);
-      return groups;
-    },
-    set(groups) {
-      this.updateColumns(groups);
-    }
-  };
-  return {
-    get: o.get.bind(o),
-    set: o.set.bind(o),
-    groupBy: o.groupBy.bind(o)
-  };
-}
-function Excel(getProps) {
-  let o = {
-    fixPersianAndArabicNumbers(str) {
-      if (typeof srt !== 'string') {
-        return str;
-      }
-      var persianNumbers = [/۰/g, /۱/g, /۲/g, /۳/g, /۴/g, /۵/g, /۶/g, /۷/g, /۸/g, /۹/g],
-        arabicNumbers = [/٠/g, /١/g, /٢/g, /٣/g, /٤/g, /٥/g, /٦/g, /٧/g, /٨/g, /٩/g];
-      for (var i = 0; i < 10; i++) {
-        str = str.replace(persianNumbers[i], i).replace(arabicNumbers[i], i);
-      }
-      return str;
-    },
-    getJSON(rows) {
-      let result = [];
-      for (let i = 0; i < rows.length; i++) {
-        let json = rows[i],
-          fixedJson = {};
-        for (let prop in json) {
-          fixedJson[prop] = this.fixPersianAndArabicNumbers(json[prop]);
-        }
-        result.push(fixedJson);
-      }
-      return result;
-    },
-    export(rows) {
-      let {
-        translate
-      } = getProps();
-      let name = window.prompt(translate('Inter Excel File Name'));
-      if (!name || name === null || !name.length) return;
-      var data = this.getJSON(rows);
-      var arrData = typeof data != "object" ? JSON.parse(data) : data;
-      var CSV = "";
-      // CSV += 'title';
-      CSV += '\r\n\n';
-      if (true) {
-        let row = "";
-        for (let index in arrData[0]) {
-          row += index + ",";
-        }
-        row = row.slice(0, -1);
-        CSV += row + "\r\n";
-      }
-      for (var i = 0; i < arrData.length; i++) {
-        let row = "";
-        for (let index in arrData[i]) {
-          row += '"' + arrData[i][index] + '",';
-        }
-        row.slice(0, row.length - 1);
-        CSV += row + "\r\n";
-      }
-      if (CSV === "") {
-        alert("Invalid data");
-        return;
-      }
-      var fileName = name.replace(/ /g, "_");
-      var universalBOM = "\uFEFF";
-      var uri = "data:text/csv;charset=utf-8," + encodeURIComponent(universalBOM + CSV);
-      var link = document.createElement("a");
-      link.href = uri;
-      link.style = "visibility:hidden";
-      link.download = fileName + ".csv";
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-    }
-  };
-  return {
-    export: o.export.bind(o)
-  };
-}
-let functions = {
-  async onScroll(index) {
-    let {
-      lazyLoad = {}
-    } = this.props;
-    let {
-      onScrollEnd
-    } = lazyLoad;
-    if (onScrollEnd) {
-      // if(index === undefined || index === 0){
-      //   let table = $(this.dom.current).find('.' + TableCLS.rows);
-      //   let scrollTop = table.scrollTop();
-      //   let scrollHeight = table[0].scrollHeight;
-      //   let height = table.height();
-      //   if(scrollTop + height === scrollHeight){
-      //     let {startIndex} = getState();
-      //     let {lazyLength,totalLength} = lazyLoad;
-      //     let from = startIndex + lazyLength;
-      //     if(from > totalLength){return;}
-      //     let to = from + lazyLength;
-      //     if(to > totalLength){to = totalLength;}
-      //     let a = $(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;
-    }
-    if (!this['scroll' + index]) {
-      let otherIndex = Number(!index);
-      this['scroll' + otherIndex] = true;
-      let c = (0, _jquery.default)(this.dom.current);
-      var units = [c.find('.' + TableCLS.freezeContainer), c.find('.' + TableCLS.unfreezeContainer)];
-      var scrollTop = units[index].scrollTop();
-      units[otherIndex].scrollTop(scrollTop);
-    }
-    this['scroll' + index] = false;
-  },
-  getValueByField(row, column, field) {
-    try {
-      if (field === undefined) {
-        field = column.field;
-      }
-      let type = typeof field;
-      if (type === 'function') {
-        return field(row, column);
-      }
-      if (type === 'string') {
-        if (field.indexOf('.') !== -1 && (field.indexOf('row') !== -1 || field.indexOf('column') !== -1 || field.indexOf('props') !== -1)) {
-          let result;
-          eval('result = ' + field);
-          return result;
-        }
-        return field;
-      }
-      return field;
-    } catch {
-      return;
-    }
-  },
-  getSearchs() {
-    let {
-      columns = []
-    } = this.state;
-    let searchs = [];
-    for (let i = 0; i < columns.length; i++) {
-      let {
-        show = true,
-        search,
-        field
-      } = columns[i];
-      if (!show || !search) {
-        continue;
-      }
-      searchs.push(field);
-    }
-    return searchs;
-  },
-  getFilterResult(row, detail) {
-    let {
-      searchText,
-      getValueByField
-    } = this.state;
-    let searchs = this.getSearchs();
-    if (searchText && searchs.length) {
-      let items = searchs.map(field => {
-        return {
-          operator: 'contain',
-          value: getValueByField(row, undefined, field).toString()
-        };
-      });
-      if (FilterResult(items, 'or', searchText, true) === false) {
-        return false;
-      }
-    }
-    let {
-      columns = []
-    } = this.state;
-    for (let i = 0; i < columns.length; i++) {
-      let column = columns[i];
-      let {
-        filter,
-        dataColumnId
-      } = column;
-      if (!filter) {
-        continue;
-      }
-      if (filter === true) {
-        filter = {};
-        column.filter = {};
-      }
-      let {
-        items = [],
-        booleanType = 'or'
-      } = filter;
-      if (!items.length) {
-        continue;
-      }
-      let value = detail._values[dataColumnId];
-      if (FilterResult(items, booleanType, value) === false) {
-        return false;
-      }
-    }
-    return true;
-  },
-  isRowOpen(id) {
-    if (!this.props.rowChilds) {
-      return true;
-    }
-    let {
-      _parentIds
-    } = this.getRowDetailById(id);
-    for (let i = 0; i < _parentIds.length; i++) {
-      let parentId = _parentIds[i];
-      if (this.getRowDetailById(parentId)._open === false) {
-        return false;
-      }
-    }
-    return true;
-  },
-  ///ok
-  getClient(e) {
-    return this.context.touch ? [e.changedTouches[0].clientX, e.changedTouches[0].clientY] : [e.clientX, e.clientY];
-  },
-  ///ok
-  resizeDown(e, column, type) {
-    e.stopPropagation();
-    this.downOnResizeHandle = true;
-    let {
-      state
-    } = this.context;
-    let {
-      touch
-    } = state;
-    this.resized = false;
-    (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 = {
-      client: this.getClient(e),
-      width: column.width,
-      column,
-      type
-    };
-  },
-  ///ok
-  resizeMove(e) {
-    this.resized = true;
-    var {
-      rtl
-    } = this.props;
-    var Client = this.getClient(e);
-    var {
-      client,
-      width,
-      column,
-      type
-    } = this.resizeDetails;
-    var offset = (Client[0] - client[0]) * (type === 'start' ? -1 : 1);
-    let newWidth = width + offset * (rtl ? -1 : 1);
-    if (newWidth < parseInt(column.minWidth || 36)) {
-      newWidth = parseInt(column.minWidth || 36);
-    }
-    this.resizeDetails.newWidth = newWidth;
-    if (newWidth % 10 !== 0) {
-      return;
-    }
-    (0, _jquery.default)(`[data-column-id='${column.dataColumnId}']`).css({
-      width: newWidth
-    });
-  },
-  ///ok
-  resizeUp() {
-    this.downOnResizeHandle = false;
-    let {
-      state,
-      setColumns
-    } = this.context;
-    let {
-      touch
-    } = state;
-    (0, _jquery.default)(window).unbind(touch ? 'touchmove' : 'mousemove', this.resizeMove);
-    (0, _jquery.default)(window).unbind(touch ? 'touchend' : 'mouseup', this.resizeUp);
-    if (!this.resized) {
-      return;
-    }
-    let {
-      columns
-    } = state;
-    let {
-      newWidth,
-      column
-    } = this.resizeDetails;
-    column.width = newWidth;
-    state.saveColumnInStorage(column, 'width', newWidth);
-    setColumns(columns);
-  }
-};
-function convertFlatModel({
-  model,
-  childsField,
-  getId,
-  getParentId
-}) {
-  var convertModelRecursive = (array, parentId, parentObject) => {
-    for (let i = 0; i < array.length; i++) {
-      let row = array[i];
-      let rowParentId = getParentId(row);
-      if (rowParentId !== parentId) {
-        continue;
-      }
-      let rowId = getId(row);
-      row[childsField] = [];
-      parentObject.push(row);
-      array.splice(i, 1);
-      i--;
-      convertModelRecursive([...array], rowId, row[childsField]);
-    }
-  };
-  var result = [];
-  convertModelRecursive([...model], undefined, result);
-  return result;
-}
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, createRef, Fragment, useContext, useEffect, useRef, useState } from "react";
+import AIOInput from "aio-input";
+import * as UT from 'aio-utils';
+import "./index.css";
+const Context = createContext({});
+const Provider = (p) => _jsx(Context.Provider, { value: p.value, children: p.children });
+const useProvider = () => useContext(Context);
+const AIOTable = (rootProps) => {
+    let { paging, getValue = {}, value, onChange = () => { }, onAdd, onRemove, excel, onSwap, onSearch, rowAttrs, onChangeSort, className } = rootProps;
+    let [dom] = useState(createRef());
+    let [searchValue, setSearchValue] = useState('');
+    let [columns, setColumns] = useState([]);
+    let [searchColumns, setSearchColumns] = useState([]);
+    let [excelColumns, setExcelColumns] = useState([]);
+    const getIconRef = useRef(new UT.GetSvg());
+    const getIcon = getIconRef.current.getIcon;
+    let [temp] = useState({});
+    const DragRows = UT.useDrag((dragData, dropData, reOrder) => {
+        const { dragIndex } = dragData;
+        const { dropIndex, rows } = dropData;
+        const newRows = reOrder(rows, dragIndex, dropIndex);
+        const from = rows[dragIndex];
+        const to = rows[dropIndex];
+        if (typeof onSwap === 'function') {
+            onSwap(newRows, from, to);
+        }
+        else {
+            onChange(newRows);
+        }
+    });
+    const DragColumns = UT.useDrag((dragIndex, dropIndex, reOrder) => setColumns(reOrder(columns, dragIndex, dropIndex)));
+    let [sorts, setSorts] = useState([]);
+    function getColumns() {
+        let { columns = [] } = rootProps;
+        let searchColumns = [], excelColumns = [];
+        let updatedColumns = columns.map((o) => {
+            let { id = 'aitc' + Math.round(Math.random() * 1000000), sort, search, excel } = o;
+            let column = Object.assign(Object.assign({}, o), { _id: id });
+            if (search) {
+                searchColumns.push(column);
+            }
+            if (excel) {
+                excelColumns.push(column);
+            }
+            return column;
+        });
+        setColumns(updatedColumns);
+        setSearchColumns(searchColumns);
+        setExcelColumns(excelColumns);
+        return updatedColumns;
+    }
+    function getSorts(columns) {
+        let sorts = [];
+        for (let i = 0; i < columns.length; i++) {
+            let column = columns[i];
+            let { _id } = column;
+            let sort = column.sort === true ? {} : column.sort;
+            if (!sort) {
+                continue;
+            }
+            let { active = false, dir = 'dec' } = sort;
+            let getValue;
+            if (sort.getValue) {
+                getValue = sort.getValue;
+            }
+            else {
+                getValue = (row) => getDynamics({ value: column.value, row, column });
+            }
+            let type = sort.type || 'string';
+            let sortItem = { dir, title: sort.title || column.title, sortId: _id, active, type, getValue };
+            sorts.push(sortItem);
+        }
+        setSorts(sorts);
+    }
+    function getDynamics(p) {
+        let { value, row, column, def, rowIndex } = p;
+        if (paging) {
+            let { number, size } = paging;
+            if (rowIndex)
+                rowIndex += ((number - 1) * size);
+        }
+        let type = typeof value;
+        if (type === 'string') {
+            let result = value;
+            let param = { row: row, column: column, rowIndex: rowIndex };
+            if (getValue[value]) {
+                result = getValue[value](Object.assign(Object.assign({}, param), { change: () => { } }));
+            }
+            else if (value.indexOf('row.') !== -1) {
+                try {
+                    eval(`result = ${value}`);
+                }
+                catch (_a) {
+                    result = '';
+                }
+            }
+            return result === undefined ? def : result;
+        }
+        if (type === 'undefined') {
+            return def;
+        }
+        if (type === 'function') {
+            return value({ row, column, rowIndex });
+        }
+        return value === undefined ? def : value;
+    }
+    useEffect(() => { getSorts(getColumns()); }, []);
+    function add() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!onAdd) {
+                return;
+            }
+            const row = yield onAdd();
+            if (!row) {
+                return;
+            }
+            onChange([Object.assign({}, row), ...value]);
+        });
+    }
+    function remove(row, index) {
+        let action = () => onChange(value.filter((o) => o._id !== row._id));
+        typeof onRemove === 'function' ? onRemove({ row, action, rowIndex: index }) : action();
+    }
+    function exportToExcel() {
+        let list = [];
+        if (typeof rootProps.excel === 'function') {
+            list = rootProps.excel(value);
+        }
+        else {
+            for (let i = 0; i < value.length; i++) {
+                let row = value[i], json = {};
+                for (let j = 0; j < excelColumns.length; j++) {
+                    let column = excelColumns[j], { excel, value } = column;
+                    let key = '';
+                    if (excel === true) {
+                        if (typeof column.title === 'string') {
+                            key = column.title;
+                        }
+                        else {
+                            key = 'untitle';
+                        }
+                    }
+                    else if (typeof excel === 'string') {
+                        key = excel;
+                    }
+                    else {
+                        continue;
+                    }
+                    json[key] = getDynamics({ value, row, column, rowIndex: i });
+                }
+                list.push(json);
+            }
+        }
+        UT.ExportToExcel(list, { promptText: typeof excel === 'string' ? excel : 'Inter Excel File Name' });
+    }
+    function getSearchedRows(rows) {
+        if (onSearch !== true) {
+            return rows;
+        }
+        if (!searchColumns.length || !searchValue) {
+            return rows;
+        }
+        return UT.Search(rows, searchValue, (row, index) => {
+            let str = '';
+            for (let i = 0; i < searchColumns.length; i++) {
+                let column = searchColumns[i];
+                let value = getDynamics({ value: column.value, row, def: '', column, rowIndex: index });
+                if (value) {
+                    str += value + ' ';
+                }
+            }
+            return str;
+        });
+    }
+    function sortRows(rows, sorts) {
+        if (!rows) {
+            return [];
+        }
+        if (!sorts || !sorts.length) {
+            return rows;
+        }
+        return rows.sort((a, b) => {
+            for (let i = 0; i < sorts.length; i++) {
+                let { dir, getValue } = sorts[i];
+                if (!getValue) {
+                    return 0;
+                }
+                let aValue = getValue(a), bValue = getValue(b);
+                if (aValue < bValue) {
+                    return -1 * (dir === 'dec' ? -1 : 1);
+                }
+                if (aValue > bValue) {
+                    return 1 * (dir === 'dec' ? -1 : 1);
+                }
+                if (i === sorts.length - 1) {
+                    return 0;
+                }
+            }
+            return 0;
+        });
+    }
+    function getSortedRows(rows) {
+        if (temp.isInitSortExecuted) {
+            return rows;
+        }
+        if (onChangeSort) {
+            return rows;
+        }
+        let activeSorts = sorts.filter((sort) => sort.active !== false);
+        if (!activeSorts.length || !rows.length) {
+            return rows;
+        }
+        temp.isInitSortExecuted = true;
+        let sortedRows = sortRows(rows, activeSorts);
+        onChange(sortedRows);
+        return sortedRows;
+    }
+    function getRows() {
+        let searchedRows = getSearchedRows(value);
+        let sortedRows = getSortedRows(searchedRows);
+        let pagedRows = paging && !paging.serverSide ? sortedRows.slice((paging.number - 1) * paging.size, paging.number * paging.size) : sortedRows;
+        return { rows: value, searchedRows, sortedRows, pagedRows };
+    }
+    //calculate style of cells and title cells
+    function getCellStyle(column) {
+        let width = getDynamics({ value: column.width });
+        let minWidth = getDynamics({ value: column.minWidth });
+        return { width: width ? width : undefined, flex: width ? undefined : 1, minWidth };
+    }
+    const getCellAttrs = ({ row, rowIndex, column, type }) => {
+        let { cellAttrs, titleAttrs } = column;
+        let attrs = getDynamics({ value: type === 'title' ? titleAttrs : cellAttrs, column, def: {}, row, rowIndex });
+        let justify = getDynamics({ value: column.justify, def: false });
+        let cls = `aio-input-table-${type}` + (justify ? ` aio-input-table-${type}-justify` : '');
+        attrs = UT.AddToAttrs(attrs, { className: cls, style: getCellStyle(column) });
+        if (type === 'title') {
+            attrs.title = getDynamics({ value: column.title, def: '' });
+        }
+        return Object.assign({}, attrs);
+    };
+    function getRowAttrs(row, rowIndex) {
+        let attrs = rowAttrs ? rowAttrs({ row, rowIndex }) : {};
+        let obj = UT.AddToAttrs(attrs, { className: 'aio-input-table-row' });
+        if (onSwap) {
+            obj = Object.assign(Object.assign(Object.assign({}, obj), DragRows.getDragAttrs({ dragIndex: rowIndex })), DragRows.getDropAttrs({ dropIndex: rowIndex, rows: value }));
+        }
+        return obj;
+    }
+    function search(searchValue) {
+        if (onSearch === true) {
+            setSearchValue(searchValue);
+        }
+        else if (typeof onSearch === 'function') {
+            onSearch(searchValue);
+        }
+    }
+    let ROWS = getRows();
+    let attrs = UT.AddToAttrs(rootProps.attrs, { className: ['aio-input aio-input-table', className], style: rootProps.style, attrs: { ref: dom } });
+    return (_jsx(Provider, { value: {
+            ROWS, rootProps, columns, sorts, setSorts, sortRows, excelColumns, getCellAttrs, getRowAttrs,
+            add, remove, search, exportToExcel, getDynamics, DragColumns, getIcon
+        }, children: _jsxs("div", Object.assign({}, attrs, { children: [_jsx(TableToolbar, {}), _jsxs("div", { className: 'aio-input-table-unit aio-input-scroll', children: [_jsx(TableHeader, {}), _jsx(TableRows, {})] }), !!paging && !!ROWS.rows.length ? _jsx(TablePaging, {}) : ''] })) }));
+};
+export default AIOTable;
+const TableGap = ({ dir }) => {
+    const { rootProps } = useProvider(), { rowGap, columnGap } = rootProps;
+    return _jsx("div", { className: `aio-input-table-border-${dir}`, style: dir === 'h' ? { height: rowGap } : { width: columnGap } });
+};
+function TablePaging() {
+    let { ROWS, rootProps } = useProvider();
+    let [temp] = useState({ timeout: undefined, start: undefined, end: undefined, pages: 0 });
+    function fix(paging) {
+        if (typeof rootProps.onChangePaging !== 'function') {
+            alert('aio-input error => in type table you set paging but forget to set onChangePaging function prop to aio input');
+            return { number: 0, size: 0 };
+        }
+        let { number, size = 20, length = 0, sizes = [1, 5, 10, 15, 20, 30, 50, 70, 100], serverSide } = paging;
+        if (!serverSide) {
+            length = ROWS.sortedRows.length;
+        }
+        if (sizes.indexOf(size) === -1) {
+            size = sizes[0];
+        }
+        let pages = Math.ceil(length / size);
+        number = number > pages ? pages : number;
+        number = number < 1 ? 1 : number;
+        let start = number - 3, end = number + 3;
+        temp.start = start;
+        temp.end = end;
+        temp.pages = pages;
+        return Object.assign(Object.assign({}, paging), { length, number, size, sizes });
+    }
+    let [paging, setPaging] = useState(fix(rootProps.paging || { size: 0, number: 0 }));
+    useEffect(() => {
+        if (rootProps.paging) {
+            setPaging(fix(rootProps.paging));
+        }
+    }, [(rootProps.paging || { size: 0, number: 0, length: 0 }).size, (rootProps.paging || { size: 0, number: 0, length: 0 }).number, (rootProps.paging || { size: 0, number: 0, length: 0 }).length]);
+    function changePaging(obj) {
+        let newPaging = fix(Object.assign(Object.assign({}, paging), obj));
+        setPaging(newPaging);
+        if (rootProps.onChangePaging) {
+            if (newPaging.serverSide) {
+                clearTimeout(temp.timeout);
+                temp.timeout = setTimeout(() => {
+                    //be khatere fahme payine typescript majbooram dobare in shart ro bezanam
+                    if (rootProps.onChangePaging) {
+                        rootProps.onChangePaging(newPaging);
+                    }
+                }, 800);
+            }
+            else {
+                rootProps.onChangePaging(newPaging);
+            }
+        }
+    }
+    let { number, size, sizes } = paging;
+    let buttons = [];
+    let isFirst = true;
+    for (let i = temp.start; i <= temp.end; i++) {
+        if (i < 1 || i > temp.pages) {
+            buttons.push(_jsx("button", { className: 'aio-input-table-paging-button aio-input-table-paging-button-hidden', children: i }, i));
+        }
+        else {
+            let index;
+            if (isFirst) {
+                index = 1;
+                isFirst = false;
+            }
+            else if (i === Math.min(temp.end, temp.pages)) {
+                index = temp.pages;
+            }
+            else {
+                index = i;
+            }
+            buttons.push(_jsx("button", { className: 'aio-input-table-paging-button' + (index === number ? ' active' : ''), onClick: () => changePaging({ number: index }), children: index }, index));
+        }
+    }
+    function changeSizeButton() {
+        if (!sizes || !sizes.length) {
+            return null;
+        }
+        let p = {
+            attrs: { className: 'aio-input-table-paging-button aio-input-table-paging-size' },
+            type: 'select', value: size, options: sizes, option: { text: 'option', value: 'option' },
+            onChange: (value) => changePaging({ size: value }),
+            popover: { fitHorizontal: true },
+        };
+        return (_jsx(AIOInput, Object.assign({}, p)));
+    }
+    return (_jsxs("div", { className: 'aio-input-table-paging', children: [buttons, changeSizeButton()] }));
+}
+const TableRows = () => {
+    let { ROWS, rootProps } = useProvider();
+    let { rowTemplate, rowAfter = () => null, rowBefore = () => null, rowsTemplate, placeholder = 'there is not any items' } = rootProps;
+    let rows = ROWS.pagedRows || [];
+    let content;
+    if (rowsTemplate) {
+        content = rowsTemplate(rows);
+    }
+    else if (rows.length) {
+        content = rows.map((o, i) => {
+            let { id = 'ailr' + Math.round(Math.random() * 10000000) } = o;
+            o._id = o._id === undefined ? id : o._id;
+            let isLast = i === rows.length - 1, Row;
+            if (rowTemplate) {
+                Row = rowTemplate({ row: o, rowIndex: i, isLast });
+            }
+            else {
+                Row = _jsx(TableRow, { row: o, rowIndex: i, isLast: isLast }, o._id);
+            }
+            return (_jsxs(Fragment, { children: [rowBefore({ row: o, rowIndex: i }), Row, rowAfter({ row: o, rowIndex: i })] }, o._id));
+        });
+    }
+    else if (placeholder) {
+        content = _jsx("div", { style: { width: '100%', textAlign: 'center', padding: 12, boxSizing: 'border-box' }, children: placeholder });
+    }
+    else {
+        return null;
+    }
+    return _jsx("div", { className: 'aio-input-table-rows', children: content });
+};
+const TableToolbar = () => {
+    let { add, exportToExcel, sorts, sortRows, setSorts, search, rootProps, excelColumns, getIcon } = useProvider();
+    let { toolbarAttrs, toolbar, onAdd, onSearch, onChangeSort, onChange = () => { }, value, addText } = rootProps;
+    toolbarAttrs = UT.AddToAttrs(toolbarAttrs, { className: 'aio-input-table-toolbar' });
+    if (!onAdd && !toolbar && !onSearch && !sorts.length && !excelColumns.length) {
+        return null;
+    }
+    function changeSort(sortId, changeObject) {
+        let newSorts = sorts.map((sort) => {
+            if (sort.sortId === sortId) {
+                let newSort = Object.assign(Object.assign({}, sort), changeObject);
+                return newSort;
+            }
+            return sort;
+        });
+        changeSorts(newSorts);
+    }
+    function changeSorts(sorts) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (onChangeSort) {
+                let res = yield onChangeSort(sorts);
+                if (res !== false) {
+                    setSorts(sorts);
+                }
+            }
+            else {
+                setSorts(sorts);
+                let activeSorts = sorts.filter((sort) => sort.active !== false);
+                if (activeSorts.length) {
+                    onChange(sortRows(value, activeSorts));
+                }
+            }
+        });
+    }
+    function button() {
+        if (!sorts.length) {
+            return null;
+        }
+        let p = {
+            popover: {
+                header: { title: 'Sort', onClose: false },
+                setAttrs: (key) => { if (key === 'header') {
+                    return { className: 'aio-input-table-toolbar-popover-header' };
+                } },
+                limitTo: '.aio-input-table'
+            },
+            caret: false, type: 'select', options: sorts,
+            option: {
+                text: 'option.title',
+                checked: '!!option.active',
+                close: () => false,
+                value: 'option.sortId',
+                after: (option) => {
+                    let { dir = 'dec', sortId } = option;
+                    return (_jsx("div", { onClick: (e) => {
+                            e.stopPropagation();
+                            changeSort(sortId, { dir: dir === 'dec' ? 'inc' : 'dec' });
+                        }, children: getIcon(dir === 'dec' ? 'mdiArrowDown' : 'mdiArrowUp', 0.8) }));
+                }
+            },
+            attrs: { className: 'aio-input-table-toolbar-button' },
+            text: getIcon('mdiSort', 0.7),
+            onSwap: (newSorts, from, to) => changeSorts(newSorts),
+            onChange: (value, option) => changeSort(value, { active: !option.checked })
+        };
+        return (_createElement(AIOInput, Object.assign({}, p, { key: 'sortbutton' })));
+    }
+    function getAddText() {
+        let { addText } = rootProps;
+        if (!rootProps.addText) {
+            return getIcon('mdiPlusThick', 0.8);
+        }
+        return typeof addText === 'function' ? addText(value) : addText;
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({}, toolbarAttrs, { children: [toolbar && _jsx("div", { className: 'aio-input-table-toolbar-content', children: typeof toolbar === 'function' ? toolbar() : toolbar }), _jsx("div", { className: 'aio-input-table-search', children: !!onSearch && _jsx(AIOInput, { type: 'text', onChange: (value) => search(value), after: getIcon('mdiMagnify', 0.7) }) }), button(), !!excelColumns.length && _jsx("div", { className: 'aio-input-table-toolbar-button', onClick: () => exportToExcel(), children: getIcon('mdiFileExcel', 0.8) }), !!onAdd && _jsx("div", { className: 'aio-input-table-toolbar-button', onClick: () => add(), children: getAddText() })] })), _jsx(TableGap, { dir: 'h' })] }));
+};
+const TableHeader = () => {
+    let { rootProps, columns } = useProvider();
+    let { headerAttrs, onRemove } = rootProps;
+    headerAttrs = UT.AddToAttrs(headerAttrs, { className: 'aio-input-table-header' });
+    let Titles = columns.map((o, i) => _jsx(TableTitle, { column: o, isLast: i === columns.length - 1, colIndex: i }, o._id));
+    let RemoveTitle = !onRemove ? null : _jsxs(_Fragment, { children: [_jsx(TableGap, { dir: 'v' }), _jsx("div", { className: 'aio-input-table-remove-title' })] });
+    return _jsxs("div", Object.assign({}, headerAttrs, { children: [Titles, RemoveTitle, _jsx(TableGap, { dir: 'h' })] }));
+};
+const TableTitle = (p) => {
+    const { column, isLast, colIndex } = p;
+    let { getCellAttrs, DragColumns } = useProvider();
+    const attrs = Object.assign(Object.assign(Object.assign({}, getCellAttrs({ column, type: 'title', row: undefined, rowIndex: 0 })), DragColumns.getDragAttrs(colIndex)), DragColumns.getDropAttrs(colIndex));
+    return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({}, attrs, { children: attrs.title })), !isLast && _jsx(TableGap, { dir: 'v' })] }));
+};
+const TableRow = (p) => {
+    const { row, isLast, rowIndex } = p;
+    let { remove, rootProps, columns, getRowAttrs, getIcon } = useProvider();
+    function getCells() {
+        return columns.map((column, i) => {
+            let key = row._id + ' ' + column._id;
+            let isLast = i === columns.length - 1;
+            return (_jsx(TableCell, { isLast: isLast, row: row, rowIndex: rowIndex, column: column }, key));
+        });
+    }
+    let { onRemove } = rootProps;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({}, getRowAttrs(row, rowIndex), { children: [getCells(), onRemove ? _jsxs(_Fragment, { children: [_jsx(TableGap, { dir: 'v' }), _jsx("button", { className: 'aio-input-table-remove', onClick: () => remove(row, rowIndex), children: getIcon('mdiClose', 0.8) })] }) : null] }), row._id), _jsx(TableGap, { dir: 'h' })] }));
+};
+const TableCell = (p) => {
+    let { row, rowIndex, column, isLast } = p;
+    let { getCellAttrs, rootProps } = useProvider();
+    let { onChange = () => { }, value = [] } = rootProps;
+    //cellNewValue is used to eval please dont remove it
+    function setCell(row, column, cellNewValue) {
+        row = JSON.parse(JSON.stringify(row));
+        eval(`${column.value} = cellNewValue`);
+        onChange(value.map((o) => o._id !== row._id ? o : row));
+    }
+    return (_jsxs(Fragment, { children: [_jsx("div", Object.assign({}, getCellAttrs({ row, rowIndex, column, type: 'cell' }), { children: _jsx(TableCellContent, { row: row, rowIndex: rowIndex, column: column, onChange: (value) => setCell(row, column, value) }, row._id + ' ' + column._id) })), !isLast && _jsx(TableGap, { dir: 'v' })] }, row._id + ' ' + column._id));
+};
+const TableCellContent = (props) => {
+    let { row, column, rowIndex, onChange } = props;
+    let { getDynamics, rootProps } = useProvider();
+    const { getValue = {} } = rootProps;
+    if (column.template !== undefined) {
+        const p = { row, column, rowIndex, change: (newRow) => (onChange || (() => { }))(newRow) };
+        if (typeof column.template === 'string' && getValue[column.template]) {
+            return getValue[column.template](p);
+        }
+        if (typeof column.template === 'function') {
+            return column.template(p);
+        }
+    }
+    return getDynamics({ value: column.value, row, rowIndex, column });
+};