react-table-edit 0.8.9 → 0.9.0

package/dist/index.js

@@ -53,10 +53,10 @@ __export(Table_edit_exports, {
 module.exports = __toCommonJS(Table_edit_exports);
 
 // test-app/src/component/table/index.tsx
-var import_react16 = require("react");
-var import_reactstrap11 = require("reactstrap");
-var import_classnames14 = __toESM(require("classnames"));
-var import_react_i18next12 = require("react-i18next");
+var import_react15 = require("react");
+var import_reactstrap10 = require("reactstrap");
+var import_classnames13 = __toESM(require("classnames"));
+var import_react_i18next11 = require("react-i18next");
 var import_becoxy_icons6 = require("becoxy-icons");
 
 // test-app/src/component/react-input/index.tsx
@@ -335,7 +335,7 @@ var import_moment2 = __toESM(require("moment"));
 // test-app/src/component/edit-form/index.tsx
 var import_react8 = require("react");
 var import_reactstrap6 = require("reactstrap");
-var import_react_hook_form5 = require("react-hook-form");
+var import_react_hook_form4 = require("react-hook-form");
 var import_yup = require("@hookform/resolvers/yup");
 var import_react_i18next5 = require("react-i18next");
 var import_classnames6 = __toESM(require("classnames"));
@@ -431,175 +431,15 @@ var TextInput = (props) => {
 };
 var input_text_default = TextInput;
 
-// test-app/src/component/select/index.tsx
+// test-app/src/component/input-number/index.tsx
 var import_react_hook_form2 = require("react-hook-form");
 var import_reactstrap3 = require("reactstrap");
-var import_react_select = __toESM(require("react-select"));
 var import_classnames3 = __toESM(require("classnames"));
 var import_react5 = require("react");
 var import_react_i18next2 = require("react-i18next");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var SelectBox = (props) => {
-  const { t } = (0, import_react_i18next2.useTranslation)();
-  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__ */ (0, import_jsx_runtime4.jsxs)(import_react5.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        import_react_hook_form2.Controller,
-        {
-          name,
-          control,
-          render: ({ field: { value, onChange } }) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-              import_react_select.default,
-              {
-                ...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__ */ (0, import_jsx_runtime4.jsx)(import_reactstrap3.FormFeedback, { children: errors?.message })
-    ] });
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "div",
-    {
-      className: (0, import_classnames3.default)(
-        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__ */ (0, import_jsx_runtime4.jsxs)(import_reactstrap3.Label, { className: "form-label", for: name, children: [
-          t(label ? label : ""),
-          " ",
-          required ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-danger", children: "*" }) : "",
-          " "
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_classnames3.default)("form-input-content", { "hidden-label": isLabel === false }), children: renderSelect() })
-      ]
-    }
-  ) });
-};
-var select_default = SelectBox;
-
-// test-app/src/component/creactable-select/index.tsx
-var import_react_hook_form3 = require("react-hook-form");
-var import_reactstrap4 = require("reactstrap");
-var import_classnames4 = __toESM(require("classnames"));
-var import_react6 = require("react");
-var import_react_i18next3 = require("react-i18next");
-var import_creatable = __toESM(require("react-select/creatable"));
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var CreatableSelectBox = (props) => {
-  const { t } = (0, import_react_i18next3.useTranslation)();
-  const { isMulti, id, isLabel, control, placeholder, fieldValue, name, options, label, labelSize, required, errors, inLine, isClearable, labelComponent, onInputChange, callback, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react6.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-    "div",
-    {
-      className: (0, import_classnames4.default)(
-        inLine === false ? "form-group " : "form-row-inline d-flex",
-        "align",
-        {
-          [labelSize ? labelSize : ""]: labelSize,
-          "form-row-inline-error": errors
-        }
-      ),
-      children: [
-        isLabel === false ? "" : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_reactstrap4.Label, { className: "form-label", for: name, children: [
-          t(label),
-          " ",
-          required ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-danger", children: "*" }) : "",
-          " "
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_classnames4.default)("form-input-content", { "hidden-label": isLabel === false }), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            import_react_hook_form3.Controller,
-            {
-              name,
-              control,
-              render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                import_creatable.default,
-                {
-                  ...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__ */ (0, import_jsx_runtime5.jsx)(import_reactstrap4.FormFeedback, { children: errors?.message })
-        ] })
-      ]
-    }
-  ) });
-};
-var creactable_select_default = CreatableSelectBox;
-
-// test-app/src/component/input-number/index.tsx
-var import_react_hook_form4 = require("react-hook-form");
-var import_reactstrap5 = require("reactstrap");
-var import_classnames5 = __toESM(require("classnames"));
-var import_react7 = require("react");
-var import_react_i18next4 = require("react-i18next");
-var import_jsx_runtime6 = require("react/jsx-runtime");
 var NumberInput = (props) => {
-  const { t } = (0, import_react_i18next4.useTranslation)();
+  const { t } = (0, import_react_i18next2.useTranslation)();
   const {
     control,
     id,
@@ -627,22 +467,22 @@ var NumberInput = (props) => {
     ...rest
   } = props;
   const renderLabel = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react7.Fragment, { children: isLabel === false ? "" : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_reactstrap5.Label, { className: "form-label", for: name, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.Fragment, { children: isLabel === false ? "" : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_reactstrap3.Label, { className: "form-label", for: name, children: [
       t(label ? label : ""),
       " ",
-      required ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-danger", children: "*" }) : "",
+      required ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-danger", children: "*" }) : "",
       " "
     ] }) });
   };
   const renderInput = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react7.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        import_react_hook_form4.Controller,
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_react_hook_form2.Controller,
         {
           name,
           control,
-          render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            import_reactstrap5.Input,
+          render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_reactstrap3.Input,
             {
               id,
               value: formartNumberic(value, decimalSeparator, thousandSeparator, fractionCurrency),
@@ -701,13 +541,13 @@ var NumberInput = (props) => {
           )
         }
       ),
-      errors && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_reactstrap5.FormFeedback, { children: errors?.message })
+      errors && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_reactstrap3.FormFeedback, { children: errors?.message })
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react7.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
-      className: (0, import_classnames5.default)(
+      className: (0, import_classnames3.default)(
         " align",
         {
           [labelSize ? labelSize : ""]: labelSize,
@@ -718,358 +558,581 @@ var NumberInput = (props) => {
       ),
       children: [
         renderLabel(),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_classnames5.default)("form-input-content", { "hidden-label": isLabel === false }), children: renderInput() })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_classnames3.default)("form-input-content", { "hidden-label": isLabel === false }), children: renderInput() })
       ]
     }
   ) });
 };
 var input_number_default = NumberInput;
 
-// test-app/src/component/edit-form/index.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var defaultWidth = 200;
-var EditForm = (0, import_react8.forwardRef)((props, ref) => {
+// test-app/src/component/edit-form/select-table/index.tsx
+var import_react_hook_form3 = require("react-hook-form");
+var import_reactstrap5 = require("reactstrap");
+var import_classnames5 = __toESM(require("classnames"));
+var import_react7 = require("react");
+
+// test-app/src/component/select-table/index.tsx
+var import_react6 = require("react");
+var import_reactstrap4 = require("reactstrap");
+var import_react_i18next3 = require("react-i18next");
+var import_classnames4 = __toESM(require("classnames"));
+var import_moment = __toESM(require("moment"));
+var import_becoxy_icons2 = require("becoxy-icons");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var defaultMaxHeight = 250;
+var SelectTable = (0, import_react6.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 inputRef = (0, import_react8.useRef)();
-  const editFormRef = (0, import_react8.useRef)();
-  const buttonRef = (0, import_react8.useRef)();
-  const [dropdownOpen, setDropdownOpen] = (0, import_react8.useState)(false);
-  const [itemsField, setItemsField] = (0, import_react8.useState)([]);
-  const { t } = (0, import_react_i18next5.useTranslation)();
-  useOnClickOutside(editFormRef, () => {
-    closeMenu();
-  });
+  const selectTableRef = (0, import_react6.useRef)();
+  const selectMenuTableRef = (0, import_react6.useRef)();
+  const inputRef = (0, import_react6.useRef)();
+  const [dropdownOpen, setDropdownOpen] = (0, import_react6.useState)(false);
+  const [indexFocus, setIndexFocus] = (0, import_react6.useState)(-1);
+  const [isFocus, setIsFocus] = (0, import_react6.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react6.useState)("");
+  const [optionsLoad, setOptionsLoad] = (0, import_react6.useState)();
+  const { t } = (0, import_react_i18next3.useTranslation)();
+  const isSelectedAll = (0, import_react6.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 }
-  } = (0, import_react_hook_form5.useForm)({
-    mode: "onChange",
-    defaultValues,
-    resolver: (0, import_yup.yupResolver)(schema)
-  });
-  (0, import_react8.useEffect)(() => {
-    if (dropdownOpen) {
-      if (onFormOpen && itemsField.length === 0) {
-        onFormOpen(rowData, itemsField, setItemsField);
-      }
-      if (openOnFocus) {
-        setTimeout(() => {
-          focusElement(`form-element-${field}-0`, true);
-        }, 100);
-      }
+  (0, import_react6.useEffect)(() => {
+    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]);
-  (0, import_react8.useEffect)(() => {
-    if (dropdownOpen && itemsField.length > 0) {
-      itemsField.forEach((ele) => {
-        setValue(ele.name, rowData[ele.name] ?? "");
+  (0, import_react6.useEffect)(() => {
+    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]);
+  (0, import_react6.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime5.jsx)(
+      import_react6.Fragment,
+      {
+        children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "th",
+          {
+            className: (0, import_classnames4.default)(
+              `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__ */ (0, import_jsx_runtime5.jsx)(
+              "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__ */ (0, import_jsx_runtime7.jsx)(import_reactstrap6.Row, { className: "gy-25", children: rows.map((item, index) => {
-      if (item.type === "numeric") {
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_reactstrap6.Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          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__ */ (0, import_jsx_runtime7.jsx)(import_reactstrap6.Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          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__ */ (0, import_jsx_runtime7.jsx)(import_reactstrap6.Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          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__ */ (0, import_jsx_runtime7.jsx)(import_reactstrap6.Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          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);
+  };
+  (0, import_react6.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime5.jsxs)(
+      "tr",
+      {
+        id: `row-select-table-${indexRow}`,
+        style: { paddingLeft: 10 * level },
+        className: (0, import_classnames4.default)("r-select-row", { "last-row": indexRow === (optionsLoad ? optionsLoad : options).length - 1 }, { "fisrt-row": indexRow === 0 }),
+        children: [
+          isMulti && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "td",
+            {
+              className: (0, import_classnames4.default)(`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__ */ (0, import_jsx_runtime5.jsx)(
+                import_reactstrap4.Input,
+                {
+                  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 ? (0, import_moment.default)(valueDisplay).format("DD/MM/yyyy") : "";
+            } else if (col.type === "datetime") {
+              valueDisplay = valueDisplay ? (0, import_moment.default)(valueDisplay).format("DD/MM/yyyy HH:mm") : "";
+            }
+            return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react6.Fragment, { children: [
+              col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "td",
+                {
+                  id: `select-${id}-${indexRow}-${indexCol}`,
+                  className: (0, import_classnames4.default)(`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__ */ (0, import_jsx_runtime5.jsx)(import_reactstrap4.UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay })
+            ] }, indexCol);
+          })
+        ]
+      },
+      `row-${indexRow}`
+    );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  const RenderTable = (props2) => {
+    const {} = props2;
+    let countDisplay = 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("table", { style: { width: "100%" }, children: [
+        !noHeader && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { className: "r-select-row", role: "row", children: [
+          isMulti && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: (0, import_classnames4.default)(`r-select-headercell`), style: { width: 40, top: `0px` }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "div",
+            {
+              style: { justifyContent: "center" },
+              className: (0, import_classnames4.default)("r-select-headercell-div"),
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                import_reactstrap4.Input,
+                {
+                  checked: isSelectedAll,
+                  type: "checkbox",
+                  onClick: (e) => {
+                    if (isMulti) {
+                      if (isSelectedAll) {
+                        onChange([]);
+                      } else {
+                        onChange([...optionsLoad ? optionsLoad : options]);
+                      }
+                      e.stopPropagation();
+                    }
+                  },
+                  readOnly: true,
+                  className: (0, import_classnames4.default)("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__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)(RenderElement, { isSelected, indexRow, row }, `select-table-${indexRow}`);
+          }
+        }) }) })
+      ] }),
+      countDisplay === 0 && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "r-no-data", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "r-no-data", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_reactstrap4.Spinner, { className: "me-1", children: " " }),
+        t("Loading...")
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
-      className: "form-edit",
+      className: (0, import_classnames4.default)("react-select-table", { "is-invalid": invalid }),
       ref,
       id,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: editFormRef, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-        import_reactstrap6.Dropdown,
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: selectTableRef, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        import_reactstrap4.Dropdown,
         {
           isOpen: dropdownOpen,
           toggle: () => {
           },
+          onMouseDown: (e) => e.preventDefault(),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_reactstrap6.DropdownToggle, { tag: "div", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              import_reactstrap6.Input,
-              {
-                style: { backgroundColor: "#FFF", textAlign: textAlign ?? "left" },
-                placeholder,
-                innerRef: inputRef,
-                className: (0, import_classnames6.default)("input-display input-numeric", { "is-invalid": invalid }),
-                value: displayValue,
-                onClick: handleOnClick,
-                onKeyDown: (e) => handleOnKeyDown(e),
-                onPaste: (e) => onPaste && onPaste(e),
-                readOnly: true
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              import_reactstrap6.DropdownMenu,
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              import_reactstrap4.DropdownToggle,
               {
-                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
+                onClick: (e) => {
+                  if (!isDisabled) {
+                    inputRef?.current.focus();
+                    handleOpenClose();
+                  }
+                  e.preventDefault();
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_reactstrap6.DropdownItem, { className: "p-0", style: { borderRadius: "6px" }, tag: "div", header: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_reactstrap6.Form, { className: "todo-modal", onKeyDown: (e) => formKeyDown(e, handleSubmit(handleOnSubmit)), children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                tag: "div",
+                className: (0, import_classnames4.default)("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__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "select-table-container", children: [
+                    isMulti ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_classnames4.default)("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__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
+                          index === 0 ? "" : ", ",
+                          element[fieldLabel ?? "label"]
+                        ] }, index);
+                      }
+                    }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_classnames4.default)("select-value", { "d-none": searchTerm }), children: [
+                      value ? formatOptionLabel ? formatOptionLabel(value) : value[fieldLabel ?? "label"] : "",
+                      " "
+                    ] }) }),
+                    !((isMulti ? value?.length > 0 : value) || isDisabled || searchTerm) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_classnames4.default)("select-placeholder"), children: placeholder }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "input-container", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      "input",
+                      {
+                        style: { textAlign: textAlign ?? "left" },
+                        ref: inputRef,
+                        className: (0, import_classnames4.default)("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__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_classnames4.default)("select-table-indicator d-flex align-items-center"), children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_reactstrap4.Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_reactstrap4.Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_reactstrap4.Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" })
+                  ] }),
+                  isClearable && value && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "div",
                     {
-                      className: "p-1",
-                      style: {
-                        maxHeight: menuHeight ? menuHeight : 300,
-                        overflow: "auto"
+                      className: (0, import_classnames4.default)("cursor-pointer"),
+                      onClick: (e) => {
+                        onChange(isMulti ? [] : void 0);
+                        e.stopPropagation();
                       },
-                      children: itemsField ? renderForm(itemsField) : ""
+                      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { height: "20", width: "20", color: "#c4c4c4", viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", className: "css-tj5bde-Svg", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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" }) })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "d-flex justify-content-between p-50", style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-primary py-25", style: { fontSize: 12 }, children: footerTemplate ? footerTemplate(rowData) : "" }),
-                    !onChangeField ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "d-flex justify-content-end", children: [
-                      isClearable && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                        import_reactstrap6.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__ */ (0, import_jsx_runtime7.jsx)(
-                        import_reactstrap6.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__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, {})
-                  ] })
-                ] }) })
+                  !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "select-table-indicator", onMouseDown: (e) => e.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { height: "20", width: "20", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)(
+              import_reactstrap4.DropdownMenu,
+              {
+                container: component,
+                className: "formula-dropdown icon-dropdown p-0",
+                style: {
+                  width: menuWidth ? menuWidth : "min-content",
+                  position: "fixed",
+                  borderRadius: 3,
+                  zIndex: 9999
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_reactstrap4.DropdownItem, { className: (0, import_classnames4.default)("p-0 menu-select-table"), style: { borderRadius: "6px" }, tag: "div", header: true, children: dropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "div",
+                  {
+                    onMouseDown: (e) => {
+                      if (!isDisabled) {
+                        inputRef?.current.focus();
+                        e.preventDefault();
+                      }
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "r-select-grid", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "r-select-gridtable", ref: selectMenuTableRef, style: { minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RenderTable, {}) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_classnames4.default)("r-select-footer", { "d-none": !(showFooter === true || handleAdd) }), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_reactstrap4.Button, { outline: true, color: "primary", onClick: handleAdd, className: (0, import_classnames4.default)("r-btn-add d-flex align-items-center", { "d-none": !handleAdd }), children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_becoxy_icons2.Plus, { className: "me-50", fontSize: 16 }),
+                        t("AddNew"),
+                        " (F9)"
+                      ] }) })
+                    ] })
+                  }
+                ) })
               }
             )
           ]
@@ -1078,1082 +1141,960 @@ var EditForm = (0, import_react8.forwardRef)((props, ref) => {
     }
   );
 });
-var edit_form_default = EditForm;
-
-// test-app/src/component/sidebar-setting-column/index.tsx
-var import_react10 = require("react");
-var import_reactstrap7 = require("reactstrap");
-var import_react_i18next7 = require("react-i18next");
 
-// test-app/src/component/modal-header/index.tsx
-var import_becoxy_icons2 = require("becoxy-icons");
-var import_classnames7 = __toESM(require("classnames"));
-var import_react_i18next6 = require("react-i18next");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var ModalHeader = (props) => {
-  const { title, handleModal, typeModal = "Edit", component } = props;
-  const { t } = (0, import_react_i18next6.useTranslation)();
-  const handleModalIcon = () => {
-    if (typeModal === "Edit" || typeModal === "Approval") {
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_becoxy_icons2.Edit, { fontSize: 17, className: "me-1" });
-    } else if (typeModal === "View") {
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_becoxy_icons2.Info, { fontSize: 17, className: "me-1" });
-    } else if (typeModal === "Detail") {
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_becoxy_icons2.Info, { fontSize: 17, className: "me-1" });
-    } else if (typeModal === "Order") {
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "e-icons e-sorting-1 me-1", style: { fontSize: "14px" } });
-    } else if (typeModal === "Process") {
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "e-flat e-icons e-paste-match-destination me-1", style: { fontSize: "14px" } });
-    } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_becoxy_icons2.Plus, { fontSize: 17, className: "me-1" });
+// test-app/src/component/edit-form/select-table/index.tsx
+var import_react_i18next4 = require("react-i18next");
+var import_jsx_runtime6 = require("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__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "modal-header d-flex align-items-center justify-content-between mb-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "d-flex align-items-center justify-content-start", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("h5", { className: "modal-title", children: [
-        handleModalIcon(),
+  const renderLabel = (props2) => {
+    const { t } = (0, import_react_i18next4.useTranslation)();
+    const { isLabel: isLabel2, desciptionLabel: desciptionLabel2, id: id2, classLabel: classLabel2, name: name2, label: label2, required: required2 } = props2;
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react7.Fragment, { children: [
+      isLabel2 === false ? "" : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_reactstrap5.Label, { id: `label-${id2}`, className: classLabel2, for: name2, children: [
+        t(label2 ? label2 : ""),
         " ",
-        t(title)
+        required2 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-danger", children: "*" }) : ""
       ] }),
-      component ? component() : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, {})
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "todo-item-action d-flex align-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      import_becoxy_icons2.X,
-      {
-        className: (0, import_classnames7.default)("fw-normal mt-25 cursor-pointer", { "d-none": !handleModal }),
-        fontSize: 20,
-        onClick: handleModal
-      }
-    ) })
-  ] });
-};
-var modal_header_default = ModalHeader;
-
-// test-app/src/component/sidebar/index.tsx
-var import_becoxy_icons3 = require("becoxy-icons");
-var import_classnames8 = __toESM(require("classnames"));
-var import_react9 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Sidebar = (props) => {
-  const {
-    open,
-    children,
-    toggleSidebar,
-    width,
-    keyboard,
-    hiddenBackground,
-    hiddenFullScreenButton
-  } = props;
-  const [isFullScreen, setIsFullScreen] = (0, import_react9.useState)(false);
-  const [flag, setFlag] = (0, import_react9.useState)(open);
-  (0, import_react9.useEffect)(() => {
-    if (open !== flag) {
-      if (open) {
-        setFlag(open);
-      } else {
-        setTimeout(() => {
-          setFlag(open);
-        }, 50);
-      }
-    }
-  }, [open]);
-  const handClose = () => {
-    setFlag(false);
-    setTimeout(() => {
-      toggleSidebar();
-    }, 400);
+      (!isNullOrUndefined(desciptionLabel2) && desciptionLabel2 !== "") ?? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_reactstrap5.UncontrolledTooltip, { target: `label-${id2}`, children: t(desciptionLabel2 ?? "") }) })
+    ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react7.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
-      tabIndex: 0,
-      className: (0, import_classnames8.default)({ "d-none": !open }),
-      onKeyDown: (e) => {
-        if (!keyboard && e.code === "Escape" && flag) {
-          handClose();
-          e.stopPropagation();
-          e.preventDefault();
+      className: (0, import_classnames5.default)(
+        inLine === false ? "form-group " : "form-row-inline d-flex",
+        "align",
+        {
+          [labelSize ? labelSize : ""]: labelSize,
+          "form-row-inline-error": errors
         }
-      },
+      ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          "div",
-          {
-            className: (0, import_classnames8.default)("offcanvas-backdrop fade", {
-              "d-none": !flag || hiddenBackground,
-              show: flag
-            }),
-            style: { zIndex: 1056 },
-            onClick: handClose
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-          "div",
-          {
-            className: (0, import_classnames8.default)("customizer d-none d-md-block ", `customizer-${width ?? 600}`, {
-              open: flag,
-              fullscreen: isFullScreen
-            }),
-            style: { zIndex: 1057 },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                "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: (0, import_classnames8.default)({ "d-none": hiddenFullScreenButton }),
-                  onClick: () => {
-                    setIsFullScreen(!isFullScreen);
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_becoxy_icons3.ChevronLeft, { className: `${isFullScreen ? "d-none" : ""}`, fontSize: 16 }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_becoxy_icons3.ChevronRight, { className: `${!isFullScreen ? "d-none" : ""}`, fontSize: 15 })
-                  ]
-                }
-              ),
-              children
-            ]
-          }
-        )
+        renderLabel({ isLabel, desciptionLabel, classLabel, name, label, required, id: id ?? "" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_classnames5.default)("form-input-content", { "hidden-label": isLabel === false }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            import_react_hook_form3.Controller,
+            {
+              name,
+              control,
+              render: ({ field: { value, onChange } }) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  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__ */ (0, import_jsx_runtime6.jsx)(import_reactstrap5.FormFeedback, { children: errors?.message })
+        ] })
       ]
     }
-  );
+  ) });
 };
-var sidebar_default = Sidebar;
+var select_table_default = SelectTableBox;
 
-// test-app/src/component/sidebar-setting-column/index.tsx
-var import_classnames9 = __toESM(require("classnames"));
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var SidebarSetColumn = (props) => {
-  const { column, setColumn, openSidebar, handleSidebar } = props;
-  const { t } = (0, import_react_i18next7.useTranslation)();
-  const [dataSource, setDataSource] = (0, import_react10.useState)([]);
-  const [indexFocus, setIndexFocus] = (0, import_react10.useState)();
-  (0, import_react10.useEffect)(() => {
-    if (openSidebar) {
-      setDataSource(column.map((e) => ({ ...e })));
-    }
-  }, [openSidebar]);
-  const handleCancel = () => {
-    handleSidebar();
-    setDataSource([]);
-  };
-  const handleSubmit = () => {
-    setColumn([...dataSource]);
-    handleCancel();
+// test-app/src/component/edit-form/index.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var defaultWidth = 200;
+var EditForm = (0, import_react8.forwardRef)((props, ref) => {
+  const {
+    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 { innerWidth } = window;
+  const inputRef = (0, import_react8.useRef)();
+  const editFormRef = (0, import_react8.useRef)();
+  const buttonRef = (0, import_react8.useRef)();
+  const [dropdownOpen, setDropdownOpen] = (0, import_react8.useState)(false);
+  const [itemsField, setItemsField] = (0, import_react8.useState)([]);
+  const { t } = (0, import_react_i18next5.useTranslation)();
+  useOnClickOutside(editFormRef, () => {
+    closeMenu();
+  });
+  const closeMenu = () => {
+    setTimeout(() => {
+      setDropdownOpen(false);
+    }, onChangeField ? 10 : 0);
   };
-  const getWindowSize = () => {
-    const { innerWidth, innerHeight } = window;
-    return { innerWidth, innerHeight };
+  const {
+    control,
+    handleSubmit,
+    getValues,
+    reset,
+    setValue,
+    formState: { errors }
+  } = (0, import_react_hook_form4.useForm)({
+    mode: "onChange",
+    defaultValues,
+    resolver: (0, import_yup.yupResolver)(schema)
+  });
+  (0, import_react8.useEffect)(() => {
+    if (dropdownOpen) {
+      if (onFormOpen && itemsField.length === 0) {
+        onFormOpen(rowData, itemsField, setItemsField);
+      }
+      if (openOnFocus) {
+        setTimeout(() => {
+          focusElement(`form-element-${field}-0`, true);
+        }, 100);
+      }
+    }
+  }, [dropdownOpen]);
+  (0, import_react8.useEffect)(() => {
+    if (dropdownOpen && itemsField.length > 0) {
+      itemsField.forEach((ele) => {
+        setValue(ele.name, rowData[ele.name] ?? "");
+      });
+    }
+  }, [dropdownOpen, itemsField]);
+  const handleOnClick = () => {
+    if (dropdownOpen) {
+      closeMenu();
+    } else {
+      setDropdownOpen(true);
+    }
   };
-  const [windowSize, setWindowSize] = (0, import_react10.useState)(getWindowSize());
-  (0, import_react10.useEffect)(() => {
-    const handleWindowResize = () => {
-      setWindowSize(getWindowSize());
-    };
-    window.addEventListener("resize", handleWindowResize);
-    return () => {
-      window.removeEventListener("resize", handleWindowResize);
-    };
-  }, []);
-  const renderFooterButtons = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react10.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_reactstrap7.Button, { color: "primary", onClick: handleSubmit, className: "me-1", children: t("Confirm") }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_reactstrap7.Button, { color: "secondary", onClick: handleCancel, outline: true, children: t("Close") })
-    ] });
+  const handleOnSubmit = (val) => {
+    closeMenu();
+    onChange(val);
+    if (onFormSubmit) {
+      onFormSubmit(rowData, setValue, getValues, reset);
+    }
+    inputRef.current.focus();
   };
-  const visibleTemplate = (item, index) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_reactstrap7.Input,
-      {
-        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 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 fixColumnTemplate = (item, index) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_reactstrap7.Input,
-      {
-        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;
-            }
-            setDataSource(dataSource);
-          }
+  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 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 columns = [
-    {
-      field: "headerText",
-      headerText: "Column name",
-      template: (e) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { 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 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 renderHeaderCol = (col, indexCol) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_react10.Fragment,
-      {
-        children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          "th",
+  };
+  const elementChange = (field2) => {
+    if (onChangeField) {
+      onChangeField(rowData, field2, setValue, getValues);
+      const rs = getValues();
+      if (rs) {
+        onChange(rs);
+      }
+    }
+  };
+  const renderForm = (rows) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_reactstrap6.Row, { className: "gy-25", children: rows.map((item, index) => {
+      if (item.type === "numeric") {
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_reactstrap6.Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          input_number_default,
           {
-            className: (0, import_classnames9.default)(
-              `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__ */ (0, import_jsx_runtime10.jsx)(
-              "div",
-              {
-                role: "textbox",
-                title: t(col.headerText ?? ""),
-                style: {
-                  height: `${1 * 42}px`,
-                  justifyContent: col.textAlign ?? "left"
-                },
-                className: "r-headercell-div",
-                children: t(col.headerText ?? "")
-              }
-            )
-          }
-        )
-      },
-      `header-${indexCol}`
-    );
+            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__ */ (0, import_jsx_runtime7.jsx)(import_reactstrap6.Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          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__ */ (0, import_jsx_runtime7.jsx)(import_reactstrap6.Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          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);
+      }
+    }) });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-    sidebar_default,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
     {
-      open: openSidebar,
-      toggleSidebar: handleCancel,
-      width: 700,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(modal_header_default, { typeModal: "Edit", handleModal: handleCancel, title: "Column setup" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "ms-2 react-table-edit", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "r-grid", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "r-gridtable", style: { height: windowSize.innerHeight - 120 }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("table", { style: { width: "100%" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("thead", { className: "r-gridheader", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tr", { className: "r-row", role: "row", children: columns.map((col, index) => {
-            return renderHeaderCol(col, index);
-          }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tbody", { className: "r-gridcontent", children: dataSource?.map((row, indexRow) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              "tr",
+      className: "form-edit",
+      ref,
+      id,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: editFormRef, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        import_reactstrap6.Dropdown,
+        {
+          isOpen: dropdownOpen,
+          toggle: () => {
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_reactstrap6.DropdownToggle, { tag: "div", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              import_reactstrap6.Input,
               {
-                className: (0, import_classnames9.default)("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__ */ (0, import_jsx_runtime10.jsx)(import_react10.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                    "td",
+                style: { backgroundColor: "#FFF", textAlign: textAlign ?? "left" },
+                placeholder,
+                innerRef: inputRef,
+                className: (0, import_classnames6.default)("input-display input-numeric", { "is-invalid": invalid }),
+                value: displayValue,
+                onClick: handleOnClick,
+                onKeyDown: (e) => handleOnKeyDown(e),
+                onPaste: (e) => onPaste && onPaste(e),
+                readOnly: true
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              import_reactstrap6.DropdownMenu,
+              {
+                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__ */ (0, import_jsx_runtime7.jsxs)(import_reactstrap6.DropdownItem, { className: "p-0", style: { borderRadius: "6px" }, tag: "div", header: true, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    "div",
                     {
-                      className: (0, import_classnames9.default)(
-                        `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__ */ (0, import_jsx_runtime10.jsx)(
-                        "div",
+                      children: itemsField ? renderForm(itemsField) : ""
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "d-flex justify-content-between p-50", style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-primary py-25", style: { fontSize: 12 }, children: footerTemplate ? footerTemplate(rowData) : "" }),
+                    !onChangeField ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "d-flex justify-content-end", children: [
+                      isClearable && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        import_reactstrap6.Button,
                         {
-                          className: (0, import_classnames9.default)("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__ */ (0, import_jsx_runtime10.jsx)(
-                            "div",
-                            {
-                              className: (0, import_classnames9.default)("r-rowcell-content"),
-                              style: {
-                                margin: "7px 9px"
-                              },
-                              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "r-cell-text", children: col.template ? col.template(row, indexRow) : value })
+                          onKeyDown: (e) => {
+                            if (e.code === "Tab") {
+                              closeMenu();
                             }
-                          )
+                          },
+                          children: t("Clear")
                         }
-                      )
-                    },
-                    `col-${indexRow}-${indexCol}`
-                  ) }, indexCol);
-                })
-              },
-              `row-${indexRow}`
-            );
-          }) })
-        ] }) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          "div",
-          {
-            className: "d-flex justify-content-end p-1 ",
-            style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" },
-            children: renderFooterButtons()
-          }
-        )
-      ]
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        import_reactstrap6.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__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, {})
+                  ] })
+                ] })
+              }
+            )
+          ]
+        }
+      ) })
     }
   );
-};
-var sidebar_setting_column_default = SidebarSetColumn;
+});
+var edit_form_default = EditForm;
 
-// test-app/src/component/table/index.tsx
-var import_ej2_react_dropdowns = require("@syncfusion/ej2-react-dropdowns");
+// test-app/src/component/sidebar-setting-column/index.tsx
+var import_react10 = require("react");
+var import_reactstrap7 = require("reactstrap");
+var import_react_i18next7 = require("react-i18next");
 
-// test-app/src/component/paging/index.tsx
-var import_becoxy_icons4 = require("becoxy-icons");
-var import_classnames10 = __toESM(require("classnames"));
-var import_react11 = require("react");
-var import_react_i18next8 = require("react-i18next");
-var import_react_select2 = __toESM(require("react-select"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOptions, onChangePageSize }) => {
-  const { t } = (0, import_react_i18next8.useTranslation)();
-  const [countPage, setCountPage] = (0, import_react11.useState)(0);
-  const [currentPageNumber, setCurrentPageNumber] = (0, import_react11.useState)(1);
-  (0, import_react11.useEffect)(() => {
-    setCountPage(Math.floor(totalItem / pageSize) + (Math.floor(totalItem / pageSize) === totalItem / pageSize ? 0 : 1));
-  }, [totalItem, pageSize]);
-  (0, import_react11.useEffect)(() => {
-    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__ */ (0, import_jsx_runtime11.jsx)(
-          "div",
-          {
-            className: (0, import_classnames10.default)("r-number", { "r-active": index === currentPage }),
-            onClick: () => {
-              onChangePage({ totalItem, pageSize, currentPage: index, old: currentPage });
-            },
-            children: index
-          },
-          `page-${index}`
-        )
-      );
+// test-app/src/component/modal-header/index.tsx
+var import_becoxy_icons3 = require("becoxy-icons");
+var import_classnames7 = __toESM(require("classnames"));
+var import_react_i18next6 = require("react-i18next");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ModalHeader = (props) => {
+  const { title, handleModal, typeModal = "Edit", component } = props;
+  const { t } = (0, import_react_i18next6.useTranslation)();
+  const handleModalIcon = () => {
+    if (typeModal === "Edit" || typeModal === "Approval") {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_becoxy_icons3.Edit, { fontSize: 17, className: "me-1" });
+    } else if (typeModal === "View") {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_becoxy_icons3.Info, { fontSize: 17, className: "me-1" });
+    } else if (typeModal === "Detail") {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_becoxy_icons3.Info, { fontSize: 17, className: "me-1" });
+    } else if (typeModal === "Order") {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "e-icons e-sorting-1 me-1", style: { fontSize: "14px" } });
+    } else if (typeModal === "Process") {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "e-flat e-icons e-paste-match-destination me-1", style: { fontSize: "14px" } });
+    } else {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_becoxy_icons3.Plus, { fontSize: 17, className: "me-1" });
     }
-    return arr;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react11.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "r-pager", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "r-pagercontainer", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "r-button", type: "button", disabled: countPage <= 1 || currentPage === 1, onClick: () => onChangePage({ totalItem, pageSize, currentPage: 1, old: currentPage }), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_becoxy_icons4.ChevronsLeft, { fontSize: 16 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "r-button", type: "button", disabled: countPage <= 1 || currentPage === 1, onClick: () => onChangePage({ totalItem, pageSize, currentPage: currentPage - 1, old: currentPage }), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_becoxy_icons4.ChevronLeft, { fontSize: 16 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        "button",
-        {
-          className: (0, import_classnames10.default)("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__ */ (0, import_jsx_runtime11.jsx)(
-        "button",
-        {
-          className: (0, import_classnames10.default)("r-button", { "d-none": currentPageNumber * 5 >= countPage }),
-          type: "button",
-          onClick: () => {
-            setCurrentPageNumber(currentPageNumber + 1);
-            onChangePage({ totalItem, pageSize, currentPage: currentPageNumber * 5 + 1, old: currentPage });
-          },
-          children: "..."
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "r-button", type: "button", disabled: countPage <= 1 || countPage === currentPage, onClick: () => onChangePage({ totalItem, pageSize, currentPage: currentPage + 1, old: currentPage }), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_becoxy_icons4.ChevronRight, { fontSize: 16 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime11.jsx)(import_becoxy_icons4.ChevronsRight, { fontSize: 16 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "r-pagesize", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        import_react_select2.default,
-        {
-          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__ */ (0, import_jsx_runtime11.jsx)("span", { style: { display: "inline", marginLeft: 10, fontSize: 13 }, children: t("pagerDropDown") })
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "modal-header d-flex align-items-center justify-content-between mb-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "d-flex align-items-center justify-content-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("h5", { className: "modal-title", children: [
+        handleModalIcon(),
+        " ",
+        t(title)
+      ] }),
+      component ? component() : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "r-parentmsgbar", children: t("totalItemsInfo", { page: currentPage, countPage, totalItem }) })
-  ] }) });
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "todo-item-action d-flex align-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_becoxy_icons3.X,
+      {
+        className: (0, import_classnames7.default)("fw-normal mt-25 cursor-pointer", { "d-none": !handleModal }),
+        fontSize: 20,
+        onClick: handleModal
+      }
+    ) })
+  ] });
 };
+var modal_header_default = ModalHeader;
 
-// test-app/src/component/select-table/index.tsx
-var import_react12 = require("react");
-var import_reactstrap8 = require("reactstrap");
-var import_react_i18next9 = require("react-i18next");
-var import_classnames11 = __toESM(require("classnames"));
-var import_moment = __toESM(require("moment"));
-var import_becoxy_icons5 = require("becoxy-icons");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var defaultMaxHeight = 250;
-var SelectTable = (0, import_react12.forwardRef)((props, ref) => {
+// test-app/src/component/sidebar/index.tsx
+var import_becoxy_icons4 = require("becoxy-icons");
+var import_classnames8 = __toESM(require("classnames"));
+var import_react9 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Sidebar = (props) => {
   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
+    open,
+    children,
+    toggleSidebar,
+    width,
+    keyboard,
+    hiddenBackground,
+    hiddenFullScreenButton
   } = props;
-  const selectTableRef = (0, import_react12.useRef)();
-  const selectMenuTableRef = (0, import_react12.useRef)();
-  const inputRef = (0, import_react12.useRef)();
-  const [dropdownOpen, setDropdownOpen] = (0, import_react12.useState)(false);
-  const [indexFocus, setIndexFocus] = (0, import_react12.useState)(-1);
-  const [isFocus, setIsFocus] = (0, import_react12.useState)(false);
-  const [isLoading, setIsLoading] = (0, import_react12.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react12.useState)("");
-  const [optionsLoad, setOptionsLoad] = (0, import_react12.useState)();
-  const { t } = (0, import_react_i18next9.useTranslation)();
-  const isSelectedAll = (0, import_react12.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);
-  };
-  (0, import_react12.useEffect)(() => {
-    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]);
-  (0, import_react12.useEffect)(() => {
-    if (inputRef && !isDisabled) {
-      inputRef.current.addEventListener("blur", function() {
-        setDropdownOpen(false);
-        setSearchTerm("");
-        setIsFocus(false);
-      });
-      inputRef.current.addEventListener("focus", function() {
-        if (!isFocus) {
-          setIsFocus(true);
-        }
-      });
-    }
-  }, [inputRef]);
-  (0, import_react12.useEffect)(() => {
-    if (searchTerm && !dropdownOpen) {
-      setDropdownOpen(true);
-      setIndexFocus(0);
-    }
-  }, [searchTerm]);
-  const handleOpenClose = () => {
-    setSearchTerm("");
-    if (dropdownOpen) {
-      closeMenu();
-    } else {
-      if (!isDisabled) {
-        setDropdownOpen(true);
-      }
-    }
-  };
-  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 [isFullScreen, setIsFullScreen] = (0, import_react9.useState)(false);
+  const [flag, setFlag] = (0, import_react9.useState)(open);
+  (0, import_react9.useEffect)(() => {
+    if (open !== flag) {
+      if (open) {
+        setFlag(open);
+      } else {
+        setTimeout(() => {
+          setFlag(open);
+        }, 50);
       }
     }
-    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;
+  }, [open]);
+  const handClose = () => {
+    setFlag(false);
+    setTimeout(() => {
+      toggleSidebar();
+    }, 400);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "div",
+    {
+      tabIndex: 0,
+      className: (0, import_classnames8.default)({ "d-none": !open }),
+      onKeyDown: (e) => {
+        if (!keyboard && e.code === "Escape" && flag) {
+          handClose();
+          e.stopPropagation();
+          e.preventDefault();
         }
-      } 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);
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "div",
+          {
+            className: (0, import_classnames8.default)("offcanvas-backdrop fade", {
+              "d-none": !flag || hiddenBackground,
+              show: flag
+            }),
+            style: { zIndex: 1056 },
+            onClick: handClose
           }
-          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;
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          "div",
+          {
+            className: (0, import_classnames8.default)("customizer d-none d-md-block ", `customizer-${width ?? 600}`, {
+              open: flag,
+              fullscreen: isFullScreen
+            }),
+            style: { zIndex: 1057 },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                "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: (0, import_classnames8.default)({ "d-none": hiddenFullScreenButton }),
+                  onClick: () => {
+                    setIsFullScreen(!isFullScreen);
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_becoxy_icons4.ChevronLeft, { className: `${isFullScreen ? "d-none" : ""}`, fontSize: 16 }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_becoxy_icons4.ChevronRight, { className: `${!isFullScreen ? "d-none" : ""}`, fontSize: 15 })
+                  ]
+                }
+              ),
+              children
+            ]
           }
-          if (newIndex >= 0) {
-            setIndexFocus(newIndex);
-            checkIfElementIsOutOfScroll(2, newIndex);
-          } else {
-            setIndexFocus((optionsLoad ? optionsLoad : options).length - 1);
-            checkIfElementIsOutOfScroll(3, (optionsLoad ? optionsLoad : options).length - 1);
+        )
+      ]
+    }
+  );
+};
+var sidebar_default = Sidebar;
+
+// test-app/src/component/sidebar-setting-column/index.tsx
+var import_classnames9 = __toESM(require("classnames"));
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var SidebarSetColumn = (props) => {
+  const { column, setColumn, openSidebar, handleSidebar } = props;
+  const { t } = (0, import_react_i18next7.useTranslation)();
+  const [dataSource, setDataSource] = (0, import_react10.useState)([]);
+  const [indexFocus, setIndexFocus] = (0, import_react10.useState)();
+  (0, import_react10.useEffect)(() => {
+    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] = (0, import_react10.useState)(getWindowSize());
+  (0, import_react10.useEffect)(() => {
+    const handleWindowResize = () => {
+      setWindowSize(getWindowSize());
+    };
+    window.addEventListener("resize", handleWindowResize);
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
+  const renderFooterButtons = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react10.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_reactstrap7.Button, { color: "primary", onClick: handleSubmit, className: "me-1", children: t("Confirm") }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_reactstrap7.Button, { color: "secondary", onClick: handleCancel, outline: true, children: t("Close") })
+    ] });
+  };
+  const visibleTemplate = (item, index) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_reactstrap7.Input,
+      {
+        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);
           }
-          flag = true;
         }
       }
-    }
-    if (flag) {
-      e.stopPropagation();
-      e.preventDefault();
-    }
+    );
   };
-  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);
+  const fixColumnTemplate = (item, index) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_reactstrap7.Input,
+      {
+        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;
+            }
+            setDataSource(dataSource);
+          }
         }
       }
+    );
+  };
+  const columns = [
+    {
+      field: "headerText",
+      headerText: "Column name",
+      template: (e) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { 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
     }
-  };
-  let timeOutElement;
-  const scrollToElement = (elemment, top) => {
-    clearTimeout(timeOutElement);
-    timeOutElement = setTimeout(() => {
-      elemment.scrollTo({
-        top,
-        behavior: "smooth"
-      });
-    }, 100);
-  };
+  ];
   const renderHeaderCol = (col, indexCol) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_react12.Fragment,
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_react10.Fragment,
       {
-        children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "th",
           {
-            className: (0, import_classnames11.default)(
-              `r-select-headercell fix-${col.fixedType}`,
+            className: (0, import_classnames9.default)(
+              `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 * 35}px`,
+              top: `${0 * 42}px`,
               maxWidth: col.maxWidth
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "div",
               {
                 role: "textbox",
                 title: t(col.headerText ?? ""),
                 style: {
-                  height: `${1 * 35}px`,
+                  height: `${1 * 42}px`,
                   justifyContent: col.textAlign ?? "left"
                 },
-                className: "r-select-headercell-div",
+                className: "r-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);
-  };
-  (0, import_react12.useEffect)(() => {
-    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__ */ (0, import_jsx_runtime12.jsxs)(
-      "tr",
-      {
-        id: `row-select-table-${indexRow}`,
-        style: { paddingLeft: 10 * level },
-        className: (0, import_classnames11.default)("r-select-row", { "last-row": indexRow === (optionsLoad ? optionsLoad : options).length - 1 }, { "fisrt-row": indexRow === 0 }),
-        children: [
-          isMulti && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            "td",
-            {
-              className: (0, import_classnames11.default)(`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__ */ (0, import_jsx_runtime12.jsx)(
-                import_reactstrap8.Input,
-                {
-                  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 ? (0, import_moment.default)(valueDisplay).format("DD/MM/yyyy") : "";
-            } else if (col.type === "datetime") {
-              valueDisplay = valueDisplay ? (0, import_moment.default)(valueDisplay).format("DD/MM/yyyy HH:mm") : "";
-            }
-            return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react12.Fragment, { children: [
-              col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                "td",
-                {
-                  id: `select-${id}-${indexRow}-${indexCol}`,
-                  className: (0, import_classnames11.default)(`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__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay })
-            ] }, indexCol);
-          })
-        ]
-      },
-      `row-${indexRow}`
+      `header-${indexCol}`
     );
   };
-  const RenderTable = (props2) => {
-    const {} = props2;
-    let countDisplay = 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("table", { style: { width: "100%" }, children: [
-        !noHeader && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("tr", { className: "r-select-row", role: "row", children: [
-          isMulti && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("th", { className: (0, import_classnames11.default)(`r-select-headercell`), style: { width: 40, top: `0px` }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            "div",
-            {
-              style: { justifyContent: "center" },
-              className: (0, import_classnames11.default)("r-select-headercell-div"),
-              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                import_reactstrap8.Input,
-                {
-                  checked: isSelectedAll,
-                  type: "checkbox",
-                  onClick: (e) => {
-                    if (isMulti) {
-                      if (isSelectedAll) {
-                        onChange([]);
-                      } else {
-                        onChange([...optionsLoad ? optionsLoad : options]);
-                      }
-                      e.stopPropagation();
-                    }
-                  },
-                  readOnly: true,
-                  className: (0, import_classnames11.default)("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__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)(RenderElement, { isSelected, indexRow, row }, `select-table-${indexRow}`);
-          }
-        }) }) })
-      ] }),
-      countDisplay === 0 && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "r-no-data", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "r-no-data", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Spinner, { className: "me-1", children: " " }),
-        t("Loading...")
-      ] })
-    ] });
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    "div",
-    {
-      className: (0, import_classnames11.default)("react-select-table", { "is-invalid": invalid }),
-      ref,
-      id,
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: selectTableRef, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-        import_reactstrap8.Dropdown,
-        {
-          isOpen: dropdownOpen,
-          toggle: () => {
-          },
-          onMouseDown: (e) => e.preventDefault(),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-              import_reactstrap8.DropdownToggle,
-              {
-                onClick: (e) => {
-                  if (!isDisabled) {
-                    inputRef?.current.focus();
-                    handleOpenClose();
-                  }
-                  e.preventDefault();
-                },
-                tag: "div",
-                className: (0, import_classnames11.default)("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__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "select-table-container", children: [
-                    isMulti ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames11.default)("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__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
-                          index === 0 ? "" : ", ",
-                          element[fieldLabel ?? "label"]
-                        ] }, index);
-                      }
-                    }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: (0, import_classnames11.default)("select-value", { "d-none": searchTerm }), children: [
-                      value ? formatOptionLabel ? formatOptionLabel(value) : value[fieldLabel ?? "label"] : "",
-                      " "
-                    ] }) }),
-                    !((isMulti ? value?.length > 0 : value) || isDisabled || searchTerm) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames11.default)("select-placeholder"), children: placeholder }),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "input-container", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                      "input",
-                      {
-                        style: { textAlign: textAlign ?? "left" },
-                        ref: inputRef,
-                        className: (0, import_classnames11.default)("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__ */ (0, import_jsx_runtime12.jsxs)("div", { className: (0, import_classnames11.default)("select-table-indicator d-flex align-items-center"), children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" })
-                  ] }),
-                  isClearable && value && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                    "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    sidebar_default,
+    {
+      open: openSidebar,
+      toggleSidebar: handleCancel,
+      width: 700,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(modal_header_default, { typeModal: "Edit", handleModal: handleCancel, title: "Column setup" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "ms-2 react-table-edit", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "r-grid", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "r-gridtable", style: { height: windowSize.innerHeight - 120 }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("table", { style: { width: "100%" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("thead", { className: "r-gridheader", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tr", { className: "r-row", role: "row", children: columns.map((col, index) => {
+            return renderHeaderCol(col, index);
+          }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tbody", { className: "r-gridcontent", children: dataSource?.map((row, indexRow) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "tr",
+              {
+                className: (0, import_classnames9.default)("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__ */ (0, import_jsx_runtime10.jsx)(import_react10.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    "td",
                     {
-                      className: (0, import_classnames11.default)("cursor-pointer"),
-                      onClick: (e) => {
-                        onChange(isMulti ? [] : void 0);
+                      className: (0, import_classnames9.default)(
+                        `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();
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { height: "20", width: "20", color: "#c4c4c4", viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", className: "css-tj5bde-Svg", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)("div", { className: "select-table-indicator", onMouseDown: (e) => e.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { height: "20", width: "20", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)(
-              import_reactstrap8.DropdownMenu,
-              {
-                container: component,
-                className: "formula-dropdown icon-dropdown p-0",
-                style: {
-                  width: menuWidth ? menuWidth : "min-content",
-                  position: "fixed",
-                  borderRadius: 3,
-                  zIndex: 9999
-                },
-                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.DropdownItem, { className: (0, import_classnames11.default)("p-0 menu-select-table"), style: { borderRadius: "6px" }, tag: "div", header: true, children: dropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  "div",
-                  {
-                    onMouseDown: (e) => {
-                      if (!isDisabled) {
-                        inputRef?.current.focus();
-                        e.preventDefault();
-                      }
+                      onClick: (e) => {
+                        if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
+                          if (indexRow !== indexFocus) {
+                            setIndexFocus(indexRow);
+                          }
+                          e.stopPropagation();
+                        }
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                        "div",
+                        {
+                          className: (0, import_classnames9.default)("r-rowcell-div"),
+                          style: {
+                            width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : "auto"
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                            "div",
+                            {
+                              className: (0, import_classnames9.default)("r-rowcell-content"),
+                              style: {
+                                margin: "7px 9px"
+                              },
+                              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "r-cell-text", children: col.template ? col.template(row, indexRow) : value })
+                            }
+                          )
+                        }
+                      )
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "r-select-grid", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-select-gridtable", ref: selectMenuTableRef, style: { minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RenderTable, {}) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames11.default)("r-select-footer", { "d-none": !(showFooter === true || handleAdd) }), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_reactstrap8.Button, { outline: true, color: "primary", onClick: handleAdd, className: (0, import_classnames11.default)("r-btn-add d-flex align-items-center", { "d-none": !handleAdd }), children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_becoxy_icons5.Plus, { className: "me-50", fontSize: 16 }),
-                        t("AddNew"),
-                        " (F9)"
-                      ] }) })
-                    ] })
-                  }
-                ) })
-              }
-            )
-          ]
-        }
-      ) })
+                    `col-${indexRow}-${indexCol}`
+                  ) }, indexCol);
+                })
+              },
+              `row-${indexRow}`
+            );
+          }) })
+        ] }) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "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
+var import_ej2_react_dropdowns = require("@syncfusion/ej2-react-dropdowns");
+
+// test-app/src/component/table/paging/index.tsx
+var import_becoxy_icons5 = require("becoxy-icons");
+var import_classnames10 = __toESM(require("classnames"));
+var import_react11 = require("react");
+var import_react_i18next8 = require("react-i18next");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOptions, onChangePageSize }) => {
+  const { t } = (0, import_react_i18next8.useTranslation)();
+  const [countPage, setCountPage] = (0, import_react11.useState)(0);
+  const [currentPageNumber, setCurrentPageNumber] = (0, import_react11.useState)(1);
+  (0, import_react11.useEffect)(() => {
+    setCountPage(Math.floor(totalItem / pageSize) + (Math.floor(totalItem / pageSize) === totalItem / pageSize ? 0 : 1));
+  }, [totalItem, pageSize]);
+  (0, import_react11.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime11.jsx)(
+          "div",
+          {
+            className: (0, import_classnames10.default)("r-number", { "r-active": index === currentPage }),
+            onClick: () => {
+              onChangePage({ totalItem, pageSize, currentPage: index, old: currentPage });
+            },
+            children: index
+          },
+          `page-${index}`
+        )
+      );
+    }
+    return arr;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react11.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "r-pager", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "r-pagercontainer", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "r-button", type: "button", disabled: countPage <= 1 || currentPage === 1, onClick: () => onChangePage({ totalItem, pageSize, currentPage: 1, old: currentPage }), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_becoxy_icons5.ChevronsLeft, { fontSize: 16 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "r-button", type: "button", disabled: countPage <= 1 || currentPage === 1, onClick: () => onChangePage({ totalItem, pageSize, currentPage: currentPage - 1, old: currentPage }), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_becoxy_icons5.ChevronLeft, { fontSize: 16 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "button",
+        {
+          className: (0, import_classnames10.default)("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__ */ (0, import_jsx_runtime11.jsx)(
+        "button",
+        {
+          className: (0, import_classnames10.default)("r-button", { "d-none": currentPageNumber * 5 >= countPage }),
+          type: "button",
+          onClick: () => {
+            setCurrentPageNumber(currentPageNumber + 1);
+            onChangePage({ totalItem, pageSize, currentPage: currentPageNumber * 5 + 1, old: currentPage });
+          },
+          children: "..."
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "r-button", type: "button", disabled: countPage <= 1 || countPage === currentPage, onClick: () => onChangePage({ totalItem, pageSize, currentPage: currentPage + 1, old: currentPage }), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_becoxy_icons5.ChevronRight, { fontSize: 16 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime11.jsx)(import_becoxy_icons5.ChevronsRight, { fontSize: 16 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "r-pagesize", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        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__ */ (0, import_jsx_runtime11.jsx)("span", { style: { display: "inline", marginLeft: 10, fontSize: 13 }, children: t("pagerDropDown") })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "r-parentmsgbar", children: t("totalItemsInfo", { page: currentPage, countPage, totalItem }) })
+  ] }) });
+};
 
 // test-app/src/component/table/header.tsx
-var import_react13 = require("react");
-var import_classnames12 = __toESM(require("classnames"));
-var import_reactstrap9 = require("reactstrap");
-var import_react_i18next10 = require("react-i18next");
+var import_react12 = require("react");
+var import_classnames11 = __toESM(require("classnames"));
+var import_reactstrap8 = require("reactstrap");
+var import_react_i18next9 = require("react-i18next");
 var import_react_resizable = require("react-resizable");
 var import_styles = require("react-resizable/css/styles.css");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var HeaderTableCol = (props) => {
   const {
     selectEnable,
@@ -2169,7 +2110,7 @@ var HeaderTableCol = (props) => {
     setColumn,
     isMulti
   } = props;
-  const { t } = (0, import_react_i18next10.useTranslation)();
+  const { t } = (0, import_react_i18next9.useTranslation)();
   const handleResize = (e, { size }) => {
     if (size.width > 50) {
       const newColumns = [...column];
@@ -2177,7 +2118,7 @@ var HeaderTableCol = (props) => {
       setColumn(newColumns);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react13.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react12.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_react_resizable.Resizable,
     {
       className: "r-resize",
@@ -2185,12 +2126,12 @@ var HeaderTableCol = (props) => {
       height: 0,
       onResize: handleResize,
       draggableOpts: { enableUserSelectHack: false },
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "th",
         {
           rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
           colSpan: col.columns?.length ?? 1,
-          className: (0, import_classnames12.default)(`r-headercell fix-${col.fixedType}`, { "cell-fixed": col.fixedType }),
+          className: (0, import_classnames11.default)(`r-headercell fix-${col.fixedType}`, { "cell-fixed": col.fixedType }),
           style: {
             top: `${indexParent * 42}px`,
             left: col.fixedType === "left" ? objWidthFix[col.index ?? 0] : void 0,
@@ -2199,18 +2140,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__ */ (0, import_jsx_runtime13.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
             "div",
             {
               style: { justifyContent: col.textAlign ?? "left" },
-              className: (0, import_classnames12.default)("r-headercell-div"),
+              className: (0, import_classnames11.default)("r-headercell-div"),
               children: [
-                col.field === "checkbox" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                  import_reactstrap9.Input,
+                col.field === "checkbox" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  import_reactstrap8.Input,
                   {
                     checked: totalCount > 0 && selectedRows?.length >= totalCount,
                     type: "checkbox",
-                    className: (0, import_classnames12.default)("cursor-pointer", { "d-none": !isMulti }),
+                    className: (0, import_classnames11.default)("cursor-pointer", { "d-none": !isMulti }),
                     style: { textAlign: col.textAlign ?? "left", marginTop: 6 },
                     onChange: (e) => {
                       if (selectEnable) {
@@ -2237,39 +2178,39 @@ var HeaderTableCol = (props) => {
 var header_default = HeaderTableCol;
 
 // test-app/src/component/table/command.tsx
-var import_react15 = require("react");
-var import_classnames13 = __toESM(require("classnames"));
-var import_reactstrap10 = require("reactstrap");
-var import_react_i18next11 = require("react-i18next");
+var import_react14 = require("react");
+var import_classnames12 = __toESM(require("classnames"));
+var import_reactstrap9 = require("reactstrap");
+var import_react_i18next10 = require("react-i18next");
 
 // test-app/src/component/icon/index.tsx
 var Icon = __toESM(require("becoxy-icons"));
-var import_react14 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var IconCustom = (props) => {
   const { iconName, size } = props;
   if (iconName === "") {
     return null;
   } else {
     const TagIcon = iconName === "" ? "" : Icon[iconName];
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react14.Fragment, { children: iconName === "" ? "" : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TagIcon, { fontSize: size }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react13.Fragment, { children: iconName === "" ? "" : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TagIcon, { fontSize: size }) });
   }
 };
 var icon_default = IconCustom;
 
 // test-app/src/component/table/command.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var CommandElement = (props) => {
   const { commandItems, rowData, indexRow, handleCommandClick, indexFocus, setIndexFocus } = props;
-  const { t } = (0, import_react_i18next11.useTranslation)();
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react15.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "d-flex align-items-center", style: { columnGap: 10 }, children: commandItems.map((item, index) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-      import_reactstrap10.Button,
+  const { t } = (0, import_react_i18next10.useTranslation)();
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react14.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "d-flex align-items-center", style: { columnGap: 10 }, children: commandItems.map((item, index) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      import_reactstrap9.Button,
       {
         id: `command-item-${indexRow}-${index}`,
         tabIndex: -1,
         style: { padding: "5px", minWidth: 45, height: "100%" },
-        className: (0, import_classnames13.default)("command-item", {
+        className: (0, import_classnames12.default)("command-item", {
           "btn-icon": item.tooltip === ""
         }),
         color: item.color ? item.color : "#000",
@@ -2281,8 +2222,8 @@ var CommandElement = (props) => {
           e.preventDefault();
         },
         children: [
-          item.icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(icon_default, { iconName: item.icon, size: 16 }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_reactstrap10.UncontrolledTooltip, { className: "r-tooltip", target: `command-item-${indexRow}-${index}`, place: "top", children: t(item.tooltip ?? "") })
+          item.icon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(icon_default, { iconName: item.icon, size: 16 }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_reactstrap9.UncontrolledTooltip, { className: "r-tooltip", target: `command-item-${indexRow}-${index}`, place: "top", children: t(item.tooltip ?? "") })
         ]
       },
       `command-${index}`
@@ -2292,9 +2233,9 @@ var CommandElement = (props) => {
 var command_default = CommandElement;
 
 // test-app/src/component/table/index.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
-  const { t } = (0, import_react_i18next12.useTranslation)();
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
+  const { t } = (0, import_react_i18next11.useTranslation)();
   const {
     idTable,
     dataSource,
@@ -2322,36 +2263,36 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
     handleSelect,
     isMulti
   } = props;
-  (0, import_react16.useImperativeHandle)(ref, () => {
+  (0, import_react15.useImperativeHandle)(ref, () => {
     return {
       refeshFocusRow: handleRefeshRow
     };
   });
-  const [refreshRow, setRefreshRow] = (0, import_react16.useState)(false);
-  const [indexFocus, setIndexFocus] = (0, import_react16.useState)();
-  const [selectedRows, setSelectedRows] = (0, import_react16.useState)([]);
-  const [headerColumns, setHeaderColumns] = (0, import_react16.useState)([[]]);
-  const [contentColumns, setContentColumns] = (0, import_react16.useState)([]);
-  const [levelCol, setLevelCol] = (0, import_react16.useState)(0);
-  const [columnFistEdit, setColumnFistEdit] = (0, import_react16.useState)(0);
-  const [columnLastEdit, setColumnlastEdit] = (0, import_react16.useState)(0);
-  const [objWidthFix, setObjWidthFix] = (0, import_react16.useState)({});
-  const [openPopupTree, setOpenPopupTree] = (0, import_react16.useState)(false);
-  const [openPopupSetupColumn, setOpenPopupSetupColumn] = (0, import_react16.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react16.useState)("");
-  const tableElement = (0, import_react16.useRef)(null);
-  const gridRef = (0, import_react16.useRef)();
+  const [refreshRow, setRefreshRow] = (0, import_react15.useState)(false);
+  const [indexFocus, setIndexFocus] = (0, import_react15.useState)();
+  const [selectedRows, setSelectedRows] = (0, import_react15.useState)([]);
+  const [headerColumns, setHeaderColumns] = (0, import_react15.useState)([[]]);
+  const [contentColumns, setContentColumns] = (0, import_react15.useState)([]);
+  const [levelCol, setLevelCol] = (0, import_react15.useState)(0);
+  const [columnFistEdit, setColumnFistEdit] = (0, import_react15.useState)(0);
+  const [columnLastEdit, setColumnlastEdit] = (0, import_react15.useState)(0);
+  const [objWidthFix, setObjWidthFix] = (0, import_react15.useState)({});
+  const [openPopupTree, setOpenPopupTree] = (0, import_react15.useState)(false);
+  const [openPopupSetupColumn, setOpenPopupSetupColumn] = (0, import_react15.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react15.useState)("");
+  const tableElement = (0, import_react15.useRef)(null);
+  const gridRef = (0, import_react15.useRef)();
   let totalCount = dataSource.length;
   const pagingClient = pagingSetting?.allowPaging && (pagingSetting?.pagingClient || !(editDisable || addDisable));
   const searchClient = searchSetting?.searchEnable && (searchSetting?.searchClient || !(editDisable || addDisable));
   const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? "id";
   const fieldUniKey = columns.filter((item) => item.isUnikey === true)?.map((item) => item.field);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (pagingClient && pagingSetting.setCurrentPage && Math.ceil(totalCount / (pagingSetting?.pageSize ?? 1)) < (pagingSetting.currentPage ?? 1)) {
       pagingSetting.setCurrentPage(1);
     }
   }, [dataSource]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     let indexFirst = -1;
     let indexlast = -1;
     let letfWidthFix = 0;
@@ -2385,7 +2326,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
     setColumnFistEdit(indexFirst + 1);
     setColumnlastEdit(indexlast + 1);
   }, [contentColumns]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const arrHeaderColumns = [];
     const arrContentColumns = [];
     let headerLevelRow = 0;
@@ -2402,7 +2343,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
     setHeaderColumns(arrHeaderColumns);
     setContentColumns(arrContentColumns);
   }, [columns]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const arrHeaderColumns = [];
     const arrContentColumns = [];
     let headerLevelRow = 0;
@@ -2516,7 +2457,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
     }
   };
   const searchTemplate = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react16.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "me-50 r-search", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react15.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "me-50 r-search", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       react_input_default,
       {
         style: { width: "230px" },
@@ -2537,8 +2478,8 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
   const renderEdit = (row, col, indexRow, indexCol) => {
     switch (col?.editTypeCondition ? col?.editTypeCondition(row) : col.editType) {
       case "date":
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          import_reactstrap11.Input,
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_reactstrap10.Input,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
@@ -2550,7 +2491,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
               }
               handleDataChange(row, col, indexRow);
             },
-            className: (0, import_classnames14.default)("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: (0, import_classnames13.default)("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             type: "date",
             max: "9999-12-31",
             onKeyDown: (e) => {
@@ -2566,8 +2507,8 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
           }
         );
       case "datetime":
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          import_reactstrap11.Input,
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_reactstrap10.Input,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
@@ -2579,7 +2520,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
               }
               handleDataChange(row, col, indexRow);
             },
-            className: (0, import_classnames14.default)("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: (0, import_classnames13.default)("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             type: "datetime-local",
             max: "9999-12-31T23:59",
             onKeyDown: (e) => {
@@ -2607,7 +2548,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
         } else {
           valueSelect = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? optionsSelect?.find((val) => val[col.selectSettings?.fieldValue ?? "value"] === row[col.field]) : "";
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           SelectTable,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -2664,14 +2605,14 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
             }
           }
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "div",
           {
             onKeyDown: (e) => {
               if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
               }
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               import_ej2_react_dropdowns.DropDownTreeComponent,
               {
                 id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -2682,7 +2623,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
                   parentValue: "parentId",
                   child: "children"
                 },
-                className: (0, import_classnames14.default)("select-tree", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+                className: (0, import_classnames13.default)("select-tree", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
                 allowFiltering: false,
                 value: valueSelectTree,
                 popupHeight: 250,
@@ -2710,8 +2651,8 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
           }
         );
       case "checkbox":
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          import_reactstrap11.Input,
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_reactstrap10.Input,
           {
             checked: row[col.field],
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -2733,13 +2674,13 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
         );
       case "numeric":
         let valueCurrency = row[col.field];
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          import_reactstrap11.Input,
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_reactstrap10.Input,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
             defaultValue: formartNumberic(valueCurrency, decimalSeparator, thousandSeparator, col.numericSettings?.fraction),
-            className: (0, import_classnames14.default)("border-0 rounded-0 input-numeric", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: (0, import_classnames13.default)("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("-");
@@ -2823,8 +2764,8 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
           }
         );
       case "color":
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { padding: "4px 8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          import_reactstrap11.Input,
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { padding: "4px 8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_reactstrap10.Input,
           {
             type: "color",
             value: row[col.field],
@@ -2846,7 +2787,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
           `col-${indexRow}-${indexCol}`
         ) });
       case "form":
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           edit_form_default,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -2874,13 +2815,13 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
           }
         );
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          import_reactstrap11.Input,
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_reactstrap10.Input,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
             defaultValue: isNullOrUndefined(row[col.field]) ? "" : row[col.field],
-            className: (0, import_classnames14.default)("border-0 rounded-0 input-element", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: (0, import_classnames13.default)("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;
@@ -3263,7 +3204,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
       }
     }
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     setIndexFocus(-1);
     if (setSelectedItem) {
       if (isMulti) {
@@ -3290,7 +3231,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
       }
     }
   }, [selectedRows]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!isMulti) {
       if (dataSource && selectedItem && selectedItem[fieldKey]) {
         if (selectedRows?.length === 0 || selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
@@ -3307,10 +3248,10 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
   }, [selectedItem]);
   const renderContentCol = (col, row, indexRow, indexCol, isSelected) => {
     if (col.field === "command") {
-      return col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      return col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "td",
         {
-          className: (0, import_classnames14.default)(
+          className: (0, import_classnames13.default)(
             `r-rowcell p-0 fix-${col.fixedType}`,
             { "cell-fixed": col.fixedType },
             { "r-active": isSelected && editDisable || indexFocus === indexRow }
@@ -3320,15 +3261,15 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
             right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
             textAlign: col.textAlign ? col.textAlign : "left"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-rowcell-div ", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(command_default, { commandItems: col.commandItems ?? [], handleCommandClick, indexRow, rowData: row, setIndexFocus, indexFocus }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-rowcell-div ", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(command_default, { commandItems: col.commandItems ?? [], handleCommandClick, indexRow, rowData: row, setIndexFocus, indexFocus }) })
         },
         `col-${indexRow}-${indexCol}`
       );
     } else if (col.field === "#") {
-      return col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      return col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "td",
         {
-          className: (0, import_classnames14.default)(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
+          className: (0, import_classnames13.default)(`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,
@@ -3372,15 +3313,15 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
               e.stopPropagation();
             }
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-rowcell-div pt-50", children: indexRow + 1 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-rowcell-div pt-50", children: indexRow + 1 })
         },
         `col-${indexRow}-${indexCol}`
       );
     } else if (col.field === "checkbox") {
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "td",
         {
-          className: (0, import_classnames14.default)(
+          className: (0, import_classnames13.default)(
             `r-rowcell p-0 fix-${col.fixedType}`,
             { "cell-fixed": col.fixedType },
             { "r-active": isSelected && editDisable || indexFocus === indexRow }
@@ -3390,7 +3331,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
             right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
             textAlign: col.textAlign ? col.textAlign : "center"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "div",
             {
               className: "r-rowcell-div cursor-pointer",
@@ -3414,8 +3355,8 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
                   e.stopPropagation();
                 }
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                import_reactstrap11.Input,
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                import_reactstrap10.Input,
                 {
                   checked: isSelected,
                   type: "checkbox",
@@ -3441,10 +3382,10 @@ var TableEdit = (0, import_react16.forwardRef)((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__ */ (0, import_jsx_runtime16.jsx)(import_react16.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react15.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "td",
         {
-          className: (0, import_classnames14.default)(
+          className: (0, import_classnames13.default)(
             `r-rowcell fix-${col.fixedType}`,
             { "cell-fixed": col.fixedType },
             { "r-active": isSelected && editDisable || indexFocus === indexRow }
@@ -3486,25 +3427,25 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
               e.stopPropagation();
             }
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "div",
             {
-              className: (0, import_classnames14.default)("r-rowcell-div"),
-              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+              className: (0, import_classnames13.default)("r-rowcell-div"),
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                 "div",
                 {
                   id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
-                  className: (0, import_classnames14.default)("r-rowcell-content", { "r-is-invalid": errorMessage }),
+                  className: (0, import_classnames13.default)("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__ */ (0, import_jsx_runtime16.jsx)("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }),
-                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { id: `error-${indexRow}-${indexCol}`, className: (0, import_classnames14.default)("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_becoxy_icons6.AlertCircle, { fontSize: 15.5 }) }),
-                    !(typeDis === 1 && !refreshRow) && checkOverflow(indexRow, indexCol) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : value }),
-                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                      import_reactstrap11.UncontrolledTooltip,
+                    typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }),
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { id: `error-${indexRow}-${indexCol}`, className: (0, import_classnames13.default)("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_becoxy_icons6.AlertCircle, { fontSize: 15.5 }) }),
+                    !(typeDis === 1 && !refreshRow) && checkOverflow(indexRow, indexCol) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_reactstrap10.UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : value }),
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                      import_reactstrap10.UncontrolledTooltip,
                       {
                         target: `error-${indexRow}-${indexCol}`,
                         className: "r-tooltip tooltip-error",
@@ -3526,10 +3467,10 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
     return element && element.scrollWidth > element.clientWidth;
   };
   const renderFooterCol = (col, indexCol) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react16.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react15.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "td",
       {
-        className: (0, import_classnames14.default)(
+        className: (0, import_classnames13.default)(
           `p-0 px-50 r-footer fix-${col.fixedType}`,
           { "cell-fixed": col.fixedType }
         ),
@@ -3538,56 +3479,56 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
           right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
           textAlign: col.textAlign ? col.textAlign : "left"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-footer-div", children: col.haveSum === true && col.editType === "numeric" ? formartNumberic(dataSource.reduce(function(accumulator, currentValue) {
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime16.jsx)("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "r-toolbar-items", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
-        return item.align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) : "";
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "r-toolbar-items", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
+        return item.align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) : "";
       }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
-        return item.align === "center" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-center-${index}`) : "";
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
+        return item.align === "center" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-center-${index}`) : "";
       }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
-        return item.align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) : "";
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
+        return item.align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) : "";
       }) })
     ] }) });
   };
   const renderToolbarBottom = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "r-toolbar-items", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "r-toolbar-left", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.Button, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
-        (indexFocus ?? -1) > -1 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.Button, { color: "success", outline: true, onClick: () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "r-toolbar-items", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "r-toolbar-left", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: (0, import_classnames13.default)("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_reactstrap10.Button, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
+        (indexFocus ?? -1) > -1 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: (0, import_classnames13.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_reactstrap10.Button, { color: "success", outline: true, onClick: () => {
             handleDuplicate(dataSource[indexFocus ?? -1], indexFocus ?? -1);
           }, className: "d-flex", children: t("Duplicate") }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.Button, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.Button, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: " " }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item", { "d-none": editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.Button, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: (0, import_classnames13.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_reactstrap10.Button, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: (0, import_classnames13.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_reactstrap10.Button, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: " " }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: (0, import_classnames13.default)("r-toolbar-item", { "d-none": editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_reactstrap10.Button, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
         toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
-          return item.align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : "";
+          return item.align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : "";
         })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
-        return item.align === "center" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : "";
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
+        return item.align === "center" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : "";
       }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "r-toolbar-right", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "r-toolbar-right", children: [
         toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
-          return item.align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : "";
+          return item.align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : "";
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item me-25", { "d-none": headerColumns.length > 1 }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_becoxy_icons6.Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_reactstrap11.UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.DropdownToggle, { href: "/", tag: "a", color: "info", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_becoxy_icons6.Info, { className: "cursor-pointer" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.DropdownMenu, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "d-flex flex-column p-50 py-25", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime16.jsx)("div", { style: { fontSize: 13 }, children: "Ch\u1ECDn \xF4 v\xE0 Ctrl + V \u0111\u1EC3 d\xE1n th\xF4ng tin t\u1EEB excel" }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime15.jsx)("div", { className: (0, import_classnames13.default)("r-toolbar-item me-25", { "d-none": headerColumns.length > 1 }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_becoxy_icons6.Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: (0, import_classnames13.default)("r-toolbar-item me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_reactstrap10.UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_reactstrap10.DropdownToggle, { href: "/", tag: "a", color: "info", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_becoxy_icons6.Info, { className: "cursor-pointer" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_reactstrap10.DropdownMenu, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "d-flex flex-column p-50 py-25", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime15.jsx)("div", { style: { fontSize: 13 }, children: "Ch\u1ECDn \xF4 v\xE0 Ctrl + V \u0111\u1EC3 d\xE1n th\xF4ng tin t\u1EEB excel" }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime15.jsx)("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" })
           ] }) })
         ] }) })
       ] })
@@ -3616,10 +3557,10 @@ var TableEdit = (0, import_react16.forwardRef)((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__ */ (0, import_jsx_runtime16.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "tr",
             {
-              className: (0, import_classnames14.default)("r-row", { "fisrt-row": countDisplay === 0 }),
+              className: (0, import_classnames13.default)("r-row", { "fisrt-row": countDisplay === 0 }),
               children: contentColumns.map((col, indexCol) => {
                 return renderContentCol(col, row, indexRow, indexCol, isSelected);
               })
@@ -3630,19 +3571,19 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
       }
     });
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (pagingClient && pagingSetting?.setCurrentPage && (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm)) {
       pagingSetting?.setCurrentPage(1);
     }
   }, [searchTerm, searchSetting?.searchTerm]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react16.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "react-table-edit", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "r-grid", ref: gridRef, children: [
-        toolbarSetting?.showTopToolbar ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: renderToolbarTop() }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("table", { style: { width: "100%" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react15.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "react-table-edit", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "r-grid", ref: gridRef, children: [
+        toolbarSetting?.showTopToolbar ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: renderToolbarTop() }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("table", { style: { width: "100%" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 header_default,
                 {
                   col,
@@ -3662,14 +3603,14 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
               );
             }) }, `header-${-indexParent}`);
           }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tbody", { className: "r-gridcontent", children: renderData() }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tfoot", { className: "r-gridfoot", children: haveSum == true ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tr", { className: "r-row", children: contentColumns.map((col, index) => {
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tbody", { className: "r-gridcontent", children: renderData() }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tfoot", { className: "r-gridfoot", children: haveSum == true ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tr", { className: "r-row", children: contentColumns.map((col, index) => {
             return renderFooterCol(col, index);
-          }) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {}) })
+          }) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {}) })
         ] }) }),
-        toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: renderToolbarBottom() }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {})
+        toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: renderToolbarBottom() }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {})
       ] }),
-      pagingSetting?.allowPaging ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      pagingSetting?.allowPaging ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         PagingComponent,
         {
           onChangePage,
@@ -3679,9 +3620,9 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
           totalItem: pagingClient ? totalCount : pagingSetting?.totalItem ?? 0,
           onChangePageSize
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {})
+      ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       sidebar_setting_column_default,
       {
         handleSidebar: () => {
@@ -3698,11 +3639,11 @@ var table_default = TableEdit;
 
 // test-app/src/component/tab-menu/index.tsx
 var import_becoxy_icons7 = require("becoxy-icons");
-var import_classnames15 = __toESM(require("classnames"));
-var import_react17 = require("react");
+var import_classnames14 = __toESM(require("classnames"));
+var import_react16 = require("react");
 var import_react_router_dom = require("react-router-dom");
-var import_reactstrap12 = require("reactstrap");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_reactstrap11 = require("reactstrap");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var TabsMenuComponent = ({
   buttonWidth,
   tabParent,
@@ -3714,14 +3655,14 @@ var TabsMenuComponent = ({
   renderModal
 }) => {
   const navigate = (0, import_react_router_dom.useNavigate)();
-  const [dataMenu, setDataMenu] = (0, import_react17.useState)([]);
-  const [openMenu, setOpenMenu] = (0, import_react17.useState)(false);
-  const [url, setUrl] = (0, import_react17.useState)("");
-  const [contentWidth, setContentWidth] = (0, import_react17.useState)(0);
-  const [componentWidth, setComponentWidth] = (0, import_react17.useState)(0);
-  const [scrollPosition, setScrollPosition] = (0, import_react17.useState)(0);
-  const [dataItem, setDataItem] = (0, import_react17.useState)([]);
-  const [openModal, setOpenModal] = (0, import_react17.useState)({});
+  const [dataMenu, setDataMenu] = (0, import_react16.useState)([]);
+  const [openMenu, setOpenMenu] = (0, import_react16.useState)(false);
+  const [url, setUrl] = (0, import_react16.useState)("");
+  const [contentWidth, setContentWidth] = (0, import_react16.useState)(0);
+  const [componentWidth, setComponentWidth] = (0, import_react16.useState)(0);
+  const [scrollPosition, setScrollPosition] = (0, import_react16.useState)(0);
+  const [dataItem, setDataItem] = (0, import_react16.useState)([]);
+  const [openModal, setOpenModal] = (0, import_react16.useState)({});
   const handleWindowResize = () => {
     const tabEle = document.getElementById(`tab-component-${resourceCode}`);
     const tabContent = document.getElementById(`content-component-${resourceCode}`);
@@ -3730,7 +3671,7 @@ var TabsMenuComponent = ({
       setContentWidth(tabContent?.offsetWidth ?? 0);
     }
   };
-  (0, import_react17.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     setUrl(window.location.pathname);
     window.addEventListener("resize", handleWindowResize);
     setTimeout(() => {
@@ -3746,7 +3687,7 @@ var TabsMenuComponent = ({
       window.removeEventListener("resize", handleWindowResize);
     };
   }, []);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const item = resources?.find((x) => x.code === (resourceCodeParent ? resourceCodeParent : resourceCode));
     if (item) {
       if (resourceCodeParent) {
@@ -3777,23 +3718,23 @@ var TabsMenuComponent = ({
   const handleModal = (name) => {
     setOpenModal((old) => ({ ...old, [name]: !(openModal[name] ?? false) }));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react17.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react16.Fragment, { children: [
     renderModal ? renderModal({ handleModal, windowSize, openModal, setDataItem, dataItem }) : "",
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: (0, import_classnames15.default)("tab-custom", { "tab-parent": tabParent }, { "tab-child": tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: (0, import_classnames14.default)("tab-custom", { "tab-parent": tabParent }, { "tab-child": tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "div",
         {
           onClick: () => handleScroll(-200),
-          className: (0, import_classnames15.default)("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_becoxy_icons7.ChevronLeft, {})
+          className: (0, import_classnames14.default)("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_becoxy_icons7.ChevronLeft, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { id: `tab-component-${resourceCode}`, className: "tab-component", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { id: `content-component-${resourceCode}`, children: dataMenu.map((item) => {
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { id: `tab-component-${resourceCode}`, className: "tab-component", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { id: `content-component-${resourceCode}`, children: dataMenu.map((item) => {
         if (item?.resAttributes?.IS_MENU === "1") {
-          return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_reactstrap12.UncontrolledDropdown, { className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: "down", style: { backgroundColor: openMenu ? "#e0e0e0" : "" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_reactstrap12.DropdownToggle, { color: "#00000", style: { border: "none", boxShadow: "none", margin: 0, padding: 0 }, className: "background-none", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: item.name }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_reactstrap12.DropdownMenu, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-              import_reactstrap12.DropdownItem,
+          return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_reactstrap11.UncontrolledDropdown, { className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: "down", style: { backgroundColor: openMenu ? "#e0e0e0" : "" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.DropdownToggle, { color: "#00000", style: { border: "none", boxShadow: "none", margin: 0, padding: 0 }, className: "background-none", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { children: item.name }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.DropdownMenu, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              import_reactstrap11.DropdownItem,
               {
                 style: { borderRadius: "5px", margin: "0 0.5rem", width: "95%" },
                 onClick: () => {
@@ -3809,23 +3750,23 @@ var TabsMenuComponent = ({
             )) })
           ] }, item.code);
         } else {
-          return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             import_react_router_dom.Link,
             {
               to: item.url,
-              className: (0, import_classnames15.default)("tab-custom-item", { active: item.url === url || tabParent && url?.split("/").length > 3 && item.url.startsWith(url.substring(0, url.lastIndexOf("/"))) }),
+              className: (0, import_classnames14.default)("tab-custom-item", { active: item.url === url || tabParent && url?.split("/").length > 3 && item.url.startsWith(url.substring(0, url.lastIndexOf("/"))) }),
               children: item.name
             },
             item.code
           );
         }
       }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "div",
         {
           onClick: () => handleScroll(200),
-          className: (0, import_classnames15.default)("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_becoxy_icons7.ChevronRight, {})
+          className: (0, import_classnames14.default)("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_becoxy_icons7.ChevronRight, {})
         }
       )
     ] })
@@ -3834,9 +3775,9 @@ var TabsMenuComponent = ({
 
 // test-app/src/component/input-style/index.tsx
 var import_becoxy_icons8 = require("becoxy-icons");
-var import_reactstrap13 = require("reactstrap");
-var import_classnames16 = __toESM(require("classnames"));
-var import_react18 = require("react");
+var import_reactstrap12 = require("reactstrap");
+var import_classnames15 = __toESM(require("classnames"));
+var import_react17 = require("react");
 
 // test-app/src/component/input-style/fonts.ts
 var OptionFont = [
@@ -4695,7 +4636,7 @@ var OptionFont = [
 ];
 
 // test-app/src/component/input-style/index.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var InputStyleComponent = (props) => {
   const {
     value,
@@ -4709,8 +4650,8 @@ var InputStyleComponent = (props) => {
     disabledItalic,
     disabledUnderline
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react18.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "d-flex align-items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react17.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "d-flex align-items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       SelectTable,
       {
         options: OptionFont,
@@ -4726,12 +4667,12 @@ var InputStyleComponent = (props) => {
             field: "label",
             headerText: "",
             template: (row) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontFamily: row.label }, children: row.label });
+              return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { fontFamily: row.label }, children: row.label });
             }
           }
         ],
         formatOptionLabel: (props2) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { style: {
+          return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { style: {
             paddingLeft: 3,
             borderRadius: 2,
             fontFamily: value.fontFamily,
@@ -4744,7 +4685,7 @@ var InputStyleComponent = (props) => {
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_classnames16.default)("ms-25", { "d-none": disabledFontSize }), style: { width: 60 }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: (0, import_classnames15.default)("ms-25", { "d-none": disabledFontSize }), style: { width: 60 }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       SelectTable,
       {
         options: Array.from({ length: 100 }, (_, i) => ({ value: i + 1, label: i + 1 })),
@@ -4756,45 +4697,45 @@ var InputStyleComponent = (props) => {
         }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "div",
       {
-        className: (0, import_classnames16.default)("btn-input-style", { "active-custom": value.bold }, { "d-none": disabledBold }),
+        className: (0, import_classnames15.default)("btn-input-style", { "active-custom": value.bold }, { "d-none": disabledBold }),
         onClick: () => {
           if (!disabled) {
             onChange({ ...value, bold: !value.bold });
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_becoxy_icons8.Bold, { fontSize: 18 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_becoxy_icons8.Bold, { fontSize: 18 })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "div",
       {
-        className: (0, import_classnames16.default)("btn-input-style", { "active-custom": value.italic }, { "d-none": disabledItalic }),
+        className: (0, import_classnames15.default)("btn-input-style", { "active-custom": value.italic }, { "d-none": disabledItalic }),
         onClick: () => {
           if (!disabled) {
             onChange({ ...value, italic: !value.italic });
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_becoxy_icons8.Italic, { fontSize: 18 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_becoxy_icons8.Italic, { fontSize: 18 })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "div",
       {
-        className: (0, import_classnames16.default)("btn-input-style", { "active-custom": value.underline }, { "d-none": disabledUnderline }),
+        className: (0, import_classnames15.default)("btn-input-style", { "active-custom": value.underline }, { "d-none": disabledUnderline }),
         onClick: () => {
           if (!disabled) {
             onChange({ ...value, underline: !value.underline });
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_becoxy_icons8.Underline, { fontSize: 18 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_becoxy_icons8.Underline, { fontSize: 18 })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_reactstrap13.Button, { tag: "label", color: "none", className: (0, import_classnames16.default)("btn-input-style", { "d-none": disabledColor }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_becoxy_icons8.Type, { stroke: value.color ?? "#000000", fontSize: 18 }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_reactstrap12.Button, { tag: "label", color: "none", className: (0, import_classnames15.default)("btn-input-style", { "d-none": disabledColor }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_becoxy_icons8.Type, { stroke: value.color ?? "#000000", fontSize: 18 }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "input",
         {
           type: "color",
@@ -4808,10 +4749,10 @@ var InputStyleComponent = (props) => {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_reactstrap13.Button, { tag: "label", color: "none", className: (0, import_classnames16.default)("btn-input-style", { "d-none": disabledBackgroundColor }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_becoxy_icons8.Droplet, { fill: value.backgroundColor ?? "#ffffff", fontSize: 18 }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-        import_reactstrap13.Input,
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_reactstrap12.Button, { tag: "label", color: "none", className: (0, import_classnames15.default)("btn-input-style", { "d-none": disabledBackgroundColor }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_becoxy_icons8.Droplet, { fill: value.backgroundColor ?? "#ffffff", fontSize: 18 }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        import_reactstrap12.Input,
         {
           id: "backgroundColor",
           type: "color",