mui-universal-table 2.1.0 → 2.1.1

package/dist/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var React$1 = require('react');
 var PropTypes = require('prop-types');
 var Paper = require('@mui/material/Paper');
 var material = require('@mui/material');
@@ -300,14 +300,14 @@ function stableSort(array, comparator, headers, orderBy) {
 }
 
 function useSearchableRows(data, headers, async) {
-  var _React$useState = React.useState(""),
+  var _React$useState = React$1.useState(""),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     searchTerm = _React$useState2[0],
     setSearchTerm = _React$useState2[1];
-  var filterOptions = React.useMemo(function () {
+  var filterOptions = React$1.useMemo(function () {
     return getSearchableColumnIds(headers);
   }, [headers]);
-  var rows = React.useMemo(function () {
+  var rows = React$1.useMemo(function () {
     return async ? data : filterRows(data, searchTerm, filterOptions);
   }, [async, data, filterOptions, searchTerm]);
   return {
@@ -321,14 +321,14 @@ function useSelectableRows(_ref) {
   var rows = _ref.rows,
     selectRows = _ref.selectRows,
     selectID = _ref.selectID;
-  var _React$useState = React.useState([]),
+  var _React$useState = React$1.useState([]),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     selected = _React$useState2[0],
     setSelected = _React$useState2[1];
-  var clearSelection = React.useCallback(function () {
+  var clearSelection = React$1.useCallback(function () {
     setSelected([]);
   }, []);
-  var handleSelectAllClick = React.useCallback(function (event) {
+  var handleSelectAllClick = React$1.useCallback(function (event) {
     if (!event.target.checked) {
       setSelected([]);
       return;
@@ -338,7 +338,7 @@ function useSelectableRows(_ref) {
     });
     setSelected(newSelected);
   }, [rows, selectID]);
-  var handleClick = React.useCallback(function (event, id) {
+  var handleClick = React$1.useCallback(function (event, id) {
     if (!selectRows) {
       return;
     }
@@ -437,7 +437,7 @@ ReloadBtn.propTypes = {
 function FancySearch(_ref) {
   var value = _ref.value,
     onSubmit = _ref.onSubmit;
-  var _React$useState = React.useState(Boolean(value)),
+  var _React$useState = React$1.useState(Boolean(value)),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     hover = _React$useState2[0],
     setHover = _React$useState2[1];
@@ -453,10 +453,10 @@ function FancySearch(_ref) {
   // Sync internal state when the parent clears/changes the search term.
   // A ref tracks whether this sync came from the user typing or from a parent
   // update, so the debounce only fires for genuine user input.
-  var isUserType = React.useRef(false);
-  return /*#__PURE__*/React.createElement("form", {
+  var isUserTypingRef = React$1.useRef(false);
+  return /*#__PURE__*/React$1.createElement("form", {
     onSubmit: handleSubmit
-  }, /*#__PURE__*/React.createElement(material.Paper, {
+  }, /*#__PURE__*/React$1.createElement(material.Paper, {
     elevation: 0,
     sx: {
       borderRadius: expanded ? "24px" : "50px",
@@ -477,11 +477,11 @@ function FancySearch(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     }
-  }, /*#__PURE__*/React.createElement(material.InputBase, {
+  }, /*#__PURE__*/React$1.createElement(material.InputBase, {
     placeholder: "Search",
     value: value,
     onChange: function onChange(e) {
-      isUserType.current = true;
+      isUserTypingRef.current = true;
       onSubmit(e.target.value);
     },
     sx: _objectSpread2({
@@ -492,30 +492,30 @@ function FancySearch(_ref) {
       margin: 0
     }),
     onBlur: handleEndHover
-  }), /*#__PURE__*/React.createElement(material.Collapse, {
+  }), /*#__PURE__*/React$1.createElement(material.Collapse, {
     "in": Boolean(value),
     orientation: "horizontal",
     unmountOnExit: true
-  }, /*#__PURE__*/React.createElement(material.Stack, {
+  }, /*#__PURE__*/React$1.createElement(material.Stack, {
     direction: "row",
     spacing: 0,
     sx: {
       mr: 3,
       alignItems: "center"
     }
-  }, /*#__PURE__*/React.createElement(material.IconButton, {
+  }, /*#__PURE__*/React$1.createElement(material.IconButton, {
     onClick: function onClick() {
-      isUserType.current = false;
+      isUserTypingRef.current = false;
       // Immediately clear instead of waiting for the debounce
       onSubmit("");
     }
-  }, /*#__PURE__*/React.createElement(iconsMaterial.Clear, null)), /*#__PURE__*/React.createElement(material.Divider, {
+  }, /*#__PURE__*/React$1.createElement(iconsMaterial.Clear, null)), /*#__PURE__*/React$1.createElement(material.Divider, {
     orientation: "vertical",
     flexItem: true
-  }))), /*#__PURE__*/React.createElement(material.IconButton, {
+  }))), /*#__PURE__*/React$1.createElement(material.IconButton, {
     onClick: handleSubmit,
     type: "submit"
-  }, /*#__PURE__*/React.createElement(iconsMaterial.Search, null))));
+  }, /*#__PURE__*/React$1.createElement(iconsMaterial.Search, null))));
 }
 FancySearch.propTypes = {
   value: PropTypes.string,
@@ -527,7 +527,7 @@ function SearchArea(props) {
     setFinalVal = props.setFinalVal,
     searchName = props.searchName,
     persistSearch = props.persistSearch;
-  var searchVal = React.useMemo(function () {
+  var searchVal = React$1.useMemo(function () {
     if (current !== undefined && current !== null) return current;
     if (persistSearch && searchName) {
       var _sessionStorage$getIt;
@@ -535,9 +535,9 @@ function SearchArea(props) {
     }
     return "";
   }, [current, persistSearch, searchName]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     key: "SearchArea"
-  }, /*#__PURE__*/React.createElement(FancySearch, {
+  }, /*#__PURE__*/React$1.createElement(FancySearch, {
     value: searchVal,
     onSubmit: setFinalVal
   }));
@@ -627,7 +627,7 @@ function useEnhancedTableState(_ref2) {
     order = _ref2.order,
     orderBy = _ref2.orderBy,
     asyncPages = _ref2.asyncPages;
-  var _React$useState = React.useState(function () {
+  var _React$useState = React$1.useState(function () {
       return {
         page: 0,
         rowsPerPage: getInitialRowsPerPage({
@@ -641,8 +641,10 @@ function useEnhancedTableState(_ref2) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     pagination = _React$useState2[0],
     setPagination = _React$useState2[1];
-  React.useEffect(function () {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
+  React$1.useEffect(function () {
+    // Resetting derived pagination state here intentionally preserves the
+    // current rows-per-page choice while jumping back to the first page.
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     setPagination(function (previous) {
       if (previous.resetFlag === resetFlag) {
         return previous;
@@ -655,19 +657,19 @@ function useEnhancedTableState(_ref2) {
   }, [resetFlag]);
   var page = pagination.page;
   var rowsPerPage = subTable ? rows.length : pagination.rowsPerPage;
-  var handleRequestSort = React.useCallback(function (property) {
+  var handleRequestSort = React$1.useCallback(function (property) {
     var isAsc = orderBy === property && order === "asc";
     setOrder(isAsc ? "desc" : "asc");
     setOrderBy(property);
   }, [order, orderBy, setOrder, setOrderBy]);
-  var handleChangePage = React.useCallback(function (event, newPage) {
+  var handleChangePage = React$1.useCallback(function (event, newPage) {
     setPagination(function (previous) {
       return _objectSpread2(_objectSpread2({}, previous), {}, {
         page: newPage
       });
     });
   }, []);
-  var handleChangeRowsPerPage = React.useCallback(function (event) {
+  var handleChangeRowsPerPage = React$1.useCallback(function (event) {
     setPagination(function (previous) {
       return _objectSpread2(_objectSpread2({}, previous), {}, {
         page: 0,
@@ -753,7 +755,7 @@ EnhancedTableHead.propTypes = {
  *   UniversalTable → EnhancedTable → DataRow → SubTableRow → UniversalTable
  * React.lazy resolves the import at render time, so the module graph stays acyclic.
  */
-var UniversalTable$2 = /*#__PURE__*/React.lazy(function () {
+var UniversalTable$2 = /*#__PURE__*/React$1.lazy(function () {
   return Promise.resolve().then(function () { return UniversalTable$1; });
 });
 
@@ -767,16 +769,16 @@ function SubRowToggleCell(_ref) {
     onToggle = _ref.onToggle,
     rowValues = _ref.rowValues,
     hideBadge = _ref.hideBadge;
-  return /*#__PURE__*/React.createElement(material.TableCell, null, /*#__PURE__*/React.createElement(material.Tooltip, {
+  return /*#__PURE__*/React$1.createElement(material.TableCell, null, /*#__PURE__*/React$1.createElement(material.Tooltip, {
     title: isOpen ? "Hide ".concat(header.id) : "Show ".concat(header.id)
-  }, /*#__PURE__*/React.createElement(material.Box, null, /*#__PURE__*/React.createElement(material.IconButton, {
+  }, /*#__PURE__*/React$1.createElement(material.Box, null, /*#__PURE__*/React$1.createElement(material.IconButton, {
     onClick: function onClick(event) {
       event.stopPropagation();
       onToggle();
     },
     disabled: rowValues[header.id].length === 0,
     color: header.iconColor || "secondary"
-  }, /*#__PURE__*/React.createElement(material.Badge, {
+  }, /*#__PURE__*/React$1.createElement(material.Badge, {
     badgeContent: rowValues[header.id].length,
     invisible: hideBadge,
     anchorOrigin: {
@@ -790,7 +792,7 @@ function SubRowToggleCell(_ref) {
         }
       }
     }
-  }, isOpen ? (header === null || header === void 0 ? void 0 : header.closeIcon) || /*#__PURE__*/React.createElement(iconsMaterial.RemoveCircle, null) : (header === null || header === void 0 ? void 0 : header.openIcon) || /*#__PURE__*/React.createElement(iconsMaterial.AddCircle, null))))));
+  }, isOpen ? (header === null || header === void 0 ? void 0 : header.closeIcon) || /*#__PURE__*/React$1.createElement(iconsMaterial.RemoveCircle, null) : (header === null || header === void 0 ? void 0 : header.openIcon) || /*#__PURE__*/React$1.createElement(iconsMaterial.AddCircle, null))))));
 }
 SubRowToggleCell.propTypes = {
   header: PropTypes.object.isRequired,
@@ -809,19 +811,19 @@ function SubTableRow(_ref2) {
     isOpen = _ref2.isOpen,
     rowValues = _ref2.rowValues,
     colSpan = _ref2.colSpan;
-  return /*#__PURE__*/React.createElement(material.TableRow, null, /*#__PURE__*/React.createElement(material.TableCell, {
+  return /*#__PURE__*/React$1.createElement(material.TableRow, null, /*#__PURE__*/React$1.createElement(material.TableCell, {
     colSpan: colSpan,
     style: {
       paddingBottom: 0,
       paddingTop: 0
     }
-  }, /*#__PURE__*/React.createElement(material.Collapse, {
+  }, /*#__PURE__*/React$1.createElement(material.Collapse, {
     "in": isOpen,
     timeout: "auto",
     unmountOnExit: true
-  }, /*#__PURE__*/React.createElement(React.Suspense, {
+  }, /*#__PURE__*/React$1.createElement(React$1.Suspense, {
     fallback: null
-  }, /*#__PURE__*/React.createElement(UniversalTable$2, {
+  }, /*#__PURE__*/React$1.createElement(UniversalTable$2, {
     loading: table.loading,
     setLoading: table.setLoading,
     onReload: table.onReload,
@@ -839,62 +841,64 @@ SubTableRow.propTypes = {
 };
 
 function renderDataCells(headers, rowValues) {
-  return headers.map(function (header, index) {
-    return /*#__PURE__*/React.createElement(material.TableCell, _extends({
-      key: header.id || index
+  return headers.map(function (header) {
+    var _header$id;
+    return /*#__PURE__*/React$1.createElement(material.TableCell, _extends({
+      key: (_header$id = header.id) !== null && _header$id !== void 0 ? _header$id : header.label
     }, header.cellProps), header.component ? header.component(rowValues) : formatCellValue(header, rowValues));
   });
 }
-var DataRow = /*#__PURE__*/React.memo(function DataRow(props) {
+var DataRow = /*#__PURE__*/React$1.memo(function DataRow(props) {
   var rowValues = props.rowValues,
     headers = props.headers,
     selectRows = props.selectRows,
     isSelected = props.isSelected,
     handleClick = props.handleClick;
-  var _React$useMemo = React.useMemo(function () {
+  var _React$useMemo = React$1.useMemo(function () {
       return splitHeaders(headers);
     }, [headers]),
     subTables = _React$useMemo.subTables,
     columns = _React$useMemo.columns;
   var hideBadge = props.hideBadge || false;
   var isItemSelected = isSelected(props.rowID);
-  var _React$useState = React.useState(Array.from({
+  var _React$useState = React$1.useState(Array.from({
       length: subTables.length
     }).fill(false)),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     reveal = _React$useState2[0],
     setReveal = _React$useState2[1];
-  var toggleSubRow = React.useCallback(function (index) {
+  var toggleSubRow = React$1.useCallback(function (index) {
     setReveal(function (previous) {
       var next = _toConsumableArray(previous);
       next[index] = !next[index];
       return next;
     });
   }, []);
-  var handleRowKeyDown = React.useCallback(function (event) {
+  var handleRowKeyDown = React$1.useCallback(function (event) {
     if (selectRows && (event.key === " " || event.key === "Enter")) {
       event.preventDefault();
       handleClick(event, props.rowID);
     }
   }, [selectRows, handleClick, props.rowID]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.TableRow, {
+  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(material.TableRow, {
     tabIndex: selectRows ? 0 : -1,
     hover: selectRows,
     role: selectRows ? "checkbox" : "row",
     selected: isItemSelected,
     "aria-checked": isItemSelected,
     onKeyDown: handleRowKeyDown
-  }, selectRows && /*#__PURE__*/React.createElement(material.TableCell, {
+  }, selectRows && /*#__PURE__*/React$1.createElement(material.TableCell, {
     padding: "checkbox"
-  }, /*#__PURE__*/React.createElement(material.Checkbox, {
+  }, /*#__PURE__*/React$1.createElement(material.Checkbox, {
     color: "primary",
     checked: isItemSelected,
     onClick: function onClick(event) {
       return handleClick(event, props.rowID);
     }
   })), subTables.map(function (header, index) {
-    return /*#__PURE__*/React.createElement(SubRowToggleCell, {
-      key: header.id || index,
+    var _header$id2;
+    return /*#__PURE__*/React$1.createElement(SubRowToggleCell, {
+      key: (_header$id2 = header.id) !== null && _header$id2 !== void 0 ? _header$id2 : header.label,
       header: header,
       isOpen: reveal[index],
       onToggle: function onToggle() {
@@ -904,8 +908,9 @@ var DataRow = /*#__PURE__*/React.memo(function DataRow(props) {
       hideBadge: hideBadge
     });
   }), renderDataCells(columns, rowValues)), subTables.map(function (table, index) {
-    return /*#__PURE__*/React.createElement(SubTableRow, {
-      key: table.id || index,
+    var _table$id;
+    return /*#__PURE__*/React$1.createElement(SubTableRow, {
+      key: (_table$id = table.id) !== null && _table$id !== void 0 ? _table$id : table.label,
       table: table,
       isOpen: reveal[index],
       rowValues: rowValues,
@@ -923,17 +928,15 @@ DataRow.propTypes = {
   rowID: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
 };
 
+var skeletonRows = ["row-1", "row-2", "row-3", "row-4", "row-5"];
+var skeletonCells = ["cell-1", "cell-2", "cell-3", "cell-4"];
 var TableLoader = function TableLoader() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.TableHead, null), /*#__PURE__*/React.createElement(material.TableBody, null, Array.from({
-    length: 5
-  }).map(function (_, index) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.TableHead, null), /*#__PURE__*/React.createElement(material.TableBody, null, skeletonRows.map(function (rowKey) {
     return /*#__PURE__*/React.createElement(material.TableRow, {
-      key: index
-    }, Array.from({
-      length: 4
-    }).map(function (_, cellIndex) {
+      key: rowKey
+    }, skeletonCells.map(function (cellKey) {
       return /*#__PURE__*/React.createElement(material.TableCell, {
-        key: cellIndex
+        key: cellKey
       }, /*#__PURE__*/React.createElement(material.Skeleton, {
         height: 30
       }));
@@ -975,19 +978,19 @@ function EnhancedTable(props) {
     handleChangeRowsPerPage = _useEnhancedTableStat.handleChangeRowsPerPage;
   var effectiveRowsPerPage = rowsPerPage === -1 ? rows.length : rowsPerPage;
   var emptyRows = Math.max(0, effectiveRowsPerPage - Math.min(effectiveRowsPerPage, rows.length - page * effectiveRowsPerPage));
-  var isSelected = React.useCallback(function (id) {
+  var isSelected = React$1.useCallback(function (id) {
     return selected.includes(id);
   }, [selected]);
-  var visibleRows = React.useMemo(function () {
+  var visibleRows = React$1.useMemo(function () {
     return stableSort(rows, getComparator(order, orderBy), headers, orderBy).slice(page * effectiveRowsPerPage, page * effectiveRowsPerPage + effectiveRowsPerPage);
   }, [effectiveRowsPerPage, headers, order, orderBy, page, rows]);
-  return /*#__PURE__*/React.createElement(material.TableContainer, null, /*#__PURE__*/React.createElement(material.Table, {
+  return /*#__PURE__*/React$1.createElement(material.TableContainer, null, /*#__PURE__*/React$1.createElement(material.Table, {
     sx: {
       minWidth: 750
     },
     size: "small" ,
     "aria-label": props.name || "data table"
-  }, props.loading ? /*#__PURE__*/React.createElement(TableLoader, null) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EnhancedTableHead, {
+  }, props.loading ? /*#__PURE__*/React$1.createElement(TableLoader, null) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(EnhancedTableHead, {
     order: order,
     orderBy: orderBy,
     onRequestSort: handleSort,
@@ -997,10 +1000,10 @@ function EnhancedTable(props) {
     rowCount: rows.length,
     onSelectAllClick: props.handleSelectAllClick,
     async: async
-  }), /*#__PURE__*/React.createElement(material.TableBody, null, visibleRows.map(function (row, index) {
+  }), /*#__PURE__*/React$1.createElement(material.TableBody, null, visibleRows.map(function (row, index) {
     var rowKey = selectID ? row[selectID] : "row-".concat(page * effectiveRowsPerPage + index);
     var rowID = getSelectableRowId(row, index, selectID);
-    return /*#__PURE__*/React.createElement(DataRow, {
+    return /*#__PURE__*/React$1.createElement(DataRow, {
       key: rowKey,
       rowID: rowID,
       headers: headers,
@@ -1010,17 +1013,17 @@ function EnhancedTable(props) {
       handleClick: props.handleClick,
       isSelected: isSelected
     });
-  }), !subTable && emptyRows > 0 && /*#__PURE__*/React.createElement(material.TableRow, {
+  }), !subTable && emptyRows > 0 && /*#__PURE__*/React$1.createElement(material.TableRow, {
     style: {
       height: (33 ) * emptyRows
     }
-  }, /*#__PURE__*/React.createElement(material.TableCell, {
+  }, /*#__PURE__*/React$1.createElement(material.TableCell, {
     colSpan: headers.length
-  }))))), subTable ? /*#__PURE__*/React.createElement(material.Box, {
+  }))))), subTable ? /*#__PURE__*/React$1.createElement(material.Box, {
     sx: {
       mb: 3
     }
-  }) : /*#__PURE__*/React.createElement(material.TablePagination, {
+  }) : /*#__PURE__*/React$1.createElement(material.TablePagination, {
     rowsPerPageOptions: props.pageSizeOptions || getPageOptions(rows.length),
     component: "div",
     count: rows.length,
@@ -1083,18 +1086,19 @@ function UniversalTable(_ref) {
     pageSizeOptions = _ref.pageSizeOptions,
     persistSearch = _ref.persistSearch,
     asyncPages = _ref.asyncPages;
-  var debounceRef = React.useRef(null);
+  var debounceRef = React$1.useRef(null);
+  var hasLoadedInitialAsyncPageRef = React$1.useRef(false);
   var async = typeof asyncPages === "number" && asyncPages > 0;
   var head = headers || [];
   var _useSearchableRows = useSearchableRows(data, head, async),
     rows = _useSearchableRows.rows,
     searchTerm = _useSearchableRows.searchTerm,
     setSearchTerm = _useSearchableRows.setSearchTerm;
-  var _React$useState = React.useState("asc"),
+  var _React$useState = React$1.useState("asc"),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     order = _React$useState2[0],
     setOrder = _React$useState2[1];
-  var _React$useState3 = React.useState(""),
+  var _React$useState3 = React$1.useState(""),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     orderBy = _React$useState4[0],
     setOrderBy = _React$useState4[1];
@@ -1107,7 +1111,7 @@ function UniversalTable(_ref) {
     clearSelection = _useSelectableRows.clearSelection,
     handleSelectAllClick = _useSelectableRows.handleSelectAllClick,
     handleClick = _useSelectableRows.handleClick;
-  var handleSearchChange = React.useCallback(function (value) {
+  var handleSearchChange = React$1.useCallback(function (value) {
     clearSelection();
     setSearchTerm(value);
   }, [clearSelection, setSearchTerm]);
@@ -1127,25 +1131,24 @@ function UniversalTable(_ref) {
       handleSearchChange(searchValue);
     }
   };
-  React.useEffect(function () {
+  React$1.useEffect(function () {
     return function () {
       return clearTimeout(debounceRef.current);
     };
   }, []);
-  React.useEffect(function () {
-    if (async) {
-      setLoading({
-        searchTerm: searchTerm,
-        direction: order,
-        column: orderBy,
-        pages: asyncPages
-      });
+  React$1.useEffect(function () {
+    if (!async || hasLoadedInitialAsyncPageRef.current) {
+      return;
     }
-    // Run the initial async load once on mount; search/sort/reload handlers
-    // send their own payloads after user interaction.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  var handleReload = React.useCallback(function () {
+    hasLoadedInitialAsyncPageRef.current = true;
+    setLoading({
+      searchTerm: searchTerm,
+      direction: order,
+      column: orderBy,
+      pages: asyncPages
+    });
+  }, [async, asyncPages, order, orderBy, searchTerm, setLoading]);
+  var handleReload = React$1.useCallback(function () {
     if (typeof onReload === "function") {
       onReload();
       return;
@@ -1159,29 +1162,29 @@ function UniversalTable(_ref) {
       } : true);
     }
   }, [async, onReload, setLoading, searchTerm, order, orderBy, asyncPages]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LazyLoadingIndicator, {
+  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(LazyLoadingIndicator, {
     show: lazyloading,
     currentPage: currentPage,
     totalPages: totalPages
-  }), /*#__PURE__*/React.createElement(Paper, {
+  }), /*#__PURE__*/React$1.createElement(Paper, {
     sx: _objectSpread2({}, subTable && {
       boxShadow: "none"
     })
-  }, /*#__PURE__*/React.createElement(TableSelectionBanner, {
+  }, /*#__PURE__*/React$1.createElement(TableSelectionBanner, {
     selected: selected,
     onSelection: onSelection,
     selectIcon: selectIcon
-  }), /*#__PURE__*/React.createElement(TableTitle, {
+  }), /*#__PURE__*/React$1.createElement(TableTitle, {
     name: name,
     subTable: subTable
-  }), !subTable && /*#__PURE__*/React.createElement(TableToolbarContent, {
+  }), !subTable && /*#__PURE__*/React$1.createElement(TableToolbarContent, {
     onReload: typeof onReload === "function" || typeof setLoading === "function" ? handleReload : undefined,
     reloadBtnLoading: reloadBtnLoading,
     searchTerm: searchTerm,
     onSearchChange: handleSearch,
     name: name,
     persistSearch: persistSearch
-  }), /*#__PURE__*/React.createElement(EnhancedTable, {
+  }), /*#__PURE__*/React$1.createElement(EnhancedTable, {
     headers: head,
     rows: rows,
     resetFlag: searchTerm,