@wavelengthusaf/components 3.0.2 → 3.1.0

package/dist/cjs/index.cjs

@@ -206,7 +206,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef2 = REACT_FORWARD_REF_TYPE;
-        var Fragment14 = REACT_FRAGMENT_TYPE;
+        var Fragment17 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo2 = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -265,7 +265,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element;
         exports.ForwardRef = ForwardRef2;
-        exports.Fragment = Fragment14;
+        exports.Fragment = Fragment17;
         exports.Lazy = Lazy;
         exports.Memo = Memo2;
         exports.Portal = Portal;
@@ -1227,26 +1227,26 @@ if (!customElements.get("sample-component")) {
 // src/web-components/wavelength-banner.ts
 var WavelengthBanner = class extends HTMLElement {
   static get observedAttributes() {
-    return ["header-text", "header-color", "text-color", "opacity", "z-index", "id"];
+    return ["banner-text", "banner-color", "text-color", "opacity", "z-index", "id", "classification", "control"];
   }
   constructor() {
     super();
     const shadow = this.attachShadow({ mode: "open" });
     const style3 = document.createElement("style");
     style3.textContent = `
-        :host {
-          display: block;
-          width: 100%;
-        }
-  
-        .banner {
-          width: 100%;
-          text-align: center;
-          font-weight: normal;
-          font-family: sans-serif;
-          font-size: 1rem;
-        }
-      `;
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      .banner {
+        width: 100%;
+        text-align: center;
+        font-weight: normal;
+        font-family: sans-serif;
+        font-size: 1rem;
+      }
+    `;
     this.container = document.createElement("div");
     this.container.classList.add("banner");
     this.textElement = document.createElement("p");
@@ -1261,18 +1261,76 @@ var WavelengthBanner = class extends HTMLElement {
     this.updateAttributes();
   }
   updateAttributes() {
-    const headerText = this.getAttribute("header-text") || "CLASSIFICATION//CONTROL";
-    const headerColor = this.getAttribute("header-color") || "#4373aa";
-    const textColor = this.getAttribute("text-color") || "#ffffff";
-    const opacity = this.getAttribute("opacity") || "1";
-    const zIndex = this.getAttribute("z-index") || "10";
-    const id = this.getAttribute("id");
-    this.container.style.backgroundColor = headerColor;
-    this.container.style.opacity = opacity;
-    this.container.style.zIndex = zIndex;
-    if (id) this.container.id = id;
-    this.textElement.textContent = headerText.toUpperCase();
-    this.textElement.style.color = textColor;
+    const classificationRaw = _optionalChain([this, 'access', _2 => _2.getAttribute, 'call', _3 => _3("classification"), 'optionalAccess', _4 => _4.toLowerCase, 'call', _5 => _5()]) || "";
+    const controlRaw = this.getAttribute("control") || "";
+    const controlList = controlRaw.split(",").map((s) => s.trim().toLowerCase()).filter(Boolean);
+    let bannerText = this.getAttribute("banner-text");
+    const bannerColor = this.getAttribute("banner-color");
+    const textColor = this.getAttribute("text-color");
+    const palette2 = {
+      primary: "#4373aa",
+      secondary: "#ffffff"
+    };
+    let effectiveClassification = classificationRaw;
+    let effectiveColor = palette2.primary;
+    let effectiveTextColor = palette2.secondary;
+    switch (classificationRaw) {
+      case "unclassified":
+      case "u":
+        if (controlRaw) {
+          effectiveColor = "#502b85";
+          effectiveTextColor = "white";
+        } else {
+          effectiveColor = "#007a33";
+          effectiveTextColor = "white";
+        }
+        break;
+      case "controlled":
+      case "controlled unclassified information":
+      case "cui":
+        effectiveColor = "#502b85";
+        effectiveTextColor = "white";
+        break;
+      case "confidential":
+      case "c":
+        effectiveColor = "#0033a0";
+        effectiveTextColor = "white";
+        break;
+      case "secret":
+      case "s":
+        effectiveColor = "#c8102e";
+        effectiveTextColor = "white";
+        break;
+      case "top secret":
+      case "ts":
+        if (controlList.includes("sci")) {
+          effectiveColor = "#fce83a";
+          effectiveTextColor = "black";
+        } else {
+          effectiveColor = "#ff8c00";
+          effectiveTextColor = "black";
+        }
+        break;
+      case "":
+        effectiveClassification = "CLASSIFICATION//CONTROL";
+        break;
+      default:
+        effectiveColor = palette2.primary;
+        effectiveTextColor = palette2.secondary;
+    }
+    if (!bannerText) {
+      if (controlList.length === 0) {
+        bannerText = effectiveClassification;
+      } else {
+        bannerText = `${effectiveClassification}//${controlList.join("/")}`;
+      }
+    }
+    this.container.style.backgroundColor = bannerColor || effectiveColor;
+    this.textElement.style.color = textColor || effectiveTextColor;
+    this.container.style.opacity = this.getAttribute("opacity") || "1";
+    this.container.style.zIndex = this.getAttribute("z-index") || "10";
+    if (this.getAttribute("id")) this.container.id = this.getAttribute("id");
+    this.textElement.textContent = bannerText.toUpperCase();
   }
 };
 if (!customElements.get("wavelength-banner")) {
@@ -1701,18 +1759,18 @@ var WavelengthTitleBar = class extends HTMLElement {
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue !== newValue) {
       if (name === "title-text") {
-        const titleElement = _optionalChain([this, 'access', _2 => _2.shadowRoot, 'optionalAccess', _3 => _3.querySelector, 'call', _4 => _4(".title")]);
+        const titleElement = _optionalChain([this, 'access', _6 => _6.shadowRoot, 'optionalAccess', _7 => _7.querySelector, 'call', _8 => _8(".title")]);
         if (titleElement) {
           titleElement.textContent = newValue;
         }
       } else if (name === "subtitle-text") {
-        const subtitleElement = _optionalChain([this, 'access', _5 => _5.shadowRoot, 'optionalAccess', _6 => _6.querySelector, 'call', _7 => _7(".subtitle")]);
+        const subtitleElement = _optionalChain([this, 'access', _9 => _9.shadowRoot, 'optionalAccess', _10 => _10.querySelector, 'call', _11 => _11(".subtitle")]);
         if (subtitleElement) {
           subtitleElement.textContent = newValue;
         }
       } else if (name === "text-color") {
-        const titleElement = _optionalChain([this, 'access', _8 => _8.shadowRoot, 'optionalAccess', _9 => _9.querySelector, 'call', _10 => _10(".title")]);
-        const subtitleElement = _optionalChain([this, 'access', _11 => _11.shadowRoot, 'optionalAccess', _12 => _12.querySelector, 'call', _13 => _13(".subtitle")]);
+        const titleElement = _optionalChain([this, 'access', _12 => _12.shadowRoot, 'optionalAccess', _13 => _13.querySelector, 'call', _14 => _14(".title")]);
+        const subtitleElement = _optionalChain([this, 'access', _15 => _15.shadowRoot, 'optionalAccess', _16 => _16.querySelector, 'call', _17 => _17(".subtitle")]);
         if (titleElement) {
           titleElement.style.color = newValue;
         }
@@ -1720,7 +1778,7 @@ var WavelengthTitleBar = class extends HTMLElement {
           subtitleElement.style.color = newValue;
         }
       } else if (name === "has-shadow") {
-        const titleElement = _optionalChain([this, 'access', _14 => _14.shadowRoot, 'optionalAccess', _15 => _15.querySelector, 'call', _16 => _16(".title")]);
+        const titleElement = _optionalChain([this, 'access', _18 => _18.shadowRoot, 'optionalAccess', _19 => _19.querySelector, 'call', _20 => _20(".title")]);
         if (titleElement) {
           titleElement.style.textShadow = newValue !== "false" ? "none" : "0.313rem 0.313rem 0.375rem #FFFFFF";
         }
@@ -1795,7 +1853,7 @@ var WavelengthButton2 = ({
     if (disabled) el.setAttribute("disabled", "");
     else el.removeAttribute("disabled");
     const handleClick = (e) => {
-      _optionalChain([onClick, 'optionalCall', _17 => _17(e)]);
+      _optionalChain([onClick, 'optionalCall', _21 => _21(e)]);
     };
     el.addEventListener("click", handleClick);
     return () => el.removeEventListener("click", handleClick);
@@ -5043,7 +5101,7 @@ function WavelengthSideBar({ sections, txtColor, bgColor, labelColor, arrowColor
           openSections[section.title] ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsmaterial.KeyboardArrowDownRounded, { sx: { color: arrowColor ? arrowColor : palette2.secondary } }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsmaterial.KeyboardArrowRightRounded, { sx: { color: arrowColor ? arrowColor : palette2.secondary } }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "h6", sx: { fontSize: 16, color: txtColor ? txtColor : palette2.secondary }, children: section.title })
         ] }),
-        _optionalChain([section, 'access', _18 => _18.subsections, 'optionalAccess', _19 => _19.length]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Collapse2.default, { in: openSections[section.title], timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _List2.default, { component: "div", disablePadding: true, sx: { paddingLeft: 4 }, children: section.subsections.map((subsection, subIndex) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, React2.default.Fragment, { children: [
+        _optionalChain([section, 'access', _22 => _22.subsections, 'optionalAccess', _23 => _23.length]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Collapse2.default, { in: openSections[section.title], timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _List2.default, { component: "div", disablePadding: true, sx: { paddingLeft: 4 }, children: section.subsections.map((subsection, subIndex) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, React2.default.Fragment, { children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _Typography2.default,
             {
@@ -5054,7 +5112,7 @@ function WavelengthSideBar({ sections, txtColor, bgColor, labelColor, arrowColor
                 paddingLeft: 0.75,
                 color: labelColor ? labelColor : palette2.secondary
               },
-              children: _optionalChain([subsection, 'access', _20 => _20.title, 'optionalAccess', _21 => _21.toUpperCase, 'call', _22 => _22()])
+              children: _optionalChain([subsection, 'access', _24 => _24.title, 'optionalAccess', _25 => _25.toUpperCase, 'call', _26 => _26()])
             }
           ),
           subsection.items && subsection.items.map((item, itemIndex) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -5284,7 +5342,7 @@ function WavelengthCommentDisplay(props) {
             {
               onClick: (e) => {
                 setSelected(!selected);
-                _optionalChain([props, 'access', _23 => _23.onClick, 'optionalCall', _24 => _24(e)]);
+                _optionalChain([props, 'access', _27 => _27.onClick, 'optionalCall', _28 => _28(e)]);
               },
               style: { padding: "0px" },
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckCircleOutline2.default, { fontSize: "small" })
@@ -5295,7 +5353,7 @@ function WavelengthCommentDisplay(props) {
             {
               onClick: (e) => {
                 setSelected(!selected);
-                _optionalChain([props, 'access', _25 => _25.onClick, 'optionalCall', _26 => _26(e)]);
+                _optionalChain([props, 'access', _29 => _29.onClick, 'optionalCall', _30 => _30(e)]);
               },
               style: { padding: "0px" },
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckCircle2.default, { fontSize: "small", sx: { color: props.iconSelectedColor || "rgba(209, 106, 47, 1)" } })
@@ -5688,18 +5746,20 @@ function WavelengthTitleBar2({ titleText, subtitleText, textColor, textShadow })
 // src/components/headers/WavelengthTitleBar/WavelengthBanner.tsx
 
 
-function WavelengthBanner2({ headerText = "CLASSIFICATION//CONTROL", headerColor = "#000000", textColor = "#FFFFFF", opacity = 1, zIndex = 10, id }) {
+function WavelengthBanner2({ bannerText, bannerColor, textColor, opacity = 1, zIndex = 10, id, classification, control }) {
   const ref = _react.useRef.call(void 0, null);
   _react.useEffect.call(void 0, () => {
-    if (ref.current) {
-      ref.current.setAttribute("header-text", headerText);
-      ref.current.setAttribute("header-color", headerColor);
-      ref.current.setAttribute("text-color", textColor);
-      ref.current.setAttribute("opacity", String(opacity));
-      ref.current.setAttribute("z-index", String(zIndex));
-      if (id) ref.current.setAttribute("id", id);
-    }
-  }, [headerText, headerColor, textColor, opacity, zIndex, id]);
+    if (!ref.current) return;
+    const el = ref.current;
+    if (bannerText !== void 0) el.setAttribute("banner-text", bannerText);
+    if (bannerColor !== void 0) el.setAttribute("banner-color", bannerColor);
+    if (textColor !== void 0) el.setAttribute("text-color", textColor);
+    if (classification !== void 0) el.setAttribute("classification", classification);
+    if (control !== void 0) el.setAttribute("control", String(control));
+    if (opacity !== void 0) el.setAttribute("opacity", String(opacity));
+    if (zIndex !== void 0) el.setAttribute("z-index", String(zIndex));
+    if (id) el.setAttribute("id", id);
+  }, [bannerText, bannerColor, textColor, classification, control, opacity, zIndex, id]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-banner", { ref });
 }
 
@@ -5836,8 +5896,8 @@ function WavelengthConfirmationModal(props) {
         overflow: "scroll"
       },
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: { margin: "0px", fontSize: "28px", fontWeight: 500, padding: "0px", marginBottom: "16px", fontFamily: props.fontFamily }, children: _optionalChain([props, 'access', _27 => _27.textObj, 'optionalAccess', _28 => _28.title]) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: { margin: "0px", fontSize: "16px", lineHeight: "19.2px", fontFamily: props.fontFamily, fontWeight: 400, height: "60px" }, children: _optionalChain([props, 'access', _29 => _29.textObj, 'optionalAccess', _30 => _30.dialog]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: { margin: "0px", fontSize: "28px", fontWeight: 500, padding: "0px", marginBottom: "16px", fontFamily: props.fontFamily }, children: _optionalChain([props, 'access', _31 => _31.textObj, 'optionalAccess', _32 => _32.title]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: { margin: "0px", fontSize: "16px", lineHeight: "19.2px", fontFamily: props.fontFamily, fontWeight: 400, height: "60px" }, children: _optionalChain([props, 'access', _33 => _33.textObj, 'optionalAccess', _34 => _34.dialog]) }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { display: "flex", flexDirection: "row", justifyContent: "flex-end", marginTop: "40px", gap: "8px" }, children: [
           props.cancelButton,
           props.submitButton
@@ -5858,11 +5918,11 @@ function WavelengthContentModal(props) {
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Dialog, { "data-testid": "testId-WavelengthContentModal", open: show, onClose: handleClose, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogTitle, { alignContent: `center`, id: "alert-dialog-title", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { display: "flex", alignItems: "center", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { flexGrow: 1, children: _optionalChain([props, 'access', _31 => _31.textObj, 'optionalAccess', _32 => _32.title]) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { flexGrow: 1, children: _optionalChain([props, 'access', _35 => _35.textObj, 'optionalAccess', _36 => _36.title]) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.IconButton, { onClick: handleClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Close2.default, {}) }) })
     ] }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { align: "center", children: _optionalChain([props, 'access', _33 => _33.textObj, 'optionalAccess', _34 => _34.dialog]) }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogActions, { style: { justifyContent: `center` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Button, { "data-testid": "testId-WavelengthContentModalConfirmButton", onClick: handleContentModalOnConfirmProp, color: "primary", variant: "contained", autoFocus: true, children: _optionalChain([props, 'access', _35 => _35.textObj, 'optionalAccess', _36 => _36.purpose]) }) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { align: "center", children: _optionalChain([props, 'access', _37 => _37.textObj, 'optionalAccess', _38 => _38.dialog]) }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogActions, { style: { justifyContent: `center` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Button, { "data-testid": "testId-WavelengthContentModalConfirmButton", onClick: handleContentModalOnConfirmProp, color: "primary", variant: "contained", autoFocus: true, children: _optionalChain([props, 'access', _39 => _39.textObj, 'optionalAccess', _40 => _40.purpose]) }) })
   ] });
 }
 
@@ -6076,7 +6136,7 @@ function WavelengthDropdown({
       borderBottomRightRadius: "8px",
       borderTopRightRadius: "0px",
       borderTopLeftRadius: "0px",
-      boxShadow: _optionalChain([menuSx, 'optionalAccess', _37 => _37.boxShadow]),
+      boxShadow: _optionalChain([menuSx, 'optionalAccess', _41 => _41.boxShadow]),
       width: myMenusx.width,
       backgroundColor: `${myMenusx.backgroundColor}`
     },
@@ -6859,7 +6919,7 @@ function WavelengthTextField(props) {
         label: props.label,
         onChange: (e) => {
           handleChange(e);
-          _optionalChain([props, 'access', _38 => _38.onChange, 'optionalCall', _39 => _39(e)]);
+          _optionalChain([props, 'access', _42 => _42.onChange, 'optionalCall', _43 => _43(e)]);
         },
         error: hasError,
         helperText: hasError ? props.errorMessage : "",
@@ -6910,7 +6970,7 @@ function WavelengthTextField(props) {
           error: hasError,
           onChange: (e) => {
             handleChange(e);
-            _optionalChain([props, 'access', _40 => _40.onChange, 'optionalCall', _41 => _41(e)]);
+            _optionalChain([props, 'access', _44 => _44.onChange, 'optionalCall', _45 => _45(e)]);
           }
         }
       ),
@@ -7099,7 +7159,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages }) => {
   const [noRowsOpen, setNoRowsOpen] = _react.useState.call(void 0, false);
   const [isModalOpen, setIsModalOpen] = _react.useState.call(void 0, false);
   const [searchItem, setSearchItem] = _react.useState.call(void 0, "");
-  const [selectedValue, setSelectedValue] = _react.useState.call(void 0, _optionalChain([columns, 'access', _42 => _42[0], 'optionalAccess', _43 => _43.key]) || "");
+  const [selectedValue, setSelectedValue] = _react.useState.call(void 0, _optionalChain([columns, 'access', _46 => _46[0], 'optionalAccess', _47 => _47.key]) || "");
   const [currentPage, setCurrentPage] = _react.useState.call(void 0, 1);
   const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
   const [editingMenuKey, setEditingMenuKey] = _react.useState.call(void 0, null);
@@ -7253,7 +7313,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages }) => {
       ] }, index)
     ] }, `headCell-${index}`);
   });
-  const rows = !_optionalChain([currentPageData, 'optionalAccess', _44 => _44.length]) || noRowsOpen ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([currentPageData, 'optionalAccess', _45 => _45.map, 'call', _46 => _46((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: columns.map((column, index2) => {
+  const rows = !_optionalChain([currentPageData, 'optionalAccess', _48 => _48.length]) || noRowsOpen ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([currentPageData, 'optionalAccess', _49 => _49.map, 'call', _50 => _50((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: columns.map((column, index2) => {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledTd, { children: editingId === item.id && editedColumnKey === column.key ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       StyledInput,
       {
@@ -7282,6 +7342,461 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages }) => {
   ] });
 };
 
+// src/components/DataTable/SubRowTable/ChildSubTable.tsx
+
+
+
+var downWardAnimation = _styledcomponents.keyframes`
+ 0% { top: -122px;  }
+ 100% { top: 0px;  }
+`;
+var disSubTableAnim = _styledcomponents.keyframes`
+0% { opacity: 0;  }
+ 25% { opacity: 0;  }
+ 50% { opacity: 0;  }
+ 60% { opacity: 0.2;  }
+ 75% { opacity: 0.8;  }
+ 100% { opacity: 1;  }
+`;
+var TableContainer = _styledcomponents2.default.div`
+  background-color: white;
+  width: 1200px;
+  border-radius: 16px;
+`;
+var TableRow = _styledcomponents2.default.div`
+  display: grid;
+  grid-template-columns: ${({ $amountofColumns }) => `repeat(${$amountofColumns}, 1fr)`};
+`;
+var TablePrimaryRow = _styledcomponents2.default.div`
+  display: grid;
+  grid-template-columns: ${({ $amountofColumns }) => `repeat(${$amountofColumns}, 1fr)`};
+  margin-bottom: 25px;
+`;
+var BodyRowContainer = _styledcomponents2.default.div`
+  border: 1px solid black;
+  background-color: white;
+  border-radius: 16px;
+  overflow: hidden;
+  margin-bottom: 10px;
+`;
+var TableHeaderCell = _styledcomponents2.default.div`
+  padding-left: 12px;
+  padding-right: 25px;
+`;
+var TableBodyCell = _styledcomponents2.default.div`
+  background-color: #fff;
+  color: black;
+  position: relative;
+  padding: 10px 5px 0px 20px;
+  text-wrap: balance;
+  font-size: ${(props) => props.$primaryBoldState ? "24px" : "16px"};
+  font-weight: ${(props) => props.$primaryBoldState ? "bold" : "normal"};
+`;
+var ButtonStylingRow = _styledcomponents2.default.div`
+  display: flex;
+  flex-direction: row;
+`;
+var BottomArrowBar = _styledcomponents2.default.div`
+  background-color: #e9e9e9;
+  text-align: center;
+`;
+var BottomUpArrowBar = _styledcomponents2.default.div`
+  background-color: #e9e9e9;
+  text-align: center;
+  position: relative;
+  animation: ${downWardAnimation} 1.5s;
+`;
+var SubDataTable = _styledcomponents2.default.table`
+  background-color: white;
+  color: black;
+  width: 100%;
+  border-collapse: collapse;
+  animation: ${disSubTableAnim} 1.5s;
+
+  line-height: 1.2;
+`;
+var SubDataTableHeaderRow = _styledcomponents2.default.tr`
+  height: 50px;
+  background-color: #304359;
+  color: white;
+  font-size: 16px;
+  font-weight: bold;
+
+  th {
+    white-space: nowrap;
+  }
+`;
+var SubDataTableBodyRow = _styledcomponents2.default.tbody`
+  font-size: 14px;
+`;
+var SubDataTableBodyRowContainer = _styledcomponents2.default.tr`
+  td {
+    padding: 10px 25px 10px 20px;
+  }
+
+  &:nth-child(even) {
+    background-color: #96e0e5;
+  }
+`;
+var SubDataTableCell = _styledcomponents2.default.td`
+  text-align: center;
+`;
+var SubDataHeaderColumn = _styledcomponents2.default.thead`
+  background-color: #304359;
+`;
+var SortButton = _styledcomponents2.default.button`
+  font-size: 16px;
+  font-weight: bold;
+  color: ${(props) => props.$sortColor};
+  background-color: #11ffee00;
+  border: none;
+  white-space: nowrap;
+`;
+var DownloadMissionButton = _styledcomponents2.default.button`
+  width: 217px;
+  height: 45px;
+  padding: 12px 32px 12px 32px;
+  background-color: #1a8083cc;
+  color: white;
+
+  margin-left: 22px;
+  margin-bottom: 15px;
+  margin-top: 10px;
+  white-space: nowrap;
+  border: none;
+  border-radius: 8px;
+  gap: 4px;
+
+  font-weight: 600;
+  font-size: 16px;
+
+  &:hover {
+    background-color: rgba(38, 186, 190, 1);
+    color: rgba(247, 247, 249, 1);
+    cursor: pointer;
+  }
+
+  &:active {
+    background-color: #67a8aa;
+    transition: background-color 0.2s ease;
+  }
+`;
+var AddButton = _styledcomponents2.default.button`
+  width: 130px;
+  height: 45px;
+  border: 1px solid #1a8083;
+
+  padding: 12px 32px 12px 32px;
+  gap: 4px;
+  background-color: white;
+  color: #1a8083cc;
+
+  margin-left: 22px;
+  margin-bottom: 15px;
+  margin-top: 10px;
+  white-space: nowrap;
+  border-radius: 8px;
+
+  font-weight: 600;
+  font-size: 16px;
+
+  &:hover {
+    background-color: rgba(26, 128, 131, 0.1);
+    color: rgba(26, 128, 131, 1);
+    cursor: pointer;
+  }
+
+  &:active {
+    background-color: #bad7da;
+    transition: background-color 0.2s ease;
+  }
+`;
+var DownloadArrow = _styledcomponents2.default.button`
+  background-color: transparent;
+  border: none;
+
+  &:active {
+    transform: scale(0.95);
+  }
+`;
+var ChildDataTable = ({ data, columns, downloadArrowOnClick }) => {
+  const HeadColumns = columns.filter((col) => col.subDataTableColumn === false);
+  const SubDataColumns = columns.filter((col) => col.subDataTableColumn === true);
+  const [openRow, setOpenRow] = _react.useState.call(void 0, null);
+  const [sortOrder, setSortOrder] = _react.useState.call(void 0, "asc");
+  const [sortKey, setSortKey] = _react.useState.call(void 0, "");
+  const [sortSubOrder, setSortSubOrder] = _react.useState.call(void 0, "asc");
+  const [sortSubKey, setSortSubKey] = _react.useState.call(void 0, "");
+  const toggleSortOrder = (key) => {
+    setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+    setSortKey(key);
+  };
+  const toggleSubSortOrder = (key) => {
+    setSortSubOrder(sortSubOrder === "asc" ? "desc" : "asc");
+    setSortSubKey(key);
+  };
+  const toggleDropdown = (id) => {
+    setOpenRow(openRow === id ? null : id);
+  };
+  const toggleUpward = () => {
+    setOpenRow(null);
+  };
+  function trimBeforePeriod2(text) {
+    const index = text.indexOf(".");
+    return index === -1 ? text : text.substring(index + 1);
+  }
+  const processedRowData = _react.useMemo.call(void 0, () => {
+    const result = [..._nullishCoalesce(data, () => ( []))];
+    if (sortOrder) {
+      result.sort((a, b) => {
+        const valueA = a[sortKey];
+        const valueB = b[sortKey];
+        if (typeof valueA === "string" && typeof valueB === "string") {
+          if (sortOrder === "asc") {
+            return valueA.localeCompare(valueB);
+          } else {
+            return valueB.localeCompare(valueA);
+          }
+        } else if (typeof valueA === "number" && typeof valueB === "number") {
+          if (sortOrder === "asc") {
+            return valueA - valueB;
+          } else {
+            return valueB - valueA;
+          }
+        } else {
+          return 0;
+        }
+      });
+    }
+    if (sortSubOrder) {
+      result.map(
+        (item) => _optionalChain([item, 'access', _51 => _51.Details, 'optionalAccess', _52 => _52.fileObjects, 'access', _53 => _53.sort, 'call', _54 => _54((c, d) => {
+          const valueC = c[sortSubKey];
+          const valueD = d[sortSubKey];
+          if (typeof valueC === "string" && typeof valueD === "string") {
+            if (sortSubOrder === "asc") {
+              return valueC.localeCompare(valueD);
+            } else {
+              return valueD.localeCompare(valueC);
+            }
+          } else if (typeof valueC === "number" && typeof valueD === "number") {
+            if (sortSubOrder === "asc") {
+              return valueC - valueD;
+            } else {
+              return valueD - valueC;
+            }
+          } else {
+            return 0;
+          }
+        })])
+      );
+    }
+    return result;
+  }, [data, sortKey, sortOrder, sortSubKey, sortSubOrder]);
+  const renderSortButton = (column, sortOrder2, sortKey2) => {
+    return sortKey2 === column.key ? sortOrder2 === "asc" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+      column.title,
+      " ",
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M13.2375 0.368774L7.5 6.09377L1.7625 0.368774L0 2.13127L7.5 9.63127L15 2.13127L13.2375 0.368774Z", fill: "black" }) })
+    ] }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+      column.title,
+      " ",
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M13.2375 9.2627L7.5 3.5377L1.7625 9.2627L0 7.5002L7.5 0.000196457L15 7.5002L13.2375 9.2627Z", fill: "black" }) })
+    ] }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+      column.title,
+      " ",
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M13.2375 0.368774L7.5 6.09377L1.7625 0.368774L0 2.13127L7.5 9.63127L15 2.13127L13.2375 0.368774Z", fill: "black" }) })
+    ] }) });
+  };
+  const renderSortSubButton = (column, sortSubOrder2, sortSubKey2) => {
+    const columnKey = trimBeforePeriod2(column.key);
+    return sortSubKey2 === columnKey ? sortSubOrder2 === "asc" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+      column.title,
+      " ",
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M13.2375 0.368774L7.5 6.09377L1.7625 0.368774L0 2.13127L7.5 9.63127L15 2.13127L13.2375 0.368774Z", fill: "white" }) })
+    ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+      column.title,
+      " ",
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M13.2375 9.2627L7.5 3.5377L1.7625 9.2627L0 7.5002L7.5 0.000196457L15 7.5002L13.2375 9.2627Z", fill: "white" }) })
+    ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+      column.title,
+      " ",
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M13.2375 0.368774L7.5 6.09377L1.7625 0.368774L0 2.13127L7.5 9.63127L15 2.13127L13.2375 0.368774Z", fill: "white" }) })
+    ] });
+  };
+  const headers = HeadColumns.map((column) => {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TableHeaderCell, { children: renderSortButton(column, sortOrder, sortKey) }, `HeaderCell-${column.key}`);
+  });
+  const SubDataHeaders = SubDataColumns.map((column, index) => {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { children: renderSortSubButton(column, sortSubOrder, sortSubKey) }, `SubHeadCell-${index}`);
+  });
+  const subDataRows = (itemId) => {
+    return processedRowData.filter((item) => _optionalChain([item, 'access', _55 => _55.Details, 'optionalAccess', _56 => _56.relationId]) === itemId).map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _optionalChain([item, 'access', _57 => _57.Details, 'optionalAccess', _58 => _58.fileObjects, 'access', _59 => _59.map, 'call', _60 => _60((fileItem, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SubDataTableBodyRowContainer, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DownloadArrow, { onClick: downloadArrowOnClick, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          d: "M8.5 12L3.5 7L4.9 5.55L7.5 8.15V0H9.5V8.15L12.1 5.55L13.5 7L8.5 12ZM2.5 16C1.95 16 1.47917 15.8042 1.0875 15.4125C0.695833 15.0208 0.5 14.55 0.5 14V11H2.5V14H14.5V11H16.5V14C16.5 14.55 16.3042 15.0208 15.9125 15.4125C15.5208 15.8042 15.05 16 14.5 16H2.5Z",
+          fill: "#1C1B1F"
+        }
+      ) }) }) }, `td-${_optionalChain([item, 'access', _61 => _61.Details, 'optionalAccess', _62 => _62.relationId])}-${fileItem.id}`),
+      SubDataColumns.map((column) => {
+        const columnKey = trimBeforePeriod2(column.key);
+        const value = fileItem[columnKey];
+        if (value !== void 0) {
+          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTableCell, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: value }, `span-${_optionalChain([item, 'access', _63 => _63.Details, 'optionalAccess', _64 => _64.relationId])}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${_optionalChain([item, 'access', _65 => _65.Details, 'optionalAccess', _66 => _66.relationId])}-${fileItem.id}-${index}-${column.title}`);
+        }
+      })
+    ] }, `${item}-${_optionalChain([item, 'access', _67 => _67.Details, 'optionalAccess', _68 => _68.relationId])}-${fileItem.id}-${index}`))]) }, `SDR-${item.id}-${_optionalChain([item, 'access', _69 => _69.Details, 'optionalAccess', _70 => _70.relationId])}`));
+  };
+  const dataRows = _optionalChain([processedRowData, 'optionalAccess', _71 => _71.map, 'call', _72 => _72((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, BodyRowContainer, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TableRow, { $amountofColumns: HeadColumns.length, children: HeadColumns.map((column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TableBodyCell, { $primaryBoldState: column.PrimaryBoldText, children: item[column.key] }, `TableBodycell-${item.id}-${column.key}`)) }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ButtonStylingRow, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DownloadMissionButton, { children: "Download Mission" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddButton, { children: "Add files" })
+    ] }),
+    openRow !== item.id && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BottomArrowBar, { onClick: () => toggleDropdown(item.id), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M64 0L44 6L24 0H0L44 14L92 0H64Z", fill: "#7A7A7A" }) }) }),
+    openRow === item.id && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SubDataTable, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataHeaderColumn, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SubDataTableHeaderRow, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", {}),
+          SubDataHeaders
+        ] }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTableBodyRow, { children: subDataRows(item.id) })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BottomUpArrowBar, { onClick: () => toggleUpward(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M64 14L44 8L24 14H0L44 0L92 14H64Z", fill: "#7A7A7A" }) }) })
+    ] })
+  ] }, `Bodycontainer-${item.id}-${index}`))]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, TableContainer, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TablePrimaryRow, { $amountofColumns: HeadColumns.length, children: headers }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { title: "tablebodies", children: dataRows })
+  ] });
+};
+
+// src/components/DataTable/NestedDataTable/NestedDataTable.tsx
+
+
+
+var TableStyle = _styledcomponents2.default.table`
+  width: 100%;
+  height: 100%;
+  border-collapse: collapse;
+  color: black;
+  text-align: center;
+
+  thead {
+    background-color: black;
+    color: white;
+  }
+
+  margin-left: auto;
+  margin-right: auto;
+  position: absolute;
+`;
+var MainThHeaders = _styledcomponents2.default.th`
+  &:not(:last-child) {
+    border-right: 1px solid #c6c7cc;
+  }
+`;
+var SubDataTr = _styledcomponents2.default.tr`
+  background-color: white;
+
+  &:nth-child(even) {
+    background-color: #e0ffff;
+  }
+`;
+var PrimaryTrRows = _styledcomponents2.default.tr`
+  background-color: ${(props) => props.$index % 2 === 0 ? "white" : "#e0ffff"};
+`;
+var SubTrRows = _styledcomponents2.default.tr`
+  background-color: ${(props) => props.$index % 2 === 0 ? "white" : "#e0ffff"};
+  height: 120px;
+`;
+var SubTableStyle = _styledcomponents2.default.table`
+  width: 95%;
+  border-collapse: collapse;
+  margin-top: -15px;
+  margin-left: auto;
+  margin-right: auto;
+
+  td {
+    &:not(:last-child) {
+      border-right: 1px solid black;
+    }
+  }
+
+  th {
+    background-color: #065465;
+    &:not(:last-child) {
+      border-right: 1px solid #c6c7cc;
+    }
+  }
+`;
+var DropdownButton = _styledcomponents2.default.button`
+  background-color: transparent;
+  background-repeat: no-repeat;
+  border: none;
+  cursor: pointer;
+  overflow: hidden;
+  outline: none;
+  font-weight: bold; /* This makes the UTF symbols bold */
+  font-size: 20px;
+`;
+var PrimaryTdSpan = _styledcomponents2.default.td`
+  &:not(:last-child) {
+    border-right: 1px solid black;
+  }
+`;
+function trimBeforePeriod(text) {
+  const index = text.indexOf(".");
+  return index === -1 ? text : text.substring(index + 1);
+}
+var NestedDataTable = ({ data, columns }) => {
+  const HeadColumns = columns.filter((col) => col.subDataTableColumn === false);
+  const SubDataColumns = columns.filter((col) => col.subDataTableColumn === true);
+  const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
+  const [isAscending, setIsAscending] = _react.useState.call(void 0, false);
+  const [primaryRowIndex, setPrimaryRowIndex] = _react.useState.call(void 0, null);
+  const toggleDropdown = (rowIndex) => {
+    setIsOpen(!isOpen);
+    setIsAscending(!isAscending);
+    setPrimaryRowIndex(rowIndex);
+  };
+  const headers = HeadColumns.map((column, index) => {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MainThHeaders, { children: column.title }, `headCell-${index}`);
+  });
+  const SubDataHeaders = SubDataColumns.map((column, index) => {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { children: column.title }, `SubHeadCell-${index}`);
+  });
+  const subDataRows = !_optionalChain([data, 'optionalAccess', _73 => _73.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoSubDataRows", colSpan: columns.length, children: "No data" }) }) : data.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTr, { children: SubDataColumns.map((column, colIndex) => {
+    const columnKey = trimBeforePeriod(column.key);
+    const value = _optionalChain([item, 'access', _74 => _74.Details, 'optionalAccess', _75 => _75[columnKey]]);
+    console.log("value: ", value);
+    if (value !== void 0) {
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: value }) }, `Span-${item.id}-${colIndex}`);
+    }
+  }) }, `Sub-${item.id}-${index}`) }));
+  const childRows = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SubTableStyle, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: SubDataHeaders }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: subDataRows })
+  ] });
+  const rows = !_optionalChain([data, 'optionalAccess', _76 => _76.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([data, 'optionalAccess', _77 => _77.map, 'call', _78 => _78((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PrimaryTrRows, { $index: index, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownButton, { onClick: () => toggleDropdown(index), children: isAscending && isOpen && primaryRowIndex === index ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: "\u2227" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: "\u2228" }) }),
+      HeadColumns.map((column, index2) => {
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PrimaryTdSpan, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { title: `spanRow-${item.id}-${column.key}-${index2}`, children: item[column.key] }) }, `${item.id}-${index}=${index2}`);
+      })
+    ] }, index),
+    isOpen && primaryRowIndex === index && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubTrRows, { $index: index, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { colSpan: HeadColumns.length + 1, children: childRows }) }, index)
+  ] }))]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, TableStyle, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { title: "dropdownth" }),
+      headers
+    ] }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: rows })
+  ] }) });
+};
+
 // src/components/samples/SampleComponent.tsx
 
 
@@ -7353,7 +7868,9 @@ var SampleComponent2 = ({
 
 
 
-exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.DefaultCarousel = DefaultCarousel; exports.DefaultPagination = DefaultPagination; exports.SampleComponent = SampleComponent2; exports.SliderCardCarousel = SliderCardCarousel; exports.WavelengthAccessAlert = WavelengthAccessAlert; exports.WavelengthAlert = WavelengthAlert; exports.WavelengthAppLogo = WavelengthAppLogo; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner2; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton2; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDataTable = WavelengthDataTable; exports.WavelengthDefaultIcon = WavelengthDefaultIcon; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthNotAvailablePage = WavelengthNotAvailablePage; exports.WavelengthPermissionAlert = WavelengthPermissionAlert; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar2; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSearchTextField = WavelengthSearchTextField; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthTestSnackbar = WavelengthTestSnackbar; exports.WavelengthTextField = WavelengthTextField; exports.WavelengthTitleBar = WavelengthTitleBar2; exports.add = add; exports.ascendingRange = ascendingRange; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.range = range; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
+
+
+exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.ChildDataTable = ChildDataTable; exports.DefaultCarousel = DefaultCarousel; exports.DefaultPagination = DefaultPagination; exports.NestedDataTable = NestedDataTable; exports.SampleComponent = SampleComponent2; exports.SliderCardCarousel = SliderCardCarousel; exports.WavelengthAccessAlert = WavelengthAccessAlert; exports.WavelengthAlert = WavelengthAlert; exports.WavelengthAppLogo = WavelengthAppLogo; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner2; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton2; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDataTable = WavelengthDataTable; exports.WavelengthDefaultIcon = WavelengthDefaultIcon; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthNotAvailablePage = WavelengthNotAvailablePage; exports.WavelengthPermissionAlert = WavelengthPermissionAlert; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar2; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSearchTextField = WavelengthSearchTextField; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthTestSnackbar = WavelengthTestSnackbar; exports.WavelengthTextField = WavelengthTextField; exports.WavelengthTitleBar = WavelengthTitleBar2; exports.add = add; exports.ascendingRange = ascendingRange; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.range = range; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
 /*! Bundled license information:
 
 react-is/cjs/react-is.production.min.js: