@wavelengthusaf/components 3.0.3 → 3.1.0

package/dist/cjs/index.d.cts

@@ -562,13 +562,64 @@ interface TextFieldProps {
 }
 declare function WavelengthTextField(props: TextFieldProps): react_jsx_runtime.JSX.Element | null;
 
+interface DataType$2 {
+    id: number;
+    [key: string]: any;
+}
+interface ColumnProps$2<T> {
+    key: string;
+    title: string | ReactElement;
+    width?: string;
+    editable?: boolean;
+    render?: (column: ColumnProps$2<T>, item: T) => ReactElement;
+}
+type Props$2<T> = {
+    columns: Array<ColumnProps$2<T>>;
+    data?: T[] | undefined;
+    itemsPerPage: number;
+    totalPages: number;
+};
+declare const WavelengthDataTable: <T extends DataType$2>({ data, columns, itemsPerPage, totalPages }: Props$2<T>) => react_jsx_runtime.JSX.Element;
+
+interface fileObject {
+    id: number;
+    [key: string]: any;
+}
+interface Details$1 {
+    relationId: number;
+    fileObjects: fileObject[];
+}
+interface DataType$1 {
+    id: number;
+    [key: string]: any;
+    Details?: Details$1;
+}
+interface ColumnProps$1 {
+    key: string;
+    title: string | ReactElement;
+    subDataTableColumn: boolean;
+    PrimaryBoldText?: boolean;
+}
+type Props$1<T> = {
+    columns: Array<ColumnProps$1>;
+    data?: T[] | undefined;
+    downloadArrowOnClick?: () => void;
+};
+declare const ChildDataTable: <T extends DataType$1>({ data, columns, downloadArrowOnClick }: Props$1<T>) => react_jsx_runtime.JSX.Element;
+
+interface Details {
+    relationId: number;
+    [key: string]: any;
+}
 interface DataType {
     id: number;
     [key: string]: any;
+    Details?: Details;
 }
 interface ColumnProps<T> {
     key: string;
     title: string | ReactElement;
+    subDataTableColumn: boolean;
     width?: string;
     editable?: boolean;
     render?: (column: ColumnProps<T>, item: T) => ReactElement;
@@ -576,14 +627,12 @@ interface ColumnProps<T> {
 type Props<T> = {
     columns: Array<ColumnProps<T>>;
     data?: T[] | undefined;
-    itemsPerPage: number;
-    totalPages: number;
 };
-declare const WavelengthDataTable: <T extends DataType>({ data, columns, itemsPerPage, totalPages }: Props<T>) => react_jsx_runtime.JSX.Element;
+declare const NestedDataTable: <T extends DataType>({ data, columns }: Props<T>) => react_jsx_runtime.JSX.Element;
 
 interface SampleComponentProps extends React__default.HTMLAttributes<HTMLElement> {
     testProp?: string;
 }
 declare const SampleComponent: React__default.FC<SampleComponentProps>;
 
-export { ButtonIcon, ButtonMenu, DefaultCarousel, DefaultPagination, SampleComponent, type SearchProps, type SearchResult, SliderCardCarousel, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutocomplete, WavelengthBanner, type WavelengthBannerProps, WavelengthBox, WavelengthButton, type WavelengthButtonProps, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDefaultIcon, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthManyPlanes, WavelengthNotAvailablePage, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, type WavelengthProgressBarProps, WavelengthSearch, WavelengthSearchTextField, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTestSnackbar, WavelengthTextField, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };
+export { ButtonIcon, ButtonMenu, ChildDataTable, DefaultCarousel, DefaultPagination, NestedDataTable, SampleComponent, type SearchProps, type SearchResult, SliderCardCarousel, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutocomplete, WavelengthBanner, type WavelengthBannerProps, WavelengthBox, WavelengthButton, type WavelengthButtonProps, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDefaultIcon, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthManyPlanes, WavelengthNotAvailablePage, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, type WavelengthProgressBarProps, WavelengthSearch, WavelengthSearchTextField, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTestSnackbar, WavelengthTextField, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };

package/dist/esm/index.d.ts

@@ -562,13 +562,64 @@ interface TextFieldProps {
 }
 declare function WavelengthTextField(props: TextFieldProps): react_jsx_runtime.JSX.Element | null;
 
+interface DataType$2 {
+    id: number;
+    [key: string]: any;
+}
+interface ColumnProps$2<T> {
+    key: string;
+    title: string | ReactElement;
+    width?: string;
+    editable?: boolean;
+    render?: (column: ColumnProps$2<T>, item: T) => ReactElement;
+}
+type Props$2<T> = {
+    columns: Array<ColumnProps$2<T>>;
+    data?: T[] | undefined;
+    itemsPerPage: number;
+    totalPages: number;
+};
+declare const WavelengthDataTable: <T extends DataType$2>({ data, columns, itemsPerPage, totalPages }: Props$2<T>) => react_jsx_runtime.JSX.Element;
+
+interface fileObject {
+    id: number;
+    [key: string]: any;
+}
+interface Details$1 {
+    relationId: number;
+    fileObjects: fileObject[];
+}
+interface DataType$1 {
+    id: number;
+    [key: string]: any;
+    Details?: Details$1;
+}
+interface ColumnProps$1 {
+    key: string;
+    title: string | ReactElement;
+    subDataTableColumn: boolean;
+    PrimaryBoldText?: boolean;
+}
+type Props$1<T> = {
+    columns: Array<ColumnProps$1>;
+    data?: T[] | undefined;
+    downloadArrowOnClick?: () => void;
+};
+declare const ChildDataTable: <T extends DataType$1>({ data, columns, downloadArrowOnClick }: Props$1<T>) => react_jsx_runtime.JSX.Element;
+
+interface Details {
+    relationId: number;
+    [key: string]: any;
+}
 interface DataType {
     id: number;
     [key: string]: any;
+    Details?: Details;
 }
 interface ColumnProps<T> {
     key: string;
     title: string | ReactElement;
+    subDataTableColumn: boolean;
     width?: string;
     editable?: boolean;
     render?: (column: ColumnProps<T>, item: T) => ReactElement;
@@ -576,14 +627,12 @@ interface ColumnProps<T> {
 type Props<T> = {
     columns: Array<ColumnProps<T>>;
     data?: T[] | undefined;
-    itemsPerPage: number;
-    totalPages: number;
 };
-declare const WavelengthDataTable: <T extends DataType>({ data, columns, itemsPerPage, totalPages }: Props<T>) => react_jsx_runtime.JSX.Element;
+declare const NestedDataTable: <T extends DataType>({ data, columns }: Props<T>) => react_jsx_runtime.JSX.Element;
 
 interface SampleComponentProps extends React__default.HTMLAttributes<HTMLElement> {
     testProp?: string;
 }
 declare const SampleComponent: React__default.FC<SampleComponentProps>;
 
-export { ButtonIcon, ButtonMenu, DefaultCarousel, DefaultPagination, SampleComponent, type SearchProps, type SearchResult, SliderCardCarousel, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutocomplete, WavelengthBanner, type WavelengthBannerProps, WavelengthBox, WavelengthButton, type WavelengthButtonProps, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDefaultIcon, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthManyPlanes, WavelengthNotAvailablePage, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, type WavelengthProgressBarProps, WavelengthSearch, WavelengthSearchTextField, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTestSnackbar, WavelengthTextField, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };
+export { ButtonIcon, ButtonMenu, ChildDataTable, DefaultCarousel, DefaultPagination, NestedDataTable, SampleComponent, type SearchProps, type SearchResult, SliderCardCarousel, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutocomplete, WavelengthBanner, type WavelengthBannerProps, WavelengthBox, WavelengthButton, type WavelengthButtonProps, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDefaultIcon, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthManyPlanes, WavelengthNotAvailablePage, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, type WavelengthProgressBarProps, WavelengthSearch, WavelengthSearchTextField, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTestSnackbar, WavelengthTextField, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };

package/dist/esm/index.js

@@ -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;
@@ -7342,16 +7342,471 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages }) => {
   ] });
 };
 
+// src/components/DataTable/SubRowTable/ChildSubTable.tsx
+import { useMemo as useMemo3, useState as useState11, Fragment as Fragment14 } from "react";
+import styled12, { keyframes as keyframes2 } from "styled-components";
+import { Fragment as Fragment15, jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
+var downWardAnimation = keyframes2`
+ 0% { top: -122px;  }
+ 100% { top: 0px;  }
+`;
+var disSubTableAnim = keyframes2`
+0% { opacity: 0;  }
+ 25% { opacity: 0;  }
+ 50% { opacity: 0;  }
+ 60% { opacity: 0.2;  }
+ 75% { opacity: 0.8;  }
+ 100% { opacity: 1;  }
+`;
+var TableContainer = styled12.div`
+  background-color: white;
+  width: 1200px;
+  border-radius: 16px;
+`;
+var TableRow = styled12.div`
+  display: grid;
+  grid-template-columns: ${({ $amountofColumns }) => `repeat(${$amountofColumns}, 1fr)`};
+`;
+var TablePrimaryRow = styled12.div`
+  display: grid;
+  grid-template-columns: ${({ $amountofColumns }) => `repeat(${$amountofColumns}, 1fr)`};
+  margin-bottom: 25px;
+`;
+var BodyRowContainer = styled12.div`
+  border: 1px solid black;
+  background-color: white;
+  border-radius: 16px;
+  overflow: hidden;
+  margin-bottom: 10px;
+`;
+var TableHeaderCell = styled12.div`
+  padding-left: 12px;
+  padding-right: 25px;
+`;
+var TableBodyCell = styled12.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 = styled12.div`
+  display: flex;
+  flex-direction: row;
+`;
+var BottomArrowBar = styled12.div`
+  background-color: #e9e9e9;
+  text-align: center;
+`;
+var BottomUpArrowBar = styled12.div`
+  background-color: #e9e9e9;
+  text-align: center;
+  position: relative;
+  animation: ${downWardAnimation} 1.5s;
+`;
+var SubDataTable = styled12.table`
+  background-color: white;
+  color: black;
+  width: 100%;
+  border-collapse: collapse;
+  animation: ${disSubTableAnim} 1.5s;
+
+  line-height: 1.2;
+`;
+var SubDataTableHeaderRow = styled12.tr`
+  height: 50px;
+  background-color: #304359;
+  color: white;
+  font-size: 16px;
+  font-weight: bold;
+
+  th {
+    white-space: nowrap;
+  }
+`;
+var SubDataTableBodyRow = styled12.tbody`
+  font-size: 14px;
+`;
+var SubDataTableBodyRowContainer = styled12.tr`
+  td {
+    padding: 10px 25px 10px 20px;
+  }
+
+  &:nth-child(even) {
+    background-color: #96e0e5;
+  }
+`;
+var SubDataTableCell = styled12.td`
+  text-align: center;
+`;
+var SubDataHeaderColumn = styled12.thead`
+  background-color: #304359;
+`;
+var SortButton = styled12.button`
+  font-size: 16px;
+  font-weight: bold;
+  color: ${(props) => props.$sortColor};
+  background-color: #11ffee00;
+  border: none;
+  white-space: nowrap;
+`;
+var DownloadMissionButton = styled12.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 = styled12.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 = styled12.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] = useState11(null);
+  const [sortOrder, setSortOrder] = useState11("asc");
+  const [sortKey, setSortKey] = useState11("");
+  const [sortSubOrder, setSortSubOrder] = useState11("asc");
+  const [sortSubKey, setSortSubKey] = useState11("");
+  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 = useMemo3(() => {
+    const result = [...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) => item.Details?.fileObjects.sort((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__ */ jsx42(Fragment15, { children: /* @__PURE__ */ jsxs32(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+      column.title,
+      " ",
+      /* @__PURE__ */ jsx42("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx42("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__ */ jsx42(Fragment15, { children: /* @__PURE__ */ jsxs32(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+      column.title,
+      " ",
+      /* @__PURE__ */ jsx42("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx42("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__ */ jsx42(Fragment15, { children: /* @__PURE__ */ jsxs32(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+      column.title,
+      " ",
+      /* @__PURE__ */ jsx42("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx42("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__ */ jsxs32(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+      column.title,
+      " ",
+      /* @__PURE__ */ jsx42("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx42("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__ */ jsxs32(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+      column.title,
+      " ",
+      /* @__PURE__ */ jsx42("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx42("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__ */ jsxs32(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+      column.title,
+      " ",
+      /* @__PURE__ */ jsx42("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx42("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__ */ jsx42(TableHeaderCell, { children: renderSortButton(column, sortOrder, sortKey) }, `HeaderCell-${column.key}`);
+  });
+  const SubDataHeaders = SubDataColumns.map((column, index) => {
+    return /* @__PURE__ */ jsx42("th", { children: renderSortSubButton(column, sortSubOrder, sortSubKey) }, `SubHeadCell-${index}`);
+  });
+  const subDataRows = (itemId) => {
+    return processedRowData.filter((item) => item.Details?.relationId === itemId).map((item) => /* @__PURE__ */ jsx42(Fragment14, { children: item.Details?.fileObjects.map((fileItem, index) => /* @__PURE__ */ jsxs32(SubDataTableBodyRowContainer, { children: [
+      /* @__PURE__ */ jsx42("td", { children: /* @__PURE__ */ jsx42(DownloadArrow, { onClick: downloadArrowOnClick, children: /* @__PURE__ */ jsx42("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx42(
+        "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-${item.Details?.relationId}-${fileItem.id}`),
+      SubDataColumns.map((column) => {
+        const columnKey = trimBeforePeriod2(column.key);
+        const value = fileItem[columnKey];
+        if (value !== void 0) {
+          return /* @__PURE__ */ jsx42(SubDataTableCell, { children: /* @__PURE__ */ jsx42("span", { children: value }, `span-${item.Details?.relationId}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${item.Details?.relationId}-${fileItem.id}-${index}-${column.title}`);
+        }
+      })
+    ] }, `${item}-${item.Details?.relationId}-${fileItem.id}-${index}`)) }, `SDR-${item.id}-${item.Details?.relationId}`));
+  };
+  const dataRows = processedRowData?.map((item, index) => /* @__PURE__ */ jsxs32(BodyRowContainer, { children: [
+    /* @__PURE__ */ jsx42(TableRow, { $amountofColumns: HeadColumns.length, children: HeadColumns.map((column) => /* @__PURE__ */ jsx42(TableBodyCell, { $primaryBoldState: column.PrimaryBoldText, children: item[column.key] }, `TableBodycell-${item.id}-${column.key}`)) }),
+    /* @__PURE__ */ jsxs32(ButtonStylingRow, { children: [
+      /* @__PURE__ */ jsx42(DownloadMissionButton, { children: "Download Mission" }),
+      /* @__PURE__ */ jsx42(AddButton, { children: "Add files" })
+    ] }),
+    openRow !== item.id && /* @__PURE__ */ jsx42(BottomArrowBar, { onClick: () => toggleDropdown(item.id), children: /* @__PURE__ */ jsx42("svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx42("path", { d: "M64 0L44 6L24 0H0L44 14L92 0H64Z", fill: "#7A7A7A" }) }) }),
+    openRow === item.id && /* @__PURE__ */ jsxs32("div", { children: [
+      /* @__PURE__ */ jsxs32(SubDataTable, { children: [
+        /* @__PURE__ */ jsx42(SubDataHeaderColumn, { children: /* @__PURE__ */ jsxs32(SubDataTableHeaderRow, { children: [
+          /* @__PURE__ */ jsx42("th", {}),
+          SubDataHeaders
+        ] }) }),
+        /* @__PURE__ */ jsx42(SubDataTableBodyRow, { children: subDataRows(item.id) })
+      ] }),
+      /* @__PURE__ */ jsx42(BottomUpArrowBar, { onClick: () => toggleUpward(), children: /* @__PURE__ */ jsx42("svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx42("path", { d: "M64 14L44 8L24 14H0L44 0L92 14H64Z", fill: "#7A7A7A" }) }) })
+    ] })
+  ] }, `Bodycontainer-${item.id}-${index}`));
+  return /* @__PURE__ */ jsxs32(TableContainer, { children: [
+    /* @__PURE__ */ jsx42(TablePrimaryRow, { $amountofColumns: HeadColumns.length, children: headers }),
+    /* @__PURE__ */ jsx42("div", { title: "tablebodies", children: dataRows })
+  ] });
+};
+
+// src/components/DataTable/NestedDataTable/NestedDataTable.tsx
+import { useState as useState12 } from "react";
+import styled13 from "styled-components";
+import { Fragment as Fragment16, jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
+var TableStyle = styled13.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 = styled13.th`
+  &:not(:last-child) {
+    border-right: 1px solid #c6c7cc;
+  }
+`;
+var SubDataTr = styled13.tr`
+  background-color: white;
+
+  &:nth-child(even) {
+    background-color: #e0ffff;
+  }
+`;
+var PrimaryTrRows = styled13.tr`
+  background-color: ${(props) => props.$index % 2 === 0 ? "white" : "#e0ffff"};
+`;
+var SubTrRows = styled13.tr`
+  background-color: ${(props) => props.$index % 2 === 0 ? "white" : "#e0ffff"};
+  height: 120px;
+`;
+var SubTableStyle = styled13.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 = styled13.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 = styled13.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] = useState12(false);
+  const [isAscending, setIsAscending] = useState12(false);
+  const [primaryRowIndex, setPrimaryRowIndex] = useState12(null);
+  const toggleDropdown = (rowIndex) => {
+    setIsOpen(!isOpen);
+    setIsAscending(!isAscending);
+    setPrimaryRowIndex(rowIndex);
+  };
+  const headers = HeadColumns.map((column, index) => {
+    return /* @__PURE__ */ jsx43(MainThHeaders, { children: column.title }, `headCell-${index}`);
+  });
+  const SubDataHeaders = SubDataColumns.map((column, index) => {
+    return /* @__PURE__ */ jsx43("th", { children: column.title }, `SubHeadCell-${index}`);
+  });
+  const subDataRows = !data?.length ? /* @__PURE__ */ jsx43("tr", { children: /* @__PURE__ */ jsx43("td", { title: "NoSubDataRows", colSpan: columns.length, children: "No data" }) }) : data.map((item, index) => /* @__PURE__ */ jsx43(Fragment16, { children: /* @__PURE__ */ jsx43(SubDataTr, { children: SubDataColumns.map((column, colIndex) => {
+    const columnKey = trimBeforePeriod(column.key);
+    const value = item.Details?.[columnKey];
+    console.log("value: ", value);
+    if (value !== void 0) {
+      return /* @__PURE__ */ jsx43("td", { children: /* @__PURE__ */ jsx43("span", { children: value }) }, `Span-${item.id}-${colIndex}`);
+    }
+  }) }, `Sub-${item.id}-${index}`) }));
+  const childRows = /* @__PURE__ */ jsxs33(SubTableStyle, { children: [
+    /* @__PURE__ */ jsx43("thead", { children: /* @__PURE__ */ jsx43("tr", { children: SubDataHeaders }) }),
+    /* @__PURE__ */ jsx43("tbody", { children: subDataRows })
+  ] });
+  const rows = !data?.length ? /* @__PURE__ */ jsx43("tr", { children: /* @__PURE__ */ jsx43("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : data?.map((item, index) => /* @__PURE__ */ jsxs33(Fragment16, { children: [
+    /* @__PURE__ */ jsxs33(PrimaryTrRows, { $index: index, children: [
+      /* @__PURE__ */ jsx43(DropdownButton, { onClick: () => toggleDropdown(index), children: isAscending && isOpen && primaryRowIndex === index ? /* @__PURE__ */ jsx43(Fragment16, { children: "\u2227" }) : /* @__PURE__ */ jsx43(Fragment16, { children: "\u2228" }) }),
+      HeadColumns.map((column, index2) => {
+        return /* @__PURE__ */ jsx43(PrimaryTdSpan, { children: /* @__PURE__ */ jsx43("span", { title: `spanRow-${item.id}-${column.key}-${index2}`, children: item[column.key] }) }, `${item.id}-${index}=${index2}`);
+      })
+    ] }, index),
+    isOpen && primaryRowIndex === index && /* @__PURE__ */ jsx43(SubTrRows, { $index: index, children: /* @__PURE__ */ jsx43("td", { colSpan: HeadColumns.length + 1, children: childRows }) }, index)
+  ] }));
+  return /* @__PURE__ */ jsx43("div", { children: /* @__PURE__ */ jsxs33(TableStyle, { children: [
+    /* @__PURE__ */ jsx43("thead", { children: /* @__PURE__ */ jsxs33("tr", { children: [
+      /* @__PURE__ */ jsx43("th", { title: "dropdownth" }),
+      headers
+    ] }) }),
+    /* @__PURE__ */ jsx43("tbody", { children: rows })
+  ] }) });
+};
+
 // src/components/samples/SampleComponent.tsx
-import { useRef as useRef8, useEffect as useEffect9 } from "react";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { useRef as useRef9, useEffect as useEffect9 } from "react";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var SampleComponent2 = ({
   testProp,
   children,
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
-  const ref = useRef8(null);
+  const ref = useRef9(null);
   useEffect9(() => {
     const el = ref.current;
     if (!el) return;
@@ -7359,13 +7814,15 @@ var SampleComponent2 = ({
       el.setAttribute("test-prop", testProp);
     }
   }, [testProp]);
-  return /* @__PURE__ */ jsx42("sample-component", { ref, ...rest, children });
+  return /* @__PURE__ */ jsx44("sample-component", { ref, ...rest, children });
 };
 export {
   ButtonIcon,
   ButtonMenu,
+  ChildDataTable,
   DefaultCarousel,
   DefaultPagination,
+  NestedDataTable,
   SampleComponent2 as SampleComponent,
   SliderCardCarousel,
   WavelengthAccessAlert,