react-table-edit 0.8.8 → 0.9.0

package/dist/index.mjs

@@ -1,8 +1,8 @@
 // test-app/src/component/table/index.tsx
 import { Fragment as Fragment17, forwardRef as forwardRef3, useEffect as useEffect8, useImperativeHandle, useRef as useRef3, useState as useState7 } from "react";
-import { Button as Button5, DropdownMenu as DropdownMenu3, DropdownToggle as DropdownToggle3, Input as Input8, UncontrolledDropdown, UncontrolledTooltip as UncontrolledTooltip3 } from "reactstrap";
-import classnames9 from "classnames";
-import { useTranslation as useTranslation12 } from "react-i18next";
+import { Button as Button5, DropdownMenu as DropdownMenu3, DropdownToggle as DropdownToggle3, Input as Input8, UncontrolledDropdown, UncontrolledTooltip as UncontrolledTooltip4 } from "reactstrap";
+import classnames8 from "classnames";
+import { useTranslation as useTranslation11 } from "react-i18next";
 import { AlertCircle, Info as Info2, Settings } from "becoxy-icons";
 
 // test-app/src/component/react-input/index.tsx
@@ -279,16 +279,15 @@ var roundNumber = (num, fraction) => {
 import moment2 from "moment";
 
 // test-app/src/component/edit-form/index.tsx
-import { forwardRef, useEffect as useEffect3, useRef, useState as useState2 } from "react";
+import { forwardRef as forwardRef2, useEffect as useEffect4, useRef as useRef2, useState as useState3 } from "react";
 import {
-  DropdownItem,
-  DropdownMenu,
-  DropdownToggle,
-  Dropdown,
-  Input as Input4,
-  Form,
+  DropdownItem as DropdownItem2,
+  DropdownMenu as DropdownMenu2,
+  DropdownToggle as DropdownToggle2,
+  Dropdown as Dropdown2,
+  Input as Input5,
   Row,
-  Button,
+  Button as Button2,
   Col
 } from "reactstrap";
 import { useForm } from "react-hook-form";
@@ -387,175 +386,15 @@ var TextInput = (props) => {
 };
 var input_text_default = TextInput;
 
-// test-app/src/component/select/index.tsx
+// test-app/src/component/input-number/index.tsx
 import { Controller as Controller2 } from "react-hook-form";
-import { Label as Label2, FormFeedback as FormFeedback2 } from "reactstrap";
-import Select from "react-select";
+import { Input as Input3, Label as Label2, FormFeedback as FormFeedback2 } from "reactstrap";
 import classnames2 from "classnames";
 import { Fragment as Fragment4 } from "react";
 import { useTranslation as useTranslation2 } from "react-i18next";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var SelectBox = (props) => {
-  const { t } = useTranslation2();
-  const { control, id, placeholder, fieldValue, confirmHandle, disabled, name, options, label, isLabel, labelSize, classes, required, errors, isMulti, isClearable, labelComponent, callback, inLine, onInputChange, ref, menuPosition, ...rest } = props;
-  const handChange = ({ onChange, val }) => {
-    onChange(!isNullOrUndefined(val) && isMulti ? val.map((item) => item.value) : !isNullOrUndefined(val) && !isMulti ? fieldValue ? val[fieldValue] : val?.value : void 0);
-    if (callback) {
-      callback(val);
-    }
-  };
-  const renderSelect = () => {
-    return /* @__PURE__ */ jsxs4(Fragment4, { children: [
-      /* @__PURE__ */ jsx4(
-        Controller2,
-        {
-          name,
-          control,
-          render: ({ field: { value, onChange } }) => {
-            return /* @__PURE__ */ jsx4(
-              Select,
-              {
-                ...rest,
-                id,
-                value: isMulti && value?.length > 0 ? value.map((x) => options.find((val) => (fieldValue ? val[fieldValue] : val.value) === x)) : !isNullOrUndefined(value) && value !== "" ? options.find((val) => (fieldValue ? val[fieldValue] : val.value) === value) : "",
-                onChange: (val) => {
-                  if ((fieldValue && val ? val[fieldValue] : val?.value) !== value) {
-                    if (confirmHandle) {
-                      confirmHandle(handChange, onChange, val);
-                    } else {
-                      onChange(!isNullOrUndefined(val) && isMulti ? val.map((item) => item.value) : !isNullOrUndefined(val) && !isMulti ? fieldValue ? val[fieldValue] : val?.value : void 0);
-                      if (callback) {
-                        callback(val);
-                      }
-                    }
-                  }
-                },
-                onInputChange,
-                form: name,
-                placeholder: placeholder ? placeholder : "",
-                classNamePrefix: "select",
-                className: `react-select ${errors && "is-invalid"}`,
-                options,
-                isMulti,
-                isDisabled: disabled,
-                isClearable,
-                menuPosition: menuPosition ?? "fixed",
-                formatOptionLabel: labelComponent ? labelComponent : void 0,
-                ref
-              }
-            );
-          }
-        }
-      ),
-      errors && /* @__PURE__ */ jsx4(FormFeedback2, { children: errors?.message })
-    ] });
-  };
-  return /* @__PURE__ */ jsx4(Fragment4, { children: /* @__PURE__ */ jsxs4(
-    "div",
-    {
-      className: classnames2(
-        inLine === false ? "form-group " : "form-row-inline d-flex",
-        "align",
-        {
-          [labelSize ? labelSize : ""]: labelSize,
-          [classes ? classes : ""]: classes,
-          "form-row-inline-error": errors
-        }
-      ),
-      children: [
-        isLabel === false ? "" : /* @__PURE__ */ jsxs4(Label2, { className: "form-label", for: name, children: [
-          t(label ? label : ""),
-          " ",
-          required ? /* @__PURE__ */ jsx4("span", { className: "text-danger", children: "*" }) : "",
-          " "
-        ] }),
-        /* @__PURE__ */ jsx4("div", { className: classnames2("form-input-content", { "hidden-label": isLabel === false }), children: renderSelect() })
-      ]
-    }
-  ) });
-};
-var select_default = SelectBox;
-
-// test-app/src/component/creactable-select/index.tsx
-import { Controller as Controller3 } from "react-hook-form";
-import { Label as Label3, FormFeedback as FormFeedback3 } from "reactstrap";
-import classnames3 from "classnames";
-import { Fragment as Fragment5 } from "react";
-import { useTranslation as useTranslation3 } from "react-i18next";
-import CreatableSelect from "react-select/creatable";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var CreatableSelectBox = (props) => {
-  const { t } = useTranslation3();
-  const { isMulti, id, isLabel, control, placeholder, fieldValue, name, options, label, labelSize, required, errors, inLine, isClearable, labelComponent, onInputChange, callback, ...rest } = props;
-  return /* @__PURE__ */ jsx5(Fragment5, { children: /* @__PURE__ */ jsxs5(
-    "div",
-    {
-      className: classnames3(
-        inLine === false ? "form-group " : "form-row-inline d-flex",
-        "align",
-        {
-          [labelSize ? labelSize : ""]: labelSize,
-          "form-row-inline-error": errors
-        }
-      ),
-      children: [
-        isLabel === false ? "" : /* @__PURE__ */ jsxs5(Label3, { className: "form-label", for: name, children: [
-          t(label),
-          " ",
-          required ? /* @__PURE__ */ jsx5("span", { className: "text-danger", children: "*" }) : "",
-          " "
-        ] }),
-        /* @__PURE__ */ jsxs5("div", { className: classnames3("form-input-content", { "hidden-label": isLabel === false }), children: [
-          /* @__PURE__ */ jsx5(
-            Controller3,
-            {
-              name,
-              control,
-              render: ({ field: { value, onChange } }) => /* @__PURE__ */ jsx5(
-                CreatableSelect,
-                {
-                  ...rest,
-                  id,
-                  value: isMulti && value?.length > 0 ? value.map((x) => options.find((val) => (fieldValue ? val[fieldValue] : val.value) === x)) : !isNullOrUndefined(value) && value !== "" ? options.find((val) => (fieldValue ? val[fieldValue] : val.value) === value) : "",
-                  onChange: (val) => {
-                    if (fieldValue && val.__isNew__) {
-                      val[fieldValue] = val.value;
-                    }
-                    onChange(!isNullOrUndefined(val) && isMulti ? val.map((item) => item.value) : !isNullOrUndefined(val) && !isMulti ? fieldValue ? val[fieldValue] : val?.value : void 0);
-                    if (callback) {
-                      callback(val);
-                    }
-                  },
-                  onInputChange,
-                  classNamePrefix: "select",
-                  className: `react-select ${errors && "is-invalid"}`,
-                  options,
-                  placeholder,
-                  isMulti,
-                  isClearable,
-                  menuPosition: "fixed",
-                  formatOptionLabel: labelComponent ? labelComponent : void 0
-                }
-              )
-            }
-          ),
-          errors && /* @__PURE__ */ jsx5(FormFeedback3, { children: errors?.message })
-        ] })
-      ]
-    }
-  ) });
-};
-var creactable_select_default = CreatableSelectBox;
-
-// test-app/src/component/input-number/index.tsx
-import { Controller as Controller4 } from "react-hook-form";
-import { Input as Input3, Label as Label4, FormFeedback as FormFeedback4 } from "reactstrap";
-import classnames4 from "classnames";
-import { Fragment as Fragment6 } from "react";
-import { useTranslation as useTranslation4 } from "react-i18next";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var NumberInput = (props) => {
-  const { t } = useTranslation4();
+  const { t } = useTranslation2();
   const {
     control,
     id,
@@ -583,21 +422,21 @@ var NumberInput = (props) => {
     ...rest
   } = props;
   const renderLabel = () => {
-    return /* @__PURE__ */ jsx6(Fragment6, { children: isLabel === false ? "" : /* @__PURE__ */ jsxs6(Label4, { className: "form-label", for: name, children: [
+    return /* @__PURE__ */ jsx4(Fragment4, { children: isLabel === false ? "" : /* @__PURE__ */ jsxs4(Label2, { className: "form-label", for: name, children: [
       t(label ? label : ""),
       " ",
-      required ? /* @__PURE__ */ jsx6("span", { className: "text-danger", children: "*" }) : "",
+      required ? /* @__PURE__ */ jsx4("span", { className: "text-danger", children: "*" }) : "",
       " "
     ] }) });
   };
   const renderInput = () => {
-    return /* @__PURE__ */ jsxs6(Fragment6, { children: [
-      /* @__PURE__ */ jsx6(
-        Controller4,
+    return /* @__PURE__ */ jsxs4(Fragment4, { children: [
+      /* @__PURE__ */ jsx4(
+        Controller2,
         {
           name,
           control,
-          render: ({ field: { value, onChange } }) => /* @__PURE__ */ jsx6(
+          render: ({ field: { value, onChange } }) => /* @__PURE__ */ jsx4(
             Input3,
             {
               id,
@@ -657,13 +496,13 @@ var NumberInput = (props) => {
           )
         }
       ),
-      errors && /* @__PURE__ */ jsx6(FormFeedback4, { children: errors?.message })
+      errors && /* @__PURE__ */ jsx4(FormFeedback2, { children: errors?.message })
     ] });
   };
-  return /* @__PURE__ */ jsx6(Fragment6, { children: /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsx4(Fragment4, { children: /* @__PURE__ */ jsxs4(
     "div",
     {
-      className: classnames4(
+      className: classnames2(
         " align",
         {
           [labelSize ? labelSize : ""]: labelSize,
@@ -674,358 +513,590 @@ var NumberInput = (props) => {
       ),
       children: [
         renderLabel(),
-        /* @__PURE__ */ jsx6("div", { className: classnames4("form-input-content", { "hidden-label": isLabel === false }), children: renderInput() })
+        /* @__PURE__ */ jsx4("div", { className: classnames2("form-input-content", { "hidden-label": isLabel === false }), children: renderInput() })
       ]
     }
   ) });
 };
 var input_number_default = NumberInput;
 
-// test-app/src/component/edit-form/index.tsx
-import { Fragment as Fragment7, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
-var defaultWidth = 200;
-var EditForm = forwardRef((props, ref) => {
+// test-app/src/component/edit-form/select-table/index.tsx
+import { Controller as Controller3 } from "react-hook-form";
+import { FormFeedback as FormFeedback3, Label as Label3, UncontrolledTooltip as UncontrolledTooltip2 } from "reactstrap";
+import classnames4 from "classnames";
+import { Fragment as Fragment7 } from "react";
+
+// test-app/src/component/select-table/index.tsx
+import { forwardRef, Fragment as Fragment5, useEffect as useEffect3, useMemo, useRef, useState as useState2 } from "react";
+import {
+  DropdownItem,
+  DropdownMenu,
+  DropdownToggle,
+  Dropdown,
+  Button,
+  Input as Input4,
+  Spinner,
+  UncontrolledTooltip
+} from "reactstrap";
+import { useTranslation as useTranslation3 } from "react-i18next";
+import classnames3 from "classnames";
+import moment from "moment";
+import { Plus } from "becoxy-icons";
+import { Fragment as Fragment6, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var defaultMaxHeight = 250;
+var SelectTable = forwardRef((props, ref) => {
   const {
     id,
-    field,
-    displayValue,
-    menuHeight,
     menuWidth,
-    rowData,
     invalid,
-    onChange,
-    onChangeField,
     onKeyDown,
-    defaultValues,
     placeholder,
     textAlign,
-    schema,
-    onFormOpen,
-    onFormSubmit,
-    footerTemplate,
-    minWidth,
-    onPaste,
-    openOnFocus,
+    options,
+    columns,
+    decimalSeparator,
+    thousandSeparator,
+    onChange,
+    value,
+    fieldValue,
+    fieldLabel,
+    loadOptions,
+    maxHeight,
+    handleAdd,
     isClearable,
-    labelSize = "label-small"
+    component,
+    formatOptionLabel,
+    isMulti,
+    noHeader,
+    isDisabled,
+    showFooter,
+    onPaste
   } = props;
-  const { innerWidth } = window;
+  const selectTableRef = useRef();
+  const selectMenuTableRef = useRef();
   const inputRef = useRef();
-  const editFormRef = useRef();
-  const buttonRef = useRef();
   const [dropdownOpen, setDropdownOpen] = useState2(false);
-  const [itemsField, setItemsField] = useState2([]);
-  const { t } = useTranslation5();
-  useOnClickOutside(editFormRef, () => {
-    closeMenu();
-  });
+  const [indexFocus, setIndexFocus] = useState2(-1);
+  const [isFocus, setIsFocus] = useState2(false);
+  const [isLoading, setIsLoading] = useState2(false);
+  const [searchTerm, setSearchTerm] = useState2("");
+  const [optionsLoad, setOptionsLoad] = useState2();
+  const { t } = useTranslation3();
+  const isSelectedAll = useMemo(() => {
+    return isMulti === true && (optionsLoad ? optionsLoad : options).length > 0 && value?.length >= (optionsLoad ? optionsLoad : options).length;
+  }, [optionsLoad, options, value]);
+  const defaultColumns = noHeader ? [
+    {
+      headerText: "Name",
+      field: fieldLabel ?? "label",
+      width: menuWidth
+    }
+  ] : [
+    {
+      field: "key",
+      headerText: "Code",
+      width: 100,
+      maxWidth: 120,
+      minWidth: 80
+    },
+    {
+      headerText: "Name",
+      field: "label",
+      width: 150,
+      maxWidth: 200,
+      minWidth: 250
+    }
+  ];
   const closeMenu = () => {
-    setTimeout(() => {
-      setDropdownOpen(false);
-    }, onChangeField ? 10 : 0);
+    setDropdownOpen(false);
   };
-  const {
-    control,
-    handleSubmit,
-    getValues,
-    reset,
-    setValue,
-    formState: { errors }
-  } = useForm({
-    mode: "onChange",
-    defaultValues,
-    resolver: yupResolver(schema)
-  });
   useEffect3(() => {
-    if (dropdownOpen) {
-      if (onFormOpen && itemsField.length === 0) {
-        onFormOpen(rowData, itemsField, setItemsField);
-      }
-      if (openOnFocus) {
-        setTimeout(() => {
-          focusElement(`form-element-${field}-0`, true);
-        }, 100);
-      }
+    if (dropdownOpen && value && !isMulti && selectMenuTableRef) {
+      setTimeout(() => {
+        const elementFocus = document.getElementById(`row-select-table-${(optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"])}`);
+        if (elementFocus) {
+          const parentRect = selectMenuTableRef.current.getBoundingClientRect();
+          const childRect = elementFocus.getBoundingClientRect();
+          const offset = childRect.top - parentRect.top + selectMenuTableRef.current.scrollTop - parentRect.height / 2 + childRect.height / 2;
+          selectMenuTableRef.current.scrollTo({ top: offset });
+        }
+      }, 100);
     }
   }, [dropdownOpen]);
   useEffect3(() => {
-    if (dropdownOpen && itemsField.length > 0) {
-      itemsField.forEach((ele) => {
-        setValue(ele.name, rowData[ele.name] ?? "");
+    if (inputRef && !isDisabled) {
+      inputRef.current.addEventListener("blur", function() {
+        setDropdownOpen(false);
+        setSearchTerm("");
+        setIsFocus(false);
+      });
+      inputRef.current.addEventListener("focus", function() {
+        if (!isFocus) {
+          setIsFocus(true);
+        }
       });
     }
-  }, [dropdownOpen, itemsField]);
-  const handleOnClick = () => {
+  }, [inputRef]);
+  useEffect3(() => {
+    if (searchTerm && !dropdownOpen) {
+      setDropdownOpen(true);
+      setIndexFocus(0);
+    }
+  }, [searchTerm]);
+  const handleOpenClose = () => {
+    setSearchTerm("");
     if (dropdownOpen) {
       closeMenu();
     } else {
-      setDropdownOpen(true);
+      if (!isDisabled) {
+        setDropdownOpen(true);
+      }
     }
   };
-  const handleOnSubmit = (val) => {
-    closeMenu();
-    onChange(val);
-    if (onFormSubmit) {
-      onFormSubmit(rowData, setValue, getValues, reset);
-    }
-    inputRef.current.focus();
-  };
-  const focusElement = (id2, focus) => {
-    const element = document.getElementById(id2);
-    if (element) {
-      if (element.className.includes("react-select")) {
-        element.getElementsByTagName("input")[0]?.focus();
-      } else {
-        element.focus();
-        if (focus) {
-          element.setSelectionRange(0, element.innerText.length - 1);
-        }
+  const listKeyUse = ["Escape", "Space", "Enter", "Tab", "NumpadEnter", "ArrowDown", "ArrowUp", "F9"];
+  const handleOnKeyDown = (e) => {
+    let key = "";
+    if (onKeyDown && (!dropdownOpen || !listKeyUse.includes(e.code))) {
+      key = onKeyDown(e);
+      if (key === "ArrowRight" || key === "ArrowLeft") {
+        closeMenu();
       }
     }
-  };
-  const handleOnKeyDown = (e) => {
     let flag = false;
-    if (dropdownOpen) {
-      if (e.code === "Escape") {
-        closeMenu();
-        flag = true;
-      } else if (e.code === "Enter") {
-        closeMenu();
+    if (!key) {
+      if (e.code === "F9") {
+        handleAdd();
         flag = true;
+      } else if (e.code === "Escape" || e.code === "Space") {
+        if (dropdownOpen) {
+          if ((optionsLoad ? optionsLoad : options)[indexFocus]) {
+            onChange((optionsLoad ? optionsLoad : options)[indexFocus]);
+          }
+        }
+        if (!searchTerm) {
+          handleOpenClose();
+          flag = true;
+        }
+      } else if (e.code === "Enter" || e.code === "Tab" || e.code === "NumpadEnter") {
+        if (dropdownOpen) {
+          onChange((optionsLoad ? optionsLoad : options)[indexFocus]);
+          handleOpenClose();
+          flag = true;
+        }
       } else if (e.code === "ArrowDown") {
-        focusElement(`form-element-${field}-0`);
-        flag = true;
-      }
-    } else {
-      if (e.code === "ArrowDown") {
-        setDropdownOpen(true);
-        focusElement(`form-element-${field}-0`);
-        flag = true;
-      } else if (e.code === "Space") {
-        setDropdownOpen(true);
-        flag = true;
+        if (dropdownOpen) {
+          let newIndex = 0;
+          if (indexFocus >= 0) {
+            newIndex = indexFocus + 1;
+          } else if (value) {
+            newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((e2) => e2[fieldValue ?? "value"] === value[fieldValue ?? "value"]) + 1;
+          }
+          if (newIndex < (optionsLoad ? optionsLoad : options).length) {
+            setIndexFocus(newIndex);
+            checkIfElementIsOutOfScroll(0, newIndex);
+          } else {
+            setIndexFocus(0);
+            checkIfElementIsOutOfScroll(1, 0);
+          }
+          flag = true;
+        } else {
+          handleOpenClose();
+          flag = true;
+        }
+      } else if (e.code === "ArrowUp") {
+        if (dropdownOpen) {
+          let newIndex = 0;
+          if (indexFocus >= 0) {
+            newIndex = indexFocus - 1;
+          } else if (value) {
+            newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((e2) => e2[fieldValue ?? "value"] === value[fieldValue ?? "value"]) - 1;
+          }
+          if (newIndex >= 0) {
+            setIndexFocus(newIndex);
+            checkIfElementIsOutOfScroll(2, newIndex);
+          } else {
+            setIndexFocus((optionsLoad ? optionsLoad : options).length - 1);
+            checkIfElementIsOutOfScroll(3, (optionsLoad ? optionsLoad : options).length - 1);
+          }
+          flag = true;
+        }
       }
     }
-    if (onKeyDown && !flag) {
-      const key = onKeyDown(e);
-      if (key === "ArrowRight" || key === "ArrowLeft") {
-        closeMenu();
-      }
-    } else {
+    if (flag) {
       e.stopPropagation();
       e.preventDefault();
     }
   };
-  const formKeyDown = (e, handSubmit) => {
-    if (e.code === "Enter") {
-      handSubmit();
-      e.preventDefault();
-      e.stopPropagation();
-    } else {
-      if (onKeyDown) {
-        const key = onKeyDown(e);
-        if (key === "ArrowRight" || key === "ArrowLeft") {
-          closeMenu();
+  const checkIfElementIsOutOfScroll = (flag, index) => {
+    if (selectMenuTableRef) {
+      const elementFocus = document.getElementById(`row-select-table-${index}`);
+      if (elementFocus) {
+        const rect = elementFocus.getBoundingClientRect();
+        const parentRect = selectMenuTableRef.current?.getBoundingClientRect();
+        if (flag === 1) {
+          scrollToElement(selectMenuTableRef.current, 0);
+        } else if (flag === 3) {
+          scrollToElement(selectMenuTableRef.current, selectMenuTableRef.current.scrollHeight);
+        } else if (flag === 0 && rect.bottom + 30 > parentRect.bottom) {
+          scrollToElement(selectMenuTableRef.current, elementFocus.offsetTop - selectMenuTableRef.current.offsetTop - parentRect.height + rect.height + 50);
+        } else if (flag === 2 && rect.top < parentRect.top + 50) {
+          scrollToElement(selectMenuTableRef.current, elementFocus.offsetTop - 65);
         }
       }
     }
   };
-  const formItemKeyDown = (e, index) => {
-    if (e.code === "ArrowDown" && index < itemsField.length - 1) {
-      focusElement(`form-element-${field}-${index + 1}`);
-      e.preventDefault();
-      e.stopPropagation();
-    } else if (e.code === "ArrowUp" && index > 0) {
-      focusElement(`form-element-${field}-${index - 1}`);
-      e.preventDefault();
-      e.stopPropagation();
-    } else if (e.code === "Tab" && onChangeField && index === itemsField.length - 1) {
-      closeMenu();
-    }
+  let timeOutElement;
+  const scrollToElement = (elemment, top) => {
+    clearTimeout(timeOutElement);
+    timeOutElement = setTimeout(() => {
+      elemment.scrollTo({
+        top,
+        behavior: "smooth"
+      });
+    }, 100);
   };
-  const elementChange = (field2) => {
-    if (onChangeField) {
-      onChangeField(rowData, field2, setValue, getValues);
-      const rs = getValues();
-      if (rs) {
-        onChange(rs);
+  const renderHeaderCol = (col, indexCol) => {
+    return /* @__PURE__ */ jsx5(
+      Fragment5,
+      {
+        children: col.visible !== false && /* @__PURE__ */ jsx5(
+          "th",
+          {
+            className: classnames3(
+              `r-select-headercell fix-${col.fixedType}`,
+              { "cell-fixed": col.fixedType }
+            ),
+            style: {
+              width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width,
+              minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
+              top: `${0 * 35}px`,
+              maxWidth: col.maxWidth
+            },
+            children: /* @__PURE__ */ jsx5(
+              "div",
+              {
+                role: "textbox",
+                title: t(col.headerText ?? ""),
+                style: {
+                  height: `${1 * 35}px`,
+                  justifyContent: col.textAlign ?? "left"
+                },
+                className: "r-select-headercell-div",
+                children: t(col.headerText ?? "")
+              }
+            )
+          }
+        )
+      },
+      `header-select-${indexCol}`
+    );
+  };
+  const checkSearch = (keyword, data, columnsSearch) => {
+    if (!keyword || columnsSearch.length === 0) {
+      return true;
+    }
+    for (let index = 0; index < columnsSearch.length; index++) {
+      const key = columnsSearch[index].field.trim();
+      if (data[key] && data[key].toString().trim().toLowerCase().includes(keyword.trim().toLowerCase())) {
+        return true;
       }
     }
+    return false;
   };
-  const renderForm = (rows) => {
-    return /* @__PURE__ */ jsx7(Row, { className: "gy-25", children: rows.map((item, index) => {
-      if (item.type === "numeric") {
-        return /* @__PURE__ */ jsx7(Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ jsx7(
-          input_number_default,
-          {
-            id: `form-element-${field}-${index}`,
-            control,
-            name: item.name,
-            label: item.label ? item.label : "",
-            labelSize: `text-left ${labelSize}`,
-            errors: errors[item.name],
-            disabled: item.disabled,
-            min: item.min,
-            max: item.max,
-            fractionCurrency: item.fraction,
-            callback: () => {
-              elementChange(item.name);
-            }
-          },
-          index
-        ) }, index);
-      } else if (item.type === "text") {
-        return /* @__PURE__ */ jsx7(Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ jsx7(
-          input_text_default,
-          {
-            id: `form-element-${field}-${index}`,
-            control,
-            name: item.name,
-            label: item.label ? item.label : "",
-            labelSize: `text-left ${labelSize}`,
-            errors: errors[item.name],
-            disabled: item.disabled,
-            callback: () => {
-              elementChange(item.name);
-            }
-          },
-          index
-        ) }, index);
-      } else if (item.type === "select") {
-        return /* @__PURE__ */ jsx7(Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ jsx7(
-          select_default,
-          {
-            id: `form-element-${field}-${index}`,
-            options: item.options ?? [],
-            control,
-            name: item.name,
-            label: item.label ? item.label : "",
-            labelSize: `text-left ${labelSize}`,
-            menuPortalTarget: document.body,
-            errors: errors[item.name],
-            disabled: item.disabled,
-            callback: () => {
-              elementChange(item.name);
-            }
-          },
-          index
-        ) }, index);
-      } else if (item.type === "selectCreatable") {
-        return /* @__PURE__ */ jsx7(Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ jsx7(
-          creactable_select_default,
-          {
-            id: `form-element-${field}-${index}`,
-            options: item.options ?? [],
-            control,
-            name: item.name,
-            placeholder: t("Select"),
-            menuPortalTarget: document.body,
-            label: item.label ? item.label : "",
-            labelSize: ` ${labelSize}`,
-            errors: errors[item.name],
-            callback: () => {
-              elementChange(item.name);
+  const callbackLoadOption = (rs) => {
+    setIsLoading(false);
+    setOptionsLoad(rs);
+  };
+  useEffect3(() => {
+    if (!searchTerm) {
+      setOptionsLoad(void 0);
+    }
+  }, [searchTerm]);
+  const checkOverflow = (indexRow, indexCol) => {
+    const element = document.getElementById(`select-${id}-${indexRow}-${indexCol}`);
+    return element && element.scrollWidth > element.clientWidth;
+  };
+  const RenderElement = (props2) => {
+    const { indexRow, row, isSelected, level = 0 } = props2;
+    return /* @__PURE__ */ jsxs5(
+      "tr",
+      {
+        id: `row-select-table-${indexRow}`,
+        style: { paddingLeft: 10 * level },
+        className: classnames3("r-select-row", { "last-row": indexRow === (optionsLoad ? optionsLoad : options).length - 1 }, { "fisrt-row": indexRow === 0 }),
+        children: [
+          isMulti && /* @__PURE__ */ jsx5(
+            "td",
+            {
+              className: classnames3(`r-select-rowcell`, { "r-select-move": indexFocus === indexRow, "r-select-active": !isMulti && value && value[fieldValue ?? "value"] === row[fieldValue ?? "value"] }),
+              style: { width: 40, textAlign: "center", padding: 0, paddingBottom: 6 },
+              onClick: (e) => {
+                if (isMulti) {
+                  const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
+                  if (index > -1) {
+                    value?.splice(index, 1);
+                    const valueArr = (optionsLoad ? optionsLoad : options).filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
+                    onChange(valueArr);
+                  } else {
+                    if (value) {
+                      value?.push(row[fieldValue ?? "value"]);
+                      const valueArr = (optionsLoad ? optionsLoad : options).filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
+                      onChange(valueArr);
+                    } else {
+                      onChange([row[fieldValue ?? "value"]]);
+                    }
+                  }
+                  e.stopPropagation();
+                }
+              },
+              children: /* @__PURE__ */ jsx5(
+                Input4,
+                {
+                  checked: isSelected,
+                  type: "checkbox",
+                  className: "cursor-pointer",
+                  onChange: () => {
+                  },
+                  style: { textAlign: "center", marginTop: 6 }
+                }
+              )
             }
-          },
-          index
-        ) }, index);
-      }
-    }) });
+          ),
+          (columns ? columns : defaultColumns).map((col, indexCol) => {
+            let valueDisplay = row[col.field];
+            if (col.type === "numeric" || col.typeCondition && col.typeCondition(row) === "numeric") {
+              valueDisplay = formartNumberic(row[col.field], decimalSeparator ?? ".", thousandSeparator ?? ",", col.fraction ?? 0, true) ?? 0;
+            } else if (col.type === "date") {
+              valueDisplay = valueDisplay ? moment(valueDisplay).format("DD/MM/yyyy") : "";
+            } else if (col.type === "datetime") {
+              valueDisplay = valueDisplay ? moment(valueDisplay).format("DD/MM/yyyy HH:mm") : "";
+            }
+            return /* @__PURE__ */ jsxs5(Fragment5, { children: [
+              col.visible !== false && /* @__PURE__ */ jsx5(
+                "td",
+                {
+                  id: `select-${id}-${indexRow}-${indexCol}`,
+                  className: classnames3(`r-select-rowcell`, { "r-select-move": indexFocus === indexRow, "r-select-active": !isMulti && value && value[fieldValue ?? "value"] === row[fieldValue ?? "value"] }),
+                  style: {
+                    minWidth: col.minWidth,
+                    width: col.width,
+                    maxWidth: col.maxWidth,
+                    textAlign: col.textAlign ? col.textAlign : "left"
+                  },
+                  onClick: (e) => {
+                    if (isMulti) {
+                      const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
+                      if (index > -1) {
+                        value?.splice(index, 1);
+                        const valueArr = (optionsLoad ? optionsLoad : options).filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
+                        onChange(valueArr);
+                      } else {
+                        if (value) {
+                          value?.push(row[fieldValue ?? "value"]);
+                          const valueArr = (optionsLoad ? optionsLoad : options).filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
+                          onChange(valueArr);
+                        } else {
+                          onChange([row[fieldValue ?? "value"]]);
+                        }
+                      }
+                    } else {
+                      onChange(row);
+                      setSearchTerm("");
+                      closeMenu();
+                    }
+                    e.preventDefault();
+                    e.stopPropagation();
+                  },
+                  onMouseMove: (e) => {
+                    if (indexRow !== indexFocus) {
+                      setIndexFocus(indexRow);
+                    }
+                    e.stopPropagation();
+                  },
+                  children: col.template ? col.template(row, indexRow) : valueDisplay
+                },
+                `col-${indexRow}-${indexCol}`
+              ),
+              checkOverflow(indexRow, indexCol) && /* @__PURE__ */ jsx5(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay })
+            ] }, indexCol);
+          })
+        ]
+      },
+      `row-${indexRow}`
+    );
   };
-  return /* @__PURE__ */ jsx7(
+  const RenderTable = (props2) => {
+    const {} = props2;
+    let countDisplay = 0;
+    return /* @__PURE__ */ jsxs5(Fragment6, { children: [
+      /* @__PURE__ */ jsxs5("table", { style: { width: "100%" }, children: [
+        !noHeader && /* @__PURE__ */ jsx5("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ jsxs5("tr", { className: "r-select-row", role: "row", children: [
+          isMulti && /* @__PURE__ */ jsx5("th", { className: classnames3(`r-select-headercell`), style: { width: 40, top: `0px` }, children: /* @__PURE__ */ jsx5(
+            "div",
+            {
+              style: { justifyContent: "center" },
+              className: classnames3("r-select-headercell-div"),
+              children: /* @__PURE__ */ jsx5(
+                Input4,
+                {
+                  checked: isSelectedAll,
+                  type: "checkbox",
+                  onClick: (e) => {
+                    if (isMulti) {
+                      if (isSelectedAll) {
+                        onChange([]);
+                      } else {
+                        onChange([...optionsLoad ? optionsLoad : options]);
+                      }
+                      e.stopPropagation();
+                    }
+                  },
+                  readOnly: true,
+                  className: classnames3("cursor-pointer", { "d-none": !isMulti }),
+                  style: { textAlign: "center", marginTop: 6 }
+                }
+              )
+            }
+          ) }),
+          !noHeader && (columns ? columns : defaultColumns).map((col, index) => {
+            return renderHeaderCol(col, index);
+          })
+        ] }) }),
+        (optionsLoad ? optionsLoad : options).length > 0 && !isLoading && /* @__PURE__ */ jsx5(Fragment6, { children: /* @__PURE__ */ jsx5("tbody", { className: "r-select-gridcontent", children: (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
+          if (!isMulti && loadOptions || checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
+            const isSelected = isMulti && value?.some((x) => x === row[fieldValue ?? "value"]);
+            countDisplay++;
+            return /* @__PURE__ */ jsx5(RenderElement, { isSelected, indexRow, row }, `select-table-${indexRow}`);
+          }
+        }) }) })
+      ] }),
+      countDisplay === 0 && !isLoading && /* @__PURE__ */ jsxs5("div", { className: "r-no-data", children: [
+        /* @__PURE__ */ jsx5("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxs5("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [
+          /* @__PURE__ */ jsx5("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }),
+          /* @__PURE__ */ jsxs5("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [
+            /* @__PURE__ */ jsx5("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }),
+            /* @__PURE__ */ jsx5("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })
+          ] })
+        ] }) }),
+        t("No data available.")
+      ] }),
+      isLoading && /* @__PURE__ */ jsxs5("div", { className: "r-no-data", children: [
+        /* @__PURE__ */ jsx5(Spinner, { className: "me-1", children: " " }),
+        t("Loading...")
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ jsx5(
     "div",
     {
-      className: "form-edit",
+      className: classnames3("react-select-table", { "is-invalid": invalid }),
       ref,
       id,
-      children: /* @__PURE__ */ jsx7("div", { ref: editFormRef, children: /* @__PURE__ */ jsxs7(
+      children: /* @__PURE__ */ jsx5("div", { ref: selectTableRef, children: /* @__PURE__ */ jsxs5(
         Dropdown,
         {
           isOpen: dropdownOpen,
           toggle: () => {
           },
+          onMouseDown: (e) => e.preventDefault(),
           children: [
-            /* @__PURE__ */ jsx7(DropdownToggle, { tag: "div", children: /* @__PURE__ */ jsx7(
-              Input4,
+            /* @__PURE__ */ jsxs5(
+              DropdownToggle,
               {
-                style: { backgroundColor: "#FFF", textAlign: textAlign ?? "left" },
-                placeholder,
-                innerRef: inputRef,
-                className: classNames2("input-display input-numeric", { "is-invalid": invalid }),
-                value: displayValue,
-                onClick: handleOnClick,
-                onKeyDown: (e) => handleOnKeyDown(e),
-                onPaste: (e) => onPaste && onPaste(e),
-                readOnly: true
+                onClick: (e) => {
+                  if (!isDisabled) {
+                    inputRef?.current.focus();
+                    handleOpenClose();
+                  }
+                  e.preventDefault();
+                },
+                tag: "div",
+                className: classnames3("select-table-control", { "r-select-is-disabled": isDisabled }, { "r-select-is-open": dropdownOpen }, { "r-select-is-focus": isFocus }, { "r-select-is-invalid": invalid }),
+                children: [
+                  /* @__PURE__ */ jsxs5("div", { className: "select-table-container", children: [
+                    isMulti ? /* @__PURE__ */ jsx5(Fragment6, { children: /* @__PURE__ */ jsx5("div", { className: classnames3("select-value is-mutil", { "d-none": searchTerm }), children: value?.map((ele, index) => {
+                      const element = (optionsLoad ? optionsLoad : options).find((e) => e[fieldValue ?? "value"] === ele);
+                      if (element) {
+                        return /* @__PURE__ */ jsxs5("span", { children: [
+                          index === 0 ? "" : ", ",
+                          element[fieldLabel ?? "label"]
+                        ] }, index);
+                      }
+                    }) }) }) : /* @__PURE__ */ jsx5(Fragment6, { children: /* @__PURE__ */ jsxs5("div", { className: classnames3("select-value", { "d-none": searchTerm }), children: [
+                      value ? formatOptionLabel ? formatOptionLabel(value) : value[fieldLabel ?? "label"] : "",
+                      " "
+                    ] }) }),
+                    !((isMulti ? value?.length > 0 : value) || isDisabled || searchTerm) && /* @__PURE__ */ jsx5("div", { className: classnames3("select-placeholder"), children: placeholder }),
+                    /* @__PURE__ */ jsx5("div", { className: "input-container", children: /* @__PURE__ */ jsx5(
+                      "input",
+                      {
+                        style: { textAlign: textAlign ?? "left" },
+                        ref: inputRef,
+                        className: classnames3("select-input"),
+                        readOnly: isDisabled,
+                        value: searchTerm,
+                        onPaste: (e) => onPaste && !dropdownOpen && onPaste(e),
+                        onChange: (val) => {
+                          if (!isMulti && loadOptions && val.target.value) {
+                            setIsLoading(true);
+                            loadOptions(val.target.value, callbackLoadOption);
+                          }
+                          setSearchTerm(val.target.value);
+                        },
+                        onKeyDown: (e) => handleOnKeyDown(e)
+                      }
+                    ) })
+                  ] }),
+                  isLoading && /* @__PURE__ */ jsxs5("div", { className: classnames3("select-table-indicator d-flex align-items-center"), children: [
+                    /* @__PURE__ */ jsx5(Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" }),
+                    /* @__PURE__ */ jsx5(Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" }),
+                    /* @__PURE__ */ jsx5(Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" })
+                  ] }),
+                  isClearable && value && !isDisabled && /* @__PURE__ */ jsx5(
+                    "div",
+                    {
+                      className: classnames3("cursor-pointer"),
+                      onClick: (e) => {
+                        onChange(isMulti ? [] : void 0);
+                        e.stopPropagation();
+                      },
+                      children: /* @__PURE__ */ jsx5("svg", { height: "20", width: "20", color: "#c4c4c4", viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", className: "css-tj5bde-Svg", children: /* @__PURE__ */ jsx5("path", { d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z" }) })
+                    }
+                  ),
+                  !isDisabled && /* @__PURE__ */ jsx5("div", { className: "select-table-indicator", onMouseDown: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx5("svg", { height: "20", width: "20", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx5("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) })
+                ]
               }
-            ) }),
-            /* @__PURE__ */ jsx7(
+            ),
+            /* @__PURE__ */ jsx5(
               DropdownMenu,
               {
+                container: component,
                 className: "formula-dropdown icon-dropdown p-0",
                 style: {
-                  minWidth: minWidth ? minWidth : defaultWidth,
                   width: menuWidth ? menuWidth : "min-content",
-                  maxWidth: innerWidth > 1280 ? 1280 : innerWidth,
-                  borderRadius: 8,
-                  zIndex: 1056
+                  position: "fixed",
+                  borderRadius: 3,
+                  zIndex: 9999
                 },
-                children: /* @__PURE__ */ jsx7(DropdownItem, { className: "p-0", style: { borderRadius: "6px" }, tag: "div", header: true, children: /* @__PURE__ */ jsxs7(Form, { className: "todo-modal", onKeyDown: (e) => formKeyDown(e, handleSubmit(handleOnSubmit)), children: [
-                  /* @__PURE__ */ jsx7(
-                    "div",
-                    {
-                      className: "p-1",
-                      style: {
-                        maxHeight: menuHeight ? menuHeight : 300,
-                        overflow: "auto"
-                      },
-                      children: itemsField ? renderForm(itemsField) : ""
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs7("div", { className: "d-flex justify-content-between p-50", style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }, children: [
-                    /* @__PURE__ */ jsx7("div", { className: "text-primary py-25", style: { fontSize: 12 }, children: footerTemplate ? footerTemplate(rowData) : "" }),
-                    !onChangeField ? /* @__PURE__ */ jsxs7("div", { className: "d-flex justify-content-end", children: [
-                      isClearable && /* @__PURE__ */ jsx7(
-                        Button,
-                        {
-                          ref: buttonRef,
-                          className: "btn me-50 py-25 px-50",
-                          outline: true,
-                          onClick: () => {
-                            itemsField.forEach((e) => {
-                              if (e.type === "numeric") {
-                                setValue(e.name, 0);
-                              } else {
-                                setValue(e.name, "");
-                              }
-                            });
-                          },
-                          onKeyDown: (e) => {
-                            if (e.code === "Tab") {
-                              closeMenu();
-                            }
-                          },
-                          children: t("Clear")
-                        }
-                      ),
-                      /* @__PURE__ */ jsx7(
-                        Button,
-                        {
-                          ref: buttonRef,
-                          color: "primary",
-                          className: "btn btn-primary py-25 px-50",
-                          onClick: handleSubmit(handleOnSubmit),
-                          onKeyDown: (e) => {
-                            if (e.code === "Tab") {
-                              closeMenu();
-                            }
-                          },
-                          children: t("Save")
-                        }
-                      )
-                    ] }) : /* @__PURE__ */ jsx7(Fragment7, {})
-                  ] })
-                ] }) })
+                children: /* @__PURE__ */ jsx5(DropdownItem, { className: classnames3("p-0 menu-select-table"), style: { borderRadius: "6px" }, tag: "div", header: true, children: dropdownOpen && /* @__PURE__ */ jsx5(
+                  "div",
+                  {
+                    onMouseDown: (e) => {
+                      if (!isDisabled) {
+                        inputRef?.current.focus();
+                        e.preventDefault();
+                      }
+                    },
+                    children: /* @__PURE__ */ jsxs5("div", { className: "r-select-grid", children: [
+                      /* @__PURE__ */ jsx5("div", { className: "r-select-gridtable", ref: selectMenuTableRef, style: { minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight }, children: /* @__PURE__ */ jsx5(RenderTable, {}) }),
+                      /* @__PURE__ */ jsx5("div", { className: classnames3("r-select-footer", { "d-none": !(showFooter === true || handleAdd) }), children: /* @__PURE__ */ jsxs5(Button, { outline: true, color: "primary", onClick: handleAdd, className: classnames3("r-btn-add d-flex align-items-center", { "d-none": !handleAdd }), children: [
+                        /* @__PURE__ */ jsx5(Plus, { className: "me-50", fontSize: 16 }),
+                        t("AddNew"),
+                        " (F9)"
+                      ] }) })
+                    ] })
+                  }
+                ) })
               }
             )
           ]
@@ -1034,1091 +1105,960 @@ var EditForm = forwardRef((props, ref) => {
     }
   );
 });
-var edit_form_default = EditForm;
-
-// test-app/src/component/sidebar-setting-column/index.tsx
-import { Fragment as Fragment9, useEffect as useEffect5, useState as useState4 } from "react";
-import { Button as Button2, Input as Input5 } from "reactstrap";
-import { useTranslation as useTranslation7 } from "react-i18next";
 
-// test-app/src/component/modal-header/index.tsx
-import { Edit, Info, Plus, X as X2 } from "becoxy-icons";
-import classNames3 from "classnames";
-import { useTranslation as useTranslation6 } from "react-i18next";
-import { Fragment as Fragment8, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
-var ModalHeader = (props) => {
-  const { title, handleModal, typeModal = "Edit", component } = props;
-  const { t } = useTranslation6();
-  const handleModalIcon = () => {
-    if (typeModal === "Edit" || typeModal === "Approval") {
-      return /* @__PURE__ */ jsx8(Edit, { fontSize: 17, className: "me-1" });
-    } else if (typeModal === "View") {
-      return /* @__PURE__ */ jsx8(Info, { fontSize: 17, className: "me-1" });
-    } else if (typeModal === "Detail") {
-      return /* @__PURE__ */ jsx8(Info, { fontSize: 17, className: "me-1" });
-    } else if (typeModal === "Order") {
-      return /* @__PURE__ */ jsx8("span", { className: "e-icons e-sorting-1 me-1", style: { fontSize: "14px" } });
-    } else if (typeModal === "Process") {
-      return /* @__PURE__ */ jsx8("span", { className: "e-flat e-icons e-paste-match-destination me-1", style: { fontSize: "14px" } });
-    } else {
-      return /* @__PURE__ */ jsx8(Plus, { fontSize: 17, className: "me-1" });
+// test-app/src/component/edit-form/select-table/index.tsx
+import { useTranslation as useTranslation4 } from "react-i18next";
+import { Fragment as Fragment8, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var SelectTableBox = (props) => {
+  const {
+    isMulti,
+    isLabel,
+    confirmHandle,
+    id,
+    fieldValue,
+    fieldLabel,
+    labelComponent,
+    defaultOptions,
+    loadOptions,
+    control,
+    placeholder,
+    disabled,
+    name,
+    label,
+    labelSize,
+    required,
+    errors,
+    inLine,
+    callback,
+    desciptionLabel,
+    classLabel,
+    isClearable,
+    defaultValue,
+    handleAddNew,
+    columns,
+    ...rest
+  } = props;
+  const handChange = ({ onChange, val }) => {
+    onChange(!isNullOrUndefined(val) && isMulti ? val.map((item) => item.value) : !isNullOrUndefined(val) && !isMulti ? fieldValue ? val[fieldValue] : val?.value : void 0);
+    if (callback) {
+      callback(val);
     }
   };
-  return /* @__PURE__ */ jsxs8("div", { className: "modal-header d-flex align-items-center justify-content-between mb-1", children: [
-    /* @__PURE__ */ jsxs8("div", { className: "d-flex align-items-center justify-content-start", children: [
-      /* @__PURE__ */ jsxs8("h5", { className: "modal-title", children: [
-        handleModalIcon(),
+  const renderLabel = (props2) => {
+    const { t } = useTranslation4();
+    const { isLabel: isLabel2, desciptionLabel: desciptionLabel2, id: id2, classLabel: classLabel2, name: name2, label: label2, required: required2 } = props2;
+    return /* @__PURE__ */ jsxs6(Fragment7, { children: [
+      isLabel2 === false ? "" : /* @__PURE__ */ jsxs6(Label3, { id: `label-${id2}`, className: classLabel2, for: name2, children: [
+        t(label2 ? label2 : ""),
         " ",
-        t(title)
+        required2 ? /* @__PURE__ */ jsx6("span", { className: "text-danger", children: "*" }) : ""
       ] }),
-      component ? component() : /* @__PURE__ */ jsx8(Fragment8, {})
-    ] }),
-    /* @__PURE__ */ jsx8("div", { className: "todo-item-action d-flex align-items-center", children: /* @__PURE__ */ jsx8(
-      X2,
-      {
-        className: classNames3("fw-normal mt-25 cursor-pointer", { "d-none": !handleModal }),
-        fontSize: 20,
-        onClick: handleModal
-      }
-    ) })
-  ] });
+      (!isNullOrUndefined(desciptionLabel2) && desciptionLabel2 !== "") ?? /* @__PURE__ */ jsx6(Fragment8, { children: /* @__PURE__ */ jsx6(UncontrolledTooltip2, { target: `label-${id2}`, children: t(desciptionLabel2 ?? "") }) })
+    ] });
+  };
+  return /* @__PURE__ */ jsx6(Fragment7, { children: /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: classnames4(
+        inLine === false ? "form-group " : "form-row-inline d-flex",
+        "align",
+        {
+          [labelSize ? labelSize : ""]: labelSize,
+          "form-row-inline-error": errors
+        }
+      ),
+      children: [
+        renderLabel({ isLabel, desciptionLabel, classLabel, name, label, required, id: id ?? "" }),
+        /* @__PURE__ */ jsxs6("div", { className: classnames4("form-input-content", { "hidden-label": isLabel === false }), children: [
+          /* @__PURE__ */ jsx6(
+            Controller3,
+            {
+              name,
+              control,
+              render: ({ field: { value, onChange } }) => {
+                return /* @__PURE__ */ jsx6(
+                  SelectTable,
+                  {
+                    ...rest,
+                    id,
+                    value: (isMulti ? value?.length > 0 : value) ? !isMulti ? defaultOptions.find((val) => val[fieldValue ?? "value"] === value) ?? (defaultValue ?? "") : value : isMulti ? [] : void 0,
+                    onChange: (val) => {
+                      if (isMulti || (fieldValue && val ? val[fieldValue] : val?.value) !== value) {
+                        if (confirmHandle) {
+                          confirmHandle(handChange, onChange, val);
+                        } else {
+                          if (isMulti) {
+                            onChange(!isNullOrUndefined(val) ? val.map((item) => item[fieldValue ?? "value"]) : []);
+                          } else {
+                            onChange(!isNullOrUndefined(val) ? val[fieldValue ?? "value"] : void 0);
+                          }
+                          if (callback) {
+                            callback(val);
+                          }
+                        }
+                      }
+                    },
+                    handleAdd: handleAddNew,
+                    isClearable,
+                    isMulti,
+                    placeholder,
+                    invalid: errors,
+                    loadOptions,
+                    options: defaultOptions,
+                    isDisabled: disabled,
+                    columns,
+                    fieldValue,
+                    fieldLabel,
+                    formatOptionLabel: labelComponent ? labelComponent : void 0
+                  }
+                );
+              }
+            }
+          ),
+          errors && /* @__PURE__ */ jsx6(FormFeedback3, { children: errors?.message })
+        ] })
+      ]
+    }
+  ) });
 };
-var modal_header_default = ModalHeader;
+var select_table_default = SelectTableBox;
 
-// test-app/src/component/sidebar/index.tsx
-import { ChevronLeft, ChevronRight } from "becoxy-icons";
-import classNames4 from "classnames";
-import { useEffect as useEffect4, useState as useState3 } from "react";
-import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
-var Sidebar = (props) => {
+// test-app/src/component/edit-form/index.tsx
+import { Fragment as Fragment9, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var defaultWidth = 200;
+var EditForm = forwardRef2((props, ref) => {
   const {
-    open,
-    children,
-    toggleSidebar,
-    width,
-    keyboard,
-    hiddenBackground,
-    hiddenFullScreenButton
+    id,
+    field,
+    displayValue,
+    menuHeight,
+    menuWidth,
+    rowData,
+    invalid,
+    onChange,
+    onChangeField,
+    onKeyDown,
+    defaultValues,
+    placeholder,
+    textAlign,
+    schema,
+    onFormOpen,
+    onFormSubmit,
+    footerTemplate,
+    minWidth,
+    onPaste,
+    openOnFocus,
+    isClearable,
+    labelSize = "label-small"
   } = props;
-  const [isFullScreen, setIsFullScreen] = useState3(false);
-  const [flag, setFlag] = useState3(open);
+  const { innerWidth } = window;
+  const inputRef = useRef2();
+  const editFormRef = useRef2();
+  const buttonRef = useRef2();
+  const [dropdownOpen, setDropdownOpen] = useState3(false);
+  const [itemsField, setItemsField] = useState3([]);
+  const { t } = useTranslation5();
+  useOnClickOutside(editFormRef, () => {
+    closeMenu();
+  });
+  const closeMenu = () => {
+    setTimeout(() => {
+      setDropdownOpen(false);
+    }, onChangeField ? 10 : 0);
+  };
+  const {
+    control,
+    handleSubmit,
+    getValues,
+    reset,
+    setValue,
+    formState: { errors }
+  } = useForm({
+    mode: "onChange",
+    defaultValues,
+    resolver: yupResolver(schema)
+  });
   useEffect4(() => {
-    if (open !== flag) {
-      if (open) {
-        setFlag(open);
-      } else {
+    if (dropdownOpen) {
+      if (onFormOpen && itemsField.length === 0) {
+        onFormOpen(rowData, itemsField, setItemsField);
+      }
+      if (openOnFocus) {
         setTimeout(() => {
-          setFlag(open);
-        }, 50);
+          focusElement(`form-element-${field}-0`, true);
+        }, 100);
       }
     }
-  }, [open]);
-  const handClose = () => {
-    setFlag(false);
-    setTimeout(() => {
-      toggleSidebar();
-    }, 400);
+  }, [dropdownOpen]);
+  useEffect4(() => {
+    if (dropdownOpen && itemsField.length > 0) {
+      itemsField.forEach((ele) => {
+        setValue(ele.name, rowData[ele.name] ?? "");
+      });
+    }
+  }, [dropdownOpen, itemsField]);
+  const handleOnClick = () => {
+    if (dropdownOpen) {
+      closeMenu();
+    } else {
+      setDropdownOpen(true);
+    }
   };
-  return /* @__PURE__ */ jsxs9(
-    "div",
-    {
-      tabIndex: 0,
-      className: classNames4({ "d-none": !open }),
-      onKeyDown: (e) => {
-        if (!keyboard && e.code === "Escape" && flag) {
-          handClose();
-          e.stopPropagation();
-          e.preventDefault();
+  const handleOnSubmit = (val) => {
+    closeMenu();
+    onChange(val);
+    if (onFormSubmit) {
+      onFormSubmit(rowData, setValue, getValues, reset);
+    }
+    inputRef.current.focus();
+  };
+  const focusElement = (id2, focus) => {
+    const element = document.getElementById(id2);
+    if (element) {
+      if (element.className.includes("react-select")) {
+        element.getElementsByTagName("input")[0]?.focus();
+      } else {
+        element.focus();
+        if (focus) {
+          element.setSelectionRange(0, element.innerText.length - 1);
         }
-      },
-      children: [
-        /* @__PURE__ */ jsx9(
-          "div",
-          {
-            className: classNames4("offcanvas-backdrop fade", {
-              "d-none": !flag || hiddenBackground,
-              show: flag
-            }),
-            style: { zIndex: 1056 },
-            onClick: handClose
-          }
-        ),
-        /* @__PURE__ */ jsxs9(
-          "div",
-          {
-            className: classNames4("customizer d-none d-md-block ", `customizer-${width ?? 600}`, {
-              open: flag,
-              fullscreen: isFullScreen
-            }),
-            style: { zIndex: 1057 },
-            children: [
-              /* @__PURE__ */ jsxs9(
-                "div",
-                {
-                  style: {
-                    position: "fixed",
-                    top: "50%",
-                    transform: "translate(-50%, -50%)",
-                    background: "#FFF",
-                    filter: "drop-shadow(0.9px 0.9px 1.5px)",
-                    height: 50,
-                    display: "flex",
-                    alignItems: "center",
-                    borderRadius: "0px 5px 5px 0px",
-                    cursor: "pointer",
-                    zIndex: 9,
-                    marginLeft: 7
-                  },
-                  className: classNames4({ "d-none": hiddenFullScreenButton }),
-                  onClick: () => {
-                    setIsFullScreen(!isFullScreen);
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx9(ChevronLeft, { className: `${isFullScreen ? "d-none" : ""}`, fontSize: 16 }),
-                    /* @__PURE__ */ jsx9(ChevronRight, { className: `${!isFullScreen ? "d-none" : ""}`, fontSize: 15 })
-                  ]
-                }
-              ),
-              children
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-var sidebar_default = Sidebar;
-
-// test-app/src/component/sidebar-setting-column/index.tsx
-import classnames5 from "classnames";
-import { Fragment as Fragment10, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
-var SidebarSetColumn = (props) => {
-  const { column, setColumn, openSidebar, handleSidebar } = props;
-  const { t } = useTranslation7();
-  const [dataSource, setDataSource] = useState4([]);
-  const [indexFocus, setIndexFocus] = useState4();
-  useEffect5(() => {
-    if (openSidebar) {
-      setDataSource(column.map((e) => ({ ...e })));
+      }
     }
-  }, [openSidebar]);
-  const handleCancel = () => {
-    handleSidebar();
-    setDataSource([]);
   };
-  const handleSubmit = () => {
-    setColumn([...dataSource]);
-    handleCancel();
+  const handleOnKeyDown = (e) => {
+    let flag = false;
+    if (dropdownOpen) {
+      if (e.code === "Escape") {
+        closeMenu();
+        flag = true;
+      } else if (e.code === "Enter") {
+        closeMenu();
+        flag = true;
+      } else if (e.code === "ArrowDown") {
+        focusElement(`form-element-${field}-0`);
+        flag = true;
+      }
+    } else {
+      if (e.code === "ArrowDown") {
+        setDropdownOpen(true);
+        focusElement(`form-element-${field}-0`);
+        flag = true;
+      } else if (e.code === "Space") {
+        setDropdownOpen(true);
+        flag = true;
+      }
+    }
+    if (onKeyDown && !flag) {
+      const key = onKeyDown(e);
+      if (key === "ArrowRight" || key === "ArrowLeft") {
+        closeMenu();
+      }
+    } else {
+      e.stopPropagation();
+      e.preventDefault();
+    }
   };
-  const getWindowSize = () => {
-    const { innerWidth, innerHeight } = window;
-    return { innerWidth, innerHeight };
+  const formKeyDown = (e, handSubmit) => {
+    if (e.code === "Enter") {
+      handSubmit();
+      e.preventDefault();
+      e.stopPropagation();
+    } else {
+      if (onKeyDown) {
+        const key = onKeyDown(e);
+        if (key === "ArrowRight" || key === "ArrowLeft") {
+          closeMenu();
+        }
+      }
+    }
   };
-  const [windowSize, setWindowSize] = useState4(getWindowSize());
-  useEffect5(() => {
-    const handleWindowResize = () => {
-      setWindowSize(getWindowSize());
-    };
-    window.addEventListener("resize", handleWindowResize);
-    return () => {
-      window.removeEventListener("resize", handleWindowResize);
-    };
-  }, []);
-  const renderFooterButtons = () => {
-    return /* @__PURE__ */ jsxs10(Fragment9, { children: [
-      /* @__PURE__ */ jsx10(Button2, { color: "primary", onClick: handleSubmit, className: "me-1", children: t("Confirm") }),
-      /* @__PURE__ */ jsx10(Button2, { color: "secondary", onClick: handleCancel, outline: true, children: t("Close") })
-    ] });
+  const formItemKeyDown = (e, index) => {
+    if (e.code === "ArrowDown" && index < itemsField.length - 1) {
+      focusElement(`form-element-${field}-${index + 1}`);
+      e.preventDefault();
+      e.stopPropagation();
+    } else if (e.code === "ArrowUp" && index > 0) {
+      focusElement(`form-element-${field}-${index - 1}`);
+      e.preventDefault();
+      e.stopPropagation();
+    } else if (e.code === "Tab" && onChangeField && index === itemsField.length - 1) {
+      closeMenu();
+    }
   };
-  const visibleTemplate = (item, index) => {
-    return /* @__PURE__ */ jsx10(
-      Input5,
-      {
-        defaultChecked: item.visible ?? true,
-        disabled: item.invisibleDisable,
-        type: "checkbox",
-        style: { height: 18 },
-        className: " cursor-pointer",
-        onChange: (e) => {
-          if (dataSource) {
-            dataSource[index].visible = e.target.checked;
-            setDataSource(dataSource);
-          }
-        }
+  const elementChange = (field2) => {
+    if (onChangeField) {
+      onChangeField(rowData, field2, setValue, getValues);
+      const rs = getValues();
+      if (rs) {
+        onChange(rs);
       }
-    );
+    }
   };
-  const fixColumnTemplate = (item, index) => {
-    return /* @__PURE__ */ jsx10(
-      Input5,
-      {
-        defaultChecked: item.fixedType === "left" || item.fixedType === "right",
-        type: "checkbox",
-        style: { height: 18 },
-        className: " cursor-pointer",
-        onChange: (e) => {
-          if (dataSource) {
-            if (e.target.checked) {
-              if (index * 2 <= dataSource.length) {
-                dataSource[index].fixedType = "left";
-              } else {
-                dataSource[index].fixedType = "right";
-              }
-            } else {
-              dataSource[index].fixedType = void 0;
+  const renderForm = (rows) => {
+    return /* @__PURE__ */ jsx7(Row, { className: "gy-25", children: rows.map((item, index) => {
+      if (item.type === "numeric") {
+        return /* @__PURE__ */ jsx7(Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ jsx7(
+          input_number_default,
+          {
+            id: `form-element-${field}-${index}`,
+            control,
+            name: item.name,
+            label: item.label ? item.label : "",
+            labelSize: `text-left ${labelSize}`,
+            errors: errors[item.name],
+            disabled: item.disabled,
+            min: item.min,
+            max: item.max,
+            fractionCurrency: item.fraction,
+            callback: () => {
+              elementChange(item.name);
             }
-            setDataSource(dataSource);
-          }
-        }
+          },
+          index
+        ) }, index);
+      } else if (item.type === "text") {
+        return /* @__PURE__ */ jsx7(Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ jsx7(
+          input_text_default,
+          {
+            id: `form-element-${field}-${index}`,
+            control,
+            name: item.name,
+            label: item.label ? item.label : "",
+            labelSize: `text-left ${labelSize}`,
+            errors: errors[item.name],
+            disabled: item.disabled,
+            callback: () => {
+              elementChange(item.name);
+            }
+          },
+          index
+        ) }, index);
+      } else if (item.type === "select") {
+        return /* @__PURE__ */ jsx7(Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ jsx7(
+          select_table_default,
+          {
+            id: `form-element-${field}-${index}`,
+            defaultOptions: item.options ?? [],
+            control,
+            name: item.name,
+            label: item.label ? item.label : "",
+            labelSize: `text-left ${labelSize}`,
+            errors: errors[item.name],
+            disabled: item.disabled,
+            callback: () => {
+              elementChange(item.name);
+            }
+          },
+          index
+        ) }, index);
       }
-    );
+    }) });
   };
-  const columns = [
-    {
-      field: "headerText",
-      headerText: "Column name",
-      template: (e) => {
-        return /* @__PURE__ */ jsx10(Fragment10, { children: t(e.headerText) });
-      },
-      visible: true,
-      width: 175,
-      maxWidth: 200,
-      minWidth: 150
-    },
+  return /* @__PURE__ */ jsx7(
+    "div",
     {
-      field: "",
-      template: visibleTemplate,
-      headerText: "Display",
-      textAlign: "center",
-      visible: true,
-      width: 100,
-      maxWidth: 120,
-      minWidth: 80
-    },
-    {
-      field: "",
-      template: fixColumnTemplate,
-      headerText: "Fix the column",
-      textAlign: "center",
-      visible: true,
-      width: 100,
-      maxWidth: 120,
-      minWidth: 80
-    },
-    {
-      field: "width",
-      headerText: "Column width",
-      textAlign: "right",
-      visible: true,
-      width: 100,
-      maxWidth: 120,
-      minWidth: 80
-    }
-  ];
-  const renderHeaderCol = (col, indexCol) => {
-    return /* @__PURE__ */ jsx10(
-      Fragment9,
-      {
-        children: col.visible !== false && /* @__PURE__ */ jsx10(
-          "th",
-          {
-            className: classnames5(
-              `r-headercell fix-${col.fixedType}`,
-              { "cell-fixed": col.fixedType }
-            ),
-            style: {
-              width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width,
-              minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
-              top: `${0 * 42}px`,
-              maxWidth: col.maxWidth
-            },
-            children: /* @__PURE__ */ jsx10(
-              "div",
+      className: "form-edit",
+      ref,
+      id,
+      children: /* @__PURE__ */ jsx7("div", { ref: editFormRef, children: /* @__PURE__ */ jsxs7(
+        Dropdown2,
+        {
+          isOpen: dropdownOpen,
+          toggle: () => {
+          },
+          children: [
+            /* @__PURE__ */ jsx7(DropdownToggle2, { tag: "div", children: /* @__PURE__ */ jsx7(
+              Input5,
               {
-                role: "textbox",
-                title: t(col.headerText ?? ""),
-                style: {
-                  height: `${1 * 42}px`,
-                  justifyContent: col.textAlign ?? "left"
-                },
-                className: "r-headercell-div",
-                children: t(col.headerText ?? "")
+                style: { backgroundColor: "#FFF", textAlign: textAlign ?? "left" },
+                placeholder,
+                innerRef: inputRef,
+                className: classNames2("input-display input-numeric", { "is-invalid": invalid }),
+                value: displayValue,
+                onClick: handleOnClick,
+                onKeyDown: (e) => handleOnKeyDown(e),
+                onPaste: (e) => onPaste && onPaste(e),
+                readOnly: true
               }
-            )
-          }
-        )
-      },
-      `header-${indexCol}`
-    );
-  };
-  return /* @__PURE__ */ jsxs10(
-    sidebar_default,
-    {
-      open: openSidebar,
-      toggleSidebar: handleCancel,
-      width: 700,
-      children: [
-        /* @__PURE__ */ jsx10(modal_header_default, { typeModal: "Edit", handleModal: handleCancel, title: "Column setup" }),
-        /* @__PURE__ */ jsx10("div", { className: "ms-2 react-table-edit", children: /* @__PURE__ */ jsx10("div", { className: "r-grid", children: /* @__PURE__ */ jsx10("div", { className: "r-gridtable", style: { height: windowSize.innerHeight - 120 }, children: /* @__PURE__ */ jsxs10("table", { style: { width: "100%" }, children: [
-          /* @__PURE__ */ jsx10("thead", { className: "r-gridheader", children: /* @__PURE__ */ jsx10("tr", { className: "r-row", role: "row", children: columns.map((col, index) => {
-            return renderHeaderCol(col, index);
-          }) }) }),
-          /* @__PURE__ */ jsx10("tbody", { className: "r-gridcontent", children: dataSource?.map((row, indexRow) => {
-            return /* @__PURE__ */ jsx10(
-              "tr",
+            ) }),
+            /* @__PURE__ */ jsx7(
+              DropdownMenu2,
               {
-                className: classnames5("r-row", { "last-row": indexRow === dataSource.length - 1 }, { "fisrt-row": indexRow === 0 }),
-                children: columns.map((col, indexCol) => {
-                  let value = row[col.field];
-                  if (col.editType === "numeric" || col.editTypeCondition && col.editTypeCondition(row) === "numeric") {
-                    value = formartNumberic(row[col.field], ",", ".", col.numericSettings?.fraction, true) ?? 0;
-                  }
-                  return /* @__PURE__ */ jsx10(Fragment9, { children: col.visible !== false && /* @__PURE__ */ jsx10(
-                    "td",
+                className: "formula-dropdown icon-dropdown p-0",
+                style: {
+                  minWidth: minWidth ? minWidth : defaultWidth,
+                  width: menuWidth ? menuWidth : "min-content",
+                  maxWidth: innerWidth > 1280 ? 1280 : innerWidth,
+                  borderRadius: 8,
+                  zIndex: 1056
+                },
+                children: /* @__PURE__ */ jsxs7(DropdownItem2, { className: "p-0", style: { borderRadius: "6px" }, tag: "div", header: true, children: [
+                  /* @__PURE__ */ jsx7(
+                    "div",
                     {
-                      className: classnames5(
-                        `r-rowcell fix-${col.fixedType}`,
-                        { "cell-fixed": col.fixedType },
-                        { "r-active": indexFocus === indexRow }
-                      ),
+                      onKeyDown: (e) => formKeyDown(e, handleSubmit(handleOnSubmit)),
+                      className: "p-1",
                       style: {
-                        padding: 0,
-                        textAlign: col.textAlign ? col.textAlign : "left"
-                      },
-                      onFocus: (e) => {
-                        if (indexRow !== indexFocus) {
-                          setIndexFocus(indexRow);
-                        }
-                        e.stopPropagation();
-                      },
-                      onClick: (e) => {
-                        if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
-                          if (indexRow !== indexFocus) {
-                            setIndexFocus(indexRow);
-                          }
-                          e.stopPropagation();
-                        }
+                        maxHeight: menuHeight ? menuHeight : 300,
+                        overflow: "auto"
                       },
-                      children: /* @__PURE__ */ jsx10(
-                        "div",
+                      children: itemsField ? renderForm(itemsField) : ""
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs7("div", { className: "d-flex justify-content-between p-50", style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }, children: [
+                    /* @__PURE__ */ jsx7("div", { className: "text-primary py-25", style: { fontSize: 12 }, children: footerTemplate ? footerTemplate(rowData) : "" }),
+                    !onChangeField ? /* @__PURE__ */ jsxs7("div", { className: "d-flex justify-content-end", children: [
+                      isClearable && /* @__PURE__ */ jsx7(
+                        Button2,
                         {
-                          className: classnames5("r-rowcell-div"),
-                          style: {
-                            width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : "auto"
+                          ref: buttonRef,
+                          className: "btn me-50 py-25 px-50",
+                          outline: true,
+                          onClick: () => {
+                            itemsField.forEach((e) => {
+                              if (e.type === "numeric") {
+                                setValue(e.name, 0);
+                              } else {
+                                setValue(e.name, "");
+                              }
+                            });
                           },
-                          children: /* @__PURE__ */ jsx10(
-                            "div",
-                            {
-                              className: classnames5("r-rowcell-content"),
-                              style: {
-                                margin: "7px 9px"
-                              },
-                              children: /* @__PURE__ */ jsx10("div", { className: "r-cell-text", children: col.template ? col.template(row, indexRow) : value })
+                          onKeyDown: (e) => {
+                            if (e.code === "Tab") {
+                              closeMenu();
                             }
-                          )
+                          },
+                          children: t("Clear")
+                        }
+                      ),
+                      /* @__PURE__ */ jsx7(
+                        Button2,
+                        {
+                          ref: buttonRef,
+                          color: "primary",
+                          className: "btn btn-primary py-25 px-50",
+                          onClick: handleSubmit(handleOnSubmit),
+                          onKeyDown: (e) => {
+                            if (e.code === "Tab") {
+                              closeMenu();
+                            }
+                          },
+                          children: t("Save")
                         }
                       )
-                    },
-                    `col-${indexRow}-${indexCol}`
-                  ) }, indexCol);
-                })
-              },
-              `row-${indexRow}`
-            );
-          }) })
-        ] }) }) }) }),
-        /* @__PURE__ */ jsx10(
-          "div",
-          {
-            className: "d-flex justify-content-end p-1 ",
-            style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" },
-            children: renderFooterButtons()
-          }
-        )
-      ]
+                    ] }) : /* @__PURE__ */ jsx7(Fragment9, {})
+                  ] })
+                ] })
+              }
+            )
+          ]
+        }
+      ) })
     }
   );
-};
-var sidebar_setting_column_default = SidebarSetColumn;
-
-// test-app/src/component/table/index.tsx
-import { DropDownTreeComponent } from "@syncfusion/ej2-react-dropdowns";
+});
+var edit_form_default = EditForm;
 
-// test-app/src/component/paging/index.tsx
-import { ChevronRight as ChevronRight2, ChevronLeft as ChevronLeft2, ChevronsLeft, ChevronsRight } from "becoxy-icons";
-import classNames5 from "classnames";
+// test-app/src/component/sidebar-setting-column/index.tsx
 import { Fragment as Fragment11, useEffect as useEffect6, useState as useState5 } from "react";
-import { useTranslation as useTranslation8 } from "react-i18next";
-import Select2 from "react-select";
-import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
-var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOptions, onChangePageSize }) => {
-  const { t } = useTranslation8();
-  const [countPage, setCountPage] = useState5(0);
-  const [currentPageNumber, setCurrentPageNumber] = useState5(1);
-  useEffect6(() => {
-    setCountPage(Math.floor(totalItem / pageSize) + (Math.floor(totalItem / pageSize) === totalItem / pageSize ? 0 : 1));
-  }, [totalItem, pageSize]);
-  useEffect6(() => {
-    setCurrentPageNumber(Math.floor(currentPage / 5) + (Math.floor(currentPage / 5) === currentPage / 5 ? 0 : 1));
-  }, [currentPage]);
-  const renderPageNumber = (number) => {
-    const arr = [];
-    for (let index = (number - 1) * 5 + 1; index <= number * 5 && index <= Math.floor(totalItem / pageSize) + (Math.floor(totalItem / pageSize) === totalItem / pageSize ? 0 : 1); index++) {
-      arr.push(
-        /* @__PURE__ */ jsx11(
-          "div",
-          {
-            className: classNames5("r-number", { "r-active": index === currentPage }),
-            onClick: () => {
-              onChangePage({ totalItem, pageSize, currentPage: index, old: currentPage });
-            },
-            children: index
-          },
-          `page-${index}`
-        )
-      );
-    }
-    return arr;
-  };
-  return /* @__PURE__ */ jsx11(Fragment11, { children: /* @__PURE__ */ jsxs11("div", { className: "r-pager", children: [
-    /* @__PURE__ */ jsxs11("div", { className: "r-pagercontainer", children: [
-      /* @__PURE__ */ jsx11("button", { className: "r-button", type: "button", disabled: countPage <= 1 || currentPage === 1, onClick: () => onChangePage({ totalItem, pageSize, currentPage: 1, old: currentPage }), children: /* @__PURE__ */ jsx11(ChevronsLeft, { fontSize: 16 }) }),
-      /* @__PURE__ */ jsx11("button", { className: "r-button", type: "button", disabled: countPage <= 1 || currentPage === 1, onClick: () => onChangePage({ totalItem, pageSize, currentPage: currentPage - 1, old: currentPage }), children: /* @__PURE__ */ jsx11(ChevronLeft2, { fontSize: 16 }) }),
-      /* @__PURE__ */ jsx11(
-        "button",
-        {
-          className: classNames5("r-button", { "d-none": currentPageNumber === 1 }),
-          type: "button",
-          onClick: () => {
-            setCurrentPageNumber(currentPageNumber - 1);
-            onChangePage({ totalItem, pageSize, currentPage: (currentPageNumber - 2) * 5 + 1, old: currentPage });
-          },
-          children: "..."
-        }
-      ),
-      renderPageNumber(currentPageNumber),
-      /* @__PURE__ */ jsx11(
-        "button",
-        {
-          className: classNames5("r-button", { "d-none": currentPageNumber * 5 >= countPage }),
-          type: "button",
-          onClick: () => {
-            setCurrentPageNumber(currentPageNumber + 1);
-            onChangePage({ totalItem, pageSize, currentPage: currentPageNumber * 5 + 1, old: currentPage });
-          },
-          children: "..."
-        }
-      ),
-      /* @__PURE__ */ jsx11("button", { className: "r-button", type: "button", disabled: countPage <= 1 || countPage === currentPage, onClick: () => onChangePage({ totalItem, pageSize, currentPage: currentPage + 1, old: currentPage }), children: /* @__PURE__ */ jsx11(ChevronRight2, { fontSize: 16 }) }),
-      /* @__PURE__ */ jsx11("button", { className: "r-button", type: "button", disabled: countPage <= 1 || countPage === currentPage, onClick: () => onChangePage({ totalItem, pageSize, currentPage: Math.floor(totalItem / pageSize) + (Math.floor(totalItem / pageSize) === totalItem / pageSize ? 0 : 1), old: currentPage }), children: /* @__PURE__ */ jsx11(ChevronsRight, { fontSize: 16 }) }),
-      /* @__PURE__ */ jsx11("div", { className: "r-pagesize", children: /* @__PURE__ */ jsx11(
-        Select2,
-        {
-          value: { value: pageSize, label: pageSize },
-          options: pageOptions.map((item) => ({ value: item, label: item })),
-          onChange: (val) => {
-            onChangePageSize({ totalItem, pageSize: val?.value });
-          },
-          menuPosition: "fixed",
-          placeholder: t("Select"),
-          classNamePrefix: "select-pagesize"
-        }
-      ) }),
-      /* @__PURE__ */ jsx11("span", { style: { display: "inline", marginLeft: 10, fontSize: 13 }, children: t("pagerDropDown") })
-    ] }),
-    /* @__PURE__ */ jsx11("div", { className: "r-parentmsgbar", children: t("totalItemsInfo", { page: currentPage, countPage, totalItem }) })
-  ] }) });
-};
+import { Button as Button3, Input as Input6 } from "reactstrap";
+import { useTranslation as useTranslation7 } from "react-i18next";
 
-// test-app/src/component/select-table/index.tsx
-import { forwardRef as forwardRef2, Fragment as Fragment12, useEffect as useEffect7, useMemo, useRef as useRef2, useState as useState6 } from "react";
-import {
-  DropdownItem as DropdownItem2,
-  DropdownMenu as DropdownMenu2,
-  DropdownToggle as DropdownToggle2,
-  Dropdown as Dropdown2,
-  Button as Button3,
-  Input as Input6,
-  Spinner,
-  UncontrolledTooltip
-} from "reactstrap";
-import { useTranslation as useTranslation9 } from "react-i18next";
-import classnames6 from "classnames";
-import moment from "moment";
-import { Plus as Plus2 } from "becoxy-icons";
-import { Fragment as Fragment13, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
-var defaultMaxHeight = 250;
-var SelectTable = forwardRef2((props, ref) => {
-  const {
-    id,
-    menuWidth,
-    invalid,
-    onKeyDown,
-    placeholder,
-    textAlign,
-    options,
-    columns,
-    decimalSeparator,
-    thousandSeparator,
-    onChange,
-    value,
-    fieldValue,
-    fieldLabel,
-    loadOptions,
-    maxHeight,
-    handleAdd,
-    isClearable,
-    component,
-    formatOptionLabel,
-    isMulti,
-    noHeader,
-    isDisabled,
-    showFooter,
-    onPaste
-  } = props;
-  const selectTableRef = useRef2();
-  const selectMenuTableRef = useRef2();
-  const inputRef = useRef2();
-  const [dropdownOpen, setDropdownOpen] = useState6(false);
-  const [indexFocus, setIndexFocus] = useState6(-1);
-  const [isFocus, setIsFocus] = useState6(false);
-  const [isLoading, setIsLoading] = useState6(false);
-  const [searchTerm, setSearchTerm] = useState6("");
-  const [optionsLoad, setOptionsLoad] = useState6();
-  const { t } = useTranslation9();
-  const isSelectedAll = useMemo(() => {
-    return isMulti === true && (optionsLoad ? optionsLoad : options).length > 0 && value?.length >= (optionsLoad ? optionsLoad : options).length;
-  }, [optionsLoad, options, value]);
-  const defaultColumns = noHeader ? [
-    {
-      headerText: "Name",
-      field: fieldLabel ?? "label",
-      width: menuWidth
-    }
-  ] : [
-    {
-      field: "key",
-      headerText: "Code",
-      width: 100,
-      maxWidth: 120,
-      minWidth: 80
-    },
-    {
-      headerText: "Name",
-      field: "label",
-      width: 150,
-      maxWidth: 200,
-      minWidth: 250
-    }
-  ];
-  const closeMenu = () => {
-    setDropdownOpen(false);
-  };
-  useEffect7(() => {
-    if (dropdownOpen && value && !isMulti && selectMenuTableRef) {
-      setTimeout(() => {
-        const elementFocus = document.getElementById(`row-select-table-${(optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"])}`);
-        if (elementFocus) {
-          const parentRect = selectMenuTableRef.current.getBoundingClientRect();
-          const childRect = elementFocus.getBoundingClientRect();
-          const offset = childRect.top - parentRect.top + selectMenuTableRef.current.scrollTop - parentRect.height / 2 + childRect.height / 2;
-          selectMenuTableRef.current.scrollTo({ top: offset, behavior: "smooth" });
-        }
-      }, 100);
-    }
-  }, [dropdownOpen]);
-  useEffect7(() => {
-    if (inputRef && !isDisabled) {
-      inputRef.current.addEventListener("blur", function() {
-        setDropdownOpen(false);
-        setSearchTerm("");
-        setIsFocus(false);
-      });
-      inputRef.current.addEventListener("focus", function() {
-        if (!isFocus) {
-          setIsFocus(true);
-        }
-      });
-    }
-  }, [inputRef]);
-  useEffect7(() => {
-    if (searchTerm && !dropdownOpen) {
-      setDropdownOpen(true);
-      setIndexFocus(0);
-    }
-  }, [searchTerm]);
-  const handleOpenClose = () => {
-    setSearchTerm("");
-    if (dropdownOpen) {
-      closeMenu();
+// test-app/src/component/modal-header/index.tsx
+import { Edit, Info, Plus as Plus2, X as X2 } from "becoxy-icons";
+import classNames3 from "classnames";
+import { useTranslation as useTranslation6 } from "react-i18next";
+import { Fragment as Fragment10, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var ModalHeader = (props) => {
+  const { title, handleModal, typeModal = "Edit", component } = props;
+  const { t } = useTranslation6();
+  const handleModalIcon = () => {
+    if (typeModal === "Edit" || typeModal === "Approval") {
+      return /* @__PURE__ */ jsx8(Edit, { fontSize: 17, className: "me-1" });
+    } else if (typeModal === "View") {
+      return /* @__PURE__ */ jsx8(Info, { fontSize: 17, className: "me-1" });
+    } else if (typeModal === "Detail") {
+      return /* @__PURE__ */ jsx8(Info, { fontSize: 17, className: "me-1" });
+    } else if (typeModal === "Order") {
+      return /* @__PURE__ */ jsx8("span", { className: "e-icons e-sorting-1 me-1", style: { fontSize: "14px" } });
+    } else if (typeModal === "Process") {
+      return /* @__PURE__ */ jsx8("span", { className: "e-flat e-icons e-paste-match-destination me-1", style: { fontSize: "14px" } });
     } else {
-      if (!isDisabled) {
-        setDropdownOpen(true);
-      }
+      return /* @__PURE__ */ jsx8(Plus2, { fontSize: 17, className: "me-1" });
     }
   };
-  const listKeyUse = ["Escape", "Space", "Enter", "Tab", "NumpadEnter", "ArrowDown", "ArrowUp", "F9"];
-  const handleOnKeyDown = (e) => {
-    let key = "";
-    if (onKeyDown && (!dropdownOpen || !listKeyUse.includes(e.code))) {
-      key = onKeyDown(e);
-      if (key === "ArrowRight" || key === "ArrowLeft") {
-        closeMenu();
+  return /* @__PURE__ */ jsxs8("div", { className: "modal-header d-flex align-items-center justify-content-between mb-1", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "d-flex align-items-center justify-content-start", children: [
+      /* @__PURE__ */ jsxs8("h5", { className: "modal-title", children: [
+        handleModalIcon(),
+        " ",
+        t(title)
+      ] }),
+      component ? component() : /* @__PURE__ */ jsx8(Fragment10, {})
+    ] }),
+    /* @__PURE__ */ jsx8("div", { className: "todo-item-action d-flex align-items-center", children: /* @__PURE__ */ jsx8(
+      X2,
+      {
+        className: classNames3("fw-normal mt-25 cursor-pointer", { "d-none": !handleModal }),
+        fontSize: 20,
+        onClick: handleModal
       }
-    }
-    let flag = false;
-    if (!key) {
-      if (e.code === "F9") {
-        handleAdd();
-        flag = true;
-      } else if (e.code === "Escape" || e.code === "Space") {
-        if (dropdownOpen) {
-          if ((optionsLoad ? optionsLoad : options)[indexFocus]) {
-            onChange((optionsLoad ? optionsLoad : options)[indexFocus]);
-          }
-        }
-        if (!searchTerm) {
-          handleOpenClose();
-          flag = true;
-        }
-      } else if (e.code === "Enter" || e.code === "Tab" || e.code === "NumpadEnter") {
-        if (dropdownOpen) {
-          onChange((optionsLoad ? optionsLoad : options)[indexFocus]);
-          handleOpenClose();
-          flag = true;
-        }
-      } else if (e.code === "ArrowDown") {
-        if (dropdownOpen) {
-          let newIndex = 0;
-          if (indexFocus >= 0) {
-            newIndex = indexFocus + 1;
-          } else if (value) {
-            newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((e2) => e2[fieldValue ?? "value"] === value[fieldValue ?? "value"]) + 1;
-          }
-          if (newIndex < (optionsLoad ? optionsLoad : options).length) {
-            setIndexFocus(newIndex);
-            checkIfElementIsOutOfScroll(0, newIndex);
-          } else {
-            setIndexFocus(0);
-            checkIfElementIsOutOfScroll(1, 0);
-          }
-          flag = true;
-        } else {
-          handleOpenClose();
-          flag = true;
-        }
-      } else if (e.code === "ArrowUp") {
-        if (dropdownOpen) {
-          let newIndex = 0;
-          if (indexFocus >= 0) {
-            newIndex = indexFocus - 1;
-          } else if (value) {
-            newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((e2) => e2[fieldValue ?? "value"] === value[fieldValue ?? "value"]) - 1;
-          }
-          if (newIndex >= 0) {
-            setIndexFocus(newIndex);
-            checkIfElementIsOutOfScroll(2, newIndex);
-          } else {
-            setIndexFocus((optionsLoad ? optionsLoad : options).length - 1);
-            checkIfElementIsOutOfScroll(3, (optionsLoad ? optionsLoad : options).length - 1);
-          }
-          flag = true;
-        }
+    ) })
+  ] });
+};
+var modal_header_default = ModalHeader;
+
+// test-app/src/component/sidebar/index.tsx
+import { ChevronLeft, ChevronRight } from "becoxy-icons";
+import classNames4 from "classnames";
+import { useEffect as useEffect5, useState as useState4 } from "react";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var Sidebar = (props) => {
+  const {
+    open,
+    children,
+    toggleSidebar,
+    width,
+    keyboard,
+    hiddenBackground,
+    hiddenFullScreenButton
+  } = props;
+  const [isFullScreen, setIsFullScreen] = useState4(false);
+  const [flag, setFlag] = useState4(open);
+  useEffect5(() => {
+    if (open !== flag) {
+      if (open) {
+        setFlag(open);
+      } else {
+        setTimeout(() => {
+          setFlag(open);
+        }, 50);
       }
     }
-    if (flag) {
-      e.stopPropagation();
-      e.preventDefault();
-    }
+  }, [open]);
+  const handClose = () => {
+    setFlag(false);
+    setTimeout(() => {
+      toggleSidebar();
+    }, 400);
   };
-  const checkIfElementIsOutOfScroll = (flag, index) => {
-    if (selectMenuTableRef) {
-      const elementFocus = document.getElementById(`row-select-table-${index}`);
-      console.log(elementFocus);
-      if (elementFocus) {
-        const rect = elementFocus.getBoundingClientRect();
-        const parentRect = selectMenuTableRef.current?.getBoundingClientRect();
-        if (flag === 1) {
-          scrollToElement(selectMenuTableRef.current, 0);
-        } else if (flag === 3) {
-          scrollToElement(selectMenuTableRef.current, selectMenuTableRef.current.scrollHeight);
-        } else if (flag === 0 && rect.bottom + 30 > parentRect.bottom) {
-          scrollToElement(selectMenuTableRef.current, elementFocus.offsetTop - selectMenuTableRef.current.offsetTop - parentRect.height + rect.height + 50);
-        } else if (flag === 2 && rect.top < parentRect.top + 50) {
-          scrollToElement(selectMenuTableRef.current, elementFocus.offsetTop - 65);
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      tabIndex: 0,
+      className: classNames4({ "d-none": !open }),
+      onKeyDown: (e) => {
+        if (!keyboard && e.code === "Escape" && flag) {
+          handClose();
+          e.stopPropagation();
+          e.preventDefault();
         }
-      }
-    }
-  };
-  let timeOutElement;
-  const scrollToElement = (elemment, top) => {
-    clearTimeout(timeOutElement);
-    timeOutElement = setTimeout(() => {
-      elemment.scrollTo({
-        top,
-        behavior: "smooth"
-      });
-    }, 100);
-  };
-  const renderHeaderCol = (col, indexCol) => {
-    return /* @__PURE__ */ jsx12(
-      Fragment12,
-      {
-        children: col.visible !== false && /* @__PURE__ */ jsx12(
-          "th",
-          {
-            className: classnames6(
-              `r-select-headercell fix-${col.fixedType}`,
-              { "cell-fixed": col.fixedType }
-            ),
-            style: {
-              width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width,
-              minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
-              top: `${0 * 35}px`,
-              maxWidth: col.maxWidth
-            },
-            children: /* @__PURE__ */ jsx12(
-              "div",
-              {
-                role: "textbox",
-                title: t(col.headerText ?? ""),
-                style: {
-                  height: `${1 * 35}px`,
-                  justifyContent: col.textAlign ?? "left"
-                },
-                className: "r-select-headercell-div",
-                children: t(col.headerText ?? "")
-              }
-            )
-          }
-        )
       },
-      `header-select-${indexCol}`
-    );
-  };
-  const checkSearch = (keyword, data, columnsSearch) => {
-    if (!keyword || columnsSearch.length === 0) {
-      return true;
-    }
-    for (let index = 0; index < columnsSearch.length; index++) {
-      const key = columnsSearch[index].field.trim();
-      if (data[key] && data[key].toString().trim().toLowerCase().includes(keyword.trim().toLowerCase())) {
-        return true;
-      }
-    }
-    return false;
-  };
-  const callbackLoadOption = (rs) => {
-    setIsLoading(false);
-    setOptionsLoad(rs);
-  };
-  useEffect7(() => {
-    if (!searchTerm) {
-      setOptionsLoad(void 0);
-    }
-  }, [searchTerm]);
-  const checkOverflow = (indexRow, indexCol) => {
-    const element = document.getElementById(`select-${id}-${indexRow}-${indexCol}`);
-    return element && element.scrollWidth > element.clientWidth;
-  };
-  const RenderElement = (props2) => {
-    const { indexRow, row, isSelected, level = 0 } = props2;
-    return /* @__PURE__ */ jsxs12(
-      "tr",
-      {
-        id: `row-select-table-${indexRow}`,
-        style: { paddingLeft: 10 * level },
-        className: classnames6("r-select-row", { "last-row": indexRow === (optionsLoad ? optionsLoad : options).length - 1 }, { "fisrt-row": indexRow === 0 }),
-        children: [
-          isMulti && /* @__PURE__ */ jsx12(
-            "td",
-            {
-              className: classnames6(`r-select-rowcell`, { "r-select-move": indexFocus === indexRow, "r-select-active": !isMulti && value && value[fieldValue ?? "value"] === row[fieldValue ?? "value"] }),
-              style: { width: 40, textAlign: "center", padding: 0, paddingBottom: 6 },
-              onClick: (e) => {
-                if (isMulti) {
-                  const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
-                  if (index > -1) {
-                    value?.splice(index, 1);
-                    const valueArr = (optionsLoad ? optionsLoad : options).filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
-                    onChange(valueArr);
-                  } else {
-                    if (value) {
-                      value?.push(row[fieldValue ?? "value"]);
-                      const valueArr = (optionsLoad ? optionsLoad : options).filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
-                      onChange(valueArr);
-                    } else {
-                      onChange([row[fieldValue ?? "value"]]);
-                    }
-                  }
-                  e.stopPropagation();
-                }
-              },
-              children: /* @__PURE__ */ jsx12(
-                Input6,
-                {
-                  checked: isSelected,
-                  type: "checkbox",
-                  className: "cursor-pointer",
-                  onChange: () => {
-                  },
-                  style: { textAlign: "center", marginTop: 6 }
-                }
-              )
-            }
-          ),
-          (columns ? columns : defaultColumns).map((col, indexCol) => {
-            let valueDisplay = row[col.field];
-            if (col.type === "numeric" || col.typeCondition && col.typeCondition(row) === "numeric") {
-              valueDisplay = formartNumberic(row[col.field], decimalSeparator ?? ".", thousandSeparator ?? ",", col.fraction ?? 0, true) ?? 0;
-            } else if (col.type === "date") {
-              valueDisplay = valueDisplay ? moment(valueDisplay).format("DD/MM/yyyy") : "";
-            } else if (col.type === "datetime") {
-              valueDisplay = valueDisplay ? moment(valueDisplay).format("DD/MM/yyyy HH:mm") : "";
-            }
-            return /* @__PURE__ */ jsxs12(Fragment12, { children: [
-              col.visible !== false && /* @__PURE__ */ jsx12(
-                "td",
-                {
-                  id: `select-${id}-${indexRow}-${indexCol}`,
-                  className: classnames6(`r-select-rowcell`, { "r-select-move": indexFocus === indexRow, "r-select-active": !isMulti && value && value[fieldValue ?? "value"] === row[fieldValue ?? "value"] }),
-                  style: {
-                    minWidth: col.minWidth,
-                    width: col.width,
-                    maxWidth: col.maxWidth,
-                    textAlign: col.textAlign ? col.textAlign : "left"
-                  },
-                  onClick: (e) => {
-                    if (isMulti) {
-                      const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
-                      if (index > -1) {
-                        value?.splice(index, 1);
-                        const valueArr = (optionsLoad ? optionsLoad : options).filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
-                        onChange(valueArr);
-                      } else {
-                        if (value) {
-                          value?.push(row[fieldValue ?? "value"]);
-                          const valueArr = (optionsLoad ? optionsLoad : options).filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
-                          onChange(valueArr);
-                        } else {
-                          onChange([row[fieldValue ?? "value"]]);
-                        }
-                      }
-                    } else {
-                      onChange(row);
-                      setSearchTerm("");
-                      closeMenu();
-                    }
-                    e.preventDefault();
-                    e.stopPropagation();
+      children: [
+        /* @__PURE__ */ jsx9(
+          "div",
+          {
+            className: classNames4("offcanvas-backdrop fade", {
+              "d-none": !flag || hiddenBackground,
+              show: flag
+            }),
+            style: { zIndex: 1056 },
+            onClick: handClose
+          }
+        ),
+        /* @__PURE__ */ jsxs9(
+          "div",
+          {
+            className: classNames4("customizer d-none d-md-block ", `customizer-${width ?? 600}`, {
+              open: flag,
+              fullscreen: isFullScreen
+            }),
+            style: { zIndex: 1057 },
+            children: [
+              /* @__PURE__ */ jsxs9(
+                "div",
+                {
+                  style: {
+                    position: "fixed",
+                    top: "50%",
+                    transform: "translate(-50%, -50%)",
+                    background: "#FFF",
+                    filter: "drop-shadow(0.9px 0.9px 1.5px)",
+                    height: 50,
+                    display: "flex",
+                    alignItems: "center",
+                    borderRadius: "0px 5px 5px 0px",
+                    cursor: "pointer",
+                    zIndex: 9,
+                    marginLeft: 7
                   },
-                  onMouseMove: (e) => {
-                    if (indexRow !== indexFocus) {
-                      setIndexFocus(indexRow);
-                    }
-                    e.stopPropagation();
+                  className: classNames4({ "d-none": hiddenFullScreenButton }),
+                  onClick: () => {
+                    setIsFullScreen(!isFullScreen);
                   },
-                  children: col.template ? col.template(row, indexRow) : valueDisplay
-                },
-                `col-${indexRow}-${indexCol}`
+                  children: [
+                    /* @__PURE__ */ jsx9(ChevronLeft, { className: `${isFullScreen ? "d-none" : ""}`, fontSize: 16 }),
+                    /* @__PURE__ */ jsx9(ChevronRight, { className: `${!isFullScreen ? "d-none" : ""}`, fontSize: 15 })
+                  ]
+                }
               ),
-              checkOverflow(indexRow, indexCol) && /* @__PURE__ */ jsx12(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay })
-            ] }, indexCol);
-          })
-        ]
-      },
-      `row-${indexRow}`
+              children
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var sidebar_default = Sidebar;
+
+// test-app/src/component/sidebar-setting-column/index.tsx
+import classnames5 from "classnames";
+import { Fragment as Fragment12, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+var SidebarSetColumn = (props) => {
+  const { column, setColumn, openSidebar, handleSidebar } = props;
+  const { t } = useTranslation7();
+  const [dataSource, setDataSource] = useState5([]);
+  const [indexFocus, setIndexFocus] = useState5();
+  useEffect6(() => {
+    if (openSidebar) {
+      setDataSource(column.map((e) => ({ ...e })));
+    }
+  }, [openSidebar]);
+  const handleCancel = () => {
+    handleSidebar();
+    setDataSource([]);
+  };
+  const handleSubmit = () => {
+    setColumn([...dataSource]);
+    handleCancel();
+  };
+  const getWindowSize = () => {
+    const { innerWidth, innerHeight } = window;
+    return { innerWidth, innerHeight };
+  };
+  const [windowSize, setWindowSize] = useState5(getWindowSize());
+  useEffect6(() => {
+    const handleWindowResize = () => {
+      setWindowSize(getWindowSize());
+    };
+    window.addEventListener("resize", handleWindowResize);
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
+  const renderFooterButtons = () => {
+    return /* @__PURE__ */ jsxs10(Fragment11, { children: [
+      /* @__PURE__ */ jsx10(Button3, { color: "primary", onClick: handleSubmit, className: "me-1", children: t("Confirm") }),
+      /* @__PURE__ */ jsx10(Button3, { color: "secondary", onClick: handleCancel, outline: true, children: t("Close") })
+    ] });
+  };
+  const visibleTemplate = (item, index) => {
+    return /* @__PURE__ */ jsx10(
+      Input6,
+      {
+        defaultChecked: item.visible ?? true,
+        disabled: item.invisibleDisable,
+        type: "checkbox",
+        style: { height: 18 },
+        className: " cursor-pointer",
+        onChange: (e) => {
+          if (dataSource) {
+            dataSource[index].visible = e.target.checked;
+            setDataSource(dataSource);
+          }
+        }
+      }
     );
   };
-  const RenderTable = (props2) => {
-    const {} = props2;
-    let countDisplay = 0;
-    return /* @__PURE__ */ jsxs12(Fragment13, { children: [
-      /* @__PURE__ */ jsxs12("table", { style: { width: "100%" }, children: [
-        !noHeader && /* @__PURE__ */ jsx12("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ jsxs12("tr", { className: "r-select-row", role: "row", children: [
-          isMulti && /* @__PURE__ */ jsx12("th", { className: classnames6(`r-select-headercell`), style: { width: 40, top: `0px` }, children: /* @__PURE__ */ jsx12(
-            "div",
-            {
-              style: { justifyContent: "center" },
-              className: classnames6("r-select-headercell-div"),
-              children: /* @__PURE__ */ jsx12(
-                Input6,
-                {
-                  checked: isSelectedAll,
-                  type: "checkbox",
-                  onClick: (e) => {
-                    if (isMulti) {
-                      if (isSelectedAll) {
-                        onChange([]);
-                      } else {
-                        onChange([...optionsLoad ? optionsLoad : options]);
-                      }
-                      e.stopPropagation();
-                    }
-                  },
-                  readOnly: true,
-                  className: classnames6("cursor-pointer", { "d-none": !isMulti }),
-                  style: { textAlign: "center", marginTop: 6 }
-                }
-              )
+  const fixColumnTemplate = (item, index) => {
+    return /* @__PURE__ */ jsx10(
+      Input6,
+      {
+        defaultChecked: item.fixedType === "left" || item.fixedType === "right",
+        type: "checkbox",
+        style: { height: 18 },
+        className: " cursor-pointer",
+        onChange: (e) => {
+          if (dataSource) {
+            if (e.target.checked) {
+              if (index * 2 <= dataSource.length) {
+                dataSource[index].fixedType = "left";
+              } else {
+                dataSource[index].fixedType = "right";
+              }
+            } else {
+              dataSource[index].fixedType = void 0;
             }
-          ) }),
-          !noHeader && (columns ? columns : defaultColumns).map((col, index) => {
-            return renderHeaderCol(col, index);
-          })
-        ] }) }),
-        (optionsLoad ? optionsLoad : options).length > 0 && !isLoading && /* @__PURE__ */ jsx12(Fragment13, { children: /* @__PURE__ */ jsx12("tbody", { className: "r-select-gridcontent", children: (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
-          if (!isMulti && loadOptions || checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
-            const isSelected = isMulti && value?.some((x) => x === row[fieldValue ?? "value"]);
-            countDisplay++;
-            return /* @__PURE__ */ jsx12(RenderElement, { isSelected, indexRow, row }, `select-table-${indexRow}`);
+            setDataSource(dataSource);
           }
-        }) }) })
-      ] }),
-      countDisplay === 0 && !isLoading && /* @__PURE__ */ jsxs12("div", { className: "r-no-data", children: [
-        /* @__PURE__ */ jsx12("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxs12("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [
-          /* @__PURE__ */ jsx12("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }),
-          /* @__PURE__ */ jsxs12("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [
-            /* @__PURE__ */ jsx12("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }),
-            /* @__PURE__ */ jsx12("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })
-          ] })
-        ] }) }),
-        t("No data available.")
-      ] }),
-      isLoading && /* @__PURE__ */ jsxs12("div", { className: "r-no-data", children: [
-        /* @__PURE__ */ jsx12(Spinner, { className: "me-1", children: " " }),
-        t("Loading...")
-      ] })
-    ] });
+        }
+      }
+    );
   };
-  return /* @__PURE__ */ jsx12(
-    "div",
+  const columns = [
     {
-      className: classnames6("react-select-table", { "is-invalid": invalid }),
-      ref,
-      id,
-      children: /* @__PURE__ */ jsx12("div", { ref: selectTableRef, children: /* @__PURE__ */ jsxs12(
-        Dropdown2,
-        {
-          isOpen: dropdownOpen,
-          toggle: () => {
-          },
-          onMouseDown: (e) => e.preventDefault(),
-          children: [
-            /* @__PURE__ */ jsxs12(
-              DropdownToggle2,
-              {
-                onClick: (e) => {
-                  if (!isDisabled) {
-                    inputRef?.current.focus();
-                    handleOpenClose();
-                  }
-                  e.preventDefault();
-                },
-                tag: "div",
-                className: classnames6("select-table-control", { "r-select-is-disabled": isDisabled }, { "r-select-is-open": dropdownOpen }, { "r-select-is-focus": isFocus }, { "r-select-is-invalid": invalid }),
-                children: [
-                  /* @__PURE__ */ jsxs12("div", { className: "select-table-container", children: [
-                    isMulti ? /* @__PURE__ */ jsx12(Fragment13, { children: /* @__PURE__ */ jsx12("div", { className: classnames6("select-value is-mutil", { "d-none": searchTerm }), children: value?.map((ele, index) => {
-                      const element = (optionsLoad ? optionsLoad : options).find((e) => e[fieldValue ?? "value"] === ele);
-                      if (element) {
-                        return /* @__PURE__ */ jsxs12("span", { children: [
-                          index === 0 ? "" : ", ",
-                          element[fieldLabel ?? "label"]
-                        ] }, index);
-                      }
-                    }) }) }) : /* @__PURE__ */ jsx12(Fragment13, { children: /* @__PURE__ */ jsxs12("div", { className: classnames6("select-value", { "d-none": searchTerm }), children: [
-                      value ? formatOptionLabel ? formatOptionLabel(value) : value[fieldLabel ?? "label"] : "",
-                      " "
-                    ] }) }),
-                    !((isMulti ? value?.length > 0 : value) || isDisabled || searchTerm) && /* @__PURE__ */ jsx12("div", { className: classnames6("select-placeholder"), children: placeholder }),
-                    /* @__PURE__ */ jsx12("div", { className: "input-container", children: /* @__PURE__ */ jsx12(
-                      "input",
-                      {
-                        style: { textAlign: textAlign ?? "left" },
-                        ref: inputRef,
-                        className: classnames6("select-input"),
-                        readOnly: isDisabled,
-                        value: searchTerm,
-                        onPaste: (e) => onPaste && !dropdownOpen && onPaste(e),
-                        onChange: (val) => {
-                          if (!isMulti && loadOptions && val.target.value) {
-                            setIsLoading(true);
-                            loadOptions(val.target.value, callbackLoadOption);
-                          }
-                          setSearchTerm(val.target.value);
-                        },
-                        onKeyDown: (e) => handleOnKeyDown(e)
-                      }
-                    ) })
-                  ] }),
-                  isLoading && /* @__PURE__ */ jsxs12("div", { className: classnames6("select-table-indicator d-flex align-items-center"), children: [
-                    /* @__PURE__ */ jsx12(Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" }),
-                    /* @__PURE__ */ jsx12(Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" }),
-                    /* @__PURE__ */ jsx12(Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" })
-                  ] }),
-                  isClearable && value && !isDisabled && /* @__PURE__ */ jsx12(
-                    "div",
-                    {
-                      className: classnames6("cursor-pointer"),
-                      onClick: (e) => {
-                        onChange(isMulti ? [] : void 0);
-                        e.stopPropagation();
-                      },
-                      children: /* @__PURE__ */ jsx12("svg", { height: "20", width: "20", color: "#c4c4c4", viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", className: "css-tj5bde-Svg", children: /* @__PURE__ */ jsx12("path", { d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z" }) })
-                    }
-                  ),
-                  !isDisabled && /* @__PURE__ */ jsx12("div", { className: "select-table-indicator", onMouseDown: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx12("svg", { height: "20", width: "20", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx12("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) })
-                ]
-              }
+      field: "headerText",
+      headerText: "Column name",
+      template: (e) => {
+        return /* @__PURE__ */ jsx10(Fragment12, { children: t(e.headerText) });
+      },
+      visible: true,
+      width: 175,
+      maxWidth: 200,
+      minWidth: 150
+    },
+    {
+      field: "",
+      template: visibleTemplate,
+      headerText: "Display",
+      textAlign: "center",
+      visible: true,
+      width: 100,
+      maxWidth: 120,
+      minWidth: 80
+    },
+    {
+      field: "",
+      template: fixColumnTemplate,
+      headerText: "Fix the column",
+      textAlign: "center",
+      visible: true,
+      width: 100,
+      maxWidth: 120,
+      minWidth: 80
+    },
+    {
+      field: "width",
+      headerText: "Column width",
+      textAlign: "right",
+      visible: true,
+      width: 100,
+      maxWidth: 120,
+      minWidth: 80
+    }
+  ];
+  const renderHeaderCol = (col, indexCol) => {
+    return /* @__PURE__ */ jsx10(
+      Fragment11,
+      {
+        children: col.visible !== false && /* @__PURE__ */ jsx10(
+          "th",
+          {
+            className: classnames5(
+              `r-headercell fix-${col.fixedType}`,
+              { "cell-fixed": col.fixedType }
             ),
-            /* @__PURE__ */ jsx12(
-              DropdownMenu2,
+            style: {
+              width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width,
+              minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
+              top: `${0 * 42}px`,
+              maxWidth: col.maxWidth
+            },
+            children: /* @__PURE__ */ jsx10(
+              "div",
               {
-                container: component,
-                className: "formula-dropdown icon-dropdown p-0",
+                role: "textbox",
+                title: t(col.headerText ?? ""),
                 style: {
-                  width: menuWidth ? menuWidth : "min-content",
-                  position: "fixed",
-                  borderRadius: 3,
-                  zIndex: 9999
+                  height: `${1 * 42}px`,
+                  justifyContent: col.textAlign ?? "left"
                 },
-                children: /* @__PURE__ */ jsx12(DropdownItem2, { className: classnames6("p-0 menu-select-table"), style: { borderRadius: "6px" }, tag: "div", header: true, children: dropdownOpen && /* @__PURE__ */ jsx12(
-                  "div",
-                  {
-                    onMouseDown: (e) => {
-                      if (!isDisabled) {
-                        inputRef?.current.focus();
-                        e.preventDefault();
-                      }
-                    },
-                    children: /* @__PURE__ */ jsxs12("div", { className: "r-select-grid", children: [
-                      /* @__PURE__ */ jsx12("div", { className: "r-select-gridtable", ref: selectMenuTableRef, style: { minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight }, children: /* @__PURE__ */ jsx12(RenderTable, {}) }),
-                      /* @__PURE__ */ jsx12("div", { className: classnames6("r-select-footer", { "d-none": !(showFooter === true || handleAdd) }), children: /* @__PURE__ */ jsxs12(Button3, { outline: true, color: "primary", onClick: handleAdd, className: classnames6("r-btn-add d-flex align-items-center", { "d-none": !handleAdd }), children: [
-                        /* @__PURE__ */ jsx12(Plus2, { className: "me-50", fontSize: 16 }),
-                        t("AddNew"),
-                        " (F9)"
-                      ] }) })
-                    ] })
-                  }
-                ) })
+                className: "r-headercell-div",
+                children: t(col.headerText ?? "")
               }
             )
-          ]
-        }
-      ) })
+          }
+        )
+      },
+      `header-${indexCol}`
+    );
+  };
+  return /* @__PURE__ */ jsxs10(
+    sidebar_default,
+    {
+      open: openSidebar,
+      toggleSidebar: handleCancel,
+      width: 700,
+      children: [
+        /* @__PURE__ */ jsx10(modal_header_default, { typeModal: "Edit", handleModal: handleCancel, title: "Column setup" }),
+        /* @__PURE__ */ jsx10("div", { className: "ms-2 react-table-edit", children: /* @__PURE__ */ jsx10("div", { className: "r-grid", children: /* @__PURE__ */ jsx10("div", { className: "r-gridtable", style: { height: windowSize.innerHeight - 120 }, children: /* @__PURE__ */ jsxs10("table", { style: { width: "100%" }, children: [
+          /* @__PURE__ */ jsx10("thead", { className: "r-gridheader", children: /* @__PURE__ */ jsx10("tr", { className: "r-row", role: "row", children: columns.map((col, index) => {
+            return renderHeaderCol(col, index);
+          }) }) }),
+          /* @__PURE__ */ jsx10("tbody", { className: "r-gridcontent", children: dataSource?.map((row, indexRow) => {
+            return /* @__PURE__ */ jsx10(
+              "tr",
+              {
+                className: classnames5("r-row", { "last-row": indexRow === dataSource.length - 1 }, { "fisrt-row": indexRow === 0 }),
+                children: columns.map((col, indexCol) => {
+                  let value = row[col.field];
+                  if (col.editType === "numeric" || col.editTypeCondition && col.editTypeCondition(row) === "numeric") {
+                    value = formartNumberic(row[col.field], ",", ".", col.numericSettings?.fraction, true) ?? 0;
+                  }
+                  return /* @__PURE__ */ jsx10(Fragment11, { children: col.visible !== false && /* @__PURE__ */ jsx10(
+                    "td",
+                    {
+                      className: classnames5(
+                        `r-rowcell fix-${col.fixedType}`,
+                        { "cell-fixed": col.fixedType },
+                        { "r-active": indexFocus === indexRow }
+                      ),
+                      style: {
+                        padding: 0,
+                        textAlign: col.textAlign ? col.textAlign : "left"
+                      },
+                      onFocus: (e) => {
+                        if (indexRow !== indexFocus) {
+                          setIndexFocus(indexRow);
+                        }
+                        e.stopPropagation();
+                      },
+                      onClick: (e) => {
+                        if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
+                          if (indexRow !== indexFocus) {
+                            setIndexFocus(indexRow);
+                          }
+                          e.stopPropagation();
+                        }
+                      },
+                      children: /* @__PURE__ */ jsx10(
+                        "div",
+                        {
+                          className: classnames5("r-rowcell-div"),
+                          style: {
+                            width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : "auto"
+                          },
+                          children: /* @__PURE__ */ jsx10(
+                            "div",
+                            {
+                              className: classnames5("r-rowcell-content"),
+                              style: {
+                                margin: "7px 9px"
+                              },
+                              children: /* @__PURE__ */ jsx10("div", { className: "r-cell-text", children: col.template ? col.template(row, indexRow) : value })
+                            }
+                          )
+                        }
+                      )
+                    },
+                    `col-${indexRow}-${indexCol}`
+                  ) }, indexCol);
+                })
+              },
+              `row-${indexRow}`
+            );
+          }) })
+        ] }) }) }) }),
+        /* @__PURE__ */ jsx10(
+          "div",
+          {
+            className: "d-flex justify-content-end p-1 ",
+            style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" },
+            children: renderFooterButtons()
+          }
+        )
+      ]
     }
   );
-});
+};
+var sidebar_setting_column_default = SidebarSetColumn;
+
+// test-app/src/component/table/index.tsx
+import { DropDownTreeComponent } from "@syncfusion/ej2-react-dropdowns";
+
+// test-app/src/component/table/paging/index.tsx
+import { ChevronRight as ChevronRight2, ChevronLeft as ChevronLeft2, ChevronsLeft, ChevronsRight } from "becoxy-icons";
+import classNames5 from "classnames";
+import { Fragment as Fragment13, useEffect as useEffect7, useState as useState6 } from "react";
+import { useTranslation as useTranslation8 } from "react-i18next";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOptions, onChangePageSize }) => {
+  const { t } = useTranslation8();
+  const [countPage, setCountPage] = useState6(0);
+  const [currentPageNumber, setCurrentPageNumber] = useState6(1);
+  useEffect7(() => {
+    setCountPage(Math.floor(totalItem / pageSize) + (Math.floor(totalItem / pageSize) === totalItem / pageSize ? 0 : 1));
+  }, [totalItem, pageSize]);
+  useEffect7(() => {
+    setCurrentPageNumber(Math.floor(currentPage / 5) + (Math.floor(currentPage / 5) === currentPage / 5 ? 0 : 1));
+  }, [currentPage]);
+  const renderPageNumber = (number) => {
+    const arr = [];
+    for (let index = (number - 1) * 5 + 1; index <= number * 5 && index <= Math.floor(totalItem / pageSize) + (Math.floor(totalItem / pageSize) === totalItem / pageSize ? 0 : 1); index++) {
+      arr.push(
+        /* @__PURE__ */ jsx11(
+          "div",
+          {
+            className: classNames5("r-number", { "r-active": index === currentPage }),
+            onClick: () => {
+              onChangePage({ totalItem, pageSize, currentPage: index, old: currentPage });
+            },
+            children: index
+          },
+          `page-${index}`
+        )
+      );
+    }
+    return arr;
+  };
+  return /* @__PURE__ */ jsx11(Fragment13, { children: /* @__PURE__ */ jsxs11("div", { className: "r-pager", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "r-pagercontainer", children: [
+      /* @__PURE__ */ jsx11("button", { className: "r-button", type: "button", disabled: countPage <= 1 || currentPage === 1, onClick: () => onChangePage({ totalItem, pageSize, currentPage: 1, old: currentPage }), children: /* @__PURE__ */ jsx11(ChevronsLeft, { fontSize: 16 }) }),
+      /* @__PURE__ */ jsx11("button", { className: "r-button", type: "button", disabled: countPage <= 1 || currentPage === 1, onClick: () => onChangePage({ totalItem, pageSize, currentPage: currentPage - 1, old: currentPage }), children: /* @__PURE__ */ jsx11(ChevronLeft2, { fontSize: 16 }) }),
+      /* @__PURE__ */ jsx11(
+        "button",
+        {
+          className: classNames5("r-button", { "d-none": currentPageNumber === 1 }),
+          type: "button",
+          onClick: () => {
+            setCurrentPageNumber(currentPageNumber - 1);
+            onChangePage({ totalItem, pageSize, currentPage: (currentPageNumber - 2) * 5 + 1, old: currentPage });
+          },
+          children: "..."
+        }
+      ),
+      renderPageNumber(currentPageNumber),
+      /* @__PURE__ */ jsx11(
+        "button",
+        {
+          className: classNames5("r-button", { "d-none": currentPageNumber * 5 >= countPage }),
+          type: "button",
+          onClick: () => {
+            setCurrentPageNumber(currentPageNumber + 1);
+            onChangePage({ totalItem, pageSize, currentPage: currentPageNumber * 5 + 1, old: currentPage });
+          },
+          children: "..."
+        }
+      ),
+      /* @__PURE__ */ jsx11("button", { className: "r-button", type: "button", disabled: countPage <= 1 || countPage === currentPage, onClick: () => onChangePage({ totalItem, pageSize, currentPage: currentPage + 1, old: currentPage }), children: /* @__PURE__ */ jsx11(ChevronRight2, { fontSize: 16 }) }),
+      /* @__PURE__ */ jsx11("button", { className: "r-button", type: "button", disabled: countPage <= 1 || countPage === currentPage, onClick: () => onChangePage({ totalItem, pageSize, currentPage: Math.floor(totalItem / pageSize) + (Math.floor(totalItem / pageSize) === totalItem / pageSize ? 0 : 1), old: currentPage }), children: /* @__PURE__ */ jsx11(ChevronsRight, { fontSize: 16 }) }),
+      /* @__PURE__ */ jsx11("div", { className: "r-pagesize", children: /* @__PURE__ */ jsx11(
+        SelectTable,
+        {
+          value: { value: pageSize, label: pageSize },
+          noHeader: true,
+          options: pageOptions.map((item) => ({ value: item, label: item })),
+          onChange: (val) => {
+            onChangePageSize({ totalItem, pageSize: val?.value });
+          },
+          placeholder: t("Select")
+        }
+      ) }),
+      /* @__PURE__ */ jsx11("span", { style: { display: "inline", marginLeft: 10, fontSize: 13 }, children: t("pagerDropDown") })
+    ] }),
+    /* @__PURE__ */ jsx11("div", { className: "r-parentmsgbar", children: t("totalItemsInfo", { page: currentPage, countPage, totalItem }) })
+  ] }) });
+};
 
 // test-app/src/component/table/header.tsx
 import { Fragment as Fragment14 } from "react";
-import classnames7 from "classnames";
+import classnames6 from "classnames";
 import { Input as Input7 } from "reactstrap";
-import { useTranslation as useTranslation10 } from "react-i18next";
+import { useTranslation as useTranslation9 } from "react-i18next";
 import { Resizable } from "react-resizable";
 import "react-resizable/css/styles.css";
-import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 var HeaderTableCol = (props) => {
   const {
     selectEnable,
@@ -2134,7 +2074,7 @@ var HeaderTableCol = (props) => {
     setColumn,
     isMulti
   } = props;
-  const { t } = useTranslation10();
+  const { t } = useTranslation9();
   const handleResize = (e, { size }) => {
     if (size.width > 50) {
       const newColumns = [...column];
@@ -2142,7 +2082,7 @@ var HeaderTableCol = (props) => {
       setColumn(newColumns);
     }
   };
-  return /* @__PURE__ */ jsx13(Fragment14, { children: col.visible !== false && /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx12(Fragment14, { children: col.visible !== false && /* @__PURE__ */ jsx12(
     Resizable,
     {
       className: "r-resize",
@@ -2150,12 +2090,12 @@ var HeaderTableCol = (props) => {
       height: 0,
       onResize: handleResize,
       draggableOpts: { enableUserSelectHack: false },
-      children: /* @__PURE__ */ jsx13(
+      children: /* @__PURE__ */ jsx12(
         "th",
         {
           rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
           colSpan: col.columns?.length ?? 1,
-          className: classnames7(`r-headercell fix-${col.fixedType}`, { "cell-fixed": col.fixedType }),
+          className: classnames6(`r-headercell fix-${col.fixedType}`, { "cell-fixed": col.fixedType }),
           style: {
             top: `${indexParent * 42}px`,
             left: col.fixedType === "left" ? objWidthFix[col.index ?? 0] : void 0,
@@ -2164,18 +2104,18 @@ var HeaderTableCol = (props) => {
             minWidth: col.width ? typeof col.width === "number" ? col.width : col.width?.includes("px") || col.width?.includes("%") ? col.width : `${col.width}px` : "auto",
             maxWidth: col.width ? typeof col.width === "number" ? col.width : col.width?.includes("px") || col.width?.includes("%") ? col.width : `${col.width}px` : "auto"
           },
-          children: /* @__PURE__ */ jsxs13(
+          children: /* @__PURE__ */ jsxs12(
             "div",
             {
               style: { justifyContent: col.textAlign ?? "left" },
-              className: classnames7("r-headercell-div"),
+              className: classnames6("r-headercell-div"),
               children: [
-                col.field === "checkbox" && /* @__PURE__ */ jsx13(
+                col.field === "checkbox" && /* @__PURE__ */ jsx12(
                   Input7,
                   {
                     checked: totalCount > 0 && selectedRows?.length >= totalCount,
                     type: "checkbox",
-                    className: classnames7("cursor-pointer", { "d-none": !isMulti }),
+                    className: classnames6("cursor-pointer", { "d-none": !isMulti }),
                     style: { textAlign: col.textAlign ?? "left", marginTop: 6 },
                     onChange: (e) => {
                       if (selectEnable) {
@@ -2203,38 +2143,38 @@ var header_default = HeaderTableCol;
 
 // test-app/src/component/table/command.tsx
 import { Fragment as Fragment16 } from "react";
-import classnames8 from "classnames";
-import { Button as Button4, UncontrolledTooltip as UncontrolledTooltip2 } from "reactstrap";
-import { useTranslation as useTranslation11 } from "react-i18next";
+import classnames7 from "classnames";
+import { Button as Button4, UncontrolledTooltip as UncontrolledTooltip3 } from "reactstrap";
+import { useTranslation as useTranslation10 } from "react-i18next";
 
 // test-app/src/component/icon/index.tsx
 import * as Icon from "becoxy-icons";
 import { Fragment as Fragment15 } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var IconCustom = (props) => {
   const { iconName, size } = props;
   if (iconName === "") {
     return null;
   } else {
     const TagIcon = iconName === "" ? "" : Icon[iconName];
-    return /* @__PURE__ */ jsx14(Fragment15, { children: iconName === "" ? "" : /* @__PURE__ */ jsx14(TagIcon, { fontSize: size }) });
+    return /* @__PURE__ */ jsx13(Fragment15, { children: iconName === "" ? "" : /* @__PURE__ */ jsx13(TagIcon, { fontSize: size }) });
   }
 };
 var icon_default = IconCustom;
 
 // test-app/src/component/table/command.tsx
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var CommandElement = (props) => {
   const { commandItems, rowData, indexRow, handleCommandClick, indexFocus, setIndexFocus } = props;
-  const { t } = useTranslation11();
-  return /* @__PURE__ */ jsx15(Fragment16, { children: /* @__PURE__ */ jsx15("div", { className: "d-flex align-items-center", style: { columnGap: 10 }, children: commandItems.map((item, index) => {
-    return /* @__PURE__ */ jsxs14(
+  const { t } = useTranslation10();
+  return /* @__PURE__ */ jsx14(Fragment16, { children: /* @__PURE__ */ jsx14("div", { className: "d-flex align-items-center", style: { columnGap: 10 }, children: commandItems.map((item, index) => {
+    return /* @__PURE__ */ jsxs13(
       Button4,
       {
         id: `command-item-${indexRow}-${index}`,
         tabIndex: -1,
         style: { padding: "5px", minWidth: 45, height: "100%" },
-        className: classnames8("command-item", {
+        className: classnames7("command-item", {
           "btn-icon": item.tooltip === ""
         }),
         color: item.color ? item.color : "#000",
@@ -2246,8 +2186,8 @@ var CommandElement = (props) => {
           e.preventDefault();
         },
         children: [
-          item.icon && /* @__PURE__ */ jsx15(icon_default, { iconName: item.icon, size: 16 }),
-          /* @__PURE__ */ jsx15(UncontrolledTooltip2, { className: "r-tooltip", target: `command-item-${indexRow}-${index}`, place: "top", children: t(item.tooltip ?? "") })
+          item.icon && /* @__PURE__ */ jsx14(icon_default, { iconName: item.icon, size: 16 }),
+          /* @__PURE__ */ jsx14(UncontrolledTooltip3, { className: "r-tooltip", target: `command-item-${indexRow}-${index}`, place: "top", children: t(item.tooltip ?? "") })
         ]
       },
       `command-${index}`
@@ -2257,9 +2197,9 @@ var CommandElement = (props) => {
 var command_default = CommandElement;
 
 // test-app/src/component/table/index.tsx
-import { Fragment as Fragment18, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 var TableEdit = forwardRef3((props, ref) => {
-  const { t } = useTranslation12();
+  const { t } = useTranslation11();
   const {
     idTable,
     dataSource,
@@ -2481,7 +2421,7 @@ var TableEdit = forwardRef3((props, ref) => {
     }
   };
   const searchTemplate = () => {
-    return /* @__PURE__ */ jsx16(Fragment17, { children: /* @__PURE__ */ jsx16("div", { className: "me-50 r-search", children: /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx15(Fragment17, { children: /* @__PURE__ */ jsx15("div", { className: "me-50 r-search", children: /* @__PURE__ */ jsx15(
       react_input_default,
       {
         style: { width: "230px" },
@@ -2502,7 +2442,7 @@ var TableEdit = forwardRef3((props, ref) => {
   const renderEdit = (row, col, indexRow, indexCol) => {
     switch (col?.editTypeCondition ? col?.editTypeCondition(row) : col.editType) {
       case "date":
-        return /* @__PURE__ */ jsx16(
+        return /* @__PURE__ */ jsx15(
           Input8,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -2515,7 +2455,7 @@ var TableEdit = forwardRef3((props, ref) => {
               }
               handleDataChange(row, col, indexRow);
             },
-            className: classnames9("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: classnames8("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             type: "date",
             max: "9999-12-31",
             onKeyDown: (e) => {
@@ -2531,7 +2471,7 @@ var TableEdit = forwardRef3((props, ref) => {
           }
         );
       case "datetime":
-        return /* @__PURE__ */ jsx16(
+        return /* @__PURE__ */ jsx15(
           Input8,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -2544,7 +2484,7 @@ var TableEdit = forwardRef3((props, ref) => {
               }
               handleDataChange(row, col, indexRow);
             },
-            className: classnames9("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: classnames8("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             type: "datetime-local",
             max: "9999-12-31T23:59",
             onKeyDown: (e) => {
@@ -2572,7 +2512,7 @@ var TableEdit = forwardRef3((props, ref) => {
         } else {
           valueSelect = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? optionsSelect?.find((val) => val[col.selectSettings?.fieldValue ?? "value"] === row[col.field]) : "";
         }
-        return /* @__PURE__ */ jsx16(
+        return /* @__PURE__ */ jsx15(
           SelectTable,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -2629,14 +2569,14 @@ var TableEdit = forwardRef3((props, ref) => {
             }
           }
         };
-        return /* @__PURE__ */ jsx16(
+        return /* @__PURE__ */ jsx15(
           "div",
           {
             onKeyDown: (e) => {
               if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
               }
             },
-            children: /* @__PURE__ */ jsx16(
+            children: /* @__PURE__ */ jsx15(
               DropDownTreeComponent,
               {
                 id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -2647,7 +2587,7 @@ var TableEdit = forwardRef3((props, ref) => {
                   parentValue: "parentId",
                   child: "children"
                 },
-                className: classnames9("select-tree", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+                className: classnames8("select-tree", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
                 allowFiltering: false,
                 value: valueSelectTree,
                 popupHeight: 250,
@@ -2675,7 +2615,7 @@ var TableEdit = forwardRef3((props, ref) => {
           }
         );
       case "checkbox":
-        return /* @__PURE__ */ jsx16(
+        return /* @__PURE__ */ jsx15(
           Input8,
           {
             checked: row[col.field],
@@ -2698,13 +2638,13 @@ var TableEdit = forwardRef3((props, ref) => {
         );
       case "numeric":
         let valueCurrency = row[col.field];
-        return /* @__PURE__ */ jsx16(
+        return /* @__PURE__ */ jsx15(
           Input8,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
             defaultValue: formartNumberic(valueCurrency, decimalSeparator, thousandSeparator, col.numericSettings?.fraction),
-            className: classnames9("border-0 rounded-0 input-numeric", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: classnames8("border-0 rounded-0 input-numeric", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             onChange: (val) => {
               let newVal = "";
               const flag = val.target?.value.startsWith("-");
@@ -2788,7 +2728,7 @@ var TableEdit = forwardRef3((props, ref) => {
           }
         );
       case "color":
-        return /* @__PURE__ */ jsx16("div", { style: { padding: "4px 8px" }, children: /* @__PURE__ */ jsx16(
+        return /* @__PURE__ */ jsx15("div", { style: { padding: "4px 8px" }, children: /* @__PURE__ */ jsx15(
           Input8,
           {
             type: "color",
@@ -2811,7 +2751,7 @@ var TableEdit = forwardRef3((props, ref) => {
           `col-${indexRow}-${indexCol}`
         ) });
       case "form":
-        return /* @__PURE__ */ jsx16(
+        return /* @__PURE__ */ jsx15(
           edit_form_default,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -2839,13 +2779,13 @@ var TableEdit = forwardRef3((props, ref) => {
           }
         );
       default:
-        return /* @__PURE__ */ jsx16(
+        return /* @__PURE__ */ jsx15(
           Input8,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
             defaultValue: isNullOrUndefined(row[col.field]) ? "" : row[col.field],
-            className: classnames9("border-0 rounded-0 input-element", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: classnames8("border-0 rounded-0 input-element", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             onBlur: (val) => {
               if (row[col.field] != val.target?.value) {
                 row[col.field] = val.target?.value;
@@ -3272,10 +3212,10 @@ var TableEdit = forwardRef3((props, ref) => {
   }, [selectedItem]);
   const renderContentCol = (col, row, indexRow, indexCol, isSelected) => {
     if (col.field === "command") {
-      return col.visible !== false && /* @__PURE__ */ jsx16(
+      return col.visible !== false && /* @__PURE__ */ jsx15(
         "td",
         {
-          className: classnames9(
+          className: classnames8(
             `r-rowcell p-0 fix-${col.fixedType}`,
             { "cell-fixed": col.fixedType },
             { "r-active": isSelected && editDisable || indexFocus === indexRow }
@@ -3285,15 +3225,15 @@ var TableEdit = forwardRef3((props, ref) => {
             right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
             textAlign: col.textAlign ? col.textAlign : "left"
           },
-          children: /* @__PURE__ */ jsx16("div", { className: "r-rowcell-div ", children: /* @__PURE__ */ jsx16(command_default, { commandItems: col.commandItems ?? [], handleCommandClick, indexRow, rowData: row, setIndexFocus, indexFocus }) })
+          children: /* @__PURE__ */ jsx15("div", { className: "r-rowcell-div ", children: /* @__PURE__ */ jsx15(command_default, { commandItems: col.commandItems ?? [], handleCommandClick, indexRow, rowData: row, setIndexFocus, indexFocus }) })
         },
         `col-${indexRow}-${indexCol}`
       );
     } else if (col.field === "#") {
-      return col.visible !== false && /* @__PURE__ */ jsx16(
+      return col.visible !== false && /* @__PURE__ */ jsx15(
         "td",
         {
-          className: classnames9(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
+          className: classnames8(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
           tabIndex: Number(`${indexRow}${indexCol}`),
           style: {
             left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
@@ -3337,15 +3277,15 @@ var TableEdit = forwardRef3((props, ref) => {
               e.stopPropagation();
             }
           },
-          children: /* @__PURE__ */ jsx16("div", { className: "r-rowcell-div pt-50", children: indexRow + 1 })
+          children: /* @__PURE__ */ jsx15("div", { className: "r-rowcell-div pt-50", children: indexRow + 1 })
         },
         `col-${indexRow}-${indexCol}`
       );
     } else if (col.field === "checkbox") {
-      return /* @__PURE__ */ jsx16(
+      return /* @__PURE__ */ jsx15(
         "td",
         {
-          className: classnames9(
+          className: classnames8(
             `r-rowcell p-0 fix-${col.fixedType}`,
             { "cell-fixed": col.fixedType },
             { "r-active": isSelected && editDisable || indexFocus === indexRow }
@@ -3355,7 +3295,7 @@ var TableEdit = forwardRef3((props, ref) => {
             right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
             textAlign: col.textAlign ? col.textAlign : "center"
           },
-          children: /* @__PURE__ */ jsx16(
+          children: /* @__PURE__ */ jsx15(
             "div",
             {
               className: "r-rowcell-div cursor-pointer",
@@ -3379,7 +3319,7 @@ var TableEdit = forwardRef3((props, ref) => {
                   e.stopPropagation();
                 }
               },
-              children: /* @__PURE__ */ jsx16(
+              children: /* @__PURE__ */ jsx15(
                 Input8,
                 {
                   checked: isSelected,
@@ -3406,10 +3346,10 @@ var TableEdit = forwardRef3((props, ref) => {
       }
       const typeDis = !editDisable && (indexFocus === indexRow || col.editType === "checkbox") && (!col.disabledCondition || !col.disabledCondition(row)) ? col.editEnable ? 1 : col.template ? 2 : 3 : col.template ? 2 : 3;
       const errorMessage = typeDis === 1 || col.field === "" || !col.validate ? "" : col.validate(row[col.field], row);
-      return /* @__PURE__ */ jsx16(Fragment17, { children: col.visible !== false && /* @__PURE__ */ jsx16(
+      return /* @__PURE__ */ jsx15(Fragment17, { children: col.visible !== false && /* @__PURE__ */ jsx15(
         "td",
         {
-          className: classnames9(
+          className: classnames8(
             `r-rowcell fix-${col.fixedType}`,
             { "cell-fixed": col.fixedType },
             { "r-active": isSelected && editDisable || indexFocus === indexRow }
@@ -3451,25 +3391,25 @@ var TableEdit = forwardRef3((props, ref) => {
               e.stopPropagation();
             }
           },
-          children: /* @__PURE__ */ jsx16(
+          children: /* @__PURE__ */ jsx15(
             "div",
             {
-              className: classnames9("r-rowcell-div"),
-              children: /* @__PURE__ */ jsxs15(
+              className: classnames8("r-rowcell-div"),
+              children: /* @__PURE__ */ jsxs14(
                 "div",
                 {
                   id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
-                  className: classnames9("r-rowcell-content", { "r-is-invalid": errorMessage }),
+                  className: classnames8("r-rowcell-content", { "r-is-invalid": errorMessage }),
                   style: {
                     margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2,
                     color: col.editType === "numeric" && Number(row[col.field]) < 0 ? "red" : ""
                   },
                   children: [
-                    typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : /* @__PURE__ */ jsx16("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }),
-                    /* @__PURE__ */ jsx16("span", { id: `error-${indexRow}-${indexCol}`, className: classnames9("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: /* @__PURE__ */ jsx16(AlertCircle, { fontSize: 15.5 }) }),
-                    !(typeDis === 1 && !refreshRow) && checkOverflow(indexRow, indexCol) && /* @__PURE__ */ jsx16(UncontrolledTooltip3, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : value }),
-                    /* @__PURE__ */ jsx16(
-                      UncontrolledTooltip3,
+                    typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : /* @__PURE__ */ jsx15("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }),
+                    /* @__PURE__ */ jsx15("span", { id: `error-${indexRow}-${indexCol}`, className: classnames8("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: /* @__PURE__ */ jsx15(AlertCircle, { fontSize: 15.5 }) }),
+                    !(typeDis === 1 && !refreshRow) && checkOverflow(indexRow, indexCol) && /* @__PURE__ */ jsx15(UncontrolledTooltip4, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : value }),
+                    /* @__PURE__ */ jsx15(
+                      UncontrolledTooltip4,
                       {
                         target: `error-${indexRow}-${indexCol}`,
                         className: "r-tooltip tooltip-error",
@@ -3491,10 +3431,10 @@ var TableEdit = forwardRef3((props, ref) => {
     return element && element.scrollWidth > element.clientWidth;
   };
   const renderFooterCol = (col, indexCol) => {
-    return /* @__PURE__ */ jsx16(Fragment17, { children: col.visible !== false && /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx15(Fragment17, { children: col.visible !== false && /* @__PURE__ */ jsx15(
       "td",
       {
-        className: classnames9(
+        className: classnames8(
           `p-0 px-50 r-footer fix-${col.fixedType}`,
           { "cell-fixed": col.fixedType }
         ),
@@ -3503,56 +3443,56 @@ var TableEdit = forwardRef3((props, ref) => {
           right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
           textAlign: col.textAlign ? col.textAlign : "left"
         },
-        children: /* @__PURE__ */ jsx16("div", { className: "r-footer-div", children: col.haveSum === true && col.editType === "numeric" ? formartNumberic(dataSource.reduce(function(accumulator, currentValue) {
+        children: /* @__PURE__ */ jsx15("div", { className: "r-footer-div", children: col.haveSum === true && col.editType === "numeric" ? formartNumberic(dataSource.reduce(function(accumulator, currentValue) {
           return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
         }, 0), decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) : "" })
       }
     ) }, `summarycell-${indexCol}`);
   };
   const renderToolbarTop = () => {
-    return /* @__PURE__ */ jsx16("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: /* @__PURE__ */ jsxs15("div", { className: "r-toolbar-items", children: [
-      /* @__PURE__ */ jsx16("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
-        return item.align === "left" ? /* @__PURE__ */ jsx16("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) : "";
+    return /* @__PURE__ */ jsx15("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: /* @__PURE__ */ jsxs14("div", { className: "r-toolbar-items", children: [
+      /* @__PURE__ */ jsx15("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
+        return item.align === "left" ? /* @__PURE__ */ jsx15("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) : "";
       }) }),
-      /* @__PURE__ */ jsx16("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
-        return item.align === "center" ? /* @__PURE__ */ jsx16("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-center-${index}`) : "";
+      /* @__PURE__ */ jsx15("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
+        return item.align === "center" ? /* @__PURE__ */ jsx15("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-center-${index}`) : "";
       }) }),
-      /* @__PURE__ */ jsx16("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
-        return item.align === "right" ? /* @__PURE__ */ jsx16("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) : "";
+      /* @__PURE__ */ jsx15("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
+        return item.align === "right" ? /* @__PURE__ */ jsx15("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) : "";
       }) })
     ] }) });
   };
   const renderToolbarBottom = () => {
-    return /* @__PURE__ */ jsx16("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: /* @__PURE__ */ jsxs15("div", { className: "r-toolbar-items", children: [
-      /* @__PURE__ */ jsxs15("div", { className: "r-toolbar-left", children: [
-        /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx16(Button5, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
-        (indexFocus ?? -1) > -1 ? /* @__PURE__ */ jsxs15(Fragment18, { children: [
-          /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx16(Button5, { color: "success", outline: true, onClick: () => {
+    return /* @__PURE__ */ jsx15("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: /* @__PURE__ */ jsxs14("div", { className: "r-toolbar-items", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "r-toolbar-left", children: [
+        /* @__PURE__ */ jsx15("div", { className: classnames8("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx15(Button5, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
+        (indexFocus ?? -1) > -1 ? /* @__PURE__ */ jsxs14(Fragment18, { children: [
+          /* @__PURE__ */ jsx15("div", { className: classnames8("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx15(Button5, { color: "success", outline: true, onClick: () => {
             handleDuplicate(dataSource[indexFocus ?? -1], indexFocus ?? -1);
           }, className: "d-flex", children: t("Duplicate") }) }),
-          /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx16(Button5, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
-          /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx16(Button5, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
-        ] }) : /* @__PURE__ */ jsx16(Fragment18, { children: " " }),
-        /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item", { "d-none": editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx16(Button5, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
+          /* @__PURE__ */ jsx15("div", { className: classnames8("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx15(Button5, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
+          /* @__PURE__ */ jsx15("div", { className: classnames8("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx15(Button5, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
+        ] }) : /* @__PURE__ */ jsx15(Fragment18, { children: " " }),
+        /* @__PURE__ */ jsx15("div", { className: classnames8("r-toolbar-item", { "d-none": editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx15(Button5, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
         toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
-          return item.align === "left" ? /* @__PURE__ */ jsx16("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : "";
+          return item.align === "left" ? /* @__PURE__ */ jsx15("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : "";
         })
       ] }),
-      /* @__PURE__ */ jsx16("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
-        return item.align === "center" ? /* @__PURE__ */ jsx16("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : "";
+      /* @__PURE__ */ jsx15("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
+        return item.align === "center" ? /* @__PURE__ */ jsx15("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : "";
       }) }),
-      /* @__PURE__ */ jsxs15("div", { className: "r-toolbar-right", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "r-toolbar-right", children: [
         toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
-          return item.align === "right" ? /* @__PURE__ */ jsx16("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : "";
+          return item.align === "right" ? /* @__PURE__ */ jsx15("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : "";
         }),
-        /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item me-25", { "d-none": headerColumns.length > 1 }), "aria-disabled": "false", children: /* @__PURE__ */ jsx16(Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
-        /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsxs15(UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
-          /* @__PURE__ */ jsx16(DropdownToggle3, { href: "/", tag: "a", color: "info", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx16(Info2, { className: "cursor-pointer" }) }),
-          /* @__PURE__ */ jsx16(DropdownMenu3, { children: /* @__PURE__ */ jsxs15("div", { className: "d-flex flex-column p-50 py-25", children: [
-            /* @__PURE__ */ jsx16("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\xE2n b\u1EA3n" }),
-            /* @__PURE__ */ jsx16("div", { style: { fontSize: 13 }, children: "Ch\u1ECDn \xF4 v\xE0 Ctrl + V \u0111\u1EC3 d\xE1n th\xF4ng tin t\u1EEB excel" }),
-            /* @__PURE__ */ jsx16("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\xE9p h\xE0ng" }),
-            /* @__PURE__ */ jsx16("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + V \u0111\u1EC3  d\xE1n h\xE0ng" })
+        /* @__PURE__ */ jsx15("div", { className: classnames8("r-toolbar-item me-25", { "d-none": headerColumns.length > 1 }), "aria-disabled": "false", children: /* @__PURE__ */ jsx15(Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
+        /* @__PURE__ */ jsx15("div", { className: classnames8("r-toolbar-item me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsxs14(UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
+          /* @__PURE__ */ jsx15(DropdownToggle3, { href: "/", tag: "a", color: "info", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx15(Info2, { className: "cursor-pointer" }) }),
+          /* @__PURE__ */ jsx15(DropdownMenu3, { children: /* @__PURE__ */ jsxs14("div", { className: "d-flex flex-column p-50 py-25", children: [
+            /* @__PURE__ */ jsx15("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\xE2n b\u1EA3n" }),
+            /* @__PURE__ */ jsx15("div", { style: { fontSize: 13 }, children: "Ch\u1ECDn \xF4 v\xE0 Ctrl + V \u0111\u1EC3 d\xE1n th\xF4ng tin t\u1EEB excel" }),
+            /* @__PURE__ */ jsx15("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\xE9p h\xE0ng" }),
+            /* @__PURE__ */ jsx15("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + V \u0111\u1EC3  d\xE1n h\xE0ng" })
           ] }) })
         ] }) })
       ] })
@@ -3581,10 +3521,10 @@ var TableEdit = forwardRef3((props, ref) => {
         const flagDisplay = !pagingClient || totalCount > (pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1) && totalCount <= (pagingSetting.pageSize ?? 0) * (pagingSetting.currentPage ?? 0);
         if (flagDisplay) {
           countDisplay++;
-          return /* @__PURE__ */ jsx16(
+          return /* @__PURE__ */ jsx15(
             "tr",
             {
-              className: classnames9("r-row", { "fisrt-row": countDisplay === 0 }),
+              className: classnames8("r-row", { "fisrt-row": countDisplay === 0 }),
               children: contentColumns.map((col, indexCol) => {
                 return renderContentCol(col, row, indexRow, indexCol, isSelected);
               })
@@ -3600,14 +3540,14 @@ var TableEdit = forwardRef3((props, ref) => {
       pagingSetting?.setCurrentPage(1);
     }
   }, [searchTerm, searchSetting?.searchTerm]);
-  return /* @__PURE__ */ jsxs15(Fragment17, { children: [
-    /* @__PURE__ */ jsxs15("div", { className: "react-table-edit", children: [
-      /* @__PURE__ */ jsxs15("div", { className: "r-grid", ref: gridRef, children: [
-        toolbarSetting?.showTopToolbar ? /* @__PURE__ */ jsx16(Fragment18, { children: renderToolbarTop() }) : /* @__PURE__ */ jsx16(Fragment18, {}),
-        /* @__PURE__ */ jsx16("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ jsxs15("table", { style: { width: "100%" }, children: [
-          /* @__PURE__ */ jsx16("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
-            return /* @__PURE__ */ jsx16("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
-              return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs14(Fragment17, { children: [
+    /* @__PURE__ */ jsxs14("div", { className: "react-table-edit", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "r-grid", ref: gridRef, children: [
+        toolbarSetting?.showTopToolbar ? /* @__PURE__ */ jsx15(Fragment18, { children: renderToolbarTop() }) : /* @__PURE__ */ jsx15(Fragment18, {}),
+        /* @__PURE__ */ jsx15("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ jsxs14("table", { style: { width: "100%" }, children: [
+          /* @__PURE__ */ jsx15("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
+            return /* @__PURE__ */ jsx15("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
+              return /* @__PURE__ */ jsx15(
                 header_default,
                 {
                   col,
@@ -3627,14 +3567,14 @@ var TableEdit = forwardRef3((props, ref) => {
               );
             }) }, `header-${-indexParent}`);
           }) }),
-          /* @__PURE__ */ jsx16("tbody", { className: "r-gridcontent", children: renderData() }),
-          /* @__PURE__ */ jsx16("tfoot", { className: "r-gridfoot", children: haveSum == true ? /* @__PURE__ */ jsx16("tr", { className: "r-row", children: contentColumns.map((col, index) => {
+          /* @__PURE__ */ jsx15("tbody", { className: "r-gridcontent", children: renderData() }),
+          /* @__PURE__ */ jsx15("tfoot", { className: "r-gridfoot", children: haveSum == true ? /* @__PURE__ */ jsx15("tr", { className: "r-row", children: contentColumns.map((col, index) => {
             return renderFooterCol(col, index);
-          }) }) : /* @__PURE__ */ jsx16(Fragment18, {}) })
+          }) }) : /* @__PURE__ */ jsx15(Fragment18, {}) })
         ] }) }),
-        toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ jsx16(Fragment18, { children: renderToolbarBottom() }) : /* @__PURE__ */ jsx16(Fragment18, {})
+        toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ jsx15(Fragment18, { children: renderToolbarBottom() }) : /* @__PURE__ */ jsx15(Fragment18, {})
       ] }),
-      pagingSetting?.allowPaging ? /* @__PURE__ */ jsx16(
+      pagingSetting?.allowPaging ? /* @__PURE__ */ jsx15(
         PagingComponent,
         {
           onChangePage,
@@ -3644,9 +3584,9 @@ var TableEdit = forwardRef3((props, ref) => {
           totalItem: pagingClient ? totalCount : pagingSetting?.totalItem ?? 0,
           onChangePageSize
         }
-      ) : /* @__PURE__ */ jsx16(Fragment18, {})
+      ) : /* @__PURE__ */ jsx15(Fragment18, {})
     ] }),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx15(
       sidebar_setting_column_default,
       {
         handleSidebar: () => {
@@ -3667,7 +3607,7 @@ import classNames6 from "classnames";
 import { Fragment as Fragment19, useEffect as useEffect9, useState as useState8 } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { DropdownItem as DropdownItem3, DropdownMenu as DropdownMenu4, DropdownToggle as DropdownToggle4, UncontrolledDropdown as UncontrolledDropdown2 } from "reactstrap";
-import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 var TabsMenuComponent = ({
   buttonWidth,
   tabParent,
@@ -3742,22 +3682,22 @@ var TabsMenuComponent = ({
   const handleModal = (name) => {
     setOpenModal((old) => ({ ...old, [name]: !(openModal[name] ?? false) }));
   };
-  return /* @__PURE__ */ jsxs16(Fragment19, { children: [
+  return /* @__PURE__ */ jsxs15(Fragment19, { children: [
     renderModal ? renderModal({ handleModal, windowSize, openModal, setDataItem, dataItem }) : "",
-    /* @__PURE__ */ jsxs16("div", { className: classNames6("tab-custom", { "tab-parent": tabParent }, { "tab-child": tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [
-      /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsxs15("div", { className: classNames6("tab-custom", { "tab-parent": tabParent }, { "tab-child": tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [
+      /* @__PURE__ */ jsx16(
         "div",
         {
           onClick: () => handleScroll(-200),
           className: classNames6("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
-          children: /* @__PURE__ */ jsx17(ChevronLeft3, {})
+          children: /* @__PURE__ */ jsx16(ChevronLeft3, {})
         }
       ),
-      /* @__PURE__ */ jsx17("div", { id: `tab-component-${resourceCode}`, className: "tab-component", children: /* @__PURE__ */ jsx17("div", { id: `content-component-${resourceCode}`, children: dataMenu.map((item) => {
+      /* @__PURE__ */ jsx16("div", { id: `tab-component-${resourceCode}`, className: "tab-component", children: /* @__PURE__ */ jsx16("div", { id: `content-component-${resourceCode}`, children: dataMenu.map((item) => {
         if (item?.resAttributes?.IS_MENU === "1") {
-          return /* @__PURE__ */ jsxs16(UncontrolledDropdown2, { className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: "down", style: { backgroundColor: openMenu ? "#e0e0e0" : "" }, children: [
-            /* @__PURE__ */ jsx17(DropdownToggle4, { color: "#00000", style: { border: "none", boxShadow: "none", margin: 0, padding: 0 }, className: "background-none", children: /* @__PURE__ */ jsx17("div", { children: item.name }) }),
-            /* @__PURE__ */ jsx17(DropdownMenu4, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => /* @__PURE__ */ jsx17(
+          return /* @__PURE__ */ jsxs15(UncontrolledDropdown2, { className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: "down", style: { backgroundColor: openMenu ? "#e0e0e0" : "" }, children: [
+            /* @__PURE__ */ jsx16(DropdownToggle4, { color: "#00000", style: { border: "none", boxShadow: "none", margin: 0, padding: 0 }, className: "background-none", children: /* @__PURE__ */ jsx16("div", { children: item.name }) }),
+            /* @__PURE__ */ jsx16(DropdownMenu4, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => /* @__PURE__ */ jsx16(
               DropdownItem3,
               {
                 style: { borderRadius: "5px", margin: "0 0.5rem", width: "95%" },
@@ -3774,7 +3714,7 @@ var TabsMenuComponent = ({
             )) })
           ] }, item.code);
         } else {
-          return /* @__PURE__ */ jsx17(
+          return /* @__PURE__ */ jsx16(
             Link,
             {
               to: item.url,
@@ -3785,12 +3725,12 @@ var TabsMenuComponent = ({
           );
         }
       }) }) }),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx16(
         "div",
         {
           onClick: () => handleScroll(200),
           className: classNames6("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
-          children: /* @__PURE__ */ jsx17(ChevronRight3, {})
+          children: /* @__PURE__ */ jsx16(ChevronRight3, {})
         }
       )
     ] })
@@ -3800,7 +3740,7 @@ var TabsMenuComponent = ({
 // test-app/src/component/input-style/index.tsx
 import { Bold, Droplet, Italic, Type, Underline } from "becoxy-icons";
 import { Button as Button6, Input as Input9 } from "reactstrap";
-import classnames10 from "classnames";
+import classnames9 from "classnames";
 import { Fragment as Fragment20 } from "react";
 
 // test-app/src/component/input-style/fonts.ts
@@ -4660,7 +4600,7 @@ var OptionFont = [
 ];
 
 // test-app/src/component/input-style/index.tsx
-import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 var InputStyleComponent = (props) => {
   const {
     value,
@@ -4674,8 +4614,8 @@ var InputStyleComponent = (props) => {
     disabledItalic,
     disabledUnderline
   } = props;
-  return /* @__PURE__ */ jsx18(Fragment20, { children: /* @__PURE__ */ jsxs17("div", { className: "d-flex align-items-center", children: [
-    /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx17(Fragment20, { children: /* @__PURE__ */ jsxs16("div", { className: "d-flex align-items-center", children: [
+    /* @__PURE__ */ jsx17(
       SelectTable,
       {
         options: OptionFont,
@@ -4691,12 +4631,12 @@ var InputStyleComponent = (props) => {
             field: "label",
             headerText: "",
             template: (row) => {
-              return /* @__PURE__ */ jsx18("div", { style: { fontFamily: row.label }, children: row.label });
+              return /* @__PURE__ */ jsx17("div", { style: { fontFamily: row.label }, children: row.label });
             }
           }
         ],
         formatOptionLabel: (props2) => {
-          return /* @__PURE__ */ jsx18("p", { style: {
+          return /* @__PURE__ */ jsx17("p", { style: {
             paddingLeft: 3,
             borderRadius: 2,
             fontFamily: value.fontFamily,
@@ -4709,7 +4649,7 @@ var InputStyleComponent = (props) => {
         }
       }
     ),
-    /* @__PURE__ */ jsx18("div", { className: classnames10("ms-25", { "d-none": disabledFontSize }), style: { width: 60 }, children: /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx17("div", { className: classnames9("ms-25", { "d-none": disabledFontSize }), style: { width: 60 }, children: /* @__PURE__ */ jsx17(
       SelectTable,
       {
         options: Array.from({ length: 100 }, (_, i) => ({ value: i + 1, label: i + 1 })),
@@ -4721,45 +4661,45 @@ var InputStyleComponent = (props) => {
         }
       }
     ) }),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx17(
       "div",
       {
-        className: classnames10("btn-input-style", { "active-custom": value.bold }, { "d-none": disabledBold }),
+        className: classnames9("btn-input-style", { "active-custom": value.bold }, { "d-none": disabledBold }),
         onClick: () => {
           if (!disabled) {
             onChange({ ...value, bold: !value.bold });
           }
         },
-        children: /* @__PURE__ */ jsx18(Bold, { fontSize: 18 })
+        children: /* @__PURE__ */ jsx17(Bold, { fontSize: 18 })
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx17(
       "div",
       {
-        className: classnames10("btn-input-style", { "active-custom": value.italic }, { "d-none": disabledItalic }),
+        className: classnames9("btn-input-style", { "active-custom": value.italic }, { "d-none": disabledItalic }),
         onClick: () => {
           if (!disabled) {
             onChange({ ...value, italic: !value.italic });
           }
         },
-        children: /* @__PURE__ */ jsx18(Italic, { fontSize: 18 })
+        children: /* @__PURE__ */ jsx17(Italic, { fontSize: 18 })
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx17(
       "div",
       {
-        className: classnames10("btn-input-style", { "active-custom": value.underline }, { "d-none": disabledUnderline }),
+        className: classnames9("btn-input-style", { "active-custom": value.underline }, { "d-none": disabledUnderline }),
         onClick: () => {
           if (!disabled) {
             onChange({ ...value, underline: !value.underline });
           }
         },
-        children: /* @__PURE__ */ jsx18(Underline, { fontSize: 18 })
+        children: /* @__PURE__ */ jsx17(Underline, { fontSize: 18 })
       }
     ),
-    /* @__PURE__ */ jsxs17(Button6, { tag: "label", color: "none", className: classnames10("btn-input-style", { "d-none": disabledColor }), children: [
-      /* @__PURE__ */ jsx18(Type, { stroke: value.color ?? "#000000", fontSize: 18 }),
-      /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsxs16(Button6, { tag: "label", color: "none", className: classnames9("btn-input-style", { "d-none": disabledColor }), children: [
+      /* @__PURE__ */ jsx17(Type, { stroke: value.color ?? "#000000", fontSize: 18 }),
+      /* @__PURE__ */ jsx17(
         "input",
         {
           type: "color",
@@ -4773,9 +4713,9 @@ var InputStyleComponent = (props) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs17(Button6, { tag: "label", color: "none", className: classnames10("btn-input-style", { "d-none": disabledBackgroundColor }), children: [
-      /* @__PURE__ */ jsx18(Droplet, { fill: value.backgroundColor ?? "#ffffff", fontSize: 18 }),
-      /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsxs16(Button6, { tag: "label", color: "none", className: classnames9("btn-input-style", { "d-none": disabledBackgroundColor }), children: [
+      /* @__PURE__ */ jsx17(Droplet, { fill: value.backgroundColor ?? "#ffffff", fontSize: 18 }),
+      /* @__PURE__ */ jsx17(
         Input9,
         {
           id: "backgroundColor",