ecomlab-components-next 0.1.159 → 0.1.162

package/dist/stories/Table/Table.js

@@ -0,0 +1,1568 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _link3 = _interopRequireDefault(require("next/link"));
+var _headers = _interopRequireDefault(require("../../common/headers"));
+var _Rating = _interopRequireDefault(require("@mui/material/Rating"));
+var _Checkbox = _interopRequireDefault(require("../Checkbox/Checkbox"));
+var _Star = _interopRequireDefault(require("@mui/icons-material/Star"));
+var _deepEqual = _interopRequireDefault(require("deep-equal"));
+var _sort_arrow_down = _interopRequireDefault(require("./img/sort_arrow_down.svg"));
+var _TableInput = _interopRequireDefault(require("../../components/TableInput/TableInput"));
+var _sort_table = _interopRequireDefault(require("./img/sort_table.svg"));
+var _sort_arrow_up = _interopRequireDefault(require("./img/sort_arrow_up.svg"));
+var _TableChartTd = _interopRequireDefault(require("./TableChartTd/TableChartTd"));
+var _CheckboxToggle = _interopRequireDefault(require("../CheckboxToggle/CheckboxToggle"));
+var _contextMenu = _interopRequireDefault(require("./img/context-menu.svg"));
+var _TdDate = require("./TdDate");
+var _reactSpinners = require("react-spinners");
+var _ButtonCopy = require("../../components/ButtonCopy/ButtonCopy");
+var _utils = require("../../common/utils");
+var _TypeTdImage = require("./TypeTdImage");
+var _RenderFiltersTh = require("./RenderFiltersTh/RenderFiltersTh");
+var _TableWithoutData = require("../../components/TableWithoutData/TableWithoutData");
+var _react = require("react");
+require("./Table.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var imageNotFound = require('./img/imageNotFound.svg');
+var SORT_DIRECTIONS = {
+  ascending: 'ASC',
+  descending: 'DESC'
+};
+var DEFAULT_COL_WIDTH_PX = '150px';
+var _Table = function Table(_ref) {
+  var _headers$tooltips, _headers$tooltips2, _headers$header3, _fetchedData$;
+  var noDataText = _ref.noDataText,
+    loading = _ref.loading,
+    _ref$fetchedData = _ref.fetchedData,
+    fetchedData = _ref$fetchedData === void 0 ? [] : _ref$fetchedData,
+    headers = _ref.headers,
+    selectedHeaders = _ref.selectedHeaders,
+    onCheck = _ref.onCheck,
+    onInputHandler = _ref.onInputHandler,
+    _ref$setCheckedStateE = _ref.setCheckedStateEmpty,
+    setCheckedStateEmpty = _ref$setCheckedStateE === void 0 ? false : _ref$setCheckedStateE,
+    _ref$setState = _ref.setState,
+    setState = _ref$setState === void 0 ? false : _ref$setState,
+    _ref$isSortable = _ref.isSortable,
+    isSortable = _ref$isSortable === void 0 ? true : _ref$isSortable,
+    _ref$onBooleanCheckbo = _ref.onBooleanCheckbox,
+    onBooleanCheckbox = _ref$onBooleanCheckbo === void 0 ? false : _ref$onBooleanCheckbo,
+    _ref$onAction = _ref.onAction,
+    onAction = _ref$onAction === void 0 ? false : _ref$onAction,
+    _ref$onActionInfo = _ref.onActionInfo,
+    onActionInfo = _ref$onActionInfo === void 0 ? false : _ref$onActionInfo,
+    _ref$onRedirectInfo = _ref.onRedirectInfo,
+    onRedirectInfo = _ref$onRedirectInfo === void 0 ? false : _ref$onRedirectInfo,
+    _ref$onToggle = _ref.onToggle,
+    onToggle = _ref$onToggle === void 0 ? false : _ref$onToggle,
+    _ref$postDataTd = _ref.postDataTd,
+    postDataTd = _ref$postDataTd === void 0 ? false : _ref$postDataTd,
+    _ref$sortingFunc = _ref.sortingFunc,
+    _sortingFunc = _ref$sortingFunc === void 0 ? false : _ref$sortingFunc,
+    _ref$sort = _ref.sort,
+    sort = _ref$sort === void 0 ? false : _ref$sort,
+    _ref$isInsideTable = _ref.isInsideTable,
+    isInsideTable = _ref$isInsideTable === void 0 ? false : _ref$isInsideTable,
+    _ref$nestedTable = _ref.nestedTable,
+    nestedTable = _ref$nestedTable === void 0 ? false : _ref$nestedTable,
+    params = _ref.params,
+    _ref$columnSize = _ref.columnSize,
+    columnSize = _ref$columnSize === void 0 ? false : _ref$columnSize,
+    _setParams = _ref.setParams,
+    fileFilters = _ref.fileFilters,
+    _setFileFilters = _ref.setFileFilters,
+    _ref$staticTD = _ref.staticTD,
+    staticTD = _ref$staticTD === void 0 ? true : _ref$staticTD,
+    _ref$onRedirect = _ref.onRedirect,
+    onRedirect = _ref$onRedirect === void 0 ? false : _ref$onRedirect,
+    paginatorBoxRef = _ref.paginatorBoxRef,
+    refDiv = _ref.refDiv,
+    refContainer = _ref.refContainer,
+    _ref$hideFilters = _ref.hideFilters,
+    hideFilters = _ref$hideFilters === void 0 ? false : _ref$hideFilters,
+    hideSorting = _ref.hideSorting,
+    total = _ref.total,
+    topHeader = _ref.topHeader,
+    page = _ref.page,
+    contextMenuArr = _ref.contextMenuArr,
+    maxHeight = _ref.maxHeight;
+  ////////////////////TRANSLATE////////////////////////
+
+  var _useState = (0, _react.useState)(localStorage.getItem("lang") || 'rus'),
+    _useState2 = _slicedToArray(_useState, 2),
+    lang = _useState2[0],
+    setLang = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setLang(localStorage.getItem("lang"));
+  }, [localStorage.getItem("lang")]);
+  var translateNoData = function translateNoData() {
+    if (lang == 'eng') return 'Select options to load the table';
+    return 'Выберите параметры для загрузки данных таблицы';
+  };
+  var translateTextСopied = function translateTextСopied() {
+    if (lang == 'eng') return 'Text copied';
+    return 'Текст скопирован';
+  };
+  var translateCopyText = function translateCopyText() {
+    if (lang == 'eng') return 'Copy text';
+    return 'Скопировать текст';
+  };
+  var translateNoDataTable = function translateNoDataTable() {
+    if (lang == 'eng') return 'No data';
+    return 'Нет данных';
+  };
+  var translateContext = function translateContext(label) {
+    switch (label) {
+      case 'Удалить':
+        return 'Delete';
+      case 'Редактировать':
+        return 'Edit';
+      case 'Delete':
+        return 'Удалить';
+      case 'Edit':
+        return 'Редактировать';
+      default:
+        return label;
+    }
+  };
+  var translateNoParametr = function translateNoParametr() {
+    if (lang == 'eng') return 'No data was found for the specified parameters, try changing the parameters';
+    if (lang == 'tur') return "Makaleler Türkçe'ye çevrilme aşamasında olup, İngilizce versiyonlarını web sitesinde okuyabilirsiniz.";
+    return 'По заданым параметрам не найдено данных, попробуйте поменять параметры';
+  };
+  var refTable = (0, _react.useRef)();
+  var _useState3 = (0, _react.useState)({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedItems = _useState4[0],
+    setSelectedItems = _useState4[1];
+  var _useState5 = (0, _react.useState)({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedBooleanItems = _useState6[0],
+    setSelectedBooleanItems = _useState6[1];
+  var _useState7 = (0, _react.useState)(noDataText ? noDataText : translateNoData()),
+    _useState8 = _slicedToArray(_useState7, 2),
+    textTable = _useState8[0],
+    setTextTable = _useState8[1];
+  var _useState9 = (0, _react.useState)(headers !== null && headers !== void 0 && headers.filters ? headers === null || headers === void 0 ? void 0 : headers.filters : []),
+    _useState10 = _slicedToArray(_useState9, 2),
+    filters = _useState10[0],
+    _setFilters = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    showAllImages = _useState12[0],
+    _setShowAllImages = _useState12[1];
+  var _useState13 = (0, _react.useState)(null),
+    _useState14 = _slicedToArray(_useState13, 2),
+    activeItem = _useState14[0],
+    _setActiveItem = _useState14[1];
+  var _useState15 = (0, _react.useState)(null),
+    _useState16 = _slicedToArray(_useState15, 2),
+    showOption = _useState16[0],
+    _setShowOption = _useState16[1];
+  var _useState17 = (0, _react.useState)(sort ? sort : []),
+    _useState18 = _slicedToArray(_useState17, 2),
+    sortDirection = _useState18[0],
+    setSortDirection = _useState18[1];
+  var activeSortColumn = (0, _react.useRef)();
+  var _useState19 = (0, _react.useState)(sort ? sort : []),
+    _useState20 = _slicedToArray(_useState19, 2),
+    sortParam = _useState20[0],
+    setSortParam = _useState20[1];
+  var _useState21 = (0, _react.useState)(headers !== null && headers !== void 0 && headers.filters ? [sortParam, headers === null || headers === void 0 ? void 0 : headers.filters] : []),
+    _useState22 = _slicedToArray(_useState21, 2),
+    filtersTable = _useState22[0],
+    _setFiltersTable = _useState22[1];
+  var _useState23 = (0, _react.useState)([]),
+    _useState24 = _slicedToArray(_useState23, 2),
+    fetchedDataInside = _useState24[0],
+    setFetchedDataInside = _useState24[1];
+  var _useState25 = (0, _react.useState)([]),
+    _useState26 = _slicedToArray(_useState25, 2),
+    headersInside = _useState26[0],
+    setHeadersInside = _useState26[1];
+  var _useState27 = (0, _react.useState)({}),
+    _useState28 = _slicedToArray(_useState27, 2),
+    sortInside = _useState28[0],
+    setSortInside = _useState28[1];
+  var _useState29 = (0, _react.useState)(false),
+    _useState30 = _slicedToArray(_useState29, 2),
+    loadingInside = _useState30[0],
+    setLoadingInside = _useState30[1];
+  var _useState31 = (0, _react.useState)(true),
+    _useState32 = _slicedToArray(_useState31, 2),
+    initialSorting = _useState32[0],
+    setInitialSorting = _useState32[1];
+  var _useState33 = (0, _react.useState)(true),
+    _useState34 = _slicedToArray(_useState33, 2),
+    initialSort = _useState34[0],
+    setInitialSort = _useState34[1];
+  var _useState35 = (0, _react.useState)(0),
+    _useState36 = _slicedToArray(_useState35, 2),
+    rowCount = _useState36[0],
+    setRowCount = _useState36[1];
+  var _useState37 = (0, _react.useState)({}),
+    _useState38 = _slicedToArray(_useState37, 2),
+    inputState = _useState38[0],
+    setInputState = _useState38[1];
+  var _useState39 = (0, _react.useState)(null),
+    _useState40 = _slicedToArray(_useState39, 2),
+    indTr = _useState40[0],
+    setIndTr = _useState40[1];
+  var tableId = (0, _react.useId)();
+  var _useState41 = (0, _react.useState)(false),
+    _useState42 = _slicedToArray(_useState41, 2),
+    showContext = _useState42[0],
+    setShowContext = _useState42[1];
+  var _useState43 = (0, _react.useState)(0),
+    _useState44 = _slicedToArray(_useState43, 2),
+    contextLeft = _useState44[0],
+    setContextLeft = _useState44[1];
+  var _useState45 = (0, _react.useState)(0),
+    _useState46 = _slicedToArray(_useState45, 2),
+    contextTop = _useState46[0],
+    setContextTop = _useState46[1];
+  var _useState47 = (0, _react.useState)([]),
+    _useState48 = _slicedToArray(_useState47, 2),
+    contextArr = _useState48[0],
+    setContextArr = _useState48[1];
+  var _useState49 = (0, _react.useState)(''),
+    _useState50 = _slicedToArray(_useState49, 2),
+    contextId = _useState50[0],
+    setContextId = _useState50[1];
+  var _useState51 = (0, _react.useState)(null),
+    _useState52 = _slicedToArray(_useState51, 2),
+    activeBuffer = _useState52[0],
+    setActiveBuffer = _useState52[1];
+  var _useState53 = (0, _react.useState)(false),
+    _useState54 = _slicedToArray(_useState53, 2),
+    checkedAll = _useState54[0],
+    _setCheckedAll = _useState54[1];
+  var refBody = (0, _react.useRef)();
+  var refThead = (0, _react.useRef)();
+  var typeIndexArr = selectedHeaders !== null && selectedHeaders !== void 0 && selectedHeaders.type ? selectedHeaders === null || selectedHeaders === void 0 ? void 0 : selectedHeaders.type : headers === null || headers === void 0 ? void 0 : headers.type;
+  var hiddenHeaders = typeIndexArr === null || typeIndexArr === void 0 ? void 0 : typeIndexArr.map(function (el, ind) {
+    return el === 'hidden' ? ind : -1;
+  }).filter(function (el) {
+    return el !== -1;
+  });
+  var tooltips = (headers === null || headers === void 0 || (_headers$tooltips = headers.tooltips) === null || _headers$tooltips === void 0 ? void 0 : _headers$tooltips.length) > 0 ? headers === null || headers === void 0 || (_headers$tooltips2 = headers.tooltips) === null || _headers$tooltips2 === void 0 ? void 0 : _headers$tooltips2.filter(function (el) {
+    return el !== 'hidden';
+  }) : false;
+  var _useState55 = (0, _react.useState)(0),
+    _useState56 = _slicedToArray(_useState55, 2),
+    leftPosition = _useState56[0],
+    setLeftPosition = _useState56[1];
+  var _useState57 = (0, _react.useState)(0),
+    _useState58 = _slicedToArray(_useState57, 2),
+    widtContainer = _useState58[0],
+    setWidtContainer = _useState58[1];
+  var _useState59 = (0, _react.useState)(0),
+    _useState60 = _slicedToArray(_useState59, 2),
+    scrollWidth = _useState60[0],
+    setScrollWidth = _useState60[1];
+  var _useState61 = (0, _react.useState)(0),
+    _useState62 = _slicedToArray(_useState61, 2),
+    isFixed = _useState62[0],
+    setIsFixed = _useState62[1];
+  var _useState63 = (0, _react.useState)(0),
+    _useState64 = _slicedToArray(_useState63, 2),
+    widthTable = _useState64[0],
+    setWidthTable = _useState64[1];
+  var _useState65 = (0, _react.useState)(0),
+    _useState66 = _slicedToArray(_useState65, 2),
+    bottom = _useState66[0],
+    setBottom = _useState66[1];
+  var _useState67 = (0, _react.useState)(false),
+    _useState68 = _slicedToArray(_useState67, 2),
+    isVisible = _useState68[0],
+    setIsVisible = _useState68[1];
+
+  // Keys
+  var _getId = function getId(data, prefix) {
+    return data === null || data === void 0 ? void 0 : data.reduce(function (result, current) {
+      var valueToAdd;
+      if (Array.isArray(current)) {
+        valueToAdd = _getId(current, "");
+      } else {
+        valueToAdd = _typeof(current) === 'object' ? '' : current === null || current === void 0 ? void 0 : current.toString();
+      }
+      return result + valueToAdd;
+    }, prefix);
+  };
+  var getCheckboxId = function getCheckboxId(data) {
+    return _getId(data, 'checkbox');
+  };
+
+  // Table row object
+  var getRowObj = function getRowObj(data) {
+    var rowObj = {};
+    headers === null || headers === void 0 || headers.header.forEach(function (el, index) {
+      if (_typeof(el) === 'object') {
+        el = headers === null || headers === void 0 ? void 0 : headers.type[index];
+        rowObj[el] = data[index];
+      } else {
+        var type = headers === null || headers === void 0 ? void 0 : headers.type[index];
+        if (type === 'currency') {
+          var _data$index;
+          rowObj[el] = Array.isArray(data) ? (_data$index = data[index]) === null || _data$index === void 0 ? void 0 : _data$index[0] : data[index];
+        } else {
+          rowObj[el] = data[index];
+        }
+      }
+    });
+    return rowObj;
+  };
+
+  // Update checkbox state
+  var getUpdatedOnCheckState = function getUpdatedOnCheckState(newState, data, rowObj) {
+    var _Object$keys, _Object$keys2;
+    var id = getCheckboxId(data);
+    var all_check_length = fetchedData.map(function (arr) {
+      return getRowObj(arr);
+    }).length;
+    if (newState[id]) {
+      delete newState[id];
+    } else {
+      newState[id] = rowObj;
+    }
+    if (((_Object$keys = Object.keys(newState)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) == all_check_length && ((_Object$keys2 = Object.keys(newState)) === null || _Object$keys2 === void 0 ? void 0 : _Object$keys2.length) != 0) {
+      _setCheckedAll(true);
+    } else _setCheckedAll(false);
+    return newState;
+  };
+  var onCheckCheckboxData = function onCheckCheckboxData(arr, extraValue) {
+    if (extraValue) {
+      return selectedBooleanItems[extraValue];
+    } else {
+      var rowObj = getRowObj(arr);
+      var selectedItem = selectedItems[getCheckboxId(arr)];
+      return (0, _deepEqual["default"])(rowObj, selectedItem);
+    }
+  };
+
+  // Getting row data by check handler
+  var onCheckboxChange = function onCheckboxChange(arr, extraValue) {
+    var rowObj = null;
+    if (extraValue) {
+      headers === null || headers === void 0 || headers.header.forEach(function (el, index) {
+        return rowObj[extraValue] = arr[index][0];
+      });
+    } else {
+      rowObj = getRowObj(arr);
+    }
+    if (extraValue) {
+      setSelectedBooleanItems(function (prev) {
+        var obj;
+        if (prev[extraValue]) {
+          obj = _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, extraValue, !prev[extraValue]));
+        } else {
+          obj = _objectSpread(_objectSpread({}, prev), rowObj);
+        }
+        return obj;
+      });
+    } else {
+      var newState = getUpdatedOnCheckState(_objectSpread({}, selectedItems), arr, rowObj);
+      setSelectedItems(newState);
+      if (onCheck) onCheck(Object.values(newState));
+    }
+    return rowObj;
+  };
+
+  // Check all handler
+  var onCheckAll = function onCheckAll() {
+    var newState = {};
+    fetchedData.forEach(function (arr) {
+      getUpdatedOnCheckState(newState, arr, getRowObj(arr));
+    });
+    setSelectedItems(newState);
+    if (onCheck) onCheck(Object.values(newState));
+    _setCheckedAll(true);
+  };
+
+  // Uncheck all handler
+  var _onUncheckAll = function onUncheckAll() {
+    setSelectedItems({});
+    onCheck([]);
+    _setCheckedAll(false);
+  };
+
+  // Table context menu handler
+  var _onContextMenu = function onContextMenu(event, arr, trGetId) {
+    var isContext = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+    event.stopPropagation();
+    if (showContext == trGetId) {
+      setShowContext(false);
+    } else setShowContext(trGetId);
+    setContextLeft('50%');
+    setContextTop('50%');
+    setContextId(trGetId);
+    setContextArr(onCheckboxChange(arr));
+  };
+
+  // Table column sort logic
+  var columnSort = function columnSort(el) {
+    var sortActual;
+    if (initialSorting) {
+      sortActual = [el, SORT_DIRECTIONS.descending];
+      setInitialSorting(false);
+    } else {
+      if (_sortingFunc) {
+        if (el === sort[0]) {
+          if (sort[1] == SORT_DIRECTIONS.descending) {
+            sortActual = [el, SORT_DIRECTIONS.ascending];
+          } else {
+            setInitialSorting(true);
+            sortActual = initialSort;
+          }
+        } else {
+          sortActual = [el, SORT_DIRECTIONS.descending];
+        }
+      }
+    }
+    setSortParam(sortActual);
+    setSortDirection(sortActual);
+    _sortingFunc([sortActual, filtersTable]);
+    _setParams([sortActual, filtersTable]);
+  };
+
+  // Formatting table data by types
+  var typesTd = function typesTd(arr, rowInd) {
+    var tdList = arr === null || arr === void 0 ? void 0 : arr.map(function (el, ind) {
+      var _ref2;
+      var currentType = typeIndexArr === null || typeIndexArr === void 0 ? void 0 : typeIndexArr[ind];
+      var currentWidth = (_ref2 = (columnSize === null || columnSize === void 0 ? void 0 : columnSize.length) > 0 ? columnSize[ind] : DEFAULT_COL_WIDTH_PX) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_COL_WIDTH_PX;
+      if ((typeIndexArr === null || typeIndexArr === void 0 ? void 0 : typeIndexArr.length) > 0) {
+        if (currentType === 'link') {
+          return /*#__PURE__*/React.createElement("td", {
+            className: "".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+            key: _getId([tableId, el, ind], 'link'),
+            onContextMenu: function onContextMenu(e) {
+              return e.stopPropagation();
+            }
+          }, /*#__PURE__*/React.createElement("div", {
+            className: "type-td_link"
+          }, /*#__PURE__*/React.createElement("a", {
+            href: el,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "link__blue"
+          }, (el === null || el === void 0 ? void 0 : el.length) > 20 ? el.slice(0, 20) + '...' : el), (el === null || el === void 0 ? void 0 : el.length) > 20 && /*#__PURE__*/React.createElement("a", {
+            href: el,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "link__blue popup-td"
+          }, el)));
+        }
+        if (currentType === 'stringLayers') {
+          if (!Array.isArray(el)) return '';
+          var stringArr = el === null || el === void 0 ? void 0 : el.map(function (item, itemInd) {
+            var styles;
+            if (Array.isArray(headers === null || headers === void 0 ? void 0 : headers.styles)) {
+              var _headers$styles, _headers$styles2;
+              styles = headers !== null && headers !== void 0 && (_headers$styles = headers.styles) !== null && _headers$styles !== void 0 && (_headers$styles = _headers$styles[rowInd]) !== null && _headers$styles !== void 0 && (_headers$styles = _headers$styles[ind]) !== null && _headers$styles !== void 0 && _headers$styles[itemInd] ? headers === null || headers === void 0 || (_headers$styles2 = headers.styles) === null || _headers$styles2 === void 0 || (_headers$styles2 = _headers$styles2[rowInd]) === null || _headers$styles2 === void 0 || (_headers$styles2 = _headers$styles2[ind]) === null || _headers$styles2 === void 0 ? void 0 : _headers$styles2[itemInd] : {};
+            }
+            if (Array.isArray(item)) {
+              return /*#__PURE__*/React.createElement("p", null, item.map(function (str, strInd) {
+                var strItemStyles;
+                if (styles) {
+                  var _styles;
+                  strItemStyles = (_styles = styles) === null || _styles === void 0 ? void 0 : _styles[strInd];
+                }
+                var checkedStyles = _typeof(strItemStyles) === 'object' && !Array.isArray(strItemStyles) ? strItemStyles : {};
+                return /*#__PURE__*/React.createElement("span", {
+                  className: 'text_grey',
+                  style: checkedStyles
+                }, str);
+              }));
+            } else {
+              return /*#__PURE__*/React.createElement("p", {
+                className: 'text_grey',
+                style: Array.isArray(styles) ? styles[itemInd] : styles
+              }, item);
+            }
+          });
+          return /*#__PURE__*/React.createElement("td", {
+            className: "type-td_string-layers ".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+            key: _getId([tableId, el, ind], 'stringLayers')
+          }, /*#__PURE__*/React.createElement("div", {
+            className: "type-td_string-layers__content"
+          }, stringArr));
+        }
+        if (currentType === 'toggleStatus') {
+          if (!Array.isArray(el)) return 'ㅤ';
+          var _el = _slicedToArray(el, 2),
+            value = _el[0],
+            id = _el[1];
+          return /*#__PURE__*/React.createElement("td", {
+            className: "type-td_toggle_status ".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+            key: _getId([tableId, el, ind], 'toggleStatus')
+          }, /*#__PURE__*/React.createElement("div", {
+            className: "text-box"
+          }, /*#__PURE__*/React.createElement(_CheckboxToggle["default"], {
+            value: value,
+            onChange: function onChange(e) {
+              if (onToggle) {
+                onToggle(getRowObj(arr));
+              }
+            }
+          })));
+        }
+        if (currentType === 'collectInfo') {
+          if (!Array.isArray(el)) return 'ㅤ';
+          var _el2 = _slicedToArray(el, 6),
+            imgLink = _el2[0],
+            name = _el2[1],
+            desc = _el2[2],
+            brand = _el2[3],
+            offerId = _el2[4],
+            count = _el2[5];
+          var isNameArr = Array.isArray(name);
+          var isDescArr = Array.isArray(desc);
+          var isBrandArr = Array.isArray(brand);
+          var isOfferArr = Array.isArray(offerId);
+          return /*#__PURE__*/React.createElement("td", {
+            className: "type-td_collect-info ".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+            key: _getId([tableId, el, ind], 'collectInfo')
+          }, /*#__PURE__*/React.createElement("div", {
+            className: "collect_info_box"
+          }, /*#__PURE__*/React.createElement("div", {
+            className: "img-box"
+          }, /*#__PURE__*/React.createElement("img", {
+            className: "collect_info_img",
+            src: imgLink,
+            onError: function onError(e) {
+              return e.target.src = imageNotFound;
+            },
+            alt: "table_info_img"
+          })), /*#__PURE__*/React.createElement("div", {
+            className: "text_info_box"
+          }, /*#__PURE__*/React.createElement("p", {
+            className: "text_info_name",
+            onClick: isNameArr ? function (e) {
+              return onAction(['name', name]);
+            } : function () {},
+            style: isNameArr ? {
+              color: '#0009E8'
+            } : {}
+          }, name ? isNameArr ? name === null || name === void 0 ? void 0 : name[0] : name : '-'), /*#__PURE__*/React.createElement("p", {
+            className: "text_info_desc",
+            onClick: isDescArr ? function (e) {
+              return onAction(['desc', desc]);
+            } : function () {},
+            style: isDescArr ? {
+              color: '#0009E8'
+            } : {}
+          }, desc ? isDescArr ? desc === null || desc === void 0 ? void 0 : desc[0] : desc : '-'), /*#__PURE__*/React.createElement("p", {
+            className: "text_info_brand",
+            onClick: isBrandArr ? function (e) {
+              return onAction(['brand', brand]);
+            } : function () {},
+            style: isBrandArr ? {
+              color: '#0009E8'
+            } : {}
+          }, brand ? isBrandArr ? brand === null || brand === void 0 ? void 0 : brand[0] : brand : '-'), /*#__PURE__*/React.createElement("div", {
+            className: "text_info_sub_desc_box"
+          }, /*#__PURE__*/React.createElement("p", {
+            className: "text_info_sub_desc",
+            onClick: isOfferArr ? function (e) {
+              return onAction(['offerId', offerId]);
+            } : function () {},
+            style: isOfferArr ? {
+              color: '#0009E8'
+            } : {}
+          }, "\u0410\u0440\u0442: ", /*#__PURE__*/React.createElement("span", null, offerId ? isOfferArr ? offerId === null || offerId === void 0 ? void 0 : offerId[0] : offerId : '-')), count && /*#__PURE__*/React.createElement("p", {
+            className: "text_sum"
+          }, count, /*#__PURE__*/React.createElement("span", null, "\u0448\u0442")), /*#__PURE__*/React.createElement(_ButtonCopy.ButtonCopy, {
+            value: el === null || el === void 0 ? void 0 : el[(el === null || el === void 0 ? void 0 : el.length) - 1]
+          })))));
+        }
+        if (currentType === 'imageWithText') {
+          if (!Array.isArray(el)) return 'ㅤ';
+          var _el3 = _slicedToArray(el, 2),
+            link = _el3[0],
+            text = _el3[1];
+          return /*#__PURE__*/React.createElement("td", {
+            className: "".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+            key: _getId([tableId, el, ind], 'imageWithText')
+          }, /*#__PURE__*/React.createElement("div", {
+            className: "type-td_image-with-text",
+            style: {
+              justifyContent: text ? 'flex-start' : 'center'
+            }
+          }, /*#__PURE__*/React.createElement("img", {
+            src: link,
+            alt: "table_icon",
+            onError: function onError(e) {
+              return e.target.src = imageNotFound;
+            }
+          }), /*#__PURE__*/React.createElement("p", null, text)));
+        }
+        if (currentType === 'author') {
+          return /*#__PURE__*/React.createElement("td", {
+            className: "".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+            key: _getId([tableId, el, ind], 'author')
+          }, /*#__PURE__*/React.createElement("div", {
+            className: "type-td_image-with-text",
+            style: {
+              justifyContent: el ? 'flex-start' : 'center'
+            }
+          }, /*#__PURE__*/React.createElement("p", null, lang === 'eng' ? (0, _utils.transliter)(el) : el)));
+        }
+        if (currentType === 'name') {
+          var _fullName$split$, _fullName$split$2;
+          if (!Array.isArray(el)) return 'ㅤ';
+          var _el4 = _slicedToArray(el, 2),
+            fullName = _el4[0],
+            color = _el4[1];
+          var _name = fullName === null || fullName === void 0 || (_fullName$split$ = fullName.split(' ')[0]) === null || _fullName$split$ === void 0 || (_fullName$split$ = _fullName$split$.substr(0, 1)) === null || _fullName$split$ === void 0 ? void 0 : _fullName$split$.toUpperCase();
+          var surname = fullName === null || fullName === void 0 || (_fullName$split$2 = fullName.split(' ')[1]) === null || _fullName$split$2 === void 0 || (_fullName$split$2 = _fullName$split$2.substr(0, 1)) === null || _fullName$split$2 === void 0 ? void 0 : _fullName$split$2.toUpperCase();
+          return /*#__PURE__*/React.createElement("td", {
+            className: "".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+            key: _getId([tableId, el, ind], 'name')
+          }, /*#__PURE__*/React.createElement("div", {
+            className: "type-td_name",
+            style: {
+              justifyContent: el ? 'flex-start' : 'center'
+            }
+          }, /*#__PURE__*/React.createElement("div", {
+            className: "icon-name",
+            style: {
+              background: color
+            }
+          }, "".concat(_name ? _name : '').concat(surname ? surname : '')), /*#__PURE__*/React.createElement("p", {
+            className: "text_name"
+          }, fullName)));
+        }
+        if (currentType === 'stringLayersWithLink') {
+          if (!Array.isArray(el)) return 'ㅤ';
+          var _stringArr = el === null || el === void 0 ? void 0 : el.map(function (el, strInd) {
+            if (Array.isArray(el)) {
+              if ((el === null || el === void 0 ? void 0 : el.length) > 1) {
+                var _el5 = _slicedToArray(el, 2),
+                  _text = _el5[0],
+                  _link = _el5[1];
+                return /*#__PURE__*/React.createElement("a", {
+                  // style={headers?.styles?.[rowInd]?.[ind]  ? headers?.styles?.[rowInd]?.[ind] : {}} 
+                  key: _getId([tableId, el, ind], 'stringLayersWithLink'),
+                  href: _link,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "btn"
+                }, _text);
+              }
+            }
+          });
+          return /*#__PURE__*/React.createElement("td", {
+            className: "type-td_string-layers ".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+            key: _getId([tableId, el, ind], 'stringLayersWithLink'),
+            onContextMenu: function onContextMenu(e) {
+              return e.stopPropagation();
+            }
+          }, /*#__PURE__*/React.createElement("div", {
+            className: "copy-box"
+          }, /*#__PURE__*/React.createElement("p", {
+            className: "text"
+          }, el[0]), /*#__PURE__*/React.createElement(_ButtonCopy.ButtonCopy, {
+            value: el[0]
+          })), _stringArr && /*#__PURE__*/React.createElement("div", {
+            className: "text-box"
+          }, _stringArr));
+        }
+        if (currentType === 'copyText') {
+          return /*#__PURE__*/React.createElement("td", {
+            className: "".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+            key: _getId([tableId, el, ind], 'stringLayersWithLink'),
+            onContextMenu: function onContextMenu(e) {
+              return e.stopPropagation();
+            }
+          }, /*#__PURE__*/React.createElement("div", {
+            className: "type-td_copy-text"
+          }, /*#__PURE__*/React.createElement("div", {
+            className: "copy-box"
+          }, /*#__PURE__*/React.createElement("p", {
+            className: "text"
+          }, el), /*#__PURE__*/React.createElement(_ButtonCopy.ButtonCopy, {
+            value: el
+          }), /*#__PURE__*/React.createElement("div", {
+            className: "tooltip-box"
+          }, /*#__PURE__*/React.createElement("button", {
+            className: "btn-copy",
+            onClick: function onClick() {
+              navigator.clipboard.writeText(el[0]);
+              setActiveBuffer(el[0]);
+            }
+          }), /*#__PURE__*/React.createElement("div", {
+            className: "tooltip_black"
+          }, activeBuffer == el[0] ? translateTextСopied() : translateCopyText())))));
+        }
+        if (currentType === 'textWithLink') {
+          if (!Array.isArray(el)) return 'ㅤ';
+          var _el6 = _slicedToArray(el, 2),
+            _text2 = _el6[0],
+            _link2 = _el6[1];
+          var type_link = _link2 !== null && _link2 !== void 0 && _link2.includes('http') ? '_blank' : false;
+          return /*#__PURE__*/React.createElement("td", {
+            className: "".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+            key: _getId([tableId, el, ind], 'textWithLink'),
+            onContextMenu: function onContextMenu(e) {
+              return e.stopPropagation();
+            }
+          }, /*#__PURE__*/React.createElement("div", {
+            className: "type-td_image-with-text"
+          }, /*#__PURE__*/React.createElement(_link3["default"], {
+            onClick: function onClick(e) {
+              if (typeof onRedirect === 'function') {
+                var _headers$header;
+                e.preventDefault();
+                onRedirect(onRedirectInfo ? [getRowObj(arr), el, headers === null || headers === void 0 || (_headers$header = headers.header) === null || _headers$header === void 0 ? void 0 : _headers$header[ind]] : [getRowObj(arr), _link2]);
+              } else {
+                window.open(_link2, type_link);
+              }
+            },
+            href: "#"
+            // style={headers?.styles?.[rowInd]?.[ind]  ? headers?.styles?.[rowInd]?.[ind] : {}}
+          }, _text2)));
+        }
+        if (currentType === 'statusWithColor') {
+          if (!Array.isArray(el)) return 'ㅤ';
+          var _el7 = _slicedToArray(el, 3),
+            _text3 = _el7[0],
+            _color = _el7[1],
+            backgroundColor = _el7[2];
+          return /*#__PURE__*/React.createElement("td", {
+            className: "".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+            key: _getId([_text3 + ind]),
+            style: {
+              background: backgroundColor ? '#' + backgroundColor : ''
+            }
+          }, /*#__PURE__*/React.createElement("div", {
+            className: "type-td_status-with-color",
+            style: {
+              justifyContent: el ? 'flex-start' : 'center'
+            }
+          }, /*#__PURE__*/React.createElement("p", {
+            className: "text",
+            style: {
+              color: _color ? '#' + _color : ''
+            }
+          }, _text3 ? _text3 : '-')));
+        }
+        if (currentType === 'image') {
+          var _el$, _el$2, _el$3, _el$4;
+          var isArray = Array.isArray(el);
+          var denominator = isArray ? el === null || el === void 0 ? void 0 : el.length : 1;
+          var imgWidthPercents = showAllImages ? 100 / denominator : 100;
+          return /*#__PURE__*/React.createElement("td", {
+            className: "type-td_image ".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+            key: _getId([tableId, el, ind], 'image')
+          }, /*#__PURE__*/React.createElement("div", {
+            className: "img-box"
+          }, showAllImages && isArray ? el === null || el === void 0 ? void 0 : el.map(function (el, index) {
+            return /*#__PURE__*/React.createElement(_TypeTdImage.TypeTdImage, {
+              imgWidthPercents: imgWidthPercents,
+              src: el ? el : imageNotFound,
+              key: JSON.stringify(el) + index
+            });
+          }) : isArray ? /*#__PURE__*/React.createElement(_TypeTdImage.TypeTdImage, {
+            imgWidthPercents: imgWidthPercents,
+            key: JSON.stringify(el === null || el === void 0 ? void 0 : el[0]),
+            src: el !== null && el !== void 0 && (_el$ = el[0]) !== null && _el$ !== void 0 && _el$.value ? el === null || el === void 0 || (_el$2 = el[0]) === null || _el$2 === void 0 ? void 0 : _el$2.value : imageNotFound,
+            alt: el !== null && el !== void 0 && (_el$3 = el[0]) !== null && _el$3 !== void 0 && _el$3.alt ? el === null || el === void 0 || (_el$4 = el[0]) === null || _el$4 === void 0 ? void 0 : _el$4.alt : ''
+          }) : /*#__PURE__*/React.createElement(_TypeTdImage.TypeTdImage, {
+            imgWidthPercents: imgWidthPercents,
+            key: el,
+            src: el ? el : imageNotFound
+          })));
+        }
+        if (currentType === 'num') {
+          return /*#__PURE__*/React.createElement("td", {
+            // style={headers?.styles?.[rowInd]?.[ind]  ? headers?.styles?.[rowInd]?.[ind] : {}} 
+            className: "type-td_num ".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+            key: _getId([tableId, el, ind], 'num')
+          }, el === null || el === void 0 ? void 0 : el.toLocaleString());
+        }
+        if (currentType === 'postDataTd') {
+          return /*#__PURE__*/React.createElement("td", {
+            onClick: function onClick(e) {
+              e.preventDefault();
+              if (postDataTd) postDataTd(getRowObj(arr));
+            },
+            className: "type-td_num ".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+            key: _getId([tableId, el, ind], 'num')
+          }, el === null || el === void 0 ? void 0 : el.toLocaleString());
+        }
+        if (currentType === 'bar') {
+          if (!Array.isArray(el)) return 'ㅤ';
+          var _el8 = _slicedToArray(el, 2),
+            _count = _el8[0],
+            out_of = _el8[1];
+          return /*#__PURE__*/React.createElement("td", {
+            className: "".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+            key: _getId([tableId, el, ind], 'bar')
+          }, /*#__PURE__*/React.createElement("span", null, _count, " \u0438\u0437 ", out_of));
+        }
+        if (currentType === 'chart') {
+          // if(!el?.datasets) return 'ㅤ'
+          var datasets = el.datasets,
+            labels = el.labels,
+            label = el.label;
+          return /*#__PURE__*/React.createElement("td", {
+            className: "".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+            key: _getId([tableId, el, ind], 'chart')
+          }, /*#__PURE__*/React.createElement(_TableChartTd["default"], {
+            labels_prop: labels,
+            datasets_prop: datasets,
+            label: label
+          }));
+        }
+        if (currentType === 'input') {
+          if (!Array.isArray(el)) return 'ㅤ';
+          return /*#__PURE__*/React.createElement(_TableInput["default"], {
+            props: el,
+            getId: function getId(e) {
+              return _getId(e);
+            },
+            staticTD: staticTD,
+            ind: ind,
+            tableId: tableId,
+            state: inputState,
+            setState: function setState(e) {
+              return setInputState(e);
+            }
+          });
+        }
+        if (currentType === 'email') {
+          var regexEmail = /^((([0-9A-Za-z]{1}[-0-9A-z\.]{0,30}[0-9A-Za-z]?)|([0-9А-Яа-я]{1}[-0-9А-я\.]{0,30}[0-9А-Яа-я]?))@([-A-Za-z]{1,}\.){1,}[-A-Za-z]{2,})$/;
+          return /*#__PURE__*/React.createElement("td", {
+            className: "".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+            key: _getId([tableId, el, ind], 'email')
+          }, /*#__PURE__*/React.createElement("input", {
+            type: "text",
+            style: !regexEmail.test(el) ? {
+              outlineColor: 'red'
+            } : {},
+            value: el
+          }));
+        }
+        if (currentType === 'editableDate') {
+          return /*#__PURE__*/React.createElement("td", {
+            // style={headers?.styles?.[rowInd]?.[ind]  ? headers?.styles?.[rowInd]?.[ind] : {}} 
+            className: "type-td_date ".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+            key: _getId([tableId, el, ind], 'editableDate')
+          }, /*#__PURE__*/React.createElement(_TdDate.TdDate, {
+            date: el
+          }));
+        }
+        if (currentType === 'date') {
+          var _Date;
+          if (!el) return 'ㅤ';
+          return /*#__PURE__*/React.createElement("td", {
+            // style={headers?.styles?.[rowInd]?.[ind]  ? headers?.styles?.[rowInd]?.[ind] : {}} 
+            className: "type-td_date ".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+            key: _getId([tableId, el, ind], 'date')
+          }, (_Date = new Date(el)) === null || _Date === void 0 ? void 0 : _Date.toLocaleDateString('ru-RU'));
+        }
+        if (currentType === 'fullDate') {
+          var _Date2, _Date3;
+          return /*#__PURE__*/React.createElement("td", {
+            // style={headers?.styles?.[rowInd]?.[ind]  ? headers?.styles?.[rowInd]?.[ind] : {}} 
+            className: "type-td_date ".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+            key: _getId([tableId, el, ind], 'date')
+          }, /*#__PURE__*/React.createElement("div", {
+            className: "date-with-time"
+          }, /*#__PURE__*/React.createElement("span", null, ((_Date2 = new Date(el)) === null || _Date2 === void 0 ? void 0 : _Date2.toLocaleDateString('ru-RU')) + ' ', /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("span", {
+            style: {
+              color: '#9298CF'
+            }
+          }, ' ' + ((_Date3 = new Date(el)) === null || _Date3 === void 0 ? void 0 : _Date3.toLocaleTimeString('ru-RU', {
+            hour: '2-digit',
+            minute: '2-digit'
+          }))))));
+        }
+        if (currentType === 'rating') {
+          var _value;
+          if (el) _value = Number(el);
+          return /*#__PURE__*/React.createElement("td", {
+            className: "".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+            key: _getId([tableId, el, ind], 'rating')
+          }, /*#__PURE__*/React.createElement("div", {
+            className: "type-td_rating",
+            style: {
+              justifyContent: 'flex-end'
+            }
+          }, el ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Rating["default"], {
+            name: "rating-comp-".concat(ind + el),
+            precision: 0.2,
+            defaultValue: Math.floor(_value) * 0.2,
+            max: 1,
+            readOnly: true,
+            emptyIcon: /*#__PURE__*/React.createElement(_Star["default"], {
+              style: {
+                opacity: '.1'
+              }
+            }),
+            icon: /*#__PURE__*/React.createElement(_Star["default"], {
+              style: {
+                fill: '#faaf00'
+              }
+            }),
+            size: "large"
+          }), /*#__PURE__*/React.createElement("span", {
+            style: {
+              fontSize: '16px'
+            }
+          }, el)) : /*#__PURE__*/React.createElement("span", null, "-")));
+        }
+        if (currentType === 'checkbox') {
+          var _id = getCheckboxId(arr);
+          return /*#__PURE__*/React.createElement("td", {
+            className: "".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+            key: getCheckboxId([tableId].concat(_toConsumableArray(arr))),
+            style: {
+              textAlign: 'center',
+              padding: 0
+            }
+          }, /*#__PURE__*/React.createElement(_Checkbox["default"], {
+            id: _id,
+            value: onCheckCheckboxData(arr),
+            onChange: function onChange(e) {
+              return onCheckboxChange(arr);
+            }
+          }));
+        }
+        if (currentType === 'booleanCheckbox') {
+          if (!Array.isArray(el)) return 'ㅤ';
+          var _el9 = _slicedToArray(el, 2),
+            _value2 = _el9[0],
+            extraValue = _el9[1];
+          if (selectedBooleanItems[extraValue] === undefined & _value2) onCheckboxChange(arr, extraValue);
+          return /*#__PURE__*/React.createElement("td", {
+            className: "".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+            key: _getId([tableId, el, ind], 'booleanCheckbox')
+          }, /*#__PURE__*/React.createElement(_Checkbox["default"], {
+            id: getCheckboxId(arr),
+            value: onCheckCheckboxData(arr, extraValue),
+            onChange: function onChange(e) {
+              if (onBooleanCheckbox) {
+                onBooleanCheckbox(selectedBooleanItems);
+                onCheckboxChange(arr, extraValue);
+              }
+            }
+          }));
+        }
+        if (currentType === 'actionBtn') {
+          if (Array.isArray(el)) return /*#__PURE__*/React.createElement("td", {
+            onClick: function onClick(e) {
+              if (onAction) {
+                onAction(getRowObj(arr));
+              }
+            }
+          }, el);
+          if ((el === null || el === void 0 ? void 0 : el.length) > 0) {
+            var render_element = '';
+            if (el !== null && el !== void 0 && el.match('https')) {
+              render_element = /*#__PURE__*/React.createElement("button", {
+                className: "btn__action",
+                style: {
+                  backgroundImage: "url(".concat(el, ")")
+                }
+              });
+            } else {
+              render_element = /*#__PURE__*/React.createElement("p", {
+                // style={headers?.styles?.[rowInd]?.[ind]  ? headers?.styles?.[rowInd]?.[ind] : {}} 
+                className: "text_blue"
+              }, el);
+            }
+            return /*#__PURE__*/React.createElement("td", {
+              className: "".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+              key: _getId([tableId, el, ind], 'actionBtn'),
+              onClick: function onClick(e) {
+                var _headers$header2;
+                e.stopPropagation();
+                if (onAction) onAction(onActionInfo ? [getRowObj(arr), el, headers === null || headers === void 0 || (_headers$header2 = headers.header) === null || _headers$header2 === void 0 ? void 0 : _headers$header2[ind]] : getRowObj(arr));
+              }
+            }, /*#__PURE__*/React.createElement("div", {
+              className: "type-td_action-btn"
+            }, (el === null || el === void 0 ? void 0 : el.length) > 0 && render_element));
+          }
+        }
+        if (currentType === 'currency') {
+          if (!Array.isArray(el)) return '';
+          var _el10 = _slicedToArray(el, 2),
+            _value3 = _el10[0],
+            curr = _el10[1];
+          var currency;
+          if (typeof _value3 === 'number') {
+            var _Number;
+            _value3 = (_Number = Number(_value3)) === null || _Number === void 0 ? void 0 : _Number.toLocaleString();
+            currency = /*#__PURE__*/React.createElement("span", {
+              className: "val"
+            }, /*#__PURE__*/React.createElement("span", null, curr), " ", _value3);
+          } else {
+            currency = /*#__PURE__*/React.createElement("span", {
+              className: "curr"
+            }, /*#__PURE__*/React.createElement("span", null, _value3), " ", curr);
+          }
+          return /*#__PURE__*/React.createElement("td", {
+            className: "".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+            key: _getId([tableId, el, ind], 'currency')
+          }, /*#__PURE__*/React.createElement("div", {
+            // style={headers?.styles?.[rowInd]?.[ind]  ? headers?.styles?.[rowInd]?.[ind] : {}} 
+            className: "type-td_currency"
+          }, currency));
+        }
+        if (currentType === 'hidden') {
+          return;
+        }
+        if (currentType === 'contextMenu') {
+          var prefix = 'nested-table';
+          var trGetId = _getId(arr, prefix);
+          return /*#__PURE__*/React.createElement("td", {
+            key: _getId([tableId, el, ind], 'contextMenu'),
+            "data-value": el,
+            className: "type-td_context-menu ".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+            onClick: function onClick(e) {
+              e.preventDefault();
+              e.stopPropagation();
+              _onContextMenu(e, arr, trGetId);
+            },
+            onContextMenu: function onContextMenu(e) {
+              e.preventDefault();
+              e.stopPropagation();
+              _onContextMenu(e, arr, trGetId);
+            }
+          }, /*#__PURE__*/React.createElement("div", {
+            style: {
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              position: 'relative'
+            }
+          }, /*#__PURE__*/React.createElement("img", {
+            src: _contextMenu["default"],
+            alt: "context menu button",
+            style: {
+              objectFit: 'contain',
+              width: '1.75em',
+              height: '1.75em'
+            }
+          }), contextId === trGetId ? /*#__PURE__*/React.createElement("div", {
+            className: "drop-context-menu",
+            style: {
+              display: showContext ? 'flex' : 'none'
+            }
+          }, contextMenuArr === null || contextMenuArr === void 0 ? void 0 : contextMenuArr.map(function (el) {
+            var label = el.label,
+              _onClick = el.onClick,
+              type = el.type;
+            return /*#__PURE__*/React.createElement("button", {
+              className: "drop-context-menu__btn ".concat(type === 'delete' ? 'btn-delete' : ''),
+              onClick: function onClick(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                setShowContext(false);
+                _onClick(contextArr, label);
+              }
+            }, translateContext(label));
+          })) : null));
+        }
+      }
+      return /*#__PURE__*/React.createElement("td", {
+        className: "type-td_text ".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+        key: _getId([tableId, el, ind], 'td'),
+        style: {
+          textAlign: 'left',
+          width: currentWidth ? currentWidth : ''
+        }
+      }, /*#__PURE__*/React.createElement("p", {
+        className: "text"
+        // style={headers?.styles?.[rowInd]?.[ind]  ? headers?.styles?.[rowInd]?.[ind] : {}}
+      }, Array.isArray(el) ? el.join(', ') : el));
+    });
+    return tdList;
+  };
+
+  // Nested table request template
+  var fetchDataInsideFunc = function fetchDataInsideFunc(params) {
+    // let sort;
+    // let filtersParam;
+
+    // if (params) {
+    //     [sort, filtersParam] = params
+    // }
+    // setLoadingInside(true)
+
+    // let url
+    // if (!window.location.hostname.match('localhost')) {
+    //     url = `${OlegHttps}/api/v1/account/all_account${sort?.length > 0 ? '?order_param=' + sort[0] + '&order_param_direction=' + sort[1] : ''}`
+    // } else {
+    //     url = `${OlegHttp}/api/v1/account/all_account${sort?.length > 0 ? '?order_param=' + sort[0] + '&order_param_direction=' + sort[1] : ''}`
+    // }
+
+    // const body = JSON.stringify({
+    //     page: 1,
+    //     limit: 25,
+    //     filters: filtersParam
+    // })
+
+    // fetch(url, { body, method: 'POST', headers })
+    //     .then(res => res.json())
+    //     .then(json => {
+    //         const { data, labels, total, sort } = json
+    //         if (sort) setSortInside(sort)
+    //         if (labels) setHeadersInside(labels)
+    //         setFetchedDataInside(data.length > 0 ? data : [[]])
+    //         setLoadingInside(false)
+    //     })
+    //     .catch(err => {
+    //         setLoadingInside(false)
+    //         console.error(err)
+    //     })
+  };
+
+  // Table body row logic
+  var bodyRowsList = _toConsumableArray(fetchedData === null || fetchedData === void 0 ? void 0 : fetchedData.map(function (arr, ind) {
+    if (Array !== null && Array !== void 0 && Array.isArray(arr)) {
+      var prefix = 'nested-table';
+      var tdList = typesTd(arr, ind);
+      var trGetId = _getId(arr, prefix);
+
+      // buttonTd(tdList, arr)
+
+      return indTr !== trGetId ? /*#__PURE__*/React.createElement("tr", {
+        key: _getId([tableId].concat(_toConsumableArray(arr), [ind]), 'tr'),
+        style: {
+          backgroundColor: nestedTable ? 'rgb(70, 231, 240, 0.1)' : '',
+          cursor: 'pointer'
+        },
+        onClick: function onClick(e) {
+          var productId = arr[hiddenHeaders[ind]];
+          setShowContext(false);
+          if (setState) {
+            setState(productId);
+          }
+          if (isInsideTable) {
+            fetchDataInsideFunc();
+            if (ind === indTr) {
+              setIndTr(null);
+            } else {
+              setIndTr(trGetId);
+            }
+          }
+        },
+        onContextMenu: function onContextMenu(e) {
+          e.preventDefault();
+          _onContextMenu(e, arr, trGetId, true);
+        }
+      }, tdList) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", {
+        id: ind + tableId,
+        key: _getId([tableId].concat(_toConsumableArray(arr), [ind]), 'tr'),
+        style: {
+          backgroundColor: 'rgb(70, 231, 240, 0.1)',
+          outline: '3px solid rgb(70, 231, 240, 0.4)'
+        },
+        onClick: function onClick(e) {
+          var productId = arr[hiddenHeaders[ind]];
+          if (setState) {
+            setState(productId);
+          }
+          setIndTr(null);
+        }
+      }, tdList), /*#__PURE__*/React.createElement(_Table, {
+        loading: loadingInside,
+        isSortable: isSortable,
+        fetchedData: fetchedDataInside,
+        headers: headersInside,
+        sort: sortInside,
+        paginator: false,
+        sortingFunc: function sortingFunc(e) {
+          return fetchDataInsideFunc(e);
+        },
+        nestedTable: true,
+        paginatorDependepcies: []
+      }));
+    }
+  }));
+
+  // Table header row logic
+  var headerRowList = headers === null || headers === void 0 || (_headers$header3 = headers.header) === null || _headers$header3 === void 0 ? void 0 : _headers$header3.map(function (el, ind) {
+    var classPostfix = activeSortColumn.current === el ? " ".concat(sortDirection) : '';
+    var currentWidth = (columnSize === null || columnSize === void 0 ? void 0 : columnSize.length) > 0 ? columnSize[ind] : DEFAULT_COL_WIDTH_PX;
+    if (hiddenHeaders !== null && hiddenHeaders !== void 0 && hiddenHeaders.includes(ind)) return null;
+    if ((typeIndexArr === null || typeIndexArr === void 0 ? void 0 : typeIndexArr[ind]) === 'image') {
+      return /*#__PURE__*/React.createElement("th", {
+        key: _getId([tableId, el, ind], 'th'),
+        style: {
+          padding: '9px 12px'
+        },
+        className: "col col".concat(ind + classPostfix, "  \n                    ").concat(staticTD && ind == 0 ? 'sticky_th' : '')
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "text-and-icon"
+      }, /*#__PURE__*/React.createElement("p", {
+        className: "td-text-table"
+      }, el)), tooltips && tooltips[ind] ? /*#__PURE__*/React.createElement("div", {
+        className: "tooltip_black"
+      }, tooltips[ind]) : null);
+    }
+    if (typeIndexArr[ind] === 'contextMenu') {
+      return /*#__PURE__*/React.createElement("th", {
+        className: "".concat(staticTD && ind === 0 ? 'sticky_th' : ''),
+        key: _getId([tableId, el, ind], 'contextMenu th')
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "col-th-border col-th-border_context",
+        style: {
+          resize: 'none',
+          borderRight: staticTD && ind == 0 ? 'none' : ''
+        }
+      }));
+    }
+    if (typeIndexArr[ind] === 'checkbox') {
+      return /*#__PURE__*/React.createElement("th", {
+        key: "check-".concat(tableId),
+        className: "th-check col".concat(ind, " ").concat(staticTD && ind === 0 ? 'sticky_th' : '')
+      }, /*#__PURE__*/React.createElement(_Checkbox["default"], {
+        id: getCheckboxId(fetchedData),
+        value: checkedAll,
+        onChange: function onChange(e) {
+          if (checkedAll) {
+            _onUncheckAll();
+          } else {
+            onCheckAll();
+          }
+        }
+      }));
+    }
+    return /*#__PURE__*/React.createElement("th", {
+      key: _getId([tableId, el, ind], 'th'),
+      className: "col col".concat(ind + classPostfix, "  ").concat(staticTD && ind == 0 ? 'sticky_th' : '')
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "col-th-border",
+      style: {
+        borderRight: staticTD && ind == 0 ? 'none' : '',
+        resize: 'horizontal',
+        overflow: 'hidden',
+        width: currentWidth
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "text-and-icon",
+      onClick: function onClick() {
+        return columnSort(el);
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "td-text-table"
+    }, el !== null && el !== void 0 && el.includes('http') ? /*#__PURE__*/React.createElement("img", {
+      className: "header-img",
+      src: el
+    }) : !Array.isArray(el) ? el : null, (el === null || el === void 0 ? void 0 : el.length) > 10 & !(el !== null && el !== void 0 && el.includes('http')) & !Array.isArray(el) ? /*#__PURE__*/React.createElement("span", {
+      className: "popup-th"
+    }, el) : null, Array.isArray(el) ? el === null || el === void 0 ? void 0 : el.map(function (item) {
+      if (el !== null && el !== void 0 && el.includes('http')) {
+        return /*#__PURE__*/React.createElement("img", {
+          className: "header-img",
+          src: item
+        });
+      } else {
+        return /*#__PURE__*/React.createElement("p", null, item);
+      }
+    }) : null), !hideSorting && /*#__PURE__*/React.createElement("img", {
+      style: {
+        width: '13px',
+        height: '13px'
+      },
+      src: (sortDirection === null || sortDirection === void 0 ? void 0 : sortDirection.length) > 1 && sortDirection[0] === el & typeof sortDirection[1] === 'string' ? (sortDirection === null || sortDirection === void 0 ? void 0 : sortDirection.length) > 1 && sortDirection[1] === SORT_DIRECTIONS.ascending ? _sort_arrow_up["default"] : _sort_arrow_down["default"] : _sort_table["default"]
+    }))), tooltips && tooltips[ind] ? /*#__PURE__*/React.createElement("div", {
+      className: "tooltip_black"
+    }, tooltips[ind]) : null);
+  });
+
+  // Formatting table headers and column filters logic
+  var tableHeaders = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", {
+    className: "tr-col-headers"
+  }, headerRowList), !hideFilters && /*#__PURE__*/React.createElement("tr", {
+    className: "tr-col-filters"
+  }, /*#__PURE__*/React.createElement(_RenderFiltersTh.RenderFiltersTh, {
+    onUncheckAll: function onUncheckAll(e) {
+      return _onUncheckAll(e);
+    },
+    setCheckedAll: function setCheckedAll(e) {
+      return _setCheckedAll(e);
+    },
+    lang: lang,
+    staticTD: staticTD,
+    fetchedData: fetchedData,
+    onCheck: onCheck,
+    activeItem: activeItem,
+    headers: selectedHeaders !== null && selectedHeaders !== void 0 && selectedHeaders.type ? selectedHeaders : headers,
+    showOption: showOption,
+    setShowOption: function setShowOption(e) {
+      return _setShowOption(e);
+    },
+    filters: filters,
+    filterTypes: headers === null || headers === void 0 ? void 0 : headers.filterTypes,
+    filterList: headers === null || headers === void 0 ? void 0 : headers.filterList,
+    setFilters: function setFilters(e) {
+      return _setFilters(e);
+    },
+    sort: sort,
+    setFiltersTable: function setFiltersTable(e) {
+      return _setFiltersTable(e);
+    },
+    sortingFunc: function sortingFunc(e) {
+      return _sortingFunc(e);
+    },
+    sortParam: sortParam,
+    setActiveItem: function setActiveItem(e) {
+      return _setActiveItem(e);
+    },
+    filtersTable: filtersTable,
+    params: params,
+    setParams: function setParams(e) {
+      return _setParams(e);
+    },
+    fileFilters: fileFilters,
+    setFileFilters: function setFileFilters(e) {
+      return _setFileFilters(e);
+    },
+    showAllImages: showAllImages,
+    setShowAllImages: function setShowAllImages(e) {
+      return _setShowAllImages(e);
+    }
+  })));
+
+  // onScroll handler 
+  var scroll = function scroll() {
+    var _refBody$current;
+    scrollBottom();
+    var tbody = refBody === null || refBody === void 0 || (_refBody$current = refBody.current) === null || _refBody$current === void 0 ? void 0 : _refBody$current.getBoundingClientRect();
+    var thead = refThead === null || refThead === void 0 ? void 0 : refThead.current;
+    var top = tbody === null || tbody === void 0 ? void 0 : tbody.top;
+    var height = thead === null || thead === void 0 ? void 0 : thead.getBoundingClientRect().height;
+    if (top <= height) {
+      setRowCount(-top + height);
+    } else {
+      setRowCount(0);
+    }
+  };
+  (0, _react.useEffect)(function () {
+    if (typeof onInputHandler === 'function') {
+      onInputHandler(inputState);
+    }
+  }, [inputState]);
+
+  // Attach the scroll listener to the div
+  (0, _react.useEffect)(function () {
+    window.addEventListener("scroll", scroll);
+    return function () {
+      return window.removeEventListener('scroll', scroll);
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (typeof setCheckedStateEmpty == 'function') {
+      _onUncheckAll();
+      setCheckedStateEmpty(false);
+    }
+  }, [setCheckedStateEmpty]);
+  (0, _react.useEffect)(function () {
+    if (initialSort) {
+      setInitialSort(sort);
+    }
+  }, [initialSort]);
+
+  // Обработчик на клик вне элемента,для закрытия блока с options
+  (0, _react.useEffect)(function () {
+    var showFilterOptions = function showFilterOptions(e) {
+      var el = e.target;
+      if (!el.closest('.filter-btn-box') && !el.closest('.date-box-filter-table')) {
+        _setActiveItem(null);
+        _setShowOption(false);
+      }
+    };
+    document.addEventListener('click', showFilterOptions);
+    return function () {
+      document.addEventListener('click', showFilterOptions);
+    };
+  }, []);
+
+  // Horizontal scroll resize handler
+  var observer = new ResizeObserver(function (entries) {
+    var width = entries[0].contentRect.width;
+    setWidthTable(width);
+  });
+  (0, _react.useEffect)(function () {
+    if (refTable !== null && refTable !== void 0 && refTable.current) {
+      observer.observe(refTable === null || refTable === void 0 ? void 0 : refTable.current);
+    }
+  }, [refTable, observer]);
+
+  // Horizontal onScroll handler
+  var scrollBottom = function scrollBottom() {
+    var _paginatorBoxRef$curr, _paginatorBoxRef$curr2, _paginatorBoxRef$curr3, _paginatorBoxRef$curr4, _refTable$current, _refContainer$current;
+    positionScroll();
+    var top = paginatorBoxRef === null || paginatorBoxRef === void 0 || (_paginatorBoxRef$curr = paginatorBoxRef.current) === null || _paginatorBoxRef$curr === void 0 ? void 0 : _paginatorBoxRef$curr.getBoundingClientRect().top;
+    var left = paginatorBoxRef === null || paginatorBoxRef === void 0 || (_paginatorBoxRef$curr2 = paginatorBoxRef.current) === null || _paginatorBoxRef$curr2 === void 0 ? void 0 : _paginatorBoxRef$curr2.getBoundingClientRect().left;
+    var width = paginatorBoxRef === null || paginatorBoxRef === void 0 || (_paginatorBoxRef$curr3 = paginatorBoxRef.current) === null || _paginatorBoxRef$curr3 === void 0 ? void 0 : _paginatorBoxRef$curr3.getBoundingClientRect().width;
+    var scrollWidth = paginatorBoxRef === null || paginatorBoxRef === void 0 || (_paginatorBoxRef$curr4 = paginatorBoxRef.current) === null || _paginatorBoxRef$curr4 === void 0 ? void 0 : _paginatorBoxRef$curr4.scrollWidth;
+
+    // Ширина таблицы
+    var widthTable = refTable === null || refTable === void 0 || (_refTable$current = refTable.current) === null || _refTable$current === void 0 ? void 0 : _refTable$current.getBoundingClientRect().width;
+    setWidthTable(widthTable);
+    setLeftPosition(left); //left
+    setWidtContainer(width); //right
+    setScrollWidth(scrollWidth); //width
+
+    // Видимость скроллбара
+    var heightDocument = document.documentElement.clientHeight;
+    setBottom(refContainer === null || refContainer === void 0 || (_refContainer$current = refContainer.current) === null || _refContainer$current === void 0 ? void 0 : _refContainer$current.getBoundingClientRect().bottom);
+    if (heightDocument) {
+      var _refContainer$current2;
+      var pointBottom = (refContainer === null || refContainer === void 0 || (_refContainer$current2 = refContainer.current) === null || _refContainer$current2 === void 0 ? void 0 : _refContainer$current2.getBoundingClientRect().bottom) > document.documentElement.clientHeight;
+      var pointTop = (refContainer === null || refContainer === void 0 ? void 0 : refContainer.top) > 0;
+      setIsFixed(pointBottom || pointTop ? true : false);
+    }
+
+    //верхняя точка скроллбара
+    if (heightDocument) {
+      var _refContainer$current3;
+      var _pointTop = (refContainer === null || refContainer === void 0 || (_refContainer$current3 = refContainer.current) === null || _refContainer$current3 === void 0 ? void 0 : _refContainer$current3.getBoundingClientRect().top) > document.documentElement.clientHeight;
+      setIsVisible(_pointTop ? false : true);
+    }
+  };
+
+  // Синхронизируем скролл
+  var positionScroll = function positionScroll() {
+    if (paginatorBoxRef !== null && paginatorBoxRef !== void 0 && paginatorBoxRef.current && refDiv !== null && refDiv !== void 0 && refDiv.current) {
+      var _refTable$current2;
+      paginatorBoxRef.current.scrollLeft = refDiv.current.scrollLeft;
+      var _widthTable = (_refTable$current2 = refTable.current) === null || _refTable$current2 === void 0 ? void 0 : _refTable$current2.getBoundingClientRect().width;
+      setWidthTable(_widthTable);
+    }
+  };
+
+  // скролл таблицы shift + wheel
+  var scrollWheel = function scrollWheel(e) {
+    var isShift = e === null || e === void 0 ? void 0 : e.shiftKey;
+    if (paginatorBoxRef !== null && paginatorBoxRef !== void 0 && paginatorBoxRef.current && refDiv !== null && refDiv !== void 0 && refDiv.current && isShift) {
+      refDiv.current.scrollLeft = paginatorBoxRef.current.scrollLeft;
+    }
+  };
+  (0, _react.useEffect)(function () {
+    var _paginatorBoxRef$curr5;
+    window.addEventListener("scroll", scrollBottom);
+    window.addEventListener("resize", scrollBottom);
+    paginatorBoxRef === null || paginatorBoxRef === void 0 || (_paginatorBoxRef$curr5 = paginatorBoxRef.current) === null || _paginatorBoxRef$curr5 === void 0 || _paginatorBoxRef$curr5.addEventListener('wheel', scrollWheel);
+    return function () {
+      var _paginatorBoxRef$curr6;
+      window.removeEventListener('scroll', scrollBottom);
+      window.removeEventListener("resize", scrollBottom);
+      paginatorBoxRef === null || paginatorBoxRef === void 0 || (_paginatorBoxRef$curr6 = paginatorBoxRef.current) === null || _paginatorBoxRef$curr6 === void 0 || _paginatorBoxRef$curr6.removeEventListener('wheel', scrollWheel);
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    positionScroll();
+    scrollBottom();
+  }, []);
+  (0, _react.useEffect)(function () {
+    scrollBottom();
+  }, [total, page]);
+
+  // Attach the scroll listener to the div
+  (0, _react.useEffect)(function () {
+    var _paginatorBoxRef$curr7, _paginatorBoxRef$curr8;
+    var left = paginatorBoxRef === null || paginatorBoxRef === void 0 || (_paginatorBoxRef$curr7 = paginatorBoxRef.current) === null || _paginatorBoxRef$curr7 === void 0 ? void 0 : _paginatorBoxRef$curr7.getBoundingClientRect().left;
+    var right = paginatorBoxRef === null || paginatorBoxRef === void 0 || (_paginatorBoxRef$curr8 = paginatorBoxRef.current) === null || _paginatorBoxRef$curr8 === void 0 ? void 0 : _paginatorBoxRef$curr8.getBoundingClientRect().width;
+    setWidtContainer(right);
+    setLeftPosition(left);
+  }, [selectedHeaders, widthTable]);
+  (0, _react.useEffect)(function () {
+    if (paginatorBoxRef !== null && paginatorBoxRef !== void 0 && paginatorBoxRef.current && refDiv !== null && refDiv !== void 0 && refDiv.current) {
+      paginatorBoxRef.current.scrollLeft = 0;
+      refDiv.current.scrollLeft = 0;
+    }
+  }, [selectedHeaders]);
+  return loading && !(headers !== null && headers !== void 0 && headers.header) ? /*#__PURE__*/React.createElement("div", {
+    className: "loader-table"
+  }, /*#__PURE__*/React.createElement(_reactSpinners.MoonLoader, {
+    color: "#1890FF",
+    speedMultiplier: 0.5
+  })) : headers !== null && headers !== void 0 && headers.header ? !nestedTable ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("table", {
+    className: "table-ver-3",
+    ref: refTable
+  }, /*#__PURE__*/React.createElement("thead", {
+    ref: refThead,
+    className: "thead",
+    style: {
+      backgroundColor: 'white',
+      transform: "translateY(".concat(rowCount + (topHeader ? topHeader : 0), "px)"),
+      transition: '.3s'
+    }
+  }, tableHeaders), /*#__PURE__*/React.createElement("tbody", {
+    ref: refBody,
+    className: "tbody",
+    style: {
+      position: 'relative'
+    }
+  }, ((_fetchedData$ = fetchedData[0]) === null || _fetchedData$ === void 0 ? void 0 : _fetchedData$.length) > 0 ? bodyRowsList : /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    className: "loader-box-tr",
+    colSpan: "88",
+    style: {
+      padding: '24px'
+    }
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "text_grey"
+  }, translateNoParametr()))))), isVisible && /*#__PURE__*/React.createElement("div", {
+    className: "scrollbar",
+    ref: refDiv,
+    onScroll: function onScroll(e) {
+      scrollBottom();
+      positionScroll();
+    },
+    style: {
+      height: '16px',
+      position: "fixed",
+      bottom: isFixed ? 0 : '',
+      top: !isFixed ? bottom : '',
+      left: leftPosition + 'px',
+      maxWidth: widtContainer + 'px',
+      width: '100%',
+      overflowX: 'scroll',
+      overflowY: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      minWidth: widthTable,
+      maxWidth: widthTable
+    }
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, tableHeaders, fetchedData[0].length > 0 ? bodyRowsList : /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    className: "loader-box-tr",
+    colSpan: "88",
+    style: {
+      padding: '24px'
+    }
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "text_grey"
+  }, translateNoParametr())))) : /*#__PURE__*/React.createElement(_TableWithoutData.TableWithoutData, {
+    maxHeight: maxHeight,
+    text: noDataText ? noDataText : textTable
+  });
+};
+var _default = exports["default"] = _Table;