@wavelengthusaf/components 2.7.2 → 2.8.0

package/dist/cjs/index.d.cts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default, { ReactNode } from 'react';
+import React__default, { ReactNode, ReactElement } from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { TextFieldVariants, SxProps as SxProps$1, Theme as Theme$1 } from '@mui/material';
@@ -270,13 +270,14 @@ interface WavelengthTitleBarProps {
 declare function WavelengthTitleBar({ titleText, subtitleText, textColor, textShadow }: WavelengthTitleBarProps): react_jsx_runtime.JSX.Element;
 
 interface WavelengthBannerProps {
-    classification?: "unclassified" | "controlled" | "controlled unclassified information" | "cui" | "u" | "confidential" | "c" | "secret" | "s" | "top secret" | "ts" | string;
-    control?: ("cui" | "sci" | "fouo" | "nf" | "propin" | "frd" | "gbr s" | "si" | "si-g" | "tk" | "relido" | "rd" | "rd-n" | "rel" | "fvey" | "hcs" | string)[];
+    headerText?: string;
     headerColor?: string;
     textColor?: string;
+    opacity?: string | number;
+    zIndex?: string | number;
     id?: string;
 }
-declare function WavelengthBanner({ classification, control, headerColor, textColor, id }: WavelengthBannerProps): react_jsx_runtime.JSX.Element;
+declare function WavelengthBanner({ headerText, headerColor, textColor, opacity, zIndex, id }: WavelengthBannerProps): react_jsx_runtime.JSX.Element;
 
 interface AppLogoProps {
     width?: number;
@@ -506,4 +507,23 @@ interface TextFieldProps {
 }
 declare function WavelengthTextField(props: TextFieldProps): react_jsx_runtime.JSX.Element | null;
 
-export { AppLogo, ButtonIcon, ButtonMenu, DefaultCarousel, DefaultIcon, DefaultPagination, ManyPlanesComponent, NotAvailablePage, type SearchProps, type SearchResult, SearchTextField, SliderCardCarousel, type StyledButtonPropsTwo, TestSnackbar, type ThemeProperties, WavelengthAppTheme, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTextField, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };
+interface DataType {
+    id: number;
+    [key: string]: any;
+}
+interface ColumnProps<T> {
+    key: string;
+    title: string | ReactElement;
+    width?: string;
+    editable?: boolean;
+    render?: (column: ColumnProps<T>, item: T) => ReactElement;
+}
+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;
+
+export { AppLogo, ButtonIcon, ButtonMenu, DefaultCarousel, DefaultIcon, DefaultPagination, ManyPlanesComponent, NotAvailablePage, type SearchProps, type SearchResult, SearchTextField, SliderCardCarousel, type StyledButtonPropsTwo, TestSnackbar, type ThemeProperties, WavelengthAppTheme, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTextField, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };

package/dist/esm/index.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default, { ReactNode } from 'react';
+import React__default, { ReactNode, ReactElement } from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { TextFieldVariants, SxProps as SxProps$1, Theme as Theme$1 } from '@mui/material';
@@ -270,13 +270,14 @@ interface WavelengthTitleBarProps {
 declare function WavelengthTitleBar({ titleText, subtitleText, textColor, textShadow }: WavelengthTitleBarProps): react_jsx_runtime.JSX.Element;
 
 interface WavelengthBannerProps {
-    classification?: "unclassified" | "controlled" | "controlled unclassified information" | "cui" | "u" | "confidential" | "c" | "secret" | "s" | "top secret" | "ts" | string;
-    control?: ("cui" | "sci" | "fouo" | "nf" | "propin" | "frd" | "gbr s" | "si" | "si-g" | "tk" | "relido" | "rd" | "rd-n" | "rel" | "fvey" | "hcs" | string)[];
+    headerText?: string;
     headerColor?: string;
     textColor?: string;
+    opacity?: string | number;
+    zIndex?: string | number;
     id?: string;
 }
-declare function WavelengthBanner({ classification, control, headerColor, textColor, id }: WavelengthBannerProps): react_jsx_runtime.JSX.Element;
+declare function WavelengthBanner({ headerText, headerColor, textColor, opacity, zIndex, id }: WavelengthBannerProps): react_jsx_runtime.JSX.Element;
 
 interface AppLogoProps {
     width?: number;
@@ -506,4 +507,23 @@ interface TextFieldProps {
 }
 declare function WavelengthTextField(props: TextFieldProps): react_jsx_runtime.JSX.Element | null;
 
-export { AppLogo, ButtonIcon, ButtonMenu, DefaultCarousel, DefaultIcon, DefaultPagination, ManyPlanesComponent, NotAvailablePage, type SearchProps, type SearchResult, SearchTextField, SliderCardCarousel, type StyledButtonPropsTwo, TestSnackbar, type ThemeProperties, WavelengthAppTheme, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTextField, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };
+interface DataType {
+    id: number;
+    [key: string]: any;
+}
+interface ColumnProps<T> {
+    key: string;
+    title: string | ReactElement;
+    width?: string;
+    editable?: boolean;
+    render?: (column: ColumnProps<T>, item: T) => ReactElement;
+}
+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;
+
+export { AppLogo, ButtonIcon, ButtonMenu, DefaultCarousel, DefaultIcon, DefaultPagination, ManyPlanesComponent, NotAvailablePage, type SearchProps, type SearchResult, SearchTextField, SliderCardCarousel, type StyledButtonPropsTwo, TestSnackbar, type ThemeProperties, WavelengthAppTheme, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTextField, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };

package/dist/esm/index.js

@@ -4988,51 +4988,76 @@ function WavelengthTitleBar2({ titleText, subtitleText, textColor, textShadow })
 }
 
 // src/components/headers/WavelengthTitleBar/WavelengthBanner.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
-function WavelengthBanner({ classification, control, headerColor, textColor, id }) {
-  const palette2 = getPalette();
-  if (classification === "unclassified") {
-    if (control && control.includes("cui")) {
-      headerColor = headerColor ? headerColor : "#502b85";
-      textColor = textColor ? textColor : "white";
-    }
-    headerColor = headerColor ? headerColor : "#007a33";
-    textColor = textColor ? textColor : "white";
-  } else if (classification === "controlled" || classification === "controlled unclassified information" || classification === "cui" || classification === "u") {
-    headerColor = headerColor ? headerColor : "#502b85";
-    textColor = textColor ? textColor : "white";
-  } else if (classification === "confidential" || classification === "c") {
-    headerColor = headerColor ? headerColor : "#0033a0";
-    textColor = textColor ? textColor : "white";
-  } else if (classification === "secret" || classification === "s") {
-    headerColor = headerColor ? headerColor : "#c8102e";
-    textColor = textColor ? textColor : "white";
-  } else if (classification === "top secret" || classification === "ts") {
-    if (control && control.includes("sci")) {
-      headerColor = headerColor ? headerColor : "#fce83a";
-      textColor = textColor ? textColor : "black";
-    }
-    headerColor = headerColor ? headerColor : "#ff8c00";
-    textColor = textColor ? textColor : "black";
-  } else if (classification === "" || classification === null || classification === void 0) {
-    classification = "CLASSIFICATION//CONTROL";
-    headerColor = palette2.primary;
-    textColor = palette2.secondary;
-  } else {
-    headerColor = headerColor ? headerColor : palette2.primary;
-    textColor = textColor ? textColor : palette2.secondary;
+import { useEffect as useEffect2, useRef as useRef3 } from "react";
+
+// src/web-components/wavelength-banner.tsx
+var WavelengthBanner = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["header-text", "header-color", "text-color", "opacity", "z-index", "id"];
   }
-  if (control && control.length === 0) {
-    classification = `${classification}`;
-  } else if (control && control.length === 1) {
-    classification = `${classification}//${control[0]}`;
-  } else if (control) {
-    classification = `${classification}//${control[0]}`;
-    for (let i = 1; i < control.length; i++) {
-      classification = `${classification}/${control[i]}`;
-    }
+  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;
+        }
+      `;
+    this.container = document.createElement("div");
+    this.container.classList.add("banner");
+    this.textElement = document.createElement("p");
+    this.container.appendChild(this.textElement);
+    shadow.appendChild(style3);
+    shadow.appendChild(this.container);
+  }
+  connectedCallback() {
+    this.updateAttributes();
   }
-  return /* @__PURE__ */ jsx20("div", { style: { width: "100%", backgroundColor: headerColor }, id, children: /* @__PURE__ */ jsx20("p", { style: { width: "100%", color: textColor, textAlign: "center" }, children: classification.toUpperCase() }) });
+  attributeChangedCallback() {
+    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;
+  }
+};
+customElements.define("wavelength-banner", WavelengthBanner);
+
+// src/components/headers/WavelengthTitleBar/WavelengthBanner.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+function WavelengthBanner2({ headerText = "CLASSIFICATION//CONTROL", headerColor = "#000000", textColor = "#FFFFFF", opacity = 1, zIndex = 10, id }) {
+  const ref = useRef3(null);
+  useEffect2(() => {
+    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]);
+  return /* @__PURE__ */ jsx20("wavelength-banner", { ref });
 }
 
 // src/components/CSFD/ManyPlanes.tsx
@@ -5553,11 +5578,11 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
 // src/components/snackbars/TestSnackbar.tsx
 import Box6 from "@mui/material/Box";
 import Button5 from "@mui/material/Button";
-import { useEffect as useEffect2, useRef as useRef3 } from "react";
+import { useEffect as useEffect3, useRef as useRef4 } from "react";
 import { Fragment as Fragment12, jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
 var useOutsideClick = (callback) => {
-  const ref = useRef3(null);
-  useEffect2(() => {
+  const ref = useRef4(null);
+  useEffect3(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         callback();
@@ -5709,7 +5734,7 @@ var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight,
 };
 
 // src/components/carousels/sliderCarousel.tsx
-import { useState as useState5, useEffect as useEffect4 } from "react";
+import { useState as useState5, useEffect as useEffect5 } from "react";
 import Grid6 from "@mui/material/Grid";
 import Card2 from "@mui/material/Card";
 import CardContent2 from "@mui/material/CardContent";
@@ -5720,7 +5745,7 @@ var delay = 2500;
 var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth }) => {
   const [index, setIndex] = useState5(0);
   const [isHovered, setIsHovered] = useState5(false);
-  useEffect4(() => {
+  useEffect5(() => {
     setTimeout(() => setIndex((prevIndex) => prevIndex === items.length - 1 ? 0 : prevIndex + 1), delay);
     return () => {
     };
@@ -6089,6 +6114,7 @@ function DefaultPagination({ totalPages, currentPageNumber, siblingCount = 1, bo
     );
   }
 }
+var WavelengthPagination_default = DefaultPagination;
 
 // src/components/TextField/WavelengthTextField.tsx
 import { useCallback, useState as useState9 } from "react";
@@ -6221,6 +6247,367 @@ function WavelengthTextField(props) {
   }
   return null;
 }
+
+// src/components/DataTable/WavelengthDataTable.tsx
+import { useEffect as useEffect6, useRef as useRef5, useState as useState10 } from "react";
+import styled11 from "styled-components";
+import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
+var ModalInputDiv = styled11.div`
+  display: flex;
+  flex-direction: column; /* Corrected this line */
+  gap: 3px;
+  margin: 3px;
+
+  label {
+    align-self: flex-start;
+    color: #c6c7cc;
+  }
+
+  input,
+  select {
+    width: 100%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    box-sizing: border-box;
+    border: none;
+    outline: none;
+    border-bottom: 2px solid #c6c7cc;
+
+    &:hover {
+      border-bottom: 2px solid black;
+    }
+
+    &:focus {
+      border-bottom: 2px solid #8fd8ff;
+    }
+  }
+`;
+var ModalOverlay = styled11.div`
+  position: fixed;
+  bottom: 19%;
+  right: 15%;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+`;
+var ModalWrapper = styled11.div`
+  background-color: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  position: relative;
+  min-width: 300px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+`;
+var ModalClose = styled11.button`
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 20px;
+  cursor: pointer;
+  border: none;
+  background: none;
+  z-index: 2;
+`;
+var TableHeadStyle = styled11.th`
+  position: relative;
+`;
+var KebabMenu = styled11.div`
+  display: inline-block;
+  position: absolute;
+  right: 0;
+  top: 2px;
+`;
+var KebabIcon = styled11.div`
+  cursor: pointer;
+  font-size: 20px;
+  padding: 5px;
+
+  &:hover,
+  &:focus {
+    color: #45beff;
+  }
+  &:active {
+    color: #8fd8ff;
+  }
+`;
+var MenuOptions = styled11.ul`
+  position: absolute;
+  right: 0;
+  top: 100%;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  li {
+    padding: 10px;
+    text-decoration: none;
+    display: block;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #ddd;
+    }
+  }
+`;
+var StyledBoxDiv = styled11.div`
+  background-color: white;
+  width: 700px;
+  height: 480px;
+  position: relative;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+`;
+var StyledNavBoxDiv = styled11.div`
+  background-color: white;
+  width: 700px;
+  display: flex; /* Make parent a flex-container */
+  justify-content: center;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+
+  box-shadow: 0.5px 3px 5px black;
+`;
+var StyledTd = styled11.td`
+  border-top: 1px solid #c6c7cc;
+  border-bottom: 1px solid #c6c7cc;
+  padding: 10px 15px;
+  vertical-align: middle;
+`;
+var StyledTableTwo = styled11.table`
+  width: 95%;
+  height: 95%;
+  border-collapse: collapse;
+  background-color: white;
+  color: black;
+
+  margin-left: auto;
+  margin-right: auto;
+
+  th {
+    position: relative; /* Enable absolute positioning of pseudo-elements */
+    padding: 10px 15px;
+
+    /* Create the partial right border */
+    &:not(:last-child):after {
+      content: ""; /* Ensure the pseudo-element is visible */
+      position: absolute;
+      right: 0; /* Position it on the right side of the th */
+      top: 50%; /* Position it in the vertical center */
+      height: 50%; /* Set the height of the border to be half the height of th */
+      border-right: 1px solid #c6c7cc;
+      transform: translateY(-50%); /* Center it vertically */
+    }
+  }
+`;
+var StyledInput = styled11.input`
+  height: 100%;
+  width: 100%;
+  outline: none;
+  border: none;
+  color: #8fd8ff;
+`;
+var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages }) => {
+  const [localData, setLocalData] = useState10(data || []);
+  const copiedArray = [...data || []];
+  const [editingId, setEditingId] = useState10(null);
+  const [editedColumnKey, setEditedColumnKey] = useState10(null);
+  const [editedValue, setEditedValue] = useState10("");
+  const [noRowsOpen, setNoRowsOpen] = useState10(false);
+  const [isModalOpen, setIsModalOpen] = useState10(false);
+  const [searchItem, setSearchItem] = useState10("");
+  const [selectedValue, setSelectedValue] = useState10(columns[0]?.key || "");
+  const [currentPage, setCurrentPage] = useState10(1);
+  const [isOpen, setIsOpen] = useState10(false);
+  const [editingMenuKey, setEditingMenuKey] = useState10(null);
+  const menuRef = useRef5(null);
+  const modalRef = useRef5(null);
+  function isNumeric(value) {
+    return /^\d+$/.test(value);
+  }
+  const handleChange = (event) => {
+    setSelectedValue(event.target.value);
+    setLocalData(copiedArray);
+  };
+  useEffect6(() => {
+    if (!selectedValue || searchItem === "") {
+      setLocalData(copiedArray);
+      setNoRowsOpen(false);
+      return;
+    }
+    if (isNumeric(searchItem)) {
+      const filteredItems = localData.filter((item) => item[selectedValue].toString().includes(searchItem));
+      setLocalData(filteredItems);
+      if (filteredItems.length === 0) {
+        setNoRowsOpen(true);
+      } else {
+        setNoRowsOpen(false);
+      }
+    } else {
+      const filteredItems = localData.filter((item) => item[selectedValue].toString().toLowerCase().includes(searchItem.toLowerCase()));
+      if (filteredItems.length === 0) {
+        setNoRowsOpen(true);
+      } else {
+        setLocalData(filteredItems);
+        setNoRowsOpen(false);
+      }
+    }
+  }, [selectedValue, searchItem]);
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+  useEffect6(() => {
+    const handleClickOutside = (event) => {
+      if (isModalOpen && modalRef.current && !modalRef.current.contains(event.target)) {
+        closeModal();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isModalOpen]);
+  const toggleMenu = (key) => {
+    setIsOpen(!isOpen);
+    setEditingMenuKey(key);
+  };
+  const indexOfLastItem = currentPage * itemsPerPage;
+  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+  const currentPageData = localData.filter((_, index) => index >= indexOfFirstItem && index < indexOfLastItem);
+  const [sortOrder, setSortOrder] = useState10("asc");
+  const handleSort = (column, sortType) => {
+    const sortedItems = [...localData].sort((a, b) => {
+      const valueA = a[column];
+      const valueB = b[column];
+      if (typeof valueA === "string" && typeof valueB === "string") {
+        if (sortType === "asc") {
+          return valueA.localeCompare(valueB);
+        } else {
+          return valueB.localeCompare(valueA);
+        }
+      } else if (typeof valueA === "number" && typeof valueB === "number") {
+        if (sortType === "asc") {
+          return valueA - valueB;
+        } else {
+          return valueB - valueA;
+        }
+      } else {
+        return 0;
+      }
+    });
+    setLocalData(sortedItems);
+    setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+  };
+  const handleEdit = (id, value, columnKey) => {
+    setEditingId(id);
+    setEditedValue(value);
+    setEditedColumnKey(columnKey);
+  };
+  const saveEdit = (id, editedValue2, columnKey) => {
+    setLocalData(localData.map((item) => id === item.id ? { ...item, [columnKey]: editedValue2 } : item));
+    setEditingId(null);
+  };
+  const handleCancel = () => {
+    setEditingId(null);
+  };
+  const headers = columns.map((column, index) => {
+    return /* @__PURE__ */ jsxs29(TableHeadStyle, { children: [
+      column.title,
+      /* @__PURE__ */ jsxs29(KebabMenu, { ref: menuRef, children: [
+        /* @__PURE__ */ jsx38(
+          KebabIcon,
+          {
+            title: `KebabIcon-${index}`,
+            onClick: () => {
+              toggleMenu(column.key);
+            },
+            children: "\u22EE"
+          }
+        ),
+        isOpen && editingMenuKey === column.key && /* @__PURE__ */ jsxs29(MenuOptions, { children: [
+          sortOrder === "asc" ? /* @__PURE__ */ jsxs29("li", { title: `MenuListASC-${index}`, onClick: () => handleSort(column.key, "asc"), children: [
+            /* @__PURE__ */ jsx38("span", { children: "\u2B06" }),
+            " Sort ASC"
+          ] }) : /* @__PURE__ */ jsxs29("li", { title: `MenuListDES-${index}`, onClick: () => handleSort(column.key, "desc"), children: [
+            /* @__PURE__ */ jsx38("span", { children: "\u2B07" }),
+            " Sort DESC"
+          ] }),
+          /* @__PURE__ */ jsxs29("li", { title: `MenuListFilterButton-${index}`, onClick: openModal, children: [
+            /* @__PURE__ */ jsx38("span", { children: "\u23F7" }),
+            " Filter"
+          ] }),
+          isModalOpen && /* @__PURE__ */ jsx38(ModalOverlay, { children: /* @__PURE__ */ jsxs29(ModalWrapper, { ref: modalRef, children: [
+            /* @__PURE__ */ jsx38(ModalClose, { title: `ModalClose-${index}`, onClick: closeModal, children: "\xD7" }),
+            /* @__PURE__ */ jsxs29(ModalInputDiv, { children: [
+              /* @__PURE__ */ jsx38("label", { htmlFor: "filterSelectId", children: "Columns: " }),
+              /* @__PURE__ */ jsx38("select", { title: `filterSelect-${index}`, id: "filterSelectId", value: selectedValue, onChange: handleChange, children: columns.map((item) => /* @__PURE__ */ jsx38("option", { children: item.key }, item.key)) })
+            ] }),
+            /* @__PURE__ */ jsxs29(ModalInputDiv, { children: [
+              /* @__PURE__ */ jsx38("label", { htmlFor: "filterInputId", children: "Values: " }),
+              /* @__PURE__ */ jsx38(
+                "input",
+                {
+                  title: `Inputfiltertest-${index}`,
+                  id: "filterInputId",
+                  type: isNumeric(searchItem) ? "number" : "text",
+                  value: searchItem,
+                  onKeyDown: (e) => {
+                    if (e.key === "Backspace") {
+                      setLocalData(copiedArray);
+                    }
+                  },
+                  onChange: (e) => setSearchItem(e.target.value)
+                }
+              )
+            ] })
+          ] }) })
+        ] })
+      ] }, index)
+    ] }, `headCell-${index}`);
+  });
+  const rows = !currentPageData?.length || noRowsOpen ? /* @__PURE__ */ jsx38("tr", { children: /* @__PURE__ */ jsx38("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : currentPageData?.map((item) => /* @__PURE__ */ jsx38("tr", { children: columns.map((column, index2) => {
+    return /* @__PURE__ */ jsx38(StyledTd, { children: editingId === item.id && editedColumnKey === column.key ? /* @__PURE__ */ jsx38(
+      StyledInput,
+      {
+        title: `styledRow-${item.id}-${column.key}-${index2}`,
+        type: "text",
+        value: editedValue,
+        onChange: (e) => setEditedValue(e.target.value),
+        onBlur: () => saveEdit(item.id, editedValue, column.key),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            saveEdit(item.id, editedValue, column.key);
+          } else if (e.key === "Escape") {
+            handleCancel();
+          }
+        },
+        autoFocus: true
+      }
+    ) : /* @__PURE__ */ jsx38("span", { title: `spanRow-${item.id}-${column.key}-${index2}`, onDoubleClick: () => handleEdit(item.id, item[column.key], column.key), children: item[column.key] }) }, index2);
+  }) }, item.id));
+  return /* @__PURE__ */ jsxs29("div", { children: [
+    /* @__PURE__ */ jsx38(StyledBoxDiv, { title: "StyledBoxDiv", children: /* @__PURE__ */ jsxs29(StyledTableTwo, { title: "StyledTable", children: [
+      /* @__PURE__ */ jsx38("thead", { children: /* @__PURE__ */ jsx38("tr", { children: headers }) }),
+      /* @__PURE__ */ jsx38("tbody", { children: rows })
+    ] }) }),
+    /* @__PURE__ */ jsx38(StyledNavBoxDiv, { children: /* @__PURE__ */ jsx38(WavelengthPagination_default, { totalPages, currentPageNumber: currentPage, onPageChange: setCurrentPage, style: "circular" }) })
+  ] });
+};
 export {
   AppLogo,
   ButtonIcon,
@@ -6235,13 +6622,14 @@ export {
   TestSnackbar,
   WavelengthAppTheme,
   WavelengthAutocomplete,
-  WavelengthBanner,
+  WavelengthBanner2 as WavelengthBanner,
   WavelengthBox,
   WavelengthButton,
   WavelengthCommentDisplay,
   WavelengthConfirmationModal,
   WavelengthContentModal,
   WavelengthContentPlaceholder,
+  WavelengthDataTable,
   WavelengthDragAndDrop,
   WavelengthDropdown,
   WavelengthDropdownButton,