aio-table 8.0.1 → 9.1.0

package/index.js

@@ -1,2898 +1,449 @@
-"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, {
-            title: column.title,
-            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 {
-  title_layout() {
-    let {
-      title
-    } = this.props;
-    return {
-      html: title,
-      style: {
-        padding: '0 6px'
-      }
-    };
-  }
-  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.title_layout(), 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,
-      title
-    } = this.props;
-    if (add === false) {
-      return false;
-    }
-    if (operatorOptions.filter(({
-      show
-    }) => show !== false).length === 1) {
-      return {
-        size: 90,
-        html: /*#__PURE__*/_react.default.createElement(_aioButton.default, {
-          style: {
-            width: '100%'
-          },
-          type: "button",
-          className: TableCLS.filterOperator,
-          text: operator
-        })
-      };
-    }
-    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 { 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 usePopup from "aio-popup";
+import AIODate from "aio-date";
+import { Filterbar, usePaging, useSort } from "aio-component-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 = (props) => {
+    const popup = usePopup();
+    let [dom] = useState(createRef());
+    let [searchValue, setSearchValue] = useState('');
+    const [columns, setColumns] = useState([]);
+    const [searchColumns, setSearchColumns] = useState([]);
+    const [excelColumns, setExcelColumns] = useState([]);
+    const [filterColumns, setFilterColumns] = useState([]);
+    const filterColumnsRef = useRef(filterColumns);
+    filterColumnsRef.current = filterColumns;
+    const rowsIndexDicRef = useRef({});
+    const setRowsIndexDic = (rowsIndexDic) => rowsIndexDicRef.current = rowsIndexDic;
+    const getRowsIndexDic = () => rowsIndexDicRef.current;
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    const pagingHook = usePaging({ rows: props.value, paging: props.paging, onChange: props.onChangePaging });
+    const tableHook = useTable(() => propsRef.current, () => pagingHook.paging);
+    const getIconRef = useRef(new UT.GetSvg());
+    const getIcon = getIconRef.current.getIcon;
+    const DragColumns = UT.useDrag((dragIndex, dropIndex, reOrder) => setColumns(reOrder(columns, dragIndex, dropIndex)));
+    const getGetValue = (sort, column) => {
+        if (sort.getValue) {
+            return sort.getValue;
+        }
+        return (row) => {
+            const isDate = ['month', 'day', 'hour', 'minute'].indexOf(column.type || 'text') !== -1;
+            const cellValue = tableHook.getCellValue({ row, rowIndex: 0, isFirst: false, isLast: false, column, change: () => { }, isDate }, column.value);
+            if (isDate) {
+                const DATE = new AIODate();
+                try {
+                    return DATE.getTime(cellValue);
+                }
+                catch (_a) {
+                    return 0;
+                }
+            }
+            return cellValue;
+        };
+    };
+    const getSorts = (columns) => {
+        let sorts = [];
+        for (let i = 0; i < columns.length; i++) {
+            const column = columns[i];
+            const { _id } = column;
+            const sort = column.sort === true ? { sortId: _id } : column.sort;
+            if (!sort) {
+                continue;
+            }
+            let { active = false, dir = 'dec', sortId } = sort;
+            let sortItem = { dir, title: sort.title || column.title, sortId, active, getValue: getGetValue(sort, column) };
+            sorts.push(sortItem);
+        }
+        return sorts;
+    };
+    const sortHook = useSort({
+        sorts: [],
+        rows: propsRef.current.value,
+        onChangeRows: props.onChange,
+        onChangeSort: props.onChangeSort,
+    });
+    const isDate = (column) => ['month', 'day', 'hour', 'minute'].indexOf(column.type || 'text') !== -1;
+    function getColumns() {
+        let { columns = [] } = props;
+        let searchColumns = [], excelColumns = [], filterColumns = [];
+        let updatedColumns = columns.map((o) => {
+            let { id = 'aitc' + Math.round(Math.random() * 1000000), filterId, search, excel } = o;
+            let column = Object.assign(Object.assign({}, o), { _id: id });
+            if (search) {
+                searchColumns.push(column);
+            }
+            if (excel) {
+                excelColumns.push(column);
+            }
+            if (filterId) {
+                filterColumns.push(column);
+            }
+            return column;
+        });
+        setColumns(updatedColumns);
+        setSearchColumns(searchColumns);
+        setExcelColumns(excelColumns);
+        setFilterColumns(filterColumns);
+        return updatedColumns;
+    }
+    useEffect(() => {
+        const columns = getColumns();
+        sortHook.setSorts(getSorts(columns));
+    }, []);
+    function getTimeText(column, value) {
+        if (!value || value === null) {
+            return '';
+        }
+        const t = column.type;
+        const DATE = new AIODate();
+        let pattern = '{year}/{month}';
+        if (t !== 'month') {
+            pattern += '/{day}';
+            if (t !== 'day') {
+                pattern += ' {hour}';
+                if (t === 'minute') {
+                    pattern += ' : {minute}';
+                }
+                else {
+                    pattern += ' : 00';
+                }
+            }
+        }
+        return DATE.getDateByPattern(value, pattern);
+    }
+    function add() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!props.onAdd) {
+                return;
+            }
+            const res = yield props.onAdd();
+            if (res && props.onChange) {
+                props.onChange([res, ...props.value]);
+            }
+        });
+    }
+    function remove(row, index) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!props.onRemove) {
+                return;
+            }
+            const res = yield props.onRemove({ row, rowIndex: index });
+            if (res === true && props.onChange) {
+                props.onChange(props.value.filter((o) => o._id !== row._id));
+            }
+        });
+    }
+    function exportToExcel() {
+        let list = [];
+        if (typeof props.excel === 'function') {
+            list = props.excel(props.value);
+        }
+        else {
+            for (let rowIndex = 0; rowIndex < props.value.length; rowIndex++) {
+                const isFirst = rowIndex === 0;
+                const isLast = rowIndex === props.value.length - 1;
+                let row = props.value[rowIndex], json = {};
+                for (let j = 0; j < excelColumns.length; j++) {
+                    const column = excelColumns[j], { excel } = 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;
+                    }
+                    const cellDetail = { row, rowIndex, isFirst, isLast, column, change: () => { }, isDate: isDate(column) };
+                    json[key] = tableHook.getCellValue(cellDetail, column.value, '');
+                }
+                list.push(json);
+            }
+        }
+        UT.ExportToExcel(list, { promptText: typeof props.excel === 'string' ? props.excel : 'Inter Excel File Name' });
+    }
+    function getSearchedRows(rows) {
+        if (props.onSearch !== true) {
+            return rows;
+        }
+        if (!searchColumns.length || !searchValue) {
+            return rows;
+        }
+        const rowsIndexDic = getRowsIndexDic();
+        return UT.Search(rows, searchValue, (row) => {
+            const { isFirst, isLast, rowIndex } = rowsIndexDic[(row)._id];
+            let str = '';
+            for (let i = 0; i < searchColumns.length; i++) {
+                let column = searchColumns[i];
+                const cellDetail = { row, rowIndex, isFirst, isLast, column, change: () => { }, isDate: isDate(column) };
+                let cellValue = tableHook.getCellValue(cellDetail, column.value, '');
+                if (cellValue) {
+                    str += cellValue + ' ';
+                }
+            }
+            return str;
+        });
+    }
+    function getRows() {
+        const rows = props.value;
+        const rowsIndexDic = {};
+        for (let i = 0; i < props.value.length; i++) {
+            rowsIndexDic[props.value[i]._id] = { rowIndex: i, isFirst: i === 0, isLast: i === rows.length - 1 };
+        }
+        setRowsIndexDic(rowsIndexDic);
+        let searchedRows = getSearchedRows(rows);
+        let sortedRows = sortHook.getSortedRows(searchedRows);
+        let pagedRows = pagingHook.getPagedRows(sortedRows);
+        return { rows: props.value, searchedRows, sortedRows, pagedRows };
+    }
+    function search(searchValue) {
+        if (props.onSearch === true) {
+            setSearchValue(searchValue);
+        }
+        else if (typeof props.onSearch === 'function') {
+            props.onSearch(searchValue);
+        }
+    }
+    const changeCell = (cellDetail, cellNewValue) => {
+        if (!props.onChange) {
+            return;
+        }
+        const { column } = cellDetail;
+        if (typeof column.value !== 'string' || column.value.indexOf('row.') !== 0) {
+            return;
+        }
+        let row = JSON.parse(JSON.stringify(cellDetail.row));
+        const rowId = row._id;
+        eval(`${column.value} = cellNewValue`);
+        props.onChange(props.value.map((o) => o._id !== rowId ? o : row));
+    };
+    let ROWS = getRows();
+    const { gap = [0, 1] } = props;
+    let attrs = UT.AddToAttrs(props.attrs, { className: ['aio-table', props.className], style: Object.assign({ gap: gap[1] }, props.style), attrs: { ref: dom } });
+    const context = {
+        rootProps: props, getTimeText, isDate, columns, excelColumns, filterColumns, changeCell, tableHook, sortHook, ROWS,
+        getRowsIndexDic, add, remove, search, exportToExcel, DragColumns, getIcon, popup,
+    };
+    return (_jsxs(Provider, { value: context, children: [_jsxs("div", Object.assign({}, attrs, { children: [_jsx(TableToolbar, {}), !!props.filter &&
+                        _jsx(Filterbar, { columns: filterColumns, filter: props.filter, columnOption: { text: (column) => column.title, id: (column) => column.filterId, type: (column) => column.type || 'text' } }), _jsxs("div", { className: 'aio-table-unit aio-table-scroll', style: { gap: gap[1] }, children: [_jsx(TableHeader, {}), _jsx(TableRows, {})] }), pagingHook.render()] })), popup.render()] }));
+};
+export default AIOTable;
+const TableRows = () => {
+    let { ROWS, rootProps } = useProvider();
+    let { rowOption = {}, rowsTemplate, placeholder = 'there is not any items' } = rootProps;
+    const { before: rowBefore = () => null, after: rowAfter = () => null, template: rowTemplate, } = rowOption;
+    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;
+            const rowDetail = {
+                row: o, rowIndex: i,
+                isFirst: i === 0,
+                isLast: i === rows.length - 1
+            };
+            let Row;
+            if (rowTemplate) {
+                Row = rowTemplate(rowDetail);
+            }
+            else {
+                Row = _jsx(TableRow, { rowDetail: rowDetail }, o._id);
+            }
+            return (_jsxs(Fragment, { children: [rowBefore(rowDetail), Row, rowAfter(rowDetail)] }, o._id));
+        });
+    }
+    else if (placeholder) {
+        content = _jsx("div", { style: { width: '100%', textAlign: 'center', padding: 12, boxSizing: 'border-box' }, children: placeholder });
+    }
+    else {
+        return null;
+    }
+    const { gap = [0, 1] } = rootProps;
+    return _jsx("div", { className: 'aio-table-rows', style: { gap: gap[1] }, children: content });
+};
+const TableToolbar = () => {
+    let { add, exportToExcel, search, rootProps, excelColumns, getIcon, sortHook } = useProvider();
+    let { toolbarAttrs, toolbar, onAdd, onSearch, value } = rootProps;
+    toolbarAttrs = UT.AddToAttrs(toolbarAttrs, { className: 'aio-table-toolbar' });
+    if (!onAdd && !toolbar && !onSearch && !sortHook.sorts.length && !excelColumns.length) {
+        return null;
+    }
+    function getAddText() {
+        let { addText } = rootProps;
+        if (!rootProps.addText) {
+            return getIcon('mdiPlusThick', 0.8);
+        }
+        return typeof addText === 'function' ? addText(value) : addText;
+    }
+    return (_jsxs("div", Object.assign({}, toolbarAttrs, { children: [toolbar && _jsx("div", { className: 'aio-table-toolbar-content', children: typeof toolbar === 'function' ? toolbar() : toolbar }), _jsx("div", { className: 'aio-table-search', children: !!onSearch && _jsx(AIOInput, { type: 'text', onChange: (value) => search(value), after: getIcon('mdiMagnify', 0.7) }) }), sortHook.renderSortButton(), !!excelColumns.length && _jsx("div", { className: 'aio-table-toolbar-button', onClick: () => exportToExcel(), children: getIcon('mdiFileExcel', 0.8) }), !!onAdd && _jsx("div", { className: 'aio-table-toolbar-button', onClick: () => add(), children: getAddText() })] })));
+};
+const TableHeader = () => {
+    let { rootProps, columns } = useProvider();
+    let { headerAttrs, onRemove, gap = [0, 1] } = rootProps;
+    headerAttrs = UT.AddToAttrs(headerAttrs, { className: 'aio-table-header', style: { gap: gap[0] } });
+    let Titles = columns.map((o, i) => _jsx(TableTitle, { column: o, isLast: i === columns.length - 1, colIndex: i }, o._id));
+    let RemoveTitle = !onRemove ? null : _jsx("div", { className: 'aio-table-remove-title' });
+    return _jsxs("div", Object.assign({}, headerAttrs, { children: [Titles, RemoveTitle] }));
+};
+const TableTitle = (p) => {
+    const { column, isLast, colIndex } = p;
+    let { tableHook, DragColumns } = useProvider();
+    const attrs = Object.assign(Object.assign(Object.assign({}, tableHook.getTitleAttrs(column)), DragColumns.getDragAttrs(colIndex)), DragColumns.getDropAttrs(colIndex));
+    return _jsx("div", Object.assign({}, attrs, { children: attrs.title }));
+};
+const TableRow = (props) => {
+    const { rowDetail } = props;
+    const { row, rowIndex } = rowDetail;
+    const rowId = row._id;
+    let { remove, rootProps, columns, tableHook, getIcon, isDate } = useProvider();
+    function getCells() {
+        return columns.map((column, i) => {
+            const key = rowId + ' ' + column._id;
+            const cellDetail = Object.assign(Object.assign({}, rowDetail), { column, change: (cellNewValue) => {
+                    if (!rootProps.onChange) {
+                        return;
+                    }
+                    if (typeof column.value !== 'string' || column.value.indexOf('row.') !== 0) {
+                        return;
+                    }
+                    let row = JSON.parse(JSON.stringify(cellDetail.row));
+                    eval(`${column.value} = cellNewValue`);
+                    rootProps.onChange(rootProps.value.map((o) => o._id !== rowId ? o : row));
+                }, isDate: isDate(column) });
+            const cellValue = tableHook.getCellValue(cellDetail, column.value);
+            return (_jsx(TableCell, { cellDetail: cellDetail, cellValue: cellValue }, key));
+        });
+    }
+    let { onRemove } = rootProps;
+    return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({}, tableHook.getRowAttrs(props.rowDetail), { children: [getCells(), onRemove ? _jsx("button", { className: 'aio-table-remove', onClick: () => remove(row, rowIndex), children: getIcon('mdiClose', 0.8) }) : null] }), rowId) }));
+};
+const TableCell = (props) => {
+    const { cellDetail, cellValue } = props;
+    const { row, column, isLast } = cellDetail;
+    const { tableHook, getTimeText } = useProvider();
+    const { template, before, after, subtext } = column;
+    const rowId = row._id;
+    const colId = column._id;
+    const isTime = ['month', 'day', 'hour', 'minute'].indexOf(column.type || 'text') !== -1;
+    const templateValue = isTime ? getTimeText(cellValue) : tableHook.getCellValue(cellDetail, template);
+    const beforeValue = tableHook.getCellValue(cellDetail, before, undefined);
+    const afterValue = tableHook.getCellValue(cellDetail, after, undefined);
+    const subtextValue = tableHook.getCellValue(cellDetail, subtext, undefined);
+    return (_jsx(Fragment, { children: _jsxs("div", Object.assign({}, tableHook.getCellAttrs(props.cellDetail, props.cellValue), { children: [beforeValue !== undefined && _jsx("div", { className: "aio-table-cell-before", children: beforeValue }), _jsxs("div", { className: `aio-table-cell-value${subtext !== undefined ? ' has-subtext' : ''}`, "data-subtext": subtextValue, children: [templateValue !== undefined && templateValue, templateValue === undefined && cellValue] }), afterValue !== undefined && _jsx("div", { className: "aio-table-cell-after", children: afterValue })] })) }, rowId + ' ' + colId));
+};
+const useTable = (getProps, getPaging) => {
+    const DragRows = UT.useDrag((dragData, dropData, reOrder) => {
+        const { onSwap, onChange } = getProps();
+        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 if (onChange) {
+            onChange(newRows);
+        }
+    });
+    const getCellValue = (cellDetail, cellValue, def) => {
+        const { getValue = {} } = getProps();
+        const paging = getPaging();
+        if (paging) {
+            let { number, size } = paging;
+            cellDetail = Object.assign(Object.assign({}, cellDetail), { rowIndex: cellDetail.rowIndex + ((number - 1) * size) });
+        }
+        let type = typeof cellValue;
+        if (type === 'string') {
+            const { row } = cellDetail;
+            let result = cellValue;
+            if (getValue[cellValue]) {
+                result = getValue[cellValue](cellDetail);
+            }
+            else if (cellValue.indexOf('row.') !== -1) {
+                try {
+                    eval(`result = ${cellValue}`);
+                }
+                catch (_a) {
+                    result = '';
+                }
+            }
+            return result === undefined ? def : result;
+        }
+        if (type === 'undefined') {
+            return def;
+        }
+        if (type === 'function') {
+            return cellValue(cellDetail);
+        }
+        return cellValue === undefined ? def : cellValue;
+    };
+    const getColValue = (column, field, def) => {
+        const colValue = column[field];
+        let type = typeof colValue;
+        let result;
+        if (type === 'function') {
+            result = colValue(column);
+        }
+        else {
+            result = colValue;
+        }
+        return result === undefined ? def : result;
+    };
+    const getCellAttrs = (cellDetail, cellValue) => {
+        const { column } = cellDetail;
+        const attrs = getCellValue(cellDetail, column.attrs, {});
+        const justify = getColValue(column, 'justify', false);
+        const width = getColValue(column, 'width');
+        const minWidth = getColValue(column, 'minWidth');
+        const className = `aio-table-cell` + (justify ? ` aio-table-cell-justify` : '');
+        const style = { width, minWidth, flex: width ? undefined : 1 };
+        return UT.AddToAttrs(attrs, { className, style, attrs: { title: typeof cellValue === 'string' ? cellValue : undefined } });
+    };
+    const getTitleAttrs = (column) => {
+        const attrs = getColValue(column, 'titleAttrs', {});
+        const justify = getColValue(column, 'justify', false);
+        const width = getColValue(column, 'width');
+        const minWidth = getColValue(column, 'minWidth');
+        const className = `aio-table-title` + (justify ? ` aio-table-title-justify` : '');
+        const style = { width, minWidth, flex: width ? undefined : 1 };
+        return UT.AddToAttrs(attrs, { className, style, attrs: { title: typeof column.title === 'string' ? column.title : undefined } });
+    };
+    const getRowAttrs = (rowDetail) => {
+        const { rowOption = {}, onSwap, value, gap = [0, 1] } = getProps();
+        const { attrs: rowAttrs } = rowOption;
+        const attrs = rowAttrs ? rowAttrs(rowDetail) : {};
+        let obj = UT.AddToAttrs(attrs, { className: 'aio-table-row', style: { gap: gap[0] } });
+        if (onSwap) {
+            obj = Object.assign(Object.assign(Object.assign({}, obj), DragRows.getDragAttrs({ dragIndex: rowDetail.rowIndex })), DragRows.getDropAttrs({ dropIndex: rowDetail.rowIndex, rows: value }));
+        }
+        return obj;
+    };
+    return { getCellValue, getColValue, getCellAttrs, getTitleAttrs, getRowAttrs };
+};