@propellerads/table 2.1.0 → 4.3.0

package/dist/table.cjs.development.js

@@ -6,11 +6,31 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var React = require('react');
 var React__default = _interopDefault(React);
-var ReactTable = _interopDefault(require('react-table'));
+var reactTable = require('react-table');
+var icon = require('@propellerads/icon');
+var Checkbox = _interopDefault(require('@propellerads/input-checkbox'));
 var styled = require('styled-components');
 var styled__default = _interopDefault(styled);
 var stylevariables = require('@propellerads/stylevariables');
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -35,56 +55,17 @@ function _taggedTemplateLiteralLoose(strings, raw) {
   return strings;
 }
 
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n\n.ReactTable {\n    font-size: ", "px;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    border: 0;\n\n    .pagination-bottom {\n        padding: 24px 0;\n    }\n\n    &__header-cell_right {\n        text-align: right !important;\n        flex-direction: row !important;\n        justify-content: flex-end !important;\n\n        &:before {\n          margin-left: 0 !important;\n          margin-right: 4px !important;\n        }\n    }\n\n    .rt-thead {\n        flex: 1 0 auto;\n        display: flex;\n        flex-direction: column;\n        user-select: none;\n    }\n\n    .rt-table {\n        flex: auto 1;\n        display: flex;\n        flex-direction: column;\n        align-items: stretch;\n        width: 100%;\n        border-collapse: collapse;\n        overflow: auto;\n    }\n}\n\n.ReactTable .rt-thead.-filters input,\n.ReactTable .rt-thead.-filters select {\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    background: ", ";\n    padding: 2px 7px;\n    margin: 4px 0;\n    font-size: inherit;\n    border-radius: 3px;\n    font-weight: normal;\n    outline: none;\n}\n\n.ReactTable .rt-thead .rt-th,\n.ReactTable .rt-thead .rt-td {\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\n.ReactTable .rt-thead .rt-th {\n    display: flex;\n}\n\n.ReactTable .rt-thead .rt-th.-cursor-pointer,\n.ReactTable .rt-thead .rt-td.-cursor-pointer {\n    cursor: pointer;\n    transition: 220ms ease;\n    display: flex;\n    flex-direction: row-reverse;\n    justify-content: flex-end;\n    align-items: center;\n\n\n    &:before {\n        transition: 220ms ease;\n        content: '';\n        min-width: 12px;\n        width: 12px;\n        height: 12px;\n        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAAEEfUpiAAAABGdBTUEAALGPC/xhBQAAAlZJREFUWAntVklSwzAQtJ1ck/AYtpA78COKLEWoLHe+wx3C8hggOSehW7iNrMgb5gIVVblmNOrpGWuksYMgHv1+f0s1kkEyGg6HY00SSaNcEmO2YkMTnUoycX3dhZ28XAcD8KXlMhlHHzDF6PMql0OKxpkUMjQZNwzD3mw2e7SdB4PB23a7PQhpjEFdGBbz+TzE/B3mDnUDEIgSbEsA21zkPDXIxCdlzJuUcSh8y7wAXKtN0CQLU/VtJdeyBrcZPneGIIqi281m8wCioNFonE0mk0WWIzCmBNjpALUbp7aapw1EN3QGu6kbdbt2mlNypAi+TEFgE8lG6a2tDXD1wvPvOrjzv3EOah+k/0AQ13rpljBvjntwyBITE8VHtwVDKZLRaHSEe/BKZwaPrONZSILIx+v1+sVExgWcTqdjUwWbBKAPAtxBZ0R+pp23l85QvxuKSNgQXRKkfeJzJsHObdTmqLsSpGFHlm2HgAsiEYjS50y7l4ALNkmWM3G5gyQsVR4oM4M8J67ZGXKuIlCvMmpfxirBfNh9AvsdSHYAp/oaLaPnOyi/aUObYiu+EmfIe6q/idi4Qhu6dH8Z5SBZ9RqyjSPOPXrigTjYYCLTkqHICNkCiP9JSzh1LfuPVAYG1zs/A25wxk41Is9uMOgKP2wX7g9b0Q7En497+HdIouG21VQCAvkS4dcB6xcozRNxWQmUDaxY3gS0mJUI3uIcW2oSERa7dBrXuC0bpfvG9hr13AQE9iWitSxZFFh+pRIQuEwiZQOLs1ICcvIlUjWwuGpJJsKnDskn5F1o5Z7NGz4AAAAASUVORK5CYII=');\n        background-size: contain;\n        opacity: 0;\n        margin-left: 4px;\n    }\n}\n\n.ReactTable .rt-thead .rt-th.-sort-asc,\n.ReactTable .rt-thead .rt-td.-sort-asc {\n    padding-left: 4px;\n\n    &:before {\n        transform: rotate(180deg);\n        opacity: 1;\n    }\n}\n\n.ReactTable .rt-thead .rt-th.-sort-desc,\n.ReactTable .rt-thead .rt-td.-sort-desc {\n    padding-left: 4px;\n\n    &:before {\n        opacity: 1;\n    }\n}\n\n.ReactTable .rt-thead .rt-th:last-child,\n.ReactTable .rt-thead .rt-td:last-child {\n    border-right: 0;\n}\n\n.ReactTable .rt-thead .rt-resizable-header {\n    overflow: visible;\n    display: flex;\n    align-items: center;\n}\n\n.ReactTable .rt-thead .rt-resizable-header:last-child {\n    overflow: hidden;\n}\n\n.ReactTable .rt-thead .rt-resizable-header-content {\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.ReactTable .rt-thead .rt-header-pivot {\n    border-right-color: #f7f7f7;\n}\n\n.ReactTable .rt-thead .rt-header-pivot:after,\n.ReactTable .rt-thead .rt-header-pivot:before {\n    left: 100%;\n    top: 50%;\n    border: solid transparent;\n    content: ' ';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n\n.ReactTable .rt-thead .rt-header-pivot:after {\n    border-color: rgba(255, 255, 255, 0);\n    border-left-color: ", ";\n    border-width: 8px;\n    margin-top: -8px;\n}\n\n.ReactTable .rt-thead .rt-header-pivot:before {\n    border-color: rgba(102, 102, 102, 0);\n    border-left-color: #f7f7f7;\n    border-width: 10px;\n    margin-top: -10px;\n}\n\n.ReactTable .rt-tbody {\n    flex: 99999 1 auto;\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    border-top: 1px solid ", ";\n    margin-top: ", "px;\n}\n\n.ReactTable .rt-tbody .rt-tr-group {\n    box-shadow: inset 0 -1px 0 0 ", ";\n}\n\n.ReactTable .rt-tbody .rt-tr-group:hover {\n    background-color: ", ";\n    transition: 0.2s ease-in-out;\n}\n\n.ReactTable .rt-tbody .rt-td:last-child {\n    border-right: 0;\n}\n\n.ReactTable .rt-tbody .rt-expandable {\n    cursor: pointer;\n    text-overflow: clip;\n}\n\n.ReactTable .rt-tr-group {\n    flex: 1 0 auto;\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n}\n\n.ReactTable .rt-tr {\n    flex: 1 0 auto;\n    display: inline-flex;\n    padding: 0;\n    align-items: center;\n}\n\n.ReactTable .rt-th,\n.ReactTable .rt-td {\n    flex: 1 0 0;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    padding: 7px 4px;\n    overflow: hidden;\n    transition: 0.3s ease;\n    transition-property: width, min-width, padding, opacity;\n    line-height: 1.3rem;\n}\n\n.ReactTable .rt-th.-hidden,\n.ReactTable .rt-td.-hidden {\n    width: 0 !important;\n    min-width: 0 !important;\n    padding: 0 !important;\n    border: 0 !important;\n    opacity: 0 !important;\n}\n\n.ReactTable .rt-expander {\n    display: inline-block;\n    position: relative;\n    color: transparent;\n    margin: 0 10px;\n}\n\n.ReactTable .rt-expander:after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) rotate(-90deg);\n    border-left: 5.04px solid transparent;\n    border-right: 5.04px solid transparent;\n    border-top: 7px solid rgba(0, 0, 0, 0.8);\n    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    cursor: pointer;\n}\n\n.ReactTable .rt-expander.-open:after {\n    transform: translate(-50%, -50%) rotate(0);\n}\n\n.ReactTable .rt-resizer {\n    display: inline-block;\n    position: absolute;\n    width: 36px;\n    top: 0;\n    bottom: 0;\n    right: -18px;\n    cursor: col-resize;\n    z-index: 10;\n}\n\n.ReactTable .rt-tfoot {\n    background: ", ";\n    flex: 1 0 auto;\n    display: flex;\n    flex-direction: column;\n}\n\n.ReactTable .rt-tfoot .rt-td {\n}\n\n.ReactTable .rt-tfoot .rt-td:last-child {\n    border-right: 0;\n}\n\n.ReactTable.-striped .rt-tr.-odd {\n    background: rgba(0, 0, 0, 0.03);\n}\n\n.ReactTable.-highlight .rt-tbody .rt-tr:not(.-padRow):hover {\n    background: rgba(0, 0, 0, 0.05);\n}\n\n.ReactTable .-pagination {\n    z-index: 1;\n    display: flex;\n    justify-content: space-between;\n    align-items: stretch;\n    flex-wrap: wrap;\n    padding: 3px;\n}\n\n.ReactTable .-pagination input,\n.ReactTable .-pagination select {\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    background: ", ";\n    padding: 5px 7px;\n    font-size: inherit;\n    border-radius: 3px;\n    font-weight: normal;\n    outline: none;\n}\n\n.ReactTable .-pagination .-btn {\n    appearance: none;\n    display: block;\n    width: 100%;\n    height: 100%;\n    border: 0;\n    border-radius: 3px;\n    padding: 6px;\n    font-size: 1em;\n    color: rgba(0, 0, 0, 0.6);\n    transition: all 0.1s ease;\n    cursor: pointer;\n    outline: none;\n    background-color: white;\n    color: #0080ff;\n    box-shadow: inset 0 0 0 1px #0080ff;\n}\n\n.ReactTable .-pagination .-btn[disabled] {\n    opacity: 0;\n    cursor: default;\n}\n\n.ReactTable .-pagination .-btn:not([disabled]):hover {\n}\n\n.ReactTable .-pagination .-previous,\n.ReactTable .-pagination .-next {\n    flex: 1;\n    text-align: center;\n}\n\n.ReactTable .-pagination .-center {\n    flex: 1.5;\n    text-align: center;\n    margin-bottom: 0;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-around;\n}\n\n.ReactTable .-pagination .-pageInfo {\n    display: inline-block;\n    margin: 3px 10px;\n    white-space: nowrap;\n}\n\n.ReactTable .-pagination .-pageJump {\n    display: inline-block;\n}\n\n.ReactTable .-pagination .-pageJump input {\n    width: 70px;\n    text-align: center;\n}\n\n.ReactTable .-pagination .-pageSizeOptions {\n    margin: 3px 10px;\n}\n\n.ReactTable .rt-noData {\n    display: flex;\n    justify-content: center;\n    background: transparent;\n    transition: all 0.3s ease;\n    z-index: 1;\n    pointer-events: none;\n    color: rgba(0, 0, 0, 0.5);\n}\n\n.ReactTable .-loading {\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.ReactTable .-loading > div {\n    position: absolute;\n    display: block;\n    text-align: center;\n    width: 100%;\n    top: 50%;\n    left: 0;\n    font-size: 15px;\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}\n\n.ReactTable .-loading.-active {\n    opacity: 1;\n    z-index: 2;\n    pointer-events: all;\n}\n\n.ReactTable .-loading.-active > div {\n    transform: translateY(50%);\n}\n\n.ReactTable .rt-resizing .rt-th,\n.ReactTable .rt-resizing .rt-td {\n    transition: none !important;\n    cursor: col-resize;\n    user-select: none;\n}\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _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"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _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"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var loadingAnimation = /*#__PURE__*/styled.keyframes( /*#__PURE__*/_templateObject());
-var EmptyStateCell = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject2(), stylevariables.spacing * 4, stylevariables.gray95, stylevariables.white, stylevariables.gray95, loadingAnimation);
-var CommonStyles = /*#__PURE__*/styled.createGlobalStyle( /*#__PURE__*/_templateObject3(), stylevariables.fontNormal, stylevariables.white, stylevariables.black, stylevariables.white, stylevariables.gray80, stylevariables.spacing * 2, stylevariables.gray95, stylevariables.semiWhite, stylevariables.gray95, stylevariables.white);
-
 var useLoadingState = function useLoadingState(showLoadingState, loading, pageSize, columns, LoadingCellComponent) {
-  if (LoadingCellComponent === void 0) {
-    LoadingCellComponent = function LoadingCellComponent(props) {
-      return React__default.createElement(EmptyStateCell, Object.assign({}, props));
-    };
-  }
-
   var loadingColumns = React.useMemo(function () {
     return showLoadingState && loading ? columns.map(function (_ref, key) {
       var maxWidth = _ref.maxWidth,
           width = _ref.width,
           Header = _ref.Header;
       var column = {
-        Cell: LoadingCellComponent,
-        accessor: "empty_" + key,
-        filterable: false,
-        sortable: false
+        Cell: function Cell() {
+          return React__default.createElement(LoadingCellComponent, null);
+        },
+        accessor: "empty_" + key
       };
 
       if (maxWidth) {
@@ -92,7 +73,7 @@ var useLoadingState = function useLoadingState(showLoadingState, loading, pageSi
       }
 
       if (width) {
-        column.maxWidth = width;
+        column.width = width;
       }
 
       if (Header) {
@@ -101,17 +82,17 @@ var useLoadingState = function useLoadingState(showLoadingState, loading, pageSi
 
       return column;
     }) : [];
-  }, [LoadingCellComponent, columns, loading, showLoadingState]);
+  }, [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++) {
+      for (var i = 0; i < columns.length; i += 1) {
         dataObject["empty_" + i] = '';
       }
 
-      for (var _i = 0; _i < pageSize; _i++) {
+      for (var _i = 0; _i < pageSize; _i += 1) {
         dataArray.push(dataObject);
       }
 
@@ -126,92 +107,684 @@ var useLoadingState = function useLoadingState(showLoadingState, loading, pageSi
   };
 };
 
-var Table = function Table(_ref) {
-  var data = _ref.data,
-      _ref$columns = _ref.columns,
-      columns = _ref$columns === void 0 ? [] : _ref$columns,
-      _ref$defaultPageSize = _ref.defaultPageSize,
-      defaultPageSize = _ref$defaultPageSize === void 0 ? 20 : _ref$defaultPageSize,
-      _ref$loading = _ref.loading,
-      loading = _ref$loading === void 0 ? false : _ref$loading,
-      _ref$defaultSorted = _ref.defaultSorted,
-      defaultSorted = _ref$defaultSorted === void 0 ? [] : _ref$defaultSorted,
-      _ref$pageText = _ref.pageText,
-      pageText = _ref$pageText === void 0 ? 'page' : _ref$pageText,
-      _ref$ofText = _ref.ofText,
-      ofText = _ref$ofText === void 0 ? 'of' : _ref$ofText,
-      _ref$previousText = _ref.previousText,
-      previousText = _ref$previousText === void 0 ? 'Previous page' : _ref$previousText,
-      _ref$nextText = _ref.nextText,
-      nextText = _ref$nextText === void 0 ? 'Next page' : _ref$nextText,
-      _ref$loadingText = _ref.loadingText,
-      loadingText = _ref$loadingText === void 0 ? 'Loading...' : _ref$loadingText,
-      _ref$noDataText = _ref.noDataText,
-      noDataText = _ref$noDataText === void 0 ? 'Woops, no data.' : _ref$noDataText,
-      getTrProps = _ref.getTrProps,
-      _ref$manual = _ref.manual,
-      manual = _ref$manual === void 0 ? false : _ref$manual,
-      _ref$filterable = _ref.filterable,
-      filterable = _ref$filterable === void 0 ? true : _ref$filterable,
-      showPagination = _ref.showPagination,
-      _ref$showPageSizeOpti = _ref.showPageSizeOptions,
-      showPageSizeOptions = _ref$showPageSizeOpti === void 0 ? false : _ref$showPageSizeOpti,
-      _ref$showPageJump = _ref.showPageJump,
-      showPageJump = _ref$showPageJump === void 0 ? false : _ref$showPageJump,
-      _ref$style = _ref.style,
-      style = _ref$style === void 0 ? {} : _ref$style,
-      ExpanderComponent = _ref.ExpanderComponent,
-      SubComponent = _ref.SubComponent,
-      _ref$resizable = _ref.resizable,
-      resizable = _ref$resizable === void 0 ? false : _ref$resizable,
-      _ref$showLoadingState = _ref.showLoadingState,
-      showLoadingState = _ref$showLoadingState === void 0 ? false : _ref$showLoadingState,
-      LoadingCellComponent = _ref.LoadingCellComponent,
-      _ref$defaultFilterMet = _ref.defaultFilterMethod,
-      defaultFilterMethod = _ref$defaultFilterMet === void 0 ? function (filter, row) {
-    return String(row[filter.id]).toLowerCase().includes(filter.value.toLowerCase());
-  } : _ref$defaultFilterMet,
-      rest = _objectWithoutPropertiesLoose(_ref, ["data", "columns", "defaultPageSize", "loading", "defaultSorted", "pageText", "ofText", "previousText", "nextText", "loadingText", "noDataText", "getTrProps", "manual", "filterable", "showPagination", "showPageSizeOptions", "showPageJump", "style", "ExpanderComponent", "SubComponent", "resizable", "showLoadingState", "LoadingCellComponent", "defaultFilterMethod"]);
-
-  var _useLoadingState = useLoadingState(showLoadingState, loading, defaultPageSize, columns, LoadingCellComponent),
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+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 FOOTER_PLACEMENT;
+
+(function (FOOTER_PLACEMENT) {
+  FOOTER_PLACEMENT["TOP"] = "top";
+  FOOTER_PLACEMENT["BOTTOM"] = "bottom";
+})(FOOTER_PLACEMENT || (FOOTER_PLACEMENT = {}));
+
+var defaultGetter = function defaultGetter(props) {
+  return props;
+};
+var cellGetter = function cellGetter(props, _ref) {
+  var _cell$column;
+
+  var cell = _ref.cell;
+  return _extends({}, props, {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @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, {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @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);
+  };
+};
+
+function _templateObject18() {
+  var data = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  flex: 1 0 auto;\n  display: flex;\n  flex-direction: column;\n"]);
+
+  _templateObject18 = function _templateObject18() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject17() {
+  var data = _taggedTemplateLiteralLoose(["\n  border-top: 1px solid ", ";\n  margin-top: ", "px;\n  min-width: 100%;\n  width: max-content;\n"]);
+
+  _templateObject17 = function _templateObject17() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject16() {
+  var data = _taggedTemplateLiteralLoose(["\n  padding: 0;\n  -webkit-box-align: center;\n  align-items: center;\n"]);
+
+  _templateObject16 = function _templateObject16() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject15() {
+  var data = _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"]);
+
+  _templateObject15 = function _templateObject15() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject14() {
+  var data = _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"]);
+
+  _templateObject14 = function _templateObject14() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject13() {
+  var data = _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"]);
+
+  _templateObject13 = function _templateObject13() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject12() {
+  var data = _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"]);
+
+  _templateObject12 = function _templateObject12() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject11() {
+  var data = _taggedTemplateLiteralLoose(["\n    text-align: ", ""]);
+
+  _templateObject11 = function _templateObject11() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject10() {
+  var data = _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"]);
+
+  _templateObject10 = function _templateObject10() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject9() {
+  var data = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n"]);
+
+  _templateObject9 = function _templateObject9() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject8() {
+  var data = _taggedTemplateLiteralLoose(["\n  flex: auto 1;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch; \n  border-collapse: collapse;\n"]);
+
+  _templateObject8 = function _templateObject8() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject7() {
+  var data = _taggedTemplateLiteralLoose(["\n  display: block;\n  max-width: 100%;\n  overflow-x: scroll;\n  overflow-y: hidden;\n"]);
+
+  _templateObject7 = function _templateObject7() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject6() {
+  var data = _taggedTemplateLiteralLoose(["\n  font-size: ", "px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  border: 0;\n"]);
+
+  _templateObject6 = function _templateObject6() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject5() {
+  var data = _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"]);
+
+  _templateObject5 = function _templateObject5() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject4() {
+  var data = _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"]);
+
+  _templateObject4 = function _templateObject4() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject3() {
+  var data = _taggedTemplateLiteralLoose(["\n    opacity: 1;\n    z-index: 2;\n    pointer-events: all;\n  "]);
+
+  _templateObject3 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject2() {
+  var data = _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"]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject() {
+  var data = _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"]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var loadingAnimation = /*#__PURE__*/styled.keyframes( /*#__PURE__*/_templateObject());
+var TableLoading = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject2(), function (props) {
+  return props.isLoading && styled.css(_templateObject3());
+});
+var TableLoadingInner = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject4());
+var TableWrapper = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject5());
+var TableRoot = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject6(), stylevariables.fontNormal);
+var TableContent = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject7());
+var TableCore = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject8());
+var HeadCell = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject9());
+var TD = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject10(), function (_ref) {
+  var align = _ref.align;
+  return align && styled.css(_templateObject11(), align);
+});
+var EmptyStateCell = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject12(), stylevariables.spacing * 4, stylevariables.gray95, stylevariables.white, stylevariables.gray95, loadingAnimation);
+var TH = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject13());
+var THead = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject14(), TH, TD, stylevariables.black);
+var TRGroup = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject15(), stylevariables.gray95);
+var TR = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject16());
+var TBody = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject17(), stylevariables.gray80, stylevariables.spacing * 2);
+var TFoot = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject18(), stylevariables.gray95);
+
+var defaultProps = {
+  hasDefaultPagination: false,
+  isLoading: false,
+  footerPlacement: [],
+  loadingMessage: 'loading...',
+  labelPerPage: 'Show rows',
+  parentElementId: 'parent-element',
+  tableContentId: '',
+  showLoadingState: false,
+  LoadingCellComponent: EmptyStateCell,
+  getRowPreProps: function getRowPreProps() {
+    return {};
+  },
+  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 getHeadContent(column) {
+  if (column.isSorted && column.isSortedDesc) {
+    return React__default.createElement(HeadCell, null, column.render('Header'), React__default.createElement(icon.ArrowDownFull, {
+      size: icon.SIZE.SMALL,
+      color: icon.COLOR.GRAY_DARK
+    }));
+  }
+
+  if (column.isSorted && !column.isSortedDesc) {
+    return React__default.createElement(HeadCell, null, column.render('Header'), React__default.createElement(icon.ArrowUp, {
+      size: icon.SIZE.SMALL,
+      color: icon.COLOR.GRAY_DARK
+    }));
+  }
+
+  return column.render('Header');
+}
+
+var Table = function Table(props) {
+  var _controlledPagination;
+
+  var columns = props.columns,
+      data = props.data,
+      totalItems = props.totalItems,
+      fetchData = props.fetchData,
+      controlledPagination = props.controlledPagination,
+      initialState = props.initialState,
+      isLoading = props.isLoading,
+      loadingMessage = props.loadingMessage,
+      labelPerPage = props.labelPerPage,
+      footerPlacement = props.footerPlacement,
+      onSortedChange = props.onSortedChange,
+      hasDefaultPagination = props.hasDefaultPagination,
+      onSelectRowsChange = props.onSelectRowsChange,
+      parentElementId = props.parentElementId,
+      tableContentId = props.tableContentId,
+      LoadingCellComponent = props.LoadingCellComponent,
+      PaginationComponent = props.PaginationComponent,
+      getRowPreProps = props.getRowPreProps,
+      getTableProps$1 = props.getTableProps,
+      getHeaderGroupProps = props.getHeaderGroupProps,
+      getHeaderProps = props.getHeaderProps,
+      getRowProps = props.getRowProps,
+      getCellProps = props.getCellProps,
+      getFooterProps = props.getFooterProps,
+      getFooterGroupProps = props.getFooterGroupProps,
+      showLoadingState = props.showLoadingState,
+      noDataMessage = props.noDataMessage;
+  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 && loading;
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(ReactTable, Object.assign({
+  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,
-    columns: showLoading ? loadingColumns : columns,
-    defaultPageSize: defaultPageSize,
-    filterable: filterable,
-    defaultSorted: defaultSorted,
-    showPagination: !showLoading && showPagination,
-    showPageSizeOptions: showPageSizeOptions,
-    showPageJump: showPageJump,
-    loading: !showLoadingState && loading,
-    resizable: resizable,
-    minRows: 0,
-    pageText: pageText,
-    ofText: ofText,
-    previousText: previousText,
-    nextText: nextText,
-    loadingText: loadingText,
-    noDataText: noDataText,
-    defaultFilterMethod: defaultFilterMethod,
-    getTrProps: getTrProps,
-    manual: manual,
-    style: style,
-    ExpanderComponent: ExpanderComponent,
-    SubComponent: SubComponent
-  }, rest)), React__default.createElement(CommonStyles, null));
-};
+    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;
+  }
 
-Table.defaultProps = {
-  getTrProps: undefined,
-  onSortedChange: undefined,
-  expanderComponent: undefined,
-  subComponent: undefined,
-  onPageChange: undefined
+  var useSelect = function useSelect(hooks) {
+    if (!hasSelectedRowsAbility) {
+      return;
+    }
+
+    var newColumn = {
+      id: 'selection',
+      disableSortBy: true,
+      Header: function Header(instance) {
+        var getToggleAllRowsSelectedProps = instance.getToggleAllRowsSelectedProps,
+            toggleAllRowsSelected = instance.toggleAllRowsSelected;
+        return React__default.createElement(Checkbox, {
+          elementId: "all",
+          onChange: toggleAllRowsSelected,
+          isChecked: getToggleAllRowsSelectedProps().checked
+        });
+      },
+      Cell: function Cell(_ref) {
+        var row = _ref.row;
+        var id = row.id,
+            original = row.original,
+            toggleRowSelected = row.toggleRowSelected,
+            getToggleRowSelectedProps = row.getToggleRowSelectedProps;
+        var elementId = Number.isInteger(original.id) ? original.id : id;
+        return React__default.createElement(Checkbox, {
+          elementId: elementId,
+          onChange: toggleRowSelected,
+          isChecked: getToggleRowSelectedProps().checked
+        });
+      }
+    };
+    hooks.visibleColumns.push(function (tableColumns) {
+      return [newColumn].concat(tableColumns);
+    });
+  };
+
+  var _useTable = reactTable.useTable(options, reactTable.useFlexLayout, reactTable.useSortBy, reactTable.usePagination, reactTable.useRowSelect, useSelect),
+      _getTableProps = _useTable.getTableProps,
+      headerGroups = _useTable.headerGroups,
+      footerGroups = _useTable.footerGroups,
+      setHiddenColumns = _useTable.setHiddenColumns,
+      rows = _useTable.rows,
+      prepareRow = _useTable.prepareRow,
+      visibleColumns = _useTable.visibleColumns,
+      rest = _objectWithoutPropertiesLoose(_useTable, ["getTableProps", "headerGroups", "footerGroups", "setHiddenColumns", "rows", "prepareRow", "visibleColumns"]);
+
+  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 ? 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;
+      }));
+    }
+  }, [selectedRowIds]);
+  var pagination = null;
+
+  if (hasDefaultPagination && hasControlledPagination) {
+    // eslint-disable-next-line max-len
+    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 ? 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, null, React__default.createElement(TableLoading, {
+    isLoading: !showLoadingState && isLoading
+  }, React__default.createElement(TableLoadingInner, null, loadingMessage)), React__default.createElement(TableWrapper, {
+    ref: tableWrapperRef
+  }, React__default.createElement(TableContent, {
+    id: tableContentId
+  }, React__default.createElement(TableCore, Object.assign({}, _getTableProps(getTableProps(getTableProps$1)), {
+    ref: tableRef
+  }), React__default.createElement(THead, null, headerGroups.map(function (headerGroup) {
+    return React__default.createElement(TR, Object.assign({}, headerGroup.getHeaderGroupProps(getTableElementProps(getHeaderGroupProps))), headerGroup.headers.map(function (column) {
+      var headerProps = extendSortByProps(column);
+      return React__default.createElement(TH, Object.assign({}, column.getHeaderProps(getTableElementInternalProps(headerProps, getHeaderProps, mainCellGetter))), getHeadContent(column));
+    }));
+  })), footerPlacement.includes(FOOTER_PLACEMENT.TOP) && React__default.createElement(TFoot, null, footerGroups.map(function (group) {
+    return React__default.createElement(TR, Object.assign({}, group.getFooterGroupProps(getTableElementProps(getFooterGroupProps))), group.headers.map(function (column) {
+      return React__default.createElement(TD, Object.assign({}, column.getFooterProps(getTableElementProps(getFooterProps, mainCellGetter))), column.render('Footer'));
+    }));
+  })), React__default.createElement(TBody, null, tBodyTr.map(function (row) {
+    prepareRow(row);
+
+    var _getRowPreProps = getRowPreProps(row),
+        isDelimiterTd = _getRowPreProps.isDelimiterTd;
+
+    if (isDelimiterTd) {
+      return React__default.createElement(TRGroup, {
+        key: "group_" + row.index
+      }, React__default.createElement(TR, Object.assign({}, row.getRowProps(getTableRowProps(getRowProps))), React__default.createElement(TD, Object.assign({
+        colSpan: visibleColumns.length
+      }, row.cells[0].getCellProps(getTableCellProps(getCellProps, cellGetter))), React__default.createElement("strong", null, row.cells[0].render('Cell')))));
+    }
+
+    return React__default.createElement(TRGroup, {
+      key: "group_" + row.index
+    }, React__default.createElement(TR, Object.assign({}, row.getRowProps(getTableRowProps(getRowProps))), row.cells.map(function (cell) {
+      return React__default.createElement(TD, Object.assign({}, cell.getCellProps(getTableCellProps(getCellProps, cellGetter))), cell.render('Cell'));
+    })));
+  })), footerPlacement.includes(FOOTER_PLACEMENT.BOTTOM) && React__default.createElement(TFoot, null, footerGroups.map(function (group) {
+    return React__default.createElement(TR, Object.assign({}, group.getFooterGroupProps(getTableElementProps(getFooterGroupProps))), group.headers.map(function (column) {
+      return React__default.createElement(TD, Object.assign({}, column.getFooterProps(getTableElementProps(getFooterProps, mainCellGetter))), column.render('Footer'));
+    }));
+  }))))), !isLoading && !data.length && noDataMessage, pagination);
 };
 
+Table.defaultProps = defaultProps;
+
 exports.Table = Table;
+exports.defaultProps = defaultProps;
 //# sourceMappingURL=table.cjs.development.js.map