mui-universal-table 2.1.0 → 2.1.2

package/dist/index.cjs

@@ -6,6 +6,7 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var Paper = require('@mui/material/Paper');
 var material = require('@mui/material');
+var jsxRuntime = require('react/jsx-runtime');
 var styles = require('@mui/material/styles');
 var iconsMaterial = require('@mui/icons-material');
 var RefreshIcon = require('@mui/icons-material/Refresh');
@@ -29,15 +30,6 @@ function _defineProperty(e, r, t) {
     writable: true
   }) : e[r] = t, e;
 }
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
 function _iterableToArray(r) {
   if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
 }
@@ -124,25 +116,28 @@ var LazyLoadingIndicator = function LazyLoadingIndicator(_ref) {
   var show = _ref.show,
     currentPage = _ref.currentPage,
     totalPages = _ref.totalPages;
-  return /*#__PURE__*/React.createElement(material.Collapse, {
+  return /*#__PURE__*/jsxRuntime.jsx(material.Collapse, {
     "in": show,
     timeout: "auto",
-    unmountOnExit: true
-  }, /*#__PURE__*/React.createElement(material.Box, {
-    sx: {
-      width: "100%",
-      p: 2
-    }
-  }, /*#__PURE__*/React.createElement(material.Typography, {
-    variant: "body2",
-    color: "text.secondary",
-    sx: {
-      mb: 1
-    }
-  }, "Loading page ", currentPage, " of ", totalPages, "..."), /*#__PURE__*/React.createElement(material.LinearProgress, {
-    variant: "determinate",
-    value: currentPage / totalPages * 100
-  })));
+    unmountOnExit: true,
+    children: /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+      sx: {
+        width: "100%",
+        p: 2
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
+        variant: "body2",
+        color: "text.secondary",
+        sx: {
+          mb: 1
+        },
+        children: ["Loading page ", currentPage, " of ", totalPages, "..."]
+      }), /*#__PURE__*/jsxRuntime.jsx(material.LinearProgress, {
+        variant: "determinate",
+        value: currentPage / totalPages * 100
+      })]
+    })
+  });
 };
 LazyLoadingIndicator.propTypes = {
   show: PropTypes.bool.isRequired,
@@ -360,30 +355,34 @@ function TableSelectionBanner(_ref) {
   var selected = _ref.selected,
     onSelection = _ref.onSelection,
     selectIcon = _ref.selectIcon;
-  return /*#__PURE__*/React.createElement(material.Collapse, {
+  return /*#__PURE__*/jsxRuntime.jsx(material.Collapse, {
     "in": selected.length > 0,
-    unmountOnExit: true
-  }, /*#__PURE__*/React.createElement(material.Box, {
-    sx: {
-      p: 2,
-      display: "flex",
-      justifyContent: "space-between",
-      bgcolor: function bgcolor(theme) {
-        return styles.alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity);
+    unmountOnExit: true,
+    children: /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+      sx: {
+        p: 2,
+        display: "flex",
+        justifyContent: "space-between",
+        bgcolor: function bgcolor(theme) {
+          return styles.alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity);
+        },
+        borderRadius: 1,
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0
       },
-      borderRadius: 1,
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0
-    }
-  }, /*#__PURE__*/React.createElement(material.Typography, {
-    variant: "h6",
-    id: "tableTitle",
-    component: "div"
-  }, selected.length, " selected"), /*#__PURE__*/React.createElement(material.IconButton, {
-    onClick: function onClick() {
-      return onSelection(selected);
-    }
-  }, selectIcon || /*#__PURE__*/React.createElement(iconsMaterial.Task, null))));
+      children: [/*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
+        variant: "h6",
+        id: "tableTitle",
+        component: "div",
+        children: [selected.length, " selected"]
+      }), /*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
+        onClick: function onClick() {
+          return onSelection(selected);
+        },
+        children: selectIcon || /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Task, {})
+      })]
+    })
+  });
 }
 TableSelectionBanner.propTypes = {
   selected: PropTypes.array.isRequired,
@@ -394,13 +393,14 @@ TableSelectionBanner.propTypes = {
 function TableTitle(_ref) {
   var name = _ref.name,
     subTable = _ref.subTable;
-  return /*#__PURE__*/React.createElement(material.Typography, {
+  return /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
     variant: subTable ? "h6" : "h5",
     color: subTable ? "secondary" : "primary",
     sx: {
       p: 2
-    }
-  }, name);
+    },
+    children: name
+  });
 }
 TableTitle.propTypes = {
   name: PropTypes.string,
@@ -419,14 +419,16 @@ function ReloadBtn(_ref) {
       onReload();
     }
   };
-  return /*#__PURE__*/React.createElement(material.Tooltip, {
-    title: "Reload"
-  }, /*#__PURE__*/React.createElement(material.Button, {
-    variant: "contained",
-    color: "primary",
-    onClick: handleClick,
-    disabled: loading
-  }, /*#__PURE__*/React.createElement(RefreshIcon, null)));
+  return /*#__PURE__*/jsxRuntime.jsx(material.Tooltip, {
+    title: "Reload",
+    children: /*#__PURE__*/jsxRuntime.jsx(material.Button, {
+      variant: "contained",
+      color: "primary",
+      onClick: handleClick,
+      disabled: loading,
+      children: /*#__PURE__*/jsxRuntime.jsx(RefreshIcon, {})
+    })
+  });
 }
 ReloadBtn.propTypes = {
   loading: PropTypes.bool,
@@ -453,69 +455,75 @@ 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", {
-    onSubmit: handleSubmit
-  }, /*#__PURE__*/React.createElement(material.Paper, {
-    elevation: 0,
-    sx: {
-      borderRadius: expanded ? "24px" : "50px",
-      display: "flex",
-      alignItems: "center",
-      transition: "all 0.5s ease-in-out",
-      p: expanded ? 1 : 0.5,
-      width: "fit-content",
-      border: function border(theme) {
-        return "1px solid ".concat(theme.palette.divider);
+  var isUserTypingRef = React.useRef(false);
+  return /*#__PURE__*/jsxRuntime.jsx("form", {
+    onSubmit: handleSubmit,
+    children: /*#__PURE__*/jsxRuntime.jsxs(material.Paper, {
+      elevation: 0,
+      sx: {
+        borderRadius: expanded ? "24px" : "50px",
+        display: "flex",
+        alignItems: "center",
+        transition: "all 0.5s ease-in-out",
+        p: expanded ? 1 : 0.5,
+        width: "fit-content",
+        border: function border(theme) {
+          return "1px solid ".concat(theme.palette.divider);
+        },
+        mb: 1
       },
-      mb: 1
-    },
-    onMouseEnter: function onMouseEnter() {
-      return setHover(true);
-    },
-    onMouseLeave: handleEndHover,
-    onKeyDown: function onKeyDown(e) {
-      return e.key === "Enter" && handleSubmit(e);
-    }
-  }, /*#__PURE__*/React.createElement(material.InputBase, {
-    placeholder: "Search",
-    value: value,
-    onChange: function onChange(e) {
-      isUserType.current = true;
-      onSubmit(e.target.value);
-    },
-    sx: _objectSpread2({
-      ml: 1,
-      width: expanded ? "100%" : 0,
-      transition: "width 0.5s ease-in-out"
-    }, expanded ? {} : {
-      margin: 0
-    }),
-    onBlur: handleEndHover
-  }), /*#__PURE__*/React.createElement(material.Collapse, {
-    "in": Boolean(value),
-    orientation: "horizontal",
-    unmountOnExit: true
-  }, /*#__PURE__*/React.createElement(material.Stack, {
-    direction: "row",
-    spacing: 0,
-    sx: {
-      mr: 3,
-      alignItems: "center"
-    }
-  }, /*#__PURE__*/React.createElement(material.IconButton, {
-    onClick: function onClick() {
-      isUserType.current = false;
-      // Immediately clear instead of waiting for the debounce
-      onSubmit("");
-    }
-  }, /*#__PURE__*/React.createElement(iconsMaterial.Clear, null)), /*#__PURE__*/React.createElement(material.Divider, {
-    orientation: "vertical",
-    flexItem: true
-  }))), /*#__PURE__*/React.createElement(material.IconButton, {
-    onClick: handleSubmit,
-    type: "submit"
-  }, /*#__PURE__*/React.createElement(iconsMaterial.Search, null))));
+      onMouseEnter: function onMouseEnter() {
+        return setHover(true);
+      },
+      onMouseLeave: handleEndHover,
+      onKeyDown: function onKeyDown(e) {
+        return e.key === "Enter" && handleSubmit(e);
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(material.InputBase, {
+        placeholder: "Search",
+        value: value,
+        onChange: function onChange(e) {
+          isUserTypingRef.current = true;
+          onSubmit(e.target.value);
+        },
+        sx: _objectSpread2({
+          ml: 1,
+          width: expanded ? "100%" : 0,
+          transition: "width 0.5s ease-in-out"
+        }, expanded ? {} : {
+          margin: 0
+        }),
+        onBlur: handleEndHover
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Collapse, {
+        "in": Boolean(value),
+        orientation: "horizontal",
+        unmountOnExit: true,
+        children: /*#__PURE__*/jsxRuntime.jsxs(material.Stack, {
+          direction: "row",
+          spacing: 0,
+          sx: {
+            mr: 3,
+            alignItems: "center"
+          },
+          children: [/*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
+            onClick: function onClick() {
+              isUserTypingRef.current = false;
+              // Immediately clear instead of waiting for the debounce
+              onSubmit("");
+            },
+            children: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Clear, {})
+          }), /*#__PURE__*/jsxRuntime.jsx(material.Divider, {
+            orientation: "vertical",
+            flexItem: true
+          })]
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
+        onClick: handleSubmit,
+        type: "submit",
+        children: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Search, {})
+      })]
+    })
+  });
 }
 FancySearch.propTypes = {
   value: PropTypes.string,
@@ -535,12 +543,12 @@ function SearchArea(props) {
     }
     return "";
   }, [current, persistSearch, searchName]);
-  return /*#__PURE__*/React.createElement("div", {
-    key: "SearchArea"
-  }, /*#__PURE__*/React.createElement(FancySearch, {
-    value: searchVal,
-    onSubmit: setFinalVal
-  }));
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    children: /*#__PURE__*/jsxRuntime.jsx(FancySearch, {
+      value: searchVal,
+      onSubmit: setFinalVal
+    })
+  }, "SearchArea");
 }
 SearchArea.propTypes = {
   current: PropTypes.string,
@@ -557,7 +565,7 @@ function TableToolbarContent(_ref) {
     onSearchChange = _ref.onSearchChange,
     name = _ref.name,
     persistSearch = _ref.persistSearch;
-  return /*#__PURE__*/React.createElement(material.Toolbar, {
+  return /*#__PURE__*/jsxRuntime.jsx(material.Toolbar, {
     sx: {
       pl: {
         sm: 2
@@ -567,34 +575,37 @@ function TableToolbarContent(_ref) {
         sm: 1
       },
       pt: 2
-    }
-  }, /*#__PURE__*/React.createElement(material.Stack, {
-    spacing: 2,
-    direction: {
-      xs: "column",
-      md: "row"
-    },
-    sx: {
-      width: "100%",
-      alignItems: {
-        xs: "flex-start",
-        md: "center"
-      }
-    }
-  }, /*#__PURE__*/React.createElement(material.Box, {
-    sx: {
-      flex: "1 1 100%"
     },
-    id: "tableTitle"
-  }, /*#__PURE__*/React.createElement(ReloadBtn, {
-    onReload: onReload,
-    loading: reloadBtnLoading
-  })), /*#__PURE__*/React.createElement(SearchArea, {
-    current: searchTerm,
-    setFinalVal: onSearchChange,
-    searchName: name,
-    persistSearch: persistSearch
-  })));
+    children: /*#__PURE__*/jsxRuntime.jsxs(material.Stack, {
+      spacing: 2,
+      direction: {
+        xs: "column",
+        md: "row"
+      },
+      sx: {
+        width: "100%",
+        alignItems: {
+          xs: "flex-start",
+          md: "center"
+        }
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
+        sx: {
+          flex: "1 1 100%"
+        },
+        id: "tableTitle",
+        children: /*#__PURE__*/jsxRuntime.jsx(ReloadBtn, {
+          onReload: onReload,
+          loading: reloadBtnLoading
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(SearchArea, {
+        current: searchTerm,
+        setFinalVal: onSearchChange,
+        searchName: name,
+        persistSearch: persistSearch
+      })]
+    })
+  });
 }
 TableToolbarContent.propTypes = {
   onReload: PropTypes.func,
@@ -642,7 +653,9 @@ function useEnhancedTableState(_ref2) {
     pagination = _React$useState2[0],
     setPagination = _React$useState2[1];
   React.useEffect(function () {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
+    // 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;
@@ -710,31 +723,38 @@ function EnhancedTableHead(props) {
     rowCount = props.rowCount,
     onSelectAllClick = props.onSelectAllClick,
     async = props.async;
-  return /*#__PURE__*/React.createElement(material.TableHead, null, /*#__PURE__*/React.createElement(material.TableRow, null, selectRows && /*#__PURE__*/React.createElement(material.TableCell, {
-    padding: "checkbox"
-  }, /*#__PURE__*/React.createElement(material.Checkbox, {
-    color: "primary",
-    indeterminate: numSelected > 0 && numSelected < rowCount,
-    checked: rowCount > 0 && numSelected === rowCount,
-    onChange: onSelectAllClick
-  })), props.headings.map(function (headCell) {
-    return /*#__PURE__*/React.createElement(material.TableCell, {
-      key: headCell.id,
-      align: headCell.numeric ? "right" : "left",
-      padding: "normal",
-      sortDirection: orderBy === headCell.id ? order : false
-    }, /*#__PURE__*/React.createElement(material.TableSortLabel, {
-      active: orderBy === headCell.id,
-      direction: orderBy === headCell.id ? order : "asc",
-      onClick: function onClick() {
-        return onRequestSort(headCell.id, headCell.sortable && async);
-      },
-      disabled: headCell.subRow
-    }, headCell.label, orderBy === headCell.id ? /*#__PURE__*/React.createElement(material.Box, {
-      component: "span",
-      sx: visuallyHidden
-    }, order === "desc" ? "sorted descending" : "sorted ascending") : undefined));
-  })));
+  return /*#__PURE__*/jsxRuntime.jsx(material.TableHead, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
+      children: [selectRows && /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
+        padding: "checkbox",
+        children: /*#__PURE__*/jsxRuntime.jsx(material.Checkbox, {
+          color: "primary",
+          indeterminate: numSelected > 0 && numSelected < rowCount,
+          checked: rowCount > 0 && numSelected === rowCount,
+          onChange: onSelectAllClick
+        })
+      }), props.headings.map(function (headCell) {
+        return /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
+          align: headCell.numeric ? "right" : "left",
+          padding: "normal",
+          sortDirection: orderBy === headCell.id ? order : false,
+          children: /*#__PURE__*/jsxRuntime.jsxs(material.TableSortLabel, {
+            active: orderBy === headCell.id,
+            direction: orderBy === headCell.id ? order : "asc",
+            onClick: function onClick() {
+              return onRequestSort(headCell.id, headCell.sortable && async);
+            },
+            disabled: headCell.subRow,
+            children: [headCell.label, orderBy === headCell.id ? /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+              component: "span",
+              sx: visuallyHidden,
+              children: order === "desc" ? "sorted descending" : "sorted ascending"
+            }) : undefined]
+          })
+        }, headCell.id);
+      })]
+    })
+  });
 }
 EnhancedTableHead.propTypes = {
   onRequestSort: PropTypes.func.isRequired,
@@ -748,11 +768,6 @@ EnhancedTableHead.propTypes = {
   async: PropTypes.bool
 };
 
-/**
- * Lazily import UniversalTable to statically break the circular dependency:
- *   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 () {
   return Promise.resolve().then(function () { return UniversalTable$1; });
 });
@@ -767,30 +782,37 @@ function SubRowToggleCell(_ref) {
     onToggle = _ref.onToggle,
     rowValues = _ref.rowValues,
     hideBadge = _ref.hideBadge;
-  return /*#__PURE__*/React.createElement(material.TableCell, null, /*#__PURE__*/React.createElement(material.Tooltip, {
-    title: isOpen ? "Hide ".concat(header.id) : "Show ".concat(header.id)
-  }, /*#__PURE__*/React.createElement(material.Box, null, /*#__PURE__*/React.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, {
-    badgeContent: rowValues[header.id].length,
-    invisible: hideBadge,
-    anchorOrigin: {
-      vertical: "bottom",
-      horizontal: "right"
-    },
-    sx: {
-      "& .MuiBadge-badge": {
-        color: function color(theme) {
-          return theme.palette.text.primary;
-        }
-      }
-    }
-  }, 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))))));
+  return /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
+    children: /*#__PURE__*/jsxRuntime.jsx(material.Tooltip, {
+      title: isOpen ? "Hide ".concat(header.id) : "Show ".concat(header.id),
+      children: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+        children: /*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
+          onClick: function onClick(event) {
+            event.stopPropagation();
+            onToggle();
+          },
+          disabled: rowValues[header.id].length === 0,
+          color: header.iconColor || "secondary",
+          children: /*#__PURE__*/jsxRuntime.jsx(material.Badge, {
+            badgeContent: rowValues[header.id].length,
+            invisible: hideBadge,
+            anchorOrigin: {
+              vertical: "bottom",
+              horizontal: "right"
+            },
+            sx: {
+              "& .MuiBadge-badge": {
+                color: function color(theme) {
+                  return theme.palette.text.primary;
+                }
+              }
+            },
+            children: isOpen ? (header === null || header === void 0 ? void 0 : header.closeIcon) || /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.RemoveCircle, {}) : (header === null || header === void 0 ? void 0 : header.openIcon) || /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.AddCircle, {})
+          })
+        })
+      })
+    })
+  });
 }
 SubRowToggleCell.propTypes = {
   header: PropTypes.object.isRequired,
@@ -809,27 +831,32 @@ function SubTableRow(_ref2) {
     isOpen = _ref2.isOpen,
     rowValues = _ref2.rowValues,
     colSpan = _ref2.colSpan;
-  return /*#__PURE__*/React.createElement(material.TableRow, null, /*#__PURE__*/React.createElement(material.TableCell, {
-    colSpan: colSpan,
-    style: {
-      paddingBottom: 0,
-      paddingTop: 0
-    }
-  }, /*#__PURE__*/React.createElement(material.Collapse, {
-    "in": isOpen,
-    timeout: "auto",
-    unmountOnExit: true
-  }, /*#__PURE__*/React.createElement(React.Suspense, {
-    fallback: null
-  }, /*#__PURE__*/React.createElement(UniversalTable$2, {
-    loading: table.loading,
-    setLoading: table.setLoading,
-    onReload: table.onReload,
-    data: rowValues[table.id],
-    headers: table.headers,
-    name: table.subTitle,
-    subTable: true
-  })))));
+  return /*#__PURE__*/jsxRuntime.jsx(material.TableRow, {
+    children: /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
+      colSpan: colSpan,
+      style: {
+        paddingBottom: 0,
+        paddingTop: 0
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(material.Collapse, {
+        "in": isOpen,
+        timeout: "auto",
+        unmountOnExit: true,
+        children: /*#__PURE__*/jsxRuntime.jsx(React.Suspense, {
+          fallback: null,
+          children: /*#__PURE__*/jsxRuntime.jsx(UniversalTable$2, {
+            loading: table.loading,
+            setLoading: table.setLoading,
+            onReload: table.onReload,
+            data: rowValues[table.id],
+            headers: table.headers,
+            name: table.subTitle,
+            subTable: true
+          })
+        })
+      })
+    })
+  });
 }
 SubTableRow.propTypes = {
   table: PropTypes.object.isRequired,
@@ -839,10 +866,11 @@ SubTableRow.propTypes = {
 };
 
 function renderDataCells(headers, rowValues) {
-  return headers.map(function (header, index) {
-    return /*#__PURE__*/React.createElement(material.TableCell, _extends({
-      key: header.id || index
-    }, header.cellProps), header.component ? header.component(rowValues) : formatCellValue(header, rowValues));
+  return headers.map(function (header) {
+    var _header$id;
+    return /*#__PURE__*/jsxRuntime.jsx(material.TableCell, _objectSpread2(_objectSpread2({}, header.cellProps), {}, {
+      children: header.component ? header.component(rowValues) : formatCellValue(header, rowValues)
+    }), (_header$id = header.id) !== null && _header$id !== void 0 ? _header$id : header.label);
   });
 }
 var DataRow = /*#__PURE__*/React.memo(function DataRow(props) {
@@ -877,41 +905,45 @@ var DataRow = /*#__PURE__*/React.memo(function DataRow(props) {
       handleClick(event, props.rowID);
     }
   }, [selectRows, handleClick, props.rowID]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.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, {
-    padding: "checkbox"
-  }, /*#__PURE__*/React.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,
-      header: header,
-      isOpen: reveal[index],
-      onToggle: function onToggle() {
-        return toggleSubRow(index);
-      },
-      rowValues: rowValues,
-      hideBadge: hideBadge
-    });
-  }), renderDataCells(columns, rowValues)), subTables.map(function (table, index) {
-    return /*#__PURE__*/React.createElement(SubTableRow, {
-      key: table.id || index,
-      table: table,
-      isOpen: reveal[index],
-      rowValues: rowValues,
-      colSpan: props.headers.length + 1
-    });
-  }));
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
+      tabIndex: selectRows ? 0 : -1,
+      hover: selectRows,
+      role: selectRows ? "checkbox" : "row",
+      selected: isItemSelected,
+      "aria-checked": isItemSelected,
+      onKeyDown: handleRowKeyDown,
+      children: [selectRows && /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
+        padding: "checkbox",
+        children: /*#__PURE__*/jsxRuntime.jsx(material.Checkbox, {
+          color: "primary",
+          checked: isItemSelected,
+          onClick: function onClick(event) {
+            return handleClick(event, props.rowID);
+          }
+        })
+      }), subTables.map(function (header, index) {
+        var _header$id2;
+        return /*#__PURE__*/jsxRuntime.jsx(SubRowToggleCell, {
+          header: header,
+          isOpen: reveal[index],
+          onToggle: function onToggle() {
+            return toggleSubRow(index);
+          },
+          rowValues: rowValues,
+          hideBadge: hideBadge
+        }, (_header$id2 = header.id) !== null && _header$id2 !== void 0 ? _header$id2 : header.label);
+      }), renderDataCells(columns, rowValues)]
+    }), subTables.map(function (table, index) {
+      var _table$id;
+      return /*#__PURE__*/jsxRuntime.jsx(SubTableRow, {
+        table: table,
+        isOpen: reveal[index],
+        rowValues: rowValues,
+        colSpan: props.headers.length + 1
+      }, (_table$id = table.id) !== null && _table$id !== void 0 ? _table$id : table.label);
+    })]
+  });
 });
 DataRow.propTypes = {
   rowValues: PropTypes.object.isRequired,
@@ -923,22 +955,24 @@ 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(material.TableRow, {
-      key: index
-    }, Array.from({
-      length: 4
-    }).map(function (_, cellIndex) {
-      return /*#__PURE__*/React.createElement(material.TableCell, {
-        key: cellIndex
-      }, /*#__PURE__*/React.createElement(material.Skeleton, {
-        height: 30
-      }));
-    }));
-  })));
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(material.TableHead, {}), /*#__PURE__*/jsxRuntime.jsx(material.TableBody, {
+      children: skeletonRows.map(function (rowKey) {
+        return /*#__PURE__*/jsxRuntime.jsx(material.TableRow, {
+          children: skeletonCells.map(function (cellKey) {
+            return /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
+              children: /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+                height: 30
+              })
+            }, cellKey);
+          })
+        }, rowKey);
+      })
+    })]
+  });
 };
 
 function EnhancedTable(props) {
@@ -981,59 +1015,66 @@ function EnhancedTable(props) {
   var visibleRows = React.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, {
-    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, {
-    order: order,
-    orderBy: orderBy,
-    onRequestSort: handleSort,
-    headings: headers,
-    selectRows: props.selectRows,
-    numSelected: selected.length,
-    rowCount: rows.length,
-    onSelectAllClick: props.handleSelectAllClick,
-    async: async
-  }), /*#__PURE__*/React.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, {
-      key: rowKey,
-      rowID: rowID,
-      headers: headers,
-      rowValues: row,
-      hideBadge: props.hideBadge,
-      selectRows: props.selectRows,
-      handleClick: props.handleClick,
-      isSelected: isSelected
-    });
-  }), !subTable && emptyRows > 0 && /*#__PURE__*/React.createElement(material.TableRow, {
-    style: {
-      height: (33 ) * emptyRows
-    }
-  }, /*#__PURE__*/React.createElement(material.TableCell, {
-    colSpan: headers.length
-  }))))), subTable ? /*#__PURE__*/React.createElement(material.Box, {
-    sx: {
-      mb: 3
-    }
-  }) : /*#__PURE__*/React.createElement(material.TablePagination, {
-    rowsPerPageOptions: props.pageSizeOptions || getPageOptions(rows.length),
-    component: "div",
-    count: rows.length,
-    rowsPerPage: rowsPerPage,
-    page: page,
-    onPageChange: handleChangePage,
-    onRowsPerPageChange: handleChangeRowsPerPage,
-    sx: {
-      overflow: "visible"
-    },
-    showFirstButton: true,
-    showLastButton: true
-  }));
+  return /*#__PURE__*/jsxRuntime.jsxs(material.TableContainer, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(material.Table, {
+      sx: {
+        minWidth: 750
+      },
+      size: "small" ,
+      "aria-label": props.name || "data table",
+      children: props.loading ? /*#__PURE__*/jsxRuntime.jsx(TableLoader, {}) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(EnhancedTableHead, {
+          order: order,
+          orderBy: orderBy,
+          onRequestSort: handleSort,
+          headings: headers,
+          selectRows: props.selectRows,
+          numSelected: selected.length,
+          rowCount: rows.length,
+          onSelectAllClick: props.handleSelectAllClick,
+          async: async
+        }), /*#__PURE__*/jsxRuntime.jsxs(material.TableBody, {
+          children: [visibleRows.map(function (row, index) {
+            var rowKey = selectID ? row[selectID] : "row-".concat(page * effectiveRowsPerPage + index);
+            var rowID = getSelectableRowId(row, index, selectID);
+            return /*#__PURE__*/jsxRuntime.jsx(DataRow, {
+              rowID: rowID,
+              headers: headers,
+              rowValues: row,
+              hideBadge: props.hideBadge,
+              selectRows: props.selectRows,
+              handleClick: props.handleClick,
+              isSelected: isSelected
+            }, rowKey);
+          }), !subTable && emptyRows > 0 && /*#__PURE__*/jsxRuntime.jsx(material.TableRow, {
+            style: {
+              height: (33 ) * emptyRows
+            },
+            children: /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
+              colSpan: headers.length
+            })
+          })]
+        })]
+      })
+    }), subTable ? /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+      sx: {
+        mb: 3
+      }
+    }) : /*#__PURE__*/jsxRuntime.jsx(material.TablePagination, {
+      rowsPerPageOptions: props.pageSizeOptions || getPageOptions(rows.length),
+      component: "div",
+      count: rows.length,
+      rowsPerPage: rowsPerPage,
+      page: page,
+      onPageChange: handleChangePage,
+      onRowsPerPageChange: handleChangeRowsPerPage,
+      sx: {
+        overflow: "visible"
+      },
+      showFirstButton: true,
+      showLastButton: true
+    })]
+  });
 }
 EnhancedTable.propTypes = {
   headers: PropTypes.array.isRequired,
@@ -1084,6 +1125,7 @@ function UniversalTable(_ref) {
     persistSearch = _ref.persistSearch,
     asyncPages = _ref.asyncPages;
   var debounceRef = React.useRef(null);
+  var hasLoadedInitialAsyncPageRef = React.useRef(false);
   var async = typeof asyncPages === "number" && asyncPages > 0;
   var head = headers || [];
   var _useSearchableRows = useSearchableRows(data, head, async),
@@ -1133,18 +1175,17 @@ function UniversalTable(_ref) {
     };
   }, []);
   React.useEffect(function () {
-    if (async) {
-      setLoading({
-        searchTerm: searchTerm,
-        direction: order,
-        column: orderBy,
-        pages: asyncPages
-      });
+    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
-  }, []);
+    hasLoadedInitialAsyncPageRef.current = true;
+    setLoading({
+      searchTerm: searchTerm,
+      direction: order,
+      column: orderBy,
+      pages: asyncPages
+    });
+  }, [async, asyncPages, order, orderBy, searchTerm, setLoading]);
   var handleReload = React.useCallback(function () {
     if (typeof onReload === "function") {
       onReload();
@@ -1159,51 +1200,54 @@ function UniversalTable(_ref) {
       } : true);
     }
   }, [async, onReload, setLoading, searchTerm, order, orderBy, asyncPages]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LazyLoadingIndicator, {
-    show: lazyloading,
-    currentPage: currentPage,
-    totalPages: totalPages
-  }), /*#__PURE__*/React.createElement(Paper, {
-    sx: _objectSpread2({}, subTable && {
-      boxShadow: "none"
-    })
-  }, /*#__PURE__*/React.createElement(TableSelectionBanner, {
-    selected: selected,
-    onSelection: onSelection,
-    selectIcon: selectIcon
-  }), /*#__PURE__*/React.createElement(TableTitle, {
-    name: name,
-    subTable: subTable
-  }), !subTable && /*#__PURE__*/React.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, {
-    headers: head,
-    rows: rows,
-    resetFlag: searchTerm,
-    searchTerm: searchTerm,
-    subTable: subTable,
-    hideBadge: hideBadge,
-    loading: loading,
-    selectRows: selectRows,
-    handleSelectAllClick: handleSelectAllClick,
-    handleClick: handleClick,
-    selected: selected,
-    selectID: selectID,
-    pageSizeOptions: pageSizeOptions,
-    name: name,
-    setLoading: setLoading,
-    order: order,
-    orderBy: orderBy,
-    setOrder: setOrder,
-    setOrderBy: setOrderBy,
-    asyncPages: asyncPages,
-    async: async
-  })));
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(LazyLoadingIndicator, {
+      show: lazyloading,
+      currentPage: currentPage,
+      totalPages: totalPages
+    }), /*#__PURE__*/jsxRuntime.jsxs(Paper, {
+      sx: _objectSpread2({}, subTable && {
+        boxShadow: "none"
+      }),
+      children: [/*#__PURE__*/jsxRuntime.jsx(TableSelectionBanner, {
+        selected: selected,
+        onSelection: onSelection,
+        selectIcon: selectIcon
+      }), /*#__PURE__*/jsxRuntime.jsx(TableTitle, {
+        name: name,
+        subTable: subTable
+      }), !subTable && /*#__PURE__*/jsxRuntime.jsx(TableToolbarContent, {
+        onReload: typeof onReload === "function" || typeof setLoading === "function" ? handleReload : undefined,
+        reloadBtnLoading: reloadBtnLoading,
+        searchTerm: searchTerm,
+        onSearchChange: handleSearch,
+        name: name,
+        persistSearch: persistSearch
+      }), /*#__PURE__*/jsxRuntime.jsx(EnhancedTable, {
+        headers: head,
+        rows: rows,
+        resetFlag: searchTerm,
+        searchTerm: searchTerm,
+        subTable: subTable,
+        hideBadge: hideBadge,
+        loading: loading,
+        selectRows: selectRows,
+        handleSelectAllClick: handleSelectAllClick,
+        handleClick: handleClick,
+        selected: selected,
+        selectID: selectID,
+        pageSizeOptions: pageSizeOptions,
+        name: name,
+        setLoading: setLoading,
+        order: order,
+        orderBy: orderBy,
+        setOrder: setOrder,
+        setOrderBy: setOrderBy,
+        asyncPages: asyncPages,
+        async: async
+      })]
+    })]
+  });
 }
 UniversalTable.propTypes = {
   loading: PropTypes.bool,