react-table-edit 0.6.8 → 0.7.0

package/dist/index.js

@@ -28,11 +28,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // index.ts
-var Table_Edit_exports = {};
-__export(Table_Edit_exports, {
+var Table_edit_exports = {};
+__export(Table_edit_exports, {
   SelectTable: () => SelectTable,
   TabsMenuComponent: () => TabsMenuComponent,
-  default: () => Table_Edit_default,
+  default: () => Table_edit_default,
   formartNumberic: () => formartNumberic,
   generateUUID: () => generateUUID,
   isNullOrUndefined: () => isNullOrUndefined,
@@ -49,15 +49,13 @@ __export(Table_Edit_exports, {
   roundNumber: () => roundNumber,
   useOnClickOutside: () => useOnClickOutside
 });
-module.exports = __toCommonJS(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_react_select3 = __toESM(require("react-select"));
-var import_async = __toESM(require("react-select/async"));
 var import_becoxy_icons6 = require("becoxy-icons");
 
 // test-app/src/component/react-input/index.tsx
@@ -330,26 +328,11 @@ var roundNumber = (num, fraction) => {
   return result;
 };
 
-// test-app/src/component/icon/index.tsx
-var Icon = __toESM(require("becoxy-icons"));
-var import_react4 = require("react");
-var import_jsx_runtime3 = 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_runtime3.jsx)(import_react4.Fragment, { children: iconName === "" ? "" : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TagIcon, { fontSize: size }) });
-  }
-};
-var icon_default = IconCustom;
-
 // test-app/src/component/table/index.tsx
 var import_moment2 = __toESM(require("moment"));
 
 // test-app/src/component/edit-form/index.tsx
-var import_react9 = require("react");
+var import_react8 = require("react");
 var import_reactstrap6 = require("reactstrap");
 var import_react_hook_form5 = require("react-hook-form");
 var import_yup = require("@hookform/resolvers/yup");
@@ -360,28 +343,28 @@ var import_classnames6 = __toESM(require("classnames"));
 var import_react_hook_form = require("react-hook-form");
 var import_reactstrap2 = require("reactstrap");
 var import_classnames2 = __toESM(require("classnames"));
-var import_react5 = require("react");
+var import_react4 = require("react");
 var import_react_i18next = require("react-i18next");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var TextInput = (props) => {
   const { t } = (0, import_react_i18next.useTranslation)();
   const { control, id, name, min, max, type, label, labelSize, required, errors, height, disabled, row, isLabel, placeholder, autoFocus, inLine, callback, readOnly, classes, ...rest } = props;
   const renderLabel = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.Fragment, { children: isLabel === false ? "" : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_reactstrap2.Label, { for: name, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react4.Fragment, { children: isLabel === false ? "" : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_reactstrap2.Label, { for: name, children: [
       t(label ? label : ""),
       " ",
-      required ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-danger", children: "*" }) : "",
+      required ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-danger", children: "*" }) : "",
       " "
     ] }) });
   };
   const renderInput = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react5.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react4.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         import_react_hook_form.Controller,
         {
           name,
           control,
-          render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             import_reactstrap2.Input,
             {
               id,
@@ -423,10 +406,10 @@ var TextInput = (props) => {
           )
         }
       ),
-      errors && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_reactstrap2.FormFeedback, { children: errors?.message })
+      errors && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_reactstrap2.FormFeedback, { children: errors?.message })
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       className: (0, import_classnames2.default)(
@@ -440,7 +423,7 @@ var TextInput = (props) => {
       ),
       children: [
         renderLabel(),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_classnames2.default)("form-input-content", { "hidden-label": isLabel === false }), children: renderInput() })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_classnames2.default)("form-input-content", { "hidden-label": isLabel === false }), children: renderInput() })
       ]
     }
   ) });
@@ -452,9 +435,9 @@ 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_react6 = require("react");
+var import_react5 = require("react");
 var import_react_i18next2 = require("react-i18next");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+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;
@@ -465,14 +448,14 @@ var SelectBox = (props) => {
     }
   };
   const renderSelect = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react6.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    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_runtime5.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               import_react_select.default,
               {
                 ...rest,
@@ -507,10 +490,10 @@ var SelectBox = (props) => {
           }
         }
       ),
-      errors && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_reactstrap3.FormFeedback, { children: errors?.message })
+      errors && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_reactstrap3.FormFeedback, { children: errors?.message })
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react6.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       className: (0, import_classnames3.default)(
@@ -523,13 +506,13 @@ var SelectBox = (props) => {
         }
       ),
       children: [
-        isLabel === false ? "" : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_reactstrap3.Label, { className: "form-label", for: name, 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_runtime5.jsx)("span", { className: "text-danger", children: "*" }) : "",
+          required ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-danger", children: "*" }) : "",
           " "
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_classnames3.default)("form-input-content", { "hidden-label": isLabel === false }), children: renderSelect() })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_classnames3.default)("form-input-content", { "hidden-label": isLabel === false }), children: renderSelect() })
       ]
     }
   ) });
@@ -540,14 +523,14 @@ var select_default = SelectBox;
 var import_react_hook_form3 = require("react-hook-form");
 var import_reactstrap4 = require("reactstrap");
 var import_classnames4 = __toESM(require("classnames"));
-var import_react7 = require("react");
+var import_react6 = require("react");
 var import_react_i18next3 = require("react-i18next");
 var import_creatable = __toESM(require("react-select/creatable"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
+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_runtime6.jsx)(import_react7.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react6.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       className: (0, import_classnames4.default)(
@@ -559,19 +542,19 @@ var CreatableSelectBox = (props) => {
         }
       ),
       children: [
-        isLabel === false ? "" : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_reactstrap4.Label, { className: "form-label", for: name, 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_runtime6.jsx)("span", { className: "text-danger", children: "*" }) : "",
+          required ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-danger", children: "*" }) : "",
           " "
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_classnames4.default)("form-input-content", { "hidden-label": isLabel === false }), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__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_runtime6.jsx)(
+              render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 import_creatable.default,
                 {
                   ...rest,
@@ -599,7 +582,7 @@ var CreatableSelectBox = (props) => {
               )
             }
           ),
-          errors && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_reactstrap4.FormFeedback, { children: errors?.message })
+          errors && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_reactstrap4.FormFeedback, { children: errors?.message })
         ] })
       ]
     }
@@ -611,9 +594,9 @@ var creactable_select_default = CreatableSelectBox;
 var import_react_hook_form4 = require("react-hook-form");
 var import_reactstrap5 = require("reactstrap");
 var import_classnames5 = __toESM(require("classnames"));
-var import_react8 = require("react");
+var import_react7 = require("react");
 var import_react_i18next4 = require("react-i18next");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var NumberInput = (props) => {
   const { t } = (0, import_react_i18next4.useTranslation)();
   const {
@@ -643,21 +626,21 @@ var NumberInput = (props) => {
     ...rest
   } = props;
   const renderLabel = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react8.Fragment, { children: isLabel === false ? "" : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_reactstrap5.Label, { className: "form-label", for: name, children: [
+    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: [
       t(label ? label : ""),
       " ",
-      required ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-danger", children: "*" }) : "",
+      required ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-danger", children: "*" }) : "",
       " "
     ] }) });
   };
   const renderInput = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react8.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         import_react_hook_form4.Controller,
         {
           name,
           control,
-          render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             import_reactstrap5.Input,
             {
               id,
@@ -717,10 +700,10 @@ var NumberInput = (props) => {
           )
         }
       ),
-      errors && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_reactstrap5.FormFeedback, { children: errors?.message })
+      errors && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_reactstrap5.FormFeedback, { children: errors?.message })
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react7.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       className: (0, import_classnames5.default)(
@@ -734,7 +717,7 @@ var NumberInput = (props) => {
       ),
       children: [
         renderLabel(),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_classnames5.default)("form-input-content", { "hidden-label": isLabel === false }), children: renderInput() })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_classnames5.default)("form-input-content", { "hidden-label": isLabel === false }), children: renderInput() })
       ]
     }
   ) });
@@ -742,9 +725,9 @@ var NumberInput = (props) => {
 var input_number_default = NumberInput;
 
 // test-app/src/component/edit-form/index.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var defaultWidth = 200;
-var EditForm = (0, import_react9.forwardRef)((props, ref) => {
+var EditForm = (0, import_react8.forwardRef)((props, ref) => {
   const {
     id,
     field,
@@ -769,11 +752,11 @@ var EditForm = (0, import_react9.forwardRef)((props, ref) => {
     labelSize = "label-small"
   } = props;
   const { innerWidth } = window;
-  const inputRef = (0, import_react9.useRef)();
-  const editFormRef = (0, import_react9.useRef)();
-  const buttonRef = (0, import_react9.useRef)();
-  const [dropdownOpen, setDropdownOpen] = (0, import_react9.useState)(false);
-  const [itemsField, setItemsField] = (0, import_react9.useState)([]);
+  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();
@@ -795,7 +778,7 @@ var EditForm = (0, import_react9.forwardRef)((props, ref) => {
     defaultValues,
     resolver: (0, import_yup.yupResolver)(schema)
   });
-  (0, import_react9.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (dropdownOpen) {
       if (onFormOpen && itemsField.length === 0) {
         onFormOpen(rowData, itemsField, setItemsField);
@@ -807,7 +790,7 @@ var EditForm = (0, import_react9.forwardRef)((props, ref) => {
       }
     }
   }, [dropdownOpen]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (dropdownOpen && itemsField.length > 0) {
       itemsField.forEach((ele) => {
         setValue(ele.name, rowData[ele.name] ?? "");
@@ -912,9 +895,9 @@ var EditForm = (0, import_react9.forwardRef)((props, ref) => {
     }
   };
   const renderForm = (rows) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_reactstrap6.Row, { className: "gy-25", children: rows.map((item, index) => {
+    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_runtime8.jsx)(import_reactstrap6.Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        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}`,
@@ -934,7 +917,7 @@ var EditForm = (0, import_react9.forwardRef)((props, ref) => {
           index
         ) }, index);
       } else if (item.type === "text") {
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_reactstrap6.Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        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}`,
@@ -951,7 +934,7 @@ var EditForm = (0, import_react9.forwardRef)((props, ref) => {
           index
         ) }, index);
       } else if (item.type === "select") {
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_reactstrap6.Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        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}`,
@@ -970,7 +953,7 @@ var EditForm = (0, import_react9.forwardRef)((props, ref) => {
           index
         ) }, index);
       } else if (item.type === "selectCreatable") {
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_reactstrap6.Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        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}`,
@@ -991,20 +974,20 @@ var EditForm = (0, import_react9.forwardRef)((props, ref) => {
       }
     }) });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       className: "form-edit",
       ref,
       id,
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: editFormRef, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      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_runtime8.jsx)(import_reactstrap6.DropdownToggle, { tag: "div", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__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" },
@@ -1019,7 +1002,7 @@ var EditForm = (0, import_react9.forwardRef)((props, ref) => {
                 readOnly: true
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               import_reactstrap6.DropdownMenu,
               {
                 className: "formula-dropdown icon-dropdown p-0",
@@ -1030,8 +1013,8 @@ var EditForm = (0, import_react9.forwardRef)((props, ref) => {
                   borderRadius: 8,
                   zIndex: 1056
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_reactstrap6.DropdownItem, { className: "p-0", style: { borderRadius: "6px" }, tag: "div", header: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_reactstrap6.Form, { className: "todo-modal", onKeyDown: (e) => formKeyDown(e, handleSubmit(handleOnSubmit)), children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                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)(
                     "div",
                     {
                       className: "p-1",
@@ -1042,9 +1025,9 @@ var EditForm = (0, import_react9.forwardRef)((props, ref) => {
                       children: itemsField ? renderForm(itemsField) : ""
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)("div", { className: "text-primary py-25", style: { fontSize: 12 }, children: footerTemplate ? footerTemplate(rowData) : "" }),
-                    !onChangeField ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  /* @__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.jsx)(import_jsx_runtime7.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                       import_reactstrap6.Button,
                       {
                         ref: buttonRef,
@@ -1058,7 +1041,7 @@ var EditForm = (0, import_react9.forwardRef)((props, ref) => {
                         },
                         children: t("Save")
                       }
-                    ) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, {})
+                    ) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, {})
                   ] })
                 ] }) })
               }
@@ -1072,7 +1055,7 @@ var EditForm = (0, import_react9.forwardRef)((props, ref) => {
 var edit_form_default = EditForm;
 
 // test-app/src/component/sidebar-setting-column/index.tsx
-var import_react11 = require("react");
+var import_react10 = require("react");
 var import_reactstrap7 = require("reactstrap");
 var import_react_i18next7 = require("react-i18next");
 
@@ -1080,35 +1063,35 @@ var import_react_i18next7 = require("react-i18next");
 var import_becoxy_icons2 = require("becoxy-icons");
 var import_classnames7 = __toESM(require("classnames"));
 var import_react_i18next6 = require("react-i18next");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+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_runtime9.jsx)(import_becoxy_icons2.Edit, { fontSize: 17, className: "me-1" });
+      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_runtime9.jsx)(import_becoxy_icons2.Info, { fontSize: 17, className: "me-1" });
+      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_runtime9.jsx)(import_becoxy_icons2.Info, { fontSize: 17, className: "me-1" });
+      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_runtime9.jsx)("span", { className: "e-icons e-sorting-1 me-1", style: { fontSize: "14px" } });
+      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_runtime9.jsx)("span", { className: "e-flat e-icons e-paste-match-destination me-1", style: { fontSize: "14px" } });
+      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_runtime9.jsx)(import_becoxy_icons2.Plus, { fontSize: 17, className: "me-1" });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_becoxy_icons2.Plus, { fontSize: 17, className: "me-1" });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "modal-header d-flex align-items-center justify-content-between mb-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "d-flex align-items-center justify-content-start", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("h5", { className: "modal-title", children: [
+  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_runtime9.jsx)(import_jsx_runtime9.Fragment, {})
+      component ? component() : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "todo-item-action d-flex align-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__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 }),
@@ -1123,8 +1106,8 @@ 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_react10 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var Sidebar = (props) => {
   const {
     open,
@@ -1135,9 +1118,9 @@ var Sidebar = (props) => {
     hiddenBackground,
     hiddenFullScreenButton
   } = props;
-  const [isFullScreen, setIsFullScreen] = (0, import_react10.useState)(false);
-  const [flag, setFlag] = (0, import_react10.useState)(open);
-  (0, import_react10.useEffect)(() => {
+  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);
@@ -1154,7 +1137,7 @@ var Sidebar = (props) => {
       toggleSidebar();
     }, 400);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       tabIndex: 0,
@@ -1167,7 +1150,7 @@ var Sidebar = (props) => {
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "div",
           {
             className: (0, import_classnames8.default)("offcanvas-backdrop fade", {
@@ -1178,7 +1161,7 @@ var Sidebar = (props) => {
             onClick: handClose
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "div",
           {
             className: (0, import_classnames8.default)("customizer d-none d-md-block ", `customizer-${width ?? 600}`, {
@@ -1187,7 +1170,7 @@ var Sidebar = (props) => {
             }),
             style: { zIndex: 1057 },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                 "div",
                 {
                   style: {
@@ -1209,8 +1192,8 @@ var Sidebar = (props) => {
                     setIsFullScreen(!isFullScreen);
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_becoxy_icons3.ChevronLeft, { className: `${isFullScreen ? "d-none" : ""}`, fontSize: 16 }),
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_becoxy_icons3.ChevronRight, { className: `${!isFullScreen ? "d-none" : ""}`, fontSize: 15 })
+                    /* @__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 })
                   ]
                 }
               ),
@@ -1226,13 +1209,13 @@ var sidebar_default = Sidebar;
 
 // test-app/src/component/sidebar-setting-column/index.tsx
 var import_classnames9 = __toESM(require("classnames"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
+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_react11.useState)([]);
-  const [indexFocus, setIndexFocus] = (0, import_react11.useState)();
-  (0, import_react11.useEffect)(() => {
+  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 })));
     }
@@ -1249,8 +1232,8 @@ var SidebarSetColumn = (props) => {
     const { innerWidth, innerHeight } = window;
     return { innerWidth, innerHeight };
   };
-  const [windowSize, setWindowSize] = (0, import_react11.useState)(getWindowSize());
-  (0, import_react11.useEffect)(() => {
+  const [windowSize, setWindowSize] = (0, import_react10.useState)(getWindowSize());
+  (0, import_react10.useEffect)(() => {
     const handleWindowResize = () => {
       setWindowSize(getWindowSize());
     };
@@ -1260,13 +1243,13 @@ var SidebarSetColumn = (props) => {
     };
   }, []);
   const renderFooterButtons = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react11.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_reactstrap7.Button, { color: "primary", onClick: handleSubmit, className: "me-1", children: t("Confirm") }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_reactstrap7.Button, { color: "secondary", onClick: handleCancel, outline: true, children: t("Close") })
+    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_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       import_reactstrap7.Input,
       {
         defaultChecked: item.visible ?? true,
@@ -1284,7 +1267,7 @@ var SidebarSetColumn = (props) => {
     );
   };
   const fixColumnTemplate = (item, index) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       import_reactstrap7.Input,
       {
         defaultChecked: item.fixedType === "left" || item.fixedType === "right",
@@ -1313,7 +1296,7 @@ var SidebarSetColumn = (props) => {
       field: "headerText",
       headerText: "Column name",
       template: (e) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: t(e.headerText) });
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: t(e.headerText) });
       },
       visible: true,
       width: 175,
@@ -1351,10 +1334,10 @@ var SidebarSetColumn = (props) => {
     }
   ];
   const renderHeaderCol = (col, indexCol) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_react11.Fragment,
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_react10.Fragment,
       {
-        children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "th",
           {
             className: (0, import_classnames9.default)(
@@ -1367,7 +1350,7 @@ var SidebarSetColumn = (props) => {
               top: `${0 * 42}px`,
               maxWidth: col.maxWidth
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "div",
               {
                 role: "textbox",
@@ -1386,20 +1369,20 @@ var SidebarSetColumn = (props) => {
       `header-${indexCol}`
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     sidebar_default,
     {
       open: openSidebar,
       toggleSidebar: handleCancel,
       width: 700,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(modal_header_default, { typeModal: "Edit", handleModal: handleCancel, title: "Column setup" }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ms-2 react-table-edit", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "r-grid", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "r-gridtable", style: { height: windowSize.innerHeight - 120 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("table", { style: { width: "100%" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("thead", { className: "r-gridheader", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tr", { className: "r-row", role: "row", children: columns.map((col, index) => {
+        /* @__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_runtime11.jsx)("tbody", { className: "r-gridcontent", children: dataSource?.map((row, indexRow) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__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 }),
@@ -1408,7 +1391,7 @@ var SidebarSetColumn = (props) => {
                   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_runtime11.jsx)(import_react11.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react10.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "td",
                     {
                       className: (0, import_classnames9.default)(
@@ -1434,21 +1417,21 @@ var SidebarSetColumn = (props) => {
                           e.stopPropagation();
                         }
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      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_runtime11.jsx)(
+                          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_runtime11.jsx)("div", { className: "r-cell-text", children: col.template ? col.template(row, indexRow) : value })
+                              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "r-cell-text", children: col.template ? col.template(row, indexRow) : value })
                             }
                           )
                         }
@@ -1462,7 +1445,7 @@ var SidebarSetColumn = (props) => {
             );
           }) })
         ] }) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "div",
           {
             className: "d-flex justify-content-end p-1 ",
@@ -1482,25 +1465,25 @@ var import_ej2_react_dropdowns = require("@syncfusion/ej2-react-dropdowns");
 // test-app/src/component/paging/index.tsx
 var import_becoxy_icons4 = require("becoxy-icons");
 var import_classnames10 = __toESM(require("classnames"));
-var import_react12 = require("react");
+var import_react11 = require("react");
 var import_react_i18next8 = require("react-i18next");
 var import_react_select2 = __toESM(require("react-select"));
-var import_jsx_runtime12 = require("react/jsx-runtime");
+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_react12.useState)(0);
-  const [currentPageNumber, setCurrentPageNumber] = (0, import_react12.useState)(1);
-  (0, import_react12.useEffect)(() => {
+  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_react12.useEffect)(() => {
+  (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_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "div",
           {
             className: (0, import_classnames10.default)("r-number", { "r-active": index === currentPage }),
@@ -1515,11 +1498,11 @@ var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOpt
     }
     return arr;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react12.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "r-pager", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "r-pagercontainer", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.jsx)(import_becoxy_icons4.ChevronsLeft, { fontSize: 16 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.jsx)(import_becoxy_icons4.ChevronLeft, { fontSize: 16 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  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 }),
@@ -1532,7 +1515,7 @@ var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOpt
         }
       ),
       renderPageNumber(currentPageNumber),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "button",
         {
           className: (0, import_classnames10.default)("r-button", { "d-none": currentPageNumber * 5 >= countPage }),
@@ -1544,9 +1527,9 @@ var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOpt
           children: "..."
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.jsx)(import_becoxy_icons4.ChevronRight, { fontSize: 16 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.jsx)(import_becoxy_icons4.ChevronsRight, { fontSize: 16 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-pagesize", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      /* @__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 },
@@ -1559,22 +1542,22 @@ var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOpt
           classNamePrefix: "select-pagesize"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { display: "inline", marginLeft: 10, fontSize: 13 }, children: t("pagerDropDown") })
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { display: "inline", marginLeft: 10, fontSize: 13 }, children: t("pagerDropDown") })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-parentmsgbar", children: t("totalItemsInfo", { page: currentPage, countPage, totalItem }) })
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "r-parentmsgbar", children: t("totalItemsInfo", { page: currentPage, countPage, totalItem }) })
   ] }) });
 };
 
 // test-app/src/component/select-table/index.tsx
-var import_react13 = require("react");
+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_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var defaultMaxHeight = 300;
-var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
+var SelectTable = (0, import_react12.forwardRef)((props, ref) => {
   const {
     id,
     menuWidth,
@@ -1601,17 +1584,17 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
     showFooter,
     onPaste
   } = props;
-  const selectTableRef = (0, import_react13.useRef)();
-  const selectMenuTableRef = (0, import_react13.useRef)();
-  const inputRef = (0, import_react13.useRef)();
-  const [dropdownOpen, setDropdownOpen] = (0, import_react13.useState)(false);
-  const [indexFocus, setIndexFocus] = (0, import_react13.useState)(-1);
-  const [isFocus, setIsFocus] = (0, import_react13.useState)(false);
-  const [isLoading, setIsLoading] = (0, import_react13.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react13.useState)("");
-  const [optionsLoad, setOptionsLoad] = (0, import_react13.useState)();
+  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_react13.useMemo)(() => {
+  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 = [
@@ -1633,7 +1616,7 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
   const closeMenu = () => {
     setDropdownOpen(false);
   };
-  (0, import_react13.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (dropdownOpen) {
       if (value) {
         if (selectMenuTableRef) {
@@ -1652,17 +1635,12 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
       }
     }
   }, [dropdownOpen]);
-  let timeOutBlur;
-  (0, import_react13.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (inputRef && !isDisabled) {
       inputRef.current.addEventListener("blur", function() {
-        timeOutBlur = setTimeout(() => {
-          if (!selectTableRef.current?.contains(document.activeElement)) {
-            setDropdownOpen(false);
-            setSearchTerm("");
-            setIsFocus(false);
-          }
-        }, 100);
+        setDropdownOpen(false);
+        setSearchTerm("");
+        setIsFocus(false);
       });
       inputRef.current.addEventListener("focus", function() {
         if (!isFocus) {
@@ -1671,7 +1649,7 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
       });
     }
   }, [inputRef]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (searchTerm && !dropdownOpen) {
       setDropdownOpen(true);
       setIndexFocus(0);
@@ -1787,10 +1765,10 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
     }, 100);
   };
   const renderHeaderCol = (col, indexCol) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_react13.Fragment,
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_react12.Fragment,
       {
-        children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "th",
           {
             className: (0, import_classnames11.default)(
@@ -1803,7 +1781,7 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
               top: `${0 * 35}px`,
               maxWidth: col.maxWidth
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "div",
               {
                 role: "textbox",
@@ -1838,7 +1816,7 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
     setIsLoading(false);
     setOptionsLoad(rs);
   };
-  (0, import_react13.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!searchTerm) {
       setOptionsLoad(void 0);
     }
@@ -1849,14 +1827,14 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
   };
   const RenderElement = (props2) => {
     const { indexRow, row, isSelected, level = 0 } = props2;
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    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_runtime13.jsx)(
+          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"] }),
@@ -1880,7 +1858,7 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
                   e.stopPropagation();
                 }
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 import_reactstrap8.Input,
                 {
                   checked: isSelected,
@@ -1902,8 +1880,8 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
             } else if (col.type === "datetime") {
               valueDisplay = valueDisplay ? (0, import_moment.default)(valueDisplay).format("DD/MM/yyyy HH:mm") : "";
             }
-            return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react13.Fragment, { children: [
-              col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            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}`,
@@ -1948,7 +1926,7 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
                 },
                 `col-${indexRow}-${indexCol}`
               ),
-              checkOverflow(indexRow, indexCol) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap8.UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay })
+              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);
           })
         ]
@@ -1959,15 +1937,15 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
   const RenderTable = (props2) => {
     const {} = props2;
     let countDisplay = 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("table", { style: { width: "100%" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("tr", { className: "r-select-row", role: "row", children: [
-          isMulti && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { className: (0, import_classnames11.default)(`r-select-headercell`), style: { width: 40, top: `0px` }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("table", { style: { width: "100%" }, children: [
+        /* @__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_runtime13.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 import_reactstrap8.Input,
                 {
                   checked: isSelectedAll,
@@ -1993,73 +1971,71 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
             return renderHeaderCol(col, index);
           })
         ] }) }),
-        (optionsLoad ? optionsLoad : options).length > 0 && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { className: "r-select-gridcontent", children: (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
+        (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_runtime13.jsx)(RenderElement, { isSelected, indexRow, row }, `select-table-${indexRow}`);
+            return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RenderElement, { isSelected, indexRow, row }, `select-table-${indexRow}`);
           }
         }) }) })
       ] }),
-      countDisplay === 0 && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "r-no-data", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.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" })
+      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_runtime13.jsxs)("div", { className: "r-no-data", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap8.Spinner, { className: "me-1", children: " " }),
+      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_runtime13.jsx)(
+  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_runtime13.jsx)("div", { ref: selectTableRef, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: selectTableRef, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
         import_reactstrap8.Dropdown,
         {
           isOpen: dropdownOpen,
           toggle: () => {
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
               import_reactstrap8.DropdownToggle,
               {
-                onClick: () => {
+                onClick: (e) => {
                   if (!isDisabled) {
                     inputRef?.current.focus();
-                    if (dropdownOpen) {
-                      clearTimeout(timeOutBlur);
-                    }
                     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_runtime13.jsxs)("div", { className: "select-table-container", children: [
-                    isMulti ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: (0, import_classnames11.default)("select-value is-mutil", { "d-none": searchTerm }), children: value?.map((ele, index) => {
+                  /* @__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_runtime13.jsxs)("span", { children: [
+                        return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
                           index === 0 ? "" : ", ",
                           element[fieldLabel ?? "label"]
                         ] }, index);
                       }
-                    }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: (0, import_classnames11.default)("select-value", { "d-none": searchTerm }), children: [
+                    }) }) }) : /* @__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_runtime13.jsx)("div", { className: (0, import_classnames11.default)("select-placeholder"), children: placeholder }),
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "input-container", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    !((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" },
@@ -2079,12 +2055,12 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
                       }
                     ) })
                   ] }),
-                  isLoading && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: (0, import_classnames11.default)("select-table-indicator d-flex align-items-center"), children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap8.Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap8.Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap8.Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" })
+                  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_runtime13.jsx)(
+                  isClearable && value && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                     "div",
                     {
                       className: (0, import_classnames11.default)("cursor-pointer"),
@@ -2092,14 +2068,14 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
                         onChange(isMulti ? [] : void 0);
                         e.stopPropagation();
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.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" }) })
+                      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_runtime13.jsx)("div", { className: "select-table-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { height: "20", width: "20", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime13.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" }) }) })
+                  !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "select-table-indicator", 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_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               import_reactstrap8.DropdownMenu,
               {
                 container: component,
@@ -2109,20 +2085,19 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
                   position: "fixed",
                   zIndex: 9999
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap8.DropdownItem, { className: (0, import_classnames11.default)("p-0 menu-select-table"), style: { borderRadius: "6px" }, tag: "div", header: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                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: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "div",
                   {
                     onMouseDown: (e) => {
                       if (!isDisabled) {
                         inputRef?.current.focus();
-                        clearTimeout(timeOutBlur);
                         e.preventDefault();
                       }
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "r-select-grid", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "r-select-gridtable", ref: selectMenuTableRef, style: { minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RenderTable, {}) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: (0, import_classnames11.default)("r-select-footer", { "d-none": !(showFooter === true || handleAdd) }), children: /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.jsx)(import_becoxy_icons5.Plus, { className: "me-50", fontSize: 16 }),
+                    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)"
                       ] }) })
@@ -2139,11 +2114,11 @@ var SelectTable = (0, import_react13.forwardRef)((props, ref) => {
 });
 
 // test-app/src/component/table/header.tsx
-var import_react14 = require("react");
+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_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var HeaderTableCol = (props) => {
   const {
     selectEnable,
@@ -2158,7 +2133,7 @@ var HeaderTableCol = (props) => {
     isMulti
   } = props;
   const { t } = (0, import_react_i18next10.useTranslation)();
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react14.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react13.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "th",
     {
       rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
@@ -2172,13 +2147,13 @@ var HeaderTableCol = (props) => {
         minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
         maxWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
         "div",
         {
           style: { justifyContent: col.textAlign ?? "left" },
           className: (0, import_classnames12.default)("r-headercell-div"),
           children: [
-            col.field === "checkbox" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            col.field === "checkbox" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               import_reactstrap9.Input,
               {
                 checked: totalCount > 0 && selectedRows?.length >= totalCount,
@@ -2212,6 +2187,23 @@ var import_react15 = require("react");
 var import_classnames13 = __toESM(require("classnames"));
 var import_reactstrap10 = require("reactstrap");
 var import_react_i18next11 = 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 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 }) });
+  }
+};
+var icon_default = IconCustom;
+
+// test-app/src/component/table/command.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var CommandElement = (props) => {
   const { commandItems, rowData, indexRow, handleCommandClick, indexFocus, setIndexFocus } = props;
@@ -2220,7 +2212,7 @@ var CommandElement = (props) => {
     return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       import_reactstrap10.Button,
       {
-        id: `command-item-${indexRow}`,
+        id: `command-item-${indexRow}-${index}`,
         tabIndex: -1,
         style: { padding: "5px", minWidth: 45, height: "100%" },
         className: (0, import_classnames13.default)("command-item", {
@@ -2236,7 +2228,7 @@ var CommandElement = (props) => {
         },
         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-${index}`, place: "top", children: t(item.tooltip ?? "") })
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_reactstrap10.UncontrolledTooltip, { className: "r-tooltip", target: `command-item-${indexRow}-${index}`, place: "top", children: t(item.tooltip ?? "") })
         ]
       },
       `command-${index}`
@@ -2506,6 +2498,12 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
             onKeyDown: (e) => {
               if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
               }
+            },
+            onPaste: (e) => {
+              if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable) {
+                pasteDataFromExcel(indexRow, indexCol, e);
+                e.preventDefault();
+              }
             }
           }
         );
@@ -2529,118 +2527,34 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
             onKeyDown: (e) => {
               if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
               }
-            }
-          }
-        );
-      case "asyncSelect":
-        let optionAsyncSelects = [];
-        if (col.selectSettings?.optionsField) {
-          optionAsyncSelects = row[col.selectSettings?.optionsField] ? row[col.selectSettings?.optionsField] : [];
-        } else {
-          optionAsyncSelects = col.selectSettings?.options ? col.selectSettings?.validateOption ? col.selectSettings?.options.filter((item) => col.selectSettings?.validateOption(item, row)) : col.selectSettings?.options : [];
-        }
-        let valueAsyncSelect = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? optionAsyncSelects?.find((val) => val[col.selectSettings?.fieldValue ?? "value"] === row[col.field]) : void 0;
-        if (!valueAsyncSelect && col.selectSettings?.defaultValue) {
-          valueAsyncSelect = col.selectSettings?.defaultValue(row);
-        }
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: (0, import_classnames14.default)("d-flex select-group", { "is-invalid": col.validate && col.validate(row[col.field], row) }), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-            import_async.default,
-            {
-              menuPosition: "fixed",
-              value: valueAsyncSelect,
-              defaultOptions: optionAsyncSelects,
-              onChange: (val) => {
-                row[col.field] = val ? val[col.selectSettings?.fieldValue ?? "value"] : void 0;
-                if (col.callback) {
-                  col.callback(val, indexRow);
-                }
-                handleDataChange(row, col, indexRow);
-              },
-              menuPortalTarget: document.body,
-              isClearable: col.selectSettings?.isClearable ?? false,
-              classNamePrefix: col.selectSettings?.widthPopup ? `select-${col.selectSettings?.widthPopup}` : "select",
-              placeholder: t("Select"),
-              id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
-              loadOptions: col.selectSettings?.loadOptions,
-              className: (0, import_classnames14.default)("react-select"),
-              onKeyDown: (e) => {
-                if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
-                }
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-            "span",
-            {
-              onClick: () => {
-                if (col.selectSettings?.handAddNew) {
-                  col.selectSettings?.handAddNew("right");
-                }
-              },
-              className: (0, import_classnames14.default)("input-group-text", { "d-none": !col.selectSettings?.iconGroup }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(icon_default, { iconName: col.selectSettings?.iconGroup ?? "", size: 16 })
-            }
-          )
-        ] });
-      case "select":
-        let valueSelect;
-        let options = [];
-        if (col.selectSettings?.optionsField) {
-          options = row[col.selectSettings?.optionsField] ? row[col.selectSettings?.optionsField] : [];
-        } else {
-          options = col.selectSettings?.options ? col.selectSettings?.validateOption ? col.selectSettings?.options.filter((item) => col.selectSettings?.validateOption(item, row)) : col.selectSettings?.options : [];
-        }
-        if (col.selectSettings?.isMulti) {
-          valueSelect = !isNullOrUndefined(row[col.field]) && row[col.field]?.length > 0 ? options?.filter((val) => row[col.field]?.includes(val[col.selectSettings?.fieldValue ?? "value"])) : [];
-        } else {
-          valueSelect = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? options?.find((val) => val[col.selectSettings?.fieldValue ?? "value"] === row[col.field]) : "";
-        }
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          import_react_select3.default,
-          {
-            menuPosition: "fixed",
-            id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
-            value: valueSelect,
-            options,
-            onChange: (val) => {
-              row[col.field] = col.selectSettings?.isMulti ? val?.map((item) => item[col.selectSettings?.fieldValue ?? "value"]) ?? [] : val ? val[col.selectSettings?.fieldValue ?? "value"] : void 0;
-              if (col.callback) {
-                col.callback(val, indexRow);
-              }
-              handleDataChange(row, col, indexRow);
             },
-            menuPortalTarget: document.body,
-            isMulti: col.selectSettings?.isMulti ?? false,
-            isClearable: col.selectSettings?.isClearable ?? false,
-            classNamePrefix: col.selectSettings?.widthPopup ? `select-${col.selectSettings?.widthPopup}` : "select",
-            placeholder: t("Select"),
-            className: (0, import_classnames14.default)("react-select", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
-            onKeyDown: (e) => {
-              if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
+            onPaste: (e) => {
+              if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable) {
+                pasteDataFromExcel(indexRow, indexCol, e);
+                e.preventDefault();
               }
             }
           }
         );
       case "selectTable":
-        let valueSelectTable;
-        let optionsSelectTable = [];
+        let valueSelect;
+        let optionsSelect = [];
         if (col.selectSettings?.optionsField) {
-          optionsSelectTable = row[col.selectSettings?.optionsField] ? row[col.selectSettings?.optionsField] : [];
+          optionsSelect = row[col.selectSettings?.optionsField] ? row[col.selectSettings?.optionsField] : [];
         } else {
-          optionsSelectTable = col.selectSettings?.options ? col.selectSettings?.validateOption ? col.selectSettings?.options.filter((item) => col.selectSettings?.validateOption(item, row)) : col.selectSettings?.options : [];
+          optionsSelect = col.selectSettings?.options ? col.selectSettings?.validateOption ? col.selectSettings?.options.filter((item) => col.selectSettings?.validateOption(item, row)) : col.selectSettings?.options : [];
         }
         if (col.selectSettings?.isMulti) {
-          valueSelectTable = !isNullOrUndefined(row[col.field]) && row[col.field]?.length > 0 ? optionsSelectTable?.filter((val) => row[col.field]?.includes(val[col.selectSettings?.fieldValue ?? "value"])) : [];
+          valueSelect = !isNullOrUndefined(row[col.field]) && row[col.field]?.length > 0 ? optionsSelect?.filter((val) => row[col.field]?.includes(val[col.selectSettings?.fieldValue ?? "value"])) : [];
         } else {
-          valueSelectTable = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? optionsSelectTable?.find((val) => val[col.selectSettings?.fieldValue ?? "value"] === row[col.field]) : "";
+          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)(
           SelectTable,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
-            value: valueSelectTable,
-            options: optionsSelectTable,
+            value: valueSelect,
+            options: optionsSelect,
             rowData: row,
             onChange: (val) => {
               row[col.field] = col.selectSettings?.isMulti ? val?.map((item) => item[col.selectSettings?.fieldValue ?? "value"]) ?? [] : val ? val[col.selectSettings?.fieldValue ?? "value"] : void 0;
@@ -3649,9 +3563,10 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
                   selectedRows,
                   setSelectedRows,
                   totalCount
-                }
+                },
+                `header-${indexParent}-${index}`
               );
-            }) }, indexParent);
+            }) }, `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) => {
@@ -3824,7 +3739,7 @@ var TabsMenuComponent = ({
 };
 
 // index.ts
-var Table_Edit_default = table_default;
+var Table_edit_default = table_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   SelectTable,