@propellerads/table 5.1.0 → 6.0.0

package/dist/table.cjs.development.js

@@ -1,650 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var icon = require('@propellerads/icon');
-var Checkbox = _interopDefault(require('@propellerads/input-checkbox'));
-var React = require('react');
-var React__default = _interopDefault(React);
-var reactTable = require('react-table');
-var styled = require('styled-components');
-var styled__default = _interopDefault(styled);
-var stylevariables = require('@propellerads/stylevariables');
-
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-function _taggedTemplateLiteralLoose(e, t) {
-  return t || (t = e.slice(0)), e.raw = t, e;
-}
-
-var defaultGetter = function defaultGetter(props) {
-  return props;
-};
-var cellGetter = function cellGetter(props, _ref) {
-  var _cell$column;
-  var cell = _ref.cell;
-  return _extends({}, props, {
-    // @ts-ignore
-    align: cell === null || cell === void 0 ? void 0 : (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : _cell$column.align
-  });
-};
-var mainCellGetter = function mainCellGetter(props, _ref2) {
-  var column = _ref2.column;
-  return _extends({}, props, {
-    // @ts-ignore
-    align: column === null || column === void 0 ? void 0 : column.align
-  });
-};
-var getTableProps = function getTableProps(userGetter, getter) {
-  if (getter === void 0) {
-    getter = defaultGetter;
-  }
-  if (userGetter) {
-    return function (props) {
-      return _extends({}, getter(props), userGetter(props));
-    };
-  }
-  return getter;
-};
-var getTableElementProps = function getTableElementProps(userGetter, getter) {
-  if (getter === void 0) {
-    getter = defaultGetter;
-  }
-  if (userGetter) {
-    return function (props, meta) {
-      return _extends({}, getter(props, meta), userGetter(props, meta));
-    };
-  }
-  return getter;
-};
-var getTableRowProps = function getTableRowProps(userGetter, getter) {
-  if (getter === void 0) {
-    getter = defaultGetter;
-  }
-  if (userGetter) {
-    return function (props, meta) {
-      return _extends({}, getter(props, meta), userGetter(props, meta));
-    };
-  }
-  return getter;
-};
-var getTableCellProps = function getTableCellProps(userGetter, getter) {
-  if (getter === void 0) {
-    getter = defaultGetter;
-  }
-  if (userGetter) {
-    return function (props, meta) {
-      return _extends({}, getter(props, meta), userGetter(props, meta));
-    };
-  }
-  return getter;
-};
-var getTableElementInternalProps = function getTableElementInternalProps(internalProps, userGetter, getter) {
-  if (getter === void 0) {
-    getter = defaultGetter;
-  }
-  if (userGetter) {
-    return function (props, meta) {
-      return _extends({}, getter(_extends({}, props, internalProps), meta), userGetter(props, meta));
-    };
-  }
-  return function (props, meta) {
-    return getter(_extends({}, props, internalProps), meta);
-  };
-};
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
-var loadingAnimation = /*#__PURE__*/styled.keyframes(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    from {\n    background-position-x: 0;\n    }\n    50% {\n    background-position-x: 100%;\n    }\n    100% {\n    background-position-x: 0;\n    }\n"])));
-var TableLoading = /*#__PURE__*/styled__default.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background: rgba(255, 255, 255, 0.8);\n  transition: all 0.3s ease;\n  z-index: -1;\n  opacity: 0;\n  pointer-events: none;\n\n  ", "\n"])), function (props) {
-  return props.isLoading && styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      opacity: 1;\n      z-index: 2;\n      pointer-events: all;\n    "])));
-});
-var TableLoadingInner = /*#__PURE__*/styled__default.div(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: block;\n  text-align: center;\n  width: 100%;\n  top: 50%;\n  left: 0;\n  color: rgba(0, 0, 0, 0.6);\n  transform: translateY(-52%);\n  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n"])));
-var TableWrapper = /*#__PURE__*/styled__default.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n\n  &::before {\n    bottom: 10px;\n    content: '';\n    opacity: 0;\n    pointer-events: none;\n    position: absolute;\n    width: 10px;\n    height: 100%;\n    top: 0;\n    left: -10px;\n    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);\n    transition: 0.3s opacity;\n  }\n\n  &::after {\n    bottom: 10px;\n    content: '';\n    opacity: 0;\n    pointer-events: none;\n    width: 10px;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    right: -10px;\n    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);\n    transition: 0.3s opacity;\n  }\n\n  &.shadow_left {\n    &::before {\n      opacity: 1 !important;\n    }\n  }\n\n  &.shadow_right {\n    &::after {\n      opacity: 1 !important;\n    }\n  }\n"])));
-var TableRoot = /*#__PURE__*/styled__default.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: ", "px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  border: 0;\n"])), stylevariables.fontNormal);
-var TableContent = /*#__PURE__*/styled__default.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n  max-width: 100%;\n  overflow-x: scroll;\n  overflow-y: hidden;\n"])));
-var TableCore = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: auto 1;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  border-collapse: collapse;\n"])));
-var HeadCell = /*#__PURE__*/styled__default.div(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n"])));
-var TD = /*#__PURE__*/styled__default.div(_templateObject0 || (_templateObject0 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  line-height: 1.3rem;\n  padding: 7px 4px;\n  overflow: hidden;\n  transition: width 0.3s ease 0s, min-width, padding, opacity;\n\n  ", "\n"])), function (_ref) {
-  var align = _ref.align;
-  return align && styled.css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteralLoose(["\n      text-align: ", ";\n    "])), align);
-});
-var EmptyStateCell = /*#__PURE__*/styled__default.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: ", "px;\n  background: linear-gradient(to left, ", ", ", ", ", ");\n  background-size: 200% 200%;\n  animation: ", " 1.6s linear infinite;\n"])), stylevariables.spacing * 4, stylevariables.gray95, stylevariables.white, stylevariables.gray95, loadingAnimation);
-var TH = /*#__PURE__*/styled__default.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0 4px;\n  line-height: normal;\n  position: relative;\n  transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;\n  color: rgb(0, 0, 0);\n  font-weight: 500;\n  outline: none;\n"])));
-var THead = /*#__PURE__*/styled__default.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1 0 auto;\n  display: flex;\n  flex-direction: column;\n  user-select: none;\n\n  ", ", ", " {\n    padding: 0 4px;\n    line-height: normal;\n    position: relative;\n    transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    color: ", ";\n    font-weight: 500;\n    outline: none;\n  }\n"])), TH, TD, stylevariables.black);
-var TRGroup = /*#__PURE__*/styled__default.div(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex: 1 0 auto;\n  box-shadow: inset 0 -1px 0 0 ", ";\n  min-width: 100%;\n  width: max-content;\n"])), stylevariables.gray95);
-var TR = /*#__PURE__*/styled__default.div(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  -webkit-box-align: center;\n  align-items: center;\n"])));
-var TBody = /*#__PURE__*/styled__default.div(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-top: 1px solid ", ";\n  margin-top: ", "px;\n  min-width: 100%;\n  width: max-content;\n"])), stylevariables.gray80, stylevariables.spacing * 2);
-var TFoot = /*#__PURE__*/styled__default.div(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: ", ";\n  flex: 1 0 auto;\n  display: flex;\n  flex-direction: column;\n"])), stylevariables.gray95);
-var TResizer = /*#__PURE__*/styled__default.div(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-block;\n  position: absolute;\n  right: 5px;\n  top: 0;\n  z-index: 1;\n  touch-action: none;\n\n  &:after {\n    content: '\u2194';\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n"])));
-
-var FOOTER_PLACEMENT;
-(function (FOOTER_PLACEMENT) {
-  FOOTER_PLACEMENT["TOP"] = "top";
-  FOOTER_PLACEMENT["BOTTOM"] = "bottom";
-})(FOOTER_PLACEMENT || (FOOTER_PLACEMENT = {}));
-
-var useLoadingState = function useLoadingState(showLoadingState, loading, pageSize, columns, LoadingCellComponent) {
-  var loadingColumns = React.useMemo(function () {
-    return showLoadingState && loading ? columns.map(function (column) {
-      var loadingColumn = _extends({}, column, {
-        Cell: function Cell() {
-          return React__default.createElement(LoadingCellComponent, null);
-        }
-      });
-      return loadingColumn;
-    }) : [];
-  }, [columns, loading, showLoadingState]);
-  var loadingData = React.useMemo(function () {
-    if (showLoadingState && loading && columns && columns.length > 0) {
-      var dataObject = {};
-      var dataArray = [];
-      for (var i = 0; i < columns.length; i += 1) {
-        dataObject["empty_" + i] = '';
-      }
-      for (var _i = 0; _i < pageSize; _i += 1) {
-        dataArray.push(dataObject);
-      }
-      return dataArray;
-    }
-    return [];
-  }, [columns, loading, pageSize, showLoadingState]);
-  return {
-    // @ts-ignore
-    loadingColumns: loadingColumns,
-    loadingData: loadingData
-  };
-};
-
-// @ts-nocheck
-var TABLE_SHADOW_CLASS_NAME = {
-  LEFT: 'shadow_left',
-  RIGHT: 'shadow_right'
-};
-function changeClassName(tableWrapperNode, newClassNameList) {
-  var classList = tableWrapperNode.classList;
-  classList.remove(TABLE_SHADOW_CLASS_NAME.LEFT, TABLE_SHADOW_CLASS_NAME.RIGHT);
-  classList.add.apply(classList, newClassNameList);
-}
-function calculateNewClassNames(tableNode, tableWrapperNode) {
-  if (!tableNode || !tableWrapperNode) {
-    return;
-  }
-  var tableRect = tableNode.getBoundingClientRect();
-  var tableWrapperRect = tableWrapperNode.getBoundingClientRect();
-  var newClassName = [];
-  var tableRectLeft = Math.floor(tableRect.left);
-  var tableRectRight = Math.floor(tableRect.right);
-  var tableWrapperRectLeft = Math.floor(tableWrapperRect.left);
-  var tableWrapperRectRight = Math.floor(tableWrapperRect.right);
-  if (tableRectLeft < tableWrapperRectLeft) {
-    newClassName.push(TABLE_SHADOW_CLASS_NAME.LEFT);
-  }
-  if (tableRectRight > tableWrapperRectRight) {
-    newClassName.push(TABLE_SHADOW_CLASS_NAME.RIGHT);
-  }
-  changeClassName(tableWrapperNode, newClassName);
-}
-var useTableShadow = (function (tableRef, tableWrapperRef) {
-  React.useEffect(function () {
-    var _tableRef$current;
-    var ticking = false;
-    function onMousewheel() {
-      if (ticking) {
-        return;
-      }
-      window.requestAnimationFrame(function () {
-        calculateNewClassNames(tableRef.current, tableWrapperRef.current);
-        ticking = false;
-      });
-      ticking = true;
-    }
-    calculateNewClassNames(tableRef.current, tableWrapperRef.current);
-    tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.addEventListener('mousewheel', onMousewheel);
-    window.addEventListener('resize', onMousewheel);
-    return function () {
-      var _tableRef$current2;
-      tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : _tableRef$current2.removeEventListener('mousewheel', onMousewheel);
-      window.removeEventListener('resize', onMousewheel);
-    };
-  }, [tableRef.current, tableWrapperRef.current]);
-});
-
-var _excluded = ["getTableProps", "headerGroups", "footerGroups", "setHiddenColumns", "rows", "prepareRow", "visibleColumns"],
-  _excluded2 = ["key"],
-  _excluded3 = ["key"],
-  _excluded4 = ["key"],
-  _excluded5 = ["key"],
-  _excluded6 = ["key"],
-  _excluded7 = ["key"],
-  _excluded8 = ["key"],
-  _excluded9 = ["key"],
-  _excluded0 = ["key"],
-  _excluded1 = ["key"];
-var TableRoot$1 = TableRoot;
-var TableWrapper$1 = TableWrapper;
-var TableContent$1 = TableContent;
-var HeadCell$1 = HeadCell;
-var TableLoading$1 = TableLoading;
-var TableLoadingInner$1 = TableLoadingInner;
-var TD$1 = TD;
-var TableCore$1 = TableCore;
-var THead$1 = THead;
-var TR$1 = TR;
-var TH$1 = TH;
-var TBody$1 = TBody;
-var TRGroup$1 = TRGroup;
-var TFoot$1 = TFoot;
-var EmptyStateCell$1 = EmptyStateCell;
-var TResizer$1 = TResizer;
-var isEnableRowSelectDefault = function isEnableRowSelectDefault() {
-  return true;
-};
-var selectColumnPropsDefault = {};
-var getRowPrePropsDefault = function getRowPrePropsDefault() {
-  return {};
-};
-var defaultProps = {
-  hasDefaultPagination: false,
-  isLoading: false,
-  footerPlacement: [],
-  loadingMessage: 'loading...',
-  labelPerPage: 'Show rows',
-  parentElementId: 'parent-element',
-  tableContentId: '',
-  showLoadingState: false,
-  initialState: {},
-  LoadingCellComponent: EmptyStateCell$1,
-  getRowPreProps: getRowPrePropsDefault,
-  isEnableRowSelect: isEnableRowSelectDefault,
-  selectColumnProps: selectColumnPropsDefault,
-  noDataMessage: ''
-};
-var disableSortRemove = true;
-var disableMultiSort = true;
-var disabledMultiRemove = true;
-var DEFAULT_PAGE_INDEX = 0;
-var DEFAULT_PAGE_SIZE = 10;
-function isFunction(reference) {
-  return typeof reference === 'function';
-}
-function renderResizer(column) {
-  if (column.isResizable) {
-    return React__default.createElement(TResizer$1, Object.assign({}, column.getResizerProps(), {
-      onClick: function onClick(e) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    }));
-  }
-  return null;
-}
-function getHeadContent(column) {
-  if (column.isSorted && column.isSortedDesc) {
-    return React__default.createElement(HeadCell$1, null, column.render('Header'), React__default.createElement(icon.ArrowUp, {
-      size: icon.Size.Small,
-      color: icon.Color.GrayDark
-    }));
-  }
-  if (column.isSorted && !column.isSortedDesc) {
-    return React__default.createElement(HeadCell$1, null, column.render('Header'), React__default.createElement(icon.ArrowDown, {
-      size: icon.Size.Small,
-      color: icon.Color.GrayDark
-    }));
-  }
-  return column.render('Header');
-}
-var Table = function Table(_ref) {
-  var _controlledPagination;
-  var columns = _ref.columns,
-    data = _ref.data,
-    totalItems = _ref.totalItems,
-    fetchData = _ref.fetchData,
-    controlledPagination = _ref.controlledPagination,
-    _ref$initialState = _ref.initialState,
-    initialState = _ref$initialState === void 0 ? defaultProps.initialState : _ref$initialState,
-    _ref$isLoading = _ref.isLoading,
-    isLoading = _ref$isLoading === void 0 ? defaultProps.isLoading : _ref$isLoading,
-    _ref$loadingMessage = _ref.loadingMessage,
-    loadingMessage = _ref$loadingMessage === void 0 ? defaultProps.loadingMessage : _ref$loadingMessage,
-    _ref$labelPerPage = _ref.labelPerPage,
-    labelPerPage = _ref$labelPerPage === void 0 ? defaultProps.labelPerPage : _ref$labelPerPage,
-    _ref$footerPlacement = _ref.footerPlacement,
-    footerPlacement = _ref$footerPlacement === void 0 ? defaultProps.footerPlacement : _ref$footerPlacement,
-    onSortedChange = _ref.onSortedChange,
-    _ref$hasDefaultPagina = _ref.hasDefaultPagination,
-    hasDefaultPagination = _ref$hasDefaultPagina === void 0 ? defaultProps.hasDefaultPagination : _ref$hasDefaultPagina,
-    onSelectRowsChange = _ref.onSelectRowsChange,
-    _ref$parentElementId = _ref.parentElementId,
-    parentElementId = _ref$parentElementId === void 0 ? defaultProps.parentElementId : _ref$parentElementId,
-    _ref$tableContentId = _ref.tableContentId,
-    tableContentId = _ref$tableContentId === void 0 ? defaultProps.tableContentId : _ref$tableContentId,
-    _ref$LoadingCellCompo = _ref.LoadingCellComponent,
-    LoadingCellComponent = _ref$LoadingCellCompo === void 0 ? defaultProps.LoadingCellComponent : _ref$LoadingCellCompo,
-    PaginationComponent = _ref.PaginationComponent,
-    _ref$getRowPreProps = _ref.getRowPreProps,
-    getRowPreProps = _ref$getRowPreProps === void 0 ? defaultProps.getRowPreProps : _ref$getRowPreProps,
-    getTableProps$1 = _ref.getTableProps,
-    getHeaderGroupProps = _ref.getHeaderGroupProps,
-    getHeaderProps = _ref.getHeaderProps,
-    getRowProps = _ref.getRowProps,
-    getCellProps = _ref.getCellProps,
-    getFooterProps = _ref.getFooterProps,
-    getFooterGroupProps = _ref.getFooterGroupProps,
-    _ref$showLoadingState = _ref.showLoadingState,
-    showLoadingState = _ref$showLoadingState === void 0 ? defaultProps.showLoadingState : _ref$showLoadingState,
-    _ref$noDataMessage = _ref.noDataMessage,
-    noDataMessage = _ref$noDataMessage === void 0 ? defaultProps.noDataMessage : _ref$noDataMessage,
-    rowSubComponent = _ref.rowSubComponent,
-    _ref$isEnableRowSelec = _ref.isEnableRowSelect,
-    isEnableRowSelect = _ref$isEnableRowSelec === void 0 ? defaultProps.isEnableRowSelect : _ref$isEnableRowSelec,
-    _ref$selectColumnProp = _ref.selectColumnProps,
-    selectColumnProps = _ref$selectColumnProp === void 0 ? defaultProps.selectColumnProps : _ref$selectColumnProp;
-  var memoColumns = React.useMemo(function () {
-    return columns;
-  }, [columns]);
-  var _useLoadingState = useLoadingState(showLoadingState, isLoading, (_controlledPagination = controlledPagination === null || controlledPagination === void 0 ? void 0 : controlledPagination.pageSize) !== null && _controlledPagination !== void 0 ? _controlledPagination : DEFAULT_PAGE_SIZE, memoColumns, LoadingCellComponent),
-    loadingColumns = _useLoadingState.loadingColumns,
-    loadingData = _useLoadingState.loadingData;
-  var showLoading = showLoadingState && isLoading;
-  var hasSelectedRowsAbility = onSelectRowsChange && isFunction(onSelectRowsChange);
-  var hasManualSortBy = onSortedChange && isFunction(onSortedChange);
-  var hasControlledPagination = fetchData && controlledPagination && Object.keys(controlledPagination).length > 0;
-  var options = {
-    columns: showLoading ? loadingColumns : memoColumns,
-    data: showLoading ? loadingData : data,
-    initialState: initialState,
-    disableSortRemove: disableSortRemove,
-    disableMultiSort: disableMultiSort,
-    disabledMultiRemove: disabledMultiRemove
-  };
-  if (hasManualSortBy) {
-    options.manualSortBy = true;
-  }
-  if (hasControlledPagination) {
-    var _controlledPagination2, _controlledPagination3;
-    if (typeof (controlledPagination === null || controlledPagination === void 0 ? void 0 : controlledPagination.pageCount) === 'undefined') {
-      throw new Error('You have to pass pageCount in controlledPagination data');
-    }
-    options.initialState = _extends({}, options.initialState, {
-      pageIndex: (_controlledPagination2 = controlledPagination.pageIndex) !== null && _controlledPagination2 !== void 0 ? _controlledPagination2 : DEFAULT_PAGE_INDEX,
-      pageSize: (_controlledPagination3 = controlledPagination.pageSize) !== null && _controlledPagination3 !== void 0 ? _controlledPagination3 : DEFAULT_PAGE_SIZE
-    });
-    options.autoResetPage = true;
-    options.manualPagination = true;
-    options.pageCount = controlledPagination.pageCount;
-  }
-  var useSelect = function useSelect(hooks) {
-    if (!hasSelectedRowsAbility) {
-      return;
-    }
-    var newColumn = _extends({
-      id: 'selection',
-      disableSortBy: true,
-      Header: function Header(instance) {
-        var getToggleAllPageRowsSelectedProps = instance.getToggleAllPageRowsSelectedProps,
-          toggleAllPageRowsSelected = instance.toggleAllPageRowsSelected,
-          page = instance.page;
-        var isDisabledAllRows = page.map(function (_ref2) {
-          var original = _ref2.original;
-          return original;
-        }).filter(isEnableRowSelect).length === 0;
-        return React__default.createElement(Checkbox, {
-          elementId: "all",
-          onChange: toggleAllPageRowsSelected,
-          isChecked: getToggleAllPageRowsSelectedProps().checked,
-          isDisabled: isDisabledAllRows
-        });
-      },
-      Cell: function Cell(_ref3) {
-        var row = _ref3.row;
-        var id = row.id,
-          original = row.original,
-          toggleRowSelected = row.toggleRowSelected,
-          getToggleRowSelectedProps = row.getToggleRowSelectedProps;
-        var elementId = Number.isInteger(original.id) ? original.id : id;
-        var isEnabled = isEnableRowSelect(row.original);
-        return React__default.createElement(Checkbox, {
-          elementId: elementId,
-          onChange: toggleRowSelected,
-          isDisabled: !isEnabled,
-          isChecked: isEnabled && getToggleRowSelectedProps().checked
-        });
-      }
-    }, selectColumnProps);
-    // @ts-ignore
-    hooks.visibleColumns.push(function (tableColumns) {
-      return [newColumn].concat(tableColumns);
-    });
-  };
-  var _useTable = reactTable.useTable(options, reactTable.useFlexLayout, reactTable.useSortBy, reactTable.useExpanded, reactTable.usePagination, reactTable.useRowSelect, useSelect, reactTable.useResizeColumns),
-    _getTableProps = _useTable.getTableProps,
-    headerGroups = _useTable.headerGroups,
-    footerGroups = _useTable.footerGroups,
-    setHiddenColumns = _useTable.setHiddenColumns,
-    rows = _useTable.rows,
-    prepareRow = _useTable.prepareRow,
-    visibleColumns = _useTable.visibleColumns,
-    rest = _objectWithoutPropertiesLoose(_useTable, _excluded);
-  var selectedFlatRows = rest.selectedFlatRows,
-    setSortBy = rest.setSortBy,
-    page = rest.page,
-    canPreviousPage = rest.canPreviousPage,
-    canNextPage = rest.canNextPage,
-    pageCount = rest.pageCount,
-    gotoPage = rest.gotoPage,
-    nextPage = rest.nextPage,
-    previousPage = rest.previousPage,
-    setPageSize = rest.setPageSize,
-    _rest$state = rest.state,
-    selectedRowIds = _rest$state.selectedRowIds,
-    pageIndex = _rest$state.pageIndex,
-    pageSize = _rest$state.pageSize;
-  var tableRef = React.useRef(null);
-  var tableWrapperRef = React.useRef(null);
-  useTableShadow(tableRef, tableWrapperRef);
-  React.useEffect(function () {
-    if (!(initialState !== null && initialState !== void 0 && initialState.hiddenColumns)) {
-      return;
-    }
-    setHiddenColumns(initialState.hiddenColumns);
-  }, [initialState === null || initialState === void 0 ? void 0 : initialState.hiddenColumns]);
-  React.useEffect(function () {
-    if (hasSelectedRowsAbility) {
-      onSelectRowsChange === null || onSelectRowsChange === void 0 ? void 0 : onSelectRowsChange(selectedFlatRows === null || selectedFlatRows === void 0 ? void 0 : selectedFlatRows.map(function (row) {
-        return row.original;
-      }).filter(isEnableRowSelect));
-    }
-  }, [selectedRowIds]);
-  var pagination = null;
-  if (hasDefaultPagination && hasControlledPagination) {
-    throw new Error('You have to pass either hasDefaultPagination true boolean prop or ' + 'pass fetchData callback and controlledPagination data');
-  }
-  if (hasControlledPagination || hasDefaultPagination) {
-    var paginationData = {
-      setPageSize: setPageSize,
-      gotoPage: gotoPage,
-      canNextPage: canNextPage,
-      canPreviousPage: canPreviousPage,
-      parentElementId: parentElementId,
-      labelPerPage: labelPerPage,
-      pageIndex: pageIndex,
-      previousPageHandler: previousPage,
-      nextPageHandler: nextPage,
-      totalPages: pageCount,
-      perPage: pageSize,
-      totalItems: totalItems !== null && totalItems !== void 0 ? totalItems : data.length
-    };
-    if (hasControlledPagination && controlledPagination) {
-      paginationData.canNextPage = controlledPagination.pageIndex + 1 !== paginationData.totalPages;
-      paginationData.canPreviousPage = controlledPagination.pageIndex !== 0;
-      paginationData.pageIndex = controlledPagination.pageIndex;
-      paginationData.perPage = controlledPagination.pageSize;
-      paginationData.setPageSize = function (newPageSize) {
-        fetchData === null || fetchData === void 0 ? void 0 : fetchData({
-          pageIndex: paginationData.pageIndex,
-          pageSize: newPageSize
-        });
-      };
-      paginationData.gotoPage = function (newPageIndex) {
-        fetchData === null || fetchData === void 0 ? void 0 : fetchData({
-          pageIndex: newPageIndex,
-          pageSize: paginationData.perPage
-        });
-      };
-      paginationData.nextPageHandler = function () {
-        var newPageIndex = paginationData.pageIndex + 1;
-        paginationData.gotoPage(newPageIndex);
-      };
-      paginationData.previousPageHandler = function () {
-        var newPageIndex = paginationData.pageIndex - 1;
-        paginationData.gotoPage(newPageIndex);
-      };
-      if (controlledPagination !== null && controlledPagination !== void 0 && controlledPagination.paginationAmount) {
-        paginationData.paginationAmount = controlledPagination.paginationAmount;
-      }
-    }
-    pagination = React__default.createElement(PaginationComponent, Object.assign({}, paginationData));
-  }
-  function extendSortByProps(column) {
-    var headerProps = column.getSortByToggleProps && column.getSortByToggleProps();
-    headerProps === null || headerProps === void 0 ? true : delete headerProps.style;
-    if (hasManualSortBy && column.canSort && headerProps) {
-      headerProps.onClick = function () {
-        onSortedChange === null || onSortedChange === void 0 ? void 0 : onSortedChange(column.id, Boolean(column.isSortedDesc));
-        setSortBy([{
-          id: column.id,
-          desc: !column.isSortedDesc
-        }]);
-      };
-    }
-    return headerProps;
-  }
-  var tBodyTr = hasControlledPagination || hasDefaultPagination ? page : rows;
-  return React__default.createElement(TableRoot$1, {
-    className: "table-root"
-  }, React__default.createElement(TableLoading$1, {
-    isLoading: !showLoadingState && isLoading,
-    className: "table-loading"
-  }, React__default.createElement(TableLoadingInner$1, null, loadingMessage)), React__default.createElement(TableWrapper$1, {
-    ref: tableWrapperRef,
-    className: "table-wrapper"
-  }, React__default.createElement(TableContent$1, {
-    id: tableContentId,
-    className: "table-content"
-  }, React__default.createElement(TableCore$1, Object.assign({}, _getTableProps(getTableProps(getTableProps$1)), {
-    ref: tableRef
-  }), React__default.createElement(THead$1, {
-    className: "table-head",
-    "data-role": "table-head"
-  }, headerGroups.map(function (headerGroup) {
-    var _headerGroup$getHeade = headerGroup.getHeaderGroupProps(getTableElementProps(getHeaderGroupProps)),
-      headerGroupKey = _headerGroup$getHeade.key,
-      headerGroupProps = _objectWithoutPropertiesLoose(_headerGroup$getHeade, _excluded2);
-    return React__default.createElement(TR$1, Object.assign({
-      key: headerGroupKey
-    }, headerGroupProps), headerGroup.headers.map(function (column) {
-      var headerProps = extendSortByProps(column);
-      var _column$getHeaderProp = column.getHeaderProps(getTableElementInternalProps(headerProps, getHeaderProps, mainCellGetter)),
-        columnKey = _column$getHeaderProp.key,
-        thProps = _objectWithoutPropertiesLoose(_column$getHeaderProp, _excluded3);
-      return React__default.createElement(TH$1, Object.assign({
-        key: columnKey
-      }, thProps), getHeadContent(column), renderResizer(column));
-    }));
-  })), footerPlacement.includes(FOOTER_PLACEMENT.TOP) && React__default.createElement(TFoot$1, {
-    className: "table-footer-top",
-    "data-role": "table-footer-top"
-  }, footerGroups.map(function (group) {
-    var _group$getFooterGroup = group.getFooterGroupProps(getTableElementProps(getFooterGroupProps)),
-      footerTopGroupKey = _group$getFooterGroup.key,
-      footerTopGroupProps = _objectWithoutPropertiesLoose(_group$getFooterGroup, _excluded4);
-    return React__default.createElement(TR$1, Object.assign({
-      key: footerTopGroupKey
-    }, footerTopGroupProps), group.headers.map(function (column) {
-      var _column$getFooterProp = column.getFooterProps(getTableElementProps(getFooterProps, mainCellGetter)),
-        footerTopColumnKey = _column$getFooterProp.key,
-        footerTopTdProps = _objectWithoutPropertiesLoose(_column$getFooterProp, _excluded5);
-      return React__default.createElement(TD$1, Object.assign({
-        key: footerTopColumnKey
-      }, footerTopTdProps), column.render('Footer'));
-    }));
-  })), React__default.createElement(TBody$1, {
-    className: "table-body",
-    "data-role": "table-body"
-  }, tBodyTr.map(function (row) {
-    prepareRow(row);
-    var _getRowPreProps = getRowPreProps(row),
-      isDelimiterTd = _getRowPreProps.isDelimiterTd;
-    if (isDelimiterTd) {
-      var cell = row.cells[0].render('Cell');
-      var _row$getRowProps = row.getRowProps(getTableRowProps(getRowProps)),
-        delimiterRowKey = _row$getRowProps.key,
-        delimiterRowProps = _objectWithoutPropertiesLoose(_row$getRowProps, _excluded6);
-      var _row$cells$0$getCellP = row.cells[0].getCellProps(getTableCellProps(getCellProps, cellGetter)),
-        delimiterCellKey = _row$cells$0$getCellP.key,
-        delimiterCellProps = _objectWithoutPropertiesLoose(_row$cells$0$getCellP, _excluded7);
-      return React__default.createElement(React__default.Fragment, {
-        key: "group_" + row.index
-      }, React__default.createElement(TRGroup$1, null, React__default.createElement(TR$1, Object.assign({
-        key: delimiterRowKey
-      }, delimiterRowProps), React__default.createElement(TD$1, Object.assign({
-        key: delimiterCellKey,
-        colSpan: visibleColumns.length
-      }, delimiterCellProps), React__default.createElement("strong", null, cell)))), (row === null || row === void 0 ? void 0 : row.isExpanded) && rowSubComponent && rowSubComponent(row));
-    }
-    var _row$getRowProps2 = row.getRowProps(getTableRowProps(getRowProps)),
-      rowKey = _row$getRowProps2.key,
-      rowProps = _objectWithoutPropertiesLoose(_row$getRowProps2, _excluded8);
-    return React__default.createElement(React__default.Fragment, {
-      key: "group_" + row.index
-    }, React__default.createElement(TRGroup$1, null, React__default.createElement(TR$1, Object.assign({
-      key: rowKey
-    }, rowProps), row.cells.map(function (cell) {
-      var _cell$getCellProps = cell.getCellProps(getTableCellProps(getCellProps, cellGetter)),
-        cellKey = _cell$getCellProps.key,
-        cellProps = _objectWithoutPropertiesLoose(_cell$getCellProps, _excluded9);
-      return React__default.createElement(TD$1, Object.assign({
-        key: cellKey
-      }, cellProps), cell.render('Cell'));
-    }))), (row === null || row === void 0 ? void 0 : row.isExpanded) && rowSubComponent && rowSubComponent(row));
-  })), footerPlacement.includes(FOOTER_PLACEMENT.BOTTOM) && React__default.createElement(TFoot$1, {
-    className: "table-footer-bottom",
-    "data-role": "table-footer-bottom"
-  }, footerGroups.map(function (group) {
-    var _group$getFooterGroup2 = group.getFooterGroupProps(getTableElementProps(getFooterGroupProps)),
-      footerBottomGroupKey = _group$getFooterGroup2.key,
-      footerBottomGroupProps = _objectWithoutPropertiesLoose(_group$getFooterGroup2, _excluded0);
-    return React__default.createElement(TR$1, Object.assign({
-      key: footerBottomGroupKey
-    }, footerBottomGroupProps), group.headers.map(function (column) {
-      var _column$getFooterProp2 = column.getFooterProps(getTableElementProps(getFooterProps, mainCellGetter)),
-        footerBottomColumnKey = _column$getFooterProp2.key,
-        footerBottomTdProps = _objectWithoutPropertiesLoose(_column$getFooterProp2, _excluded1);
-      return React__default.createElement(TD$1, Object.assign({
-        key: footerBottomColumnKey
-      }, footerBottomTdProps), column.render('Footer'));
-    }));
-  }))))), !isLoading && !data.length && noDataMessage, pagination);
-};
-
-exports.Table = Table;
-exports.defaultProps = defaultProps;
-//# sourceMappingURL=table.cjs.development.js.map