@propellerads/table 5.0.4 → 5.1.1

package/dist/index.d.ts

@@ -1,18 +1,19 @@
 import React, { FunctionComponent } from 'react';
-import { TableProps, DefaultObject } from './types';
+import { TableState } from 'react-table';
+import { DefaultObject, FOOTER_PLACEMENT, TableProps } from './types';
 export declare const defaultProps: {
     hasDefaultPagination: boolean;
     isLoading: boolean;
-    footerPlacement: never[];
+    footerPlacement: FOOTER_PLACEMENT[];
     loadingMessage: string;
     labelPerPage: string;
     parentElementId: string;
     tableContentId: string;
     showLoadingState: boolean;
-    initialState: {};
+    initialState: Partial<TableState<Record<string, unknown>>>;
     LoadingCellComponent: React.FunctionComponent<Record<string, unknown>>;
     getRowPreProps: () => DefaultObject;
-    isEnableRowSelect: () => boolean;
+    isEnableRowSelect: (_original?: Record<string, unknown> | undefined) => boolean;
     selectColumnProps: {};
     noDataMessage: string;
 };

package/dist/propsGetter.d.ts

@@ -1,4 +1,4 @@
-import { ElementGetter, ElementCellPropGetter, ElementRowPropGetter, ElementHeaderFooterPropGetter, GetTableElementPropsGetter, GetTableContainerPropsGetter, GetTableElementInternalPropsGetter } from './types';
+import { ElementCellPropGetter, ElementGetter, ElementHeaderFooterPropGetter, ElementRowPropGetter, GetTableContainerPropsGetter, GetTableElementInternalPropsGetter, GetTableElementPropsGetter } from './types';
 export declare const defaultGetter: ElementGetter;
 export declare const cellGetter: ElementGetter;
 export declare const mainCellGetter: ElementGetter;

package/dist/table.cjs.development.js

@@ -4,11 +4,11 @@ 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 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');
@@ -35,98 +35,6 @@ function _taggedTemplateLiteralLoose(e, t) {
   return t || (t = e.slice(0)), e.raw = t, e;
 }
 
-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
-  };
-};
-
-// 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;
 };
@@ -134,7 +42,6 @@ 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
   });
@@ -142,7 +49,6 @@ var cellGetter = function cellGetter(props, _ref) {
 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
   });
@@ -229,7 +135,109 @@ var TBody = /*#__PURE__*/styled__default.div(_templateObject15 || (_templateObje
 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 _excluded = ["getTableProps", "headerGroups", "footerGroups", "setHiddenColumns", "rows", "prepareRow", "visibleColumns"];
+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;
@@ -303,38 +311,52 @@ function getHeadContent(column) {
   }
   return column.render('Header');
 }
-var Table = function Table(props) {
+var Table = function Table(_ref) {
   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,
-    rowSubComponent = props.rowSubComponent,
-    isEnableRowSelect = props.isEnableRowSelect,
-    selectColumnProps = props.selectColumnProps;
+  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]);
@@ -380,8 +402,8 @@ var Table = function Table(props) {
         var getToggleAllPageRowsSelectedProps = instance.getToggleAllPageRowsSelectedProps,
           toggleAllPageRowsSelected = instance.toggleAllPageRowsSelected,
           page = instance.page;
-        var isDisabledAllRows = page.map(function (_ref) {
-          var original = _ref.original;
+        var isDisabledAllRows = page.map(function (_ref2) {
+          var original = _ref2.original;
           return original;
         }).filter(isEnableRowSelect).length === 0;
         return React__default.createElement(Checkbox, {
@@ -391,8 +413,8 @@ var Table = function Table(props) {
           isDisabled: isDisabledAllRows
         });
       },
-      Cell: function Cell(_ref2) {
-        var row = _ref2.row;
+      Cell: function Cell(_ref3) {
+        var row = _ref3.row;
         var id = row.id,
           original = row.original,
           toggleRowSelected = row.toggleRowSelected,
@@ -533,16 +555,36 @@ var Table = function Table(props) {
     className: "table-head",
     "data-role": "table-head"
   }, headerGroups.map(function (headerGroup) {
-    return React__default.createElement(TR$1, Object.assign({}, headerGroup.getHeaderGroupProps(getTableElementProps(getHeaderGroupProps))), headerGroup.headers.map(function (column) {
+    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);
-      return React__default.createElement(TH$1, Object.assign({}, column.getHeaderProps(getTableElementInternalProps(headerProps, getHeaderProps, mainCellGetter))), getHeadContent(column), renderResizer(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) {
-    return React__default.createElement(TR$1, Object.assign({}, group.getFooterGroupProps(getTableElementProps(getFooterGroupProps))), group.headers.map(function (column) {
-      return React__default.createElement(TD$1, Object.assign({}, column.getFooterProps(getTableElementProps(getFooterProps, mainCellGetter))), column.render('Footer'));
+    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",
@@ -553,27 +595,55 @@ var Table = function Table(props) {
       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({}, row.getRowProps(getTableRowProps(getRowProps))), React__default.createElement(TD$1, Object.assign({
+      }, 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
-      }, row.cells[0].getCellProps(getTableCellProps(getCellProps, cellGetter))), React__default.createElement("strong", null, cell)))), (row === null || row === void 0 ? void 0 : row.isExpanded) && rowSubComponent && rowSubComponent(row));
+      }, 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({}, row.getRowProps(getTableRowProps(getRowProps))), row.cells.map(function (cell) {
-      return React__default.createElement(TD$1, Object.assign({}, cell.getCellProps(getTableCellProps(getCellProps, cellGetter))), cell.render('Cell'));
+    }, 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) {
-    return React__default.createElement(TR$1, Object.assign({}, group.getFooterGroupProps(getTableElementProps(getFooterGroupProps))), group.headers.map(function (column) {
-      return React__default.createElement(TD$1, Object.assign({}, column.getFooterProps(getTableElementProps(getFooterProps, mainCellGetter))), column.render('Footer'));
+    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);
 };
-Table.defaultProps = defaultProps;
 
 exports.Table = Table;
 exports.defaultProps = defaultProps;