react-table-edit 1.2.47 → 1.2.49

package/dist/index.js

@@ -372,238 +372,21 @@ var formatDateTime = (data, format = "dd/MM/yyyy") => {
   return format.replace(/dd|MM|yyyy|HH|mm/g, (match) => map[match]);
 };
 
-// src/component/edit-form/index.tsx
-var import_react8 = require("react");
-var import_reactstrap6 = require("reactstrap");
-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"));
-
-// src/component/input-text/index.tsx
-var import_react_hook_form = require("react-hook-form");
-var import_reactstrap2 = require("reactstrap");
-var import_classnames2 = __toESM(require("classnames"));
-var import_react4 = require("react");
-var import_react_i18next = require("react-i18next");
-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_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_runtime3.jsx)("span", { className: "text-danger", children: "*" }) : "",
-      " "
-    ] }) });
-  };
-  const renderInput = () => {
-    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_runtime3.jsx)(
-            import_reactstrap2.Input,
-            {
-              id,
-              value: !isNullOrUndefined(value) ? value : "",
-              onChange: (val) => {
-                if (min || max) {
-                  if (min && Number(val.target.value) >= min) {
-                    onChange(val.target.value);
-                    if (callback) {
-                      callback(val);
-                    }
-                  }
-                  if (max && Number(val.target.value) <= max) {
-                    onChange(val.target.value);
-                    if (callback) {
-                      callback(val);
-                    }
-                  }
-                } else {
-                  onChange(val.target.value);
-                  if (callback) {
-                    callback(val);
-                  }
-                }
-              },
-              style: { height: `${height}px` },
-              autoFocus,
-              disabled,
-              placeholder,
-              type: type ? type : "text",
-              invalid: errors && true,
-              className: "h-100",
-              rows: row,
-              min,
-              max,
-              readOnly,
-              ...rest
-            }
-          )
-        }
-      ),
-      errors && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_reactstrap2.FormFeedback, { children: errors?.message })
-    ] });
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "div",
-    {
-      className: (0, import_classnames2.default)(
-        " align",
-        {
-          [labelSize ? labelSize : ""]: labelSize,
-          [classes ? classes : ""]: classes,
-          "form-row-inline-error": errors
-        },
-        inLine === false ? "form-group " : "form-row-inline d-flex"
-      ),
-      children: [
-        renderLabel(),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_classnames2.default)("form-input-content", { "hidden-label": isLabel === false }), children: renderInput() })
-      ]
-    }
-  ) });
-};
-var input_text_default = TextInput;
-
-// src/component/input-number/index.tsx
-var import_react_hook_form2 = require("react-hook-form");
-var import_reactstrap3 = require("reactstrap");
+// src/component/table/paging/index.tsx
+var import_becoxy_icons3 = require("becoxy-icons");
 var import_classnames3 = __toESM(require("classnames"));
 var import_react5 = require("react");
-var import_react_number_format = require("react-number-format");
 var import_react_i18next2 = require("react-i18next");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var NumberInput = (props) => {
-  const {
-    id,
-    control,
-    fractionCurrency,
-    name,
-    min,
-    max,
-    label,
-    labelSize,
-    required,
-    errors,
-    disabled,
-    isLabel,
-    fixedDecimalScale,
-    placeholder,
-    inLine,
-    callback,
-    decimalSeparator = ",",
-    thousandSeparator = ".",
-    classes,
-    width,
-    allowNegative
-  } = props;
-  const { t } = (0, import_react_i18next2.useTranslation)();
-  const renderLabel = () => {
-    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_runtime4.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)(
-        import_react_hook_form2.Controller,
-        {
-          name,
-          control,
-          render: ({ field: { value, onChange } }) => {
-            let floatValue = parseFloat(value);
-            const numericFormatProps = {
-              value: !isNullOrUndefined(value) ? value : "",
-              thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
-              decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
-              allowNegative: allowNegative ?? false,
-              decimalScale: fractionCurrency ?? 0,
-              fixedDecimalScale
-            };
-            return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-              import_react_number_format.NumericFormat,
-              {
-                ...numericFormatProps,
-                className: (0, import_classnames3.default)("form-control text-right", {
-                  "is-invalid": errors
-                }),
-                onValueChange: (values) => {
-                  floatValue = values?.floatValue;
-                  const textBeforeDot = values?.value.split(".")[1];
-                  onChange(textBeforeDot ? parseFloat(values?.value).toFixed(textBeforeDot.length) : values?.floatValue);
-                },
-                onFocus: (e) => {
-                  e.target.setSelectionRange(0, e.target.innerText.length - 1);
-                },
-                onChange: () => {
-                  if (callback) {
-                    callback(floatValue);
-                  }
-                },
-                onBlur: () => {
-                  if (max && floatValue > max) {
-                    onChange(max);
-                  } else if (min && floatValue < min) {
-                    onChange(min);
-                  } else {
-                    onChange(floatValue);
-                  }
-                },
-                placeholder,
-                disabled
-              }
-            );
-          }
-        }
-      ),
-      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)(
-        " align",
-        {
-          [labelSize ? labelSize : ""]: labelSize,
-          [classes ? classes : ""]: classes,
-          "form-row-inline-error": errors
-        },
-        inLine === false ? "form-group " : "form-row-inline d-flex"
-      ),
-      children: [
-        renderLabel(),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { width: width ? width : void 0 }, className: (0, import_classnames3.default)("form-input-content", { "hidden-label": isLabel === false }), children: renderInput() })
-      ]
-    }
-  ) });
-};
-var input_number_default = NumberInput;
-
-// 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");
 
 // src/component/select-table/index.tsx
-var import_react6 = __toESM(require("react"));
-var import_reactstrap4 = require("reactstrap");
-var import_react_i18next3 = require("react-i18next");
-var import_classnames4 = __toESM(require("classnames"));
+var import_react4 = __toESM(require("react"));
+var import_reactstrap2 = require("reactstrap");
+var import_react_i18next = require("react-i18next");
+var import_classnames2 = __toESM(require("classnames"));
 var import_becoxy_icons2 = require("becoxy-icons");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var defaultMaxHeight = 250;
-var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
+var SelectTable = (0, import_react4.forwardRef)((props, ref) => {
   const {
     id,
     menuWidth,
@@ -635,18 +418,18 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
     onPaste,
     allowCreate
   } = props;
-  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 [haveCreateNew, setHaveCreateNew] = (0, import_react6.useState)(false);
-  const { t } = (0, import_react_i18next3.useTranslation)();
-  const isSelectedAll = (0, import_react6.useMemo)(() => {
+  const selectTableRef = (0, import_react4.useRef)();
+  const selectMenuTableRef = (0, import_react4.useRef)();
+  const inputRef = (0, import_react4.useRef)();
+  const [dropdownOpen, setDropdownOpen] = (0, import_react4.useState)(false);
+  const [indexFocus, setIndexFocus] = (0, import_react4.useState)(-1);
+  const [isFocus, setIsFocus] = (0, import_react4.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react4.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react4.useState)("");
+  const [optionsLoad, setOptionsLoad] = (0, import_react4.useState)();
+  const [haveCreateNew, setHaveCreateNew] = (0, import_react4.useState)(false);
+  const { t } = (0, import_react_i18next.useTranslation)();
+  const isSelectedAll = (0, import_react4.useMemo)(() => {
     return isMulti === true && (optionsLoad ? optionsLoad : options).length > 0 && value?.length >= (optionsLoad ? optionsLoad : options).length;
   }, [optionsLoad, options, value]);
   const defaultColumns = [
@@ -671,7 +454,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
     }
     onChange(val);
   };
-  (0, import_react6.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (dropdownOpen && value && !isMulti && selectMenuTableRef) {
       const index = (optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"]);
       if (index >= 0) {
@@ -679,7 +462,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
       }
     }
   }, [dropdownOpen]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (inputRef && !isDisabled) {
       inputRef.current.addEventListener("blur", function() {
         if (onCloseMenu) {
@@ -696,7 +479,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
       });
     }
   }, [inputRef]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (searchTerm) {
       if (!dropdownOpen) {
         setDropdownOpen(true);
@@ -704,7 +487,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
       setIndexFocus(-1);
     }
   }, [searchTerm]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (dropdownOpen && onOpenMenu) {
       onOpenMenu();
     }
@@ -836,13 +619,13 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
     }, 100);
   };
   const renderHeaderCol = (col, indexCol) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      import_react6.Fragment,
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_react4.Fragment,
       {
-        children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "th",
           {
-            className: (0, import_classnames4.default)(
+            className: (0, import_classnames2.default)(
               `r-select-headercell fix-${col.fixedType}`,
               { "cell-fixed": col.fixedType }
             ),
@@ -852,7 +635,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
               top: `${0 * 35}px`,
               maxWidth: col.maxWidth
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "div",
               {
                 role: "textbox",
@@ -887,7 +670,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
     setIsLoading(false);
     setOptionsLoad(rs);
   };
-  (0, import_react6.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!searchTerm) {
       setOptionsLoad(void 0);
     } else if (allowCreate && !(optionsLoad ? optionsLoad : options)?.find((x) => x[fieldLabel ?? "label"] === searchTerm)) {
@@ -900,19 +683,19 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
     const element = document.getElementById(`select-${id}-${indexRow}-${indexCol}`);
     return element && element.scrollWidth > element.clientWidth;
   };
-  const RenderElement = import_react6.default.memo((props2) => {
+  const RenderElement = import_react4.default.memo((props2) => {
     const { indexRow, row, isSelected, level = 0 } = props2;
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.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 }),
+        className: (0, import_classnames2.default)("r-select-row", { "last-row": indexRow === (optionsLoad ? optionsLoad : options).length - 1 }, { "fisrt-row": indexRow === 0 }),
         children: [
-          isMulti && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          isMulti && /* @__PURE__ */ (0, import_jsx_runtime3.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"] }),
+              className: (0, import_classnames2.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) {
@@ -931,8 +714,8 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
                   e.stopPropagation();
                 }
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                import_reactstrap4.Input,
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                import_reactstrap2.Input,
                 {
                   checked: isSelected,
                   type: "checkbox",
@@ -953,12 +736,12 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
             } else if (col.type === "datetime") {
               valueDisplay = valueDisplay ? formatDateTime(valueDisplay, formatSetting?.dateFormat ?? "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)(
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react4.Fragment, { children: [
+              col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime3.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"] }),
+                  className: (0, import_classnames2.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,
@@ -993,14 +776,14 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
                     }
                     e.stopPropagation();
                   },
-                  children: col.template ? col.template(row, indexRow) : col.type === "numeric" && Number(row[col.field]) < 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
+                  children: col.template ? col.template(row, indexRow) : col.type === "numeric" && Number(row[col.field]) < 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
                     " ",
                     `${formatSetting?.prefixNegative ?? "-"}${value}${formatSetting?.suffixNegative ?? ""}`
                   ] }) : 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 })
+              checkOverflow(indexRow, indexCol) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_reactstrap2.UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay })
             ] }, indexCol);
           })
         ]
@@ -1010,16 +793,16 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
   });
   const RenderTable = (props2) => {
     const {} = props2;
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("table", { style: { width: "100%" }, children: [
-        !(noHeader || (columns?.length ?? 0) === 0) && /* @__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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("table", { style: { width: "100%" }, children: [
+        !(noHeader || (columns?.length ?? 0) === 0) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { className: "r-select-row", role: "row", children: [
+          isMulti && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { className: (0, import_classnames2.default)(`r-select-headercell`), style: { width: 40, top: `0px` }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "div",
             {
               style: { justifyContent: "center" },
-              className: (0, import_classnames4.default)("r-select-headercell-div"),
-              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                import_reactstrap4.Input,
+              className: (0, import_classnames2.default)("r-select-headercell-div"),
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                import_reactstrap2.Input,
                 {
                   checked: isSelectedAll,
                   type: "checkbox",
@@ -1034,7 +817,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
                     }
                   },
                   readOnly: true,
-                  className: (0, import_classnames4.default)("cursor-pointer", { "d-none": !isMulti }),
+                  className: (0, import_classnames2.default)("cursor-pointer", { "d-none": !isMulti }),
                   style: { textAlign: "center", marginTop: 6 }
                 }
               )
@@ -1044,46 +827,46 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
             return renderHeaderCol(col, index);
           })
         ] }) }),
-        (optionsLoad ? optionsLoad : options) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tbody", { className: "r-select-gridcontent", children: [
-          haveCreateNew && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RenderElement, { isSelected: false, indexRow: 0, row: { valueCreate: searchTerm, [fieldValue ?? "value"]: searchTerm, [fieldLabel ?? "label"]: `${t("Create")} '${searchTerm}'`, isCreated: true } }),
+        (optionsLoad ? optionsLoad : options) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tbody", { className: "r-select-gridcontent", children: [
+          haveCreateNew && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RenderElement, { isSelected: false, indexRow: 0, row: { valueCreate: searchTerm, [fieldValue ?? "value"]: searchTerm, [fieldLabel ?? "label"]: `${t("Create")} '${searchTerm}'`, isCreated: true } }),
           (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
             const isSelected = isMulti && value?.some((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
-            return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RenderElement, { isSelected: isSelected ?? false, indexRow: indexRow + (haveCreateNew ? 1 : 0), row }, `select-table-${indexRow}`);
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RenderElement, { isSelected: isSelected ?? false, indexRow: indexRow + (haveCreateNew ? 1 : 0), row }, `select-table-${indexRow}`);
           })
         ] }) })
       ] }),
-      ((optionsLoad ? optionsLoad : options)?.length ?? 0) === 0 && !haveCreateNew && !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" })
+      ((optionsLoad ? optionsLoad : options)?.length ?? 0) === 0 && !haveCreateNew && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "r-no-data", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.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: " " }),
+      isLoading && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "r-no-data", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_reactstrap2.Spinner, { className: "me-1", children: " " }),
         t("Loading...")
       ] })
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
     {
-      className: (0, import_classnames4.default)("react-select-table", { "is-invalid": invalid }),
+      className: (0, import_classnames2.default)("react-select-table", { "is-invalid": invalid }),
       ref,
       id,
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: selectTableRef, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-        import_reactstrap4.Dropdown,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: selectTableRef, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        import_reactstrap2.Dropdown,
         {
           isOpen: dropdownOpen,
           toggle: () => {
           },
           onMouseDown: (e) => e.preventDefault(),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-              import_reactstrap4.DropdownToggle,
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              import_reactstrap2.DropdownToggle,
               {
                 onClick: (e) => {
                   if (!isDisabled) {
@@ -1094,25 +877,25 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
                 },
                 tag: "div",
                 style: { width: width ? width : "auto" },
-                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 }),
+                className: (0, import_classnames2.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) => {
-                      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "select-table-container", children: [
+                    isMulti ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_classnames2.default)("select-value is-mutil", { "d-none": searchTerm }), children: value?.map((ele, index) => {
+                      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
                         index === 0 ? "" : ", ",
                         formatOptionLabel ? formatOptionLabel(ele) : ele[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: [
+                    }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_classnames2.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)(
+                    !((isMulti ? value?.length > 0 : value) || isDisabled || searchTerm) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_classnames2.default)("select-placeholder"), children: placeholder }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "input-container", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "input",
                       {
                         style: { textAlign: textAlign ?? "left" },
                         ref: inputRef,
-                        className: (0, import_classnames4.default)("select-input"),
+                        className: (0, import_classnames2.default)("select-input"),
                         readOnly: isDisabled,
                         value: searchTerm,
                         onPaste: (e) => onPaste && !dropdownOpen && onPaste(e),
@@ -1134,28 +917,28 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
                       }
                     ) })
                   ] }),
-                  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" })
+                  isLoading && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_classnames2.default)("select-table-indicator d-flex align-items-center"), children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_reactstrap2.Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_reactstrap2.Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_reactstrap2.Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" })
                   ] }),
-                  isClearable && value && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  isClearable && value && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     "div",
                     {
-                      className: (0, import_classnames4.default)("cursor-pointer"),
+                      className: (0, import_classnames2.default)("cursor-pointer"),
                       onClick: (e) => {
                         handChange(isMulti ? [] : void 0);
                         e.stopPropagation();
                       },
-                      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" }) })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.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_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" }) }) })
+                  !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "select-table-indicator", onMouseDown: (e) => e.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { height: "20", width: "20", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime3.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,
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_reactstrap2.DropdownMenu,
               {
                 container: component,
                 className: "formula-dropdown icon-dropdown p-0",
@@ -1166,7 +949,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
                   borderRadius: 4,
                   zIndex: 9999
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_reactstrap4.DropdownItem, { className: (0, import_classnames4.default)("p-0 menu-select-table"), tag: "div", header: true, children: dropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_reactstrap2.DropdownItem, { className: (0, import_classnames2.default)("p-0 menu-select-table"), tag: "div", header: true, children: dropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "div",
                   {
                     style: { backgroundColor: "none" },
@@ -1176,11 +959,11 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
                         e.preventDefault();
                       }
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "r-select-grid", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_classnames4.default)("r-select-gridtable", { "no-header": noHeader || (columns?.length ?? 0) === 0 }), ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RenderTable, {}) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("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 d-flex align-items-center", { "d-none": !handleAdd }), children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_becoxy_icons2.Plus, { className: "me-50", fontSize: 16 }),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "r-select-grid", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_classnames2.default)("r-select-gridtable", { "no-header": noHeader || (columns?.length ?? 0) === 0 }), ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RenderTable, {}) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_classnames2.default)("r-select-footer", { "d-none": !(showFooter === true || handleAdd) }), children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_reactstrap2.Button, { outline: true, color: "primary", onClick: handleAdd, className: (0, import_classnames2.default)("r-btn d-flex align-items-center", { "d-none": !handleAdd }), children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_becoxy_icons2.Plus, { className: "me-50", fontSize: 16 }),
                           t("AddNew"),
                           " (F9)"
                         ] }),
@@ -1198,1692 +981,1909 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
   );
 });
 
-// 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);
-    }
-  };
-  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 : ""),
-        " ",
-        required2 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-danger", children: "*" }) : ""
-      ] }),
-      (!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_runtime6.jsx)(import_react7.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    "div",
-    {
-      className: (0, import_classnames5.default)(
-        inLine === false ? "form-group " : "form-row-inline d-flex",
-        "align",
+// src/component/table/paging/index.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOptions, onChangePageSize }) => {
+  const { t } = (0, import_react_i18next2.useTranslation)();
+  const [countPage, setCountPage] = (0, import_react5.useState)(0);
+  const [currentPageNumber, setCurrentPageNumber] = (0, import_react5.useState)(1);
+  (0, import_react5.useEffect)(() => {
+    setCountPage(Math.floor(totalItem / pageSize) + (Math.floor(totalItem / pageSize) === totalItem / pageSize ? 0 : 1));
+  }, [totalItem, pageSize]);
+  (0, import_react5.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_runtime4.jsx)(
+          "div",
+          {
+            className: (0, import_classnames3.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_runtime4.jsx)(import_react5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "r-pager", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "r-pagercontainer", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)(import_becoxy_icons3.ChevronsLeft, { fontSize: 16 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)(import_becoxy_icons3.ChevronLeft, { fontSize: 16 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
         {
-          [labelSize ? labelSize : ""]: labelSize,
-          "form-row-inline-error": errors
+          className: (0, import_classnames3.default)("r-button", { "d-none": currentPageNumber === 1 }),
+          type: "button",
+          onClick: () => {
+            setCurrentPageNumber(currentPageNumber - 1);
+            onChangePage({ totalItem, pageSize, currentPage: (currentPageNumber - 2) * 5 + 1, old: currentPage });
+          },
+          children: "..."
         }
       ),
-      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,
+      renderPageNumber(currentPageNumber),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          className: (0, import_classnames3.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_runtime4.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_runtime4.jsx)(import_becoxy_icons3.ChevronRight, { fontSize: 16 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)(import_becoxy_icons3.ChevronsRight, { fontSize: 16 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "r-pagesize", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        SelectTable,
+        {
+          value: { value: pageSize, label: pageSize },
+          noHeader: true,
+          options: pageOptions.map((item) => ({ value: item, label: item })),
+          onChange: (val) => {
+            onChangePageSize({ totalItem, pageSize: val?.value });
+          },
+          menuWidth: 90,
+          width: 90,
+          placeholder: t("Select")
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { display: "inline", marginLeft: 10, fontSize: 13 }, children: t("pagerDropDown") })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "r-parentmsgbar", children: t("totalItemsInfo", { page: currentPage, countPage, totalItem }) })
+  ] }) });
+};
+
+// src/component/table/header.tsx
+var import_react6 = require("react");
+var import_classnames4 = __toESM(require("classnames"));
+var import_reactstrap3 = require("reactstrap");
+var import_react_i18next3 = require("react-i18next");
+var import_react_resizable = require("react-resizable");
+var import_styles = require("react-resizable/css/styles.css");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var HeaderTableCol = (props) => {
+  const {
+    selectEnable,
+    dataSource,
+    setSelectedRows,
+    col,
+    indexCol,
+    indexParent,
+    objWidthFix,
+    totalCount,
+    selectedRows,
+    column,
+    setColumn,
+    isMulti
+  } = props;
+  const { t } = (0, import_react_i18next3.useTranslation)();
+  const handleResize = (e, { size }) => {
+    if (size.width > 50) {
+      const newColumns = [...column];
+      newColumns[indexCol].width = size.width;
+      setColumn(newColumns);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react6.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_react_resizable.Resizable,
+    {
+      className: "r-resize",
+      width: typeof col.width === "number" ? col.width : Number((col.width ?? "").replaceAll(new RegExp(`[^0-9]`, "g"), "")),
+      height: 0,
+      onResize: handleResize,
+      draggableOpts: { enableUserSelectHack: false },
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "th",
+        {
+          rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
+          colSpan: col.columns?.length ?? 1,
+          className: (0, import_classnames4.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,
+            right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0,
+            width: col.width ? typeof col.width === "number" ? col.width : col.width?.includes("px") || col.width?.includes("%") ? col.width : `${col.width}px` : "auto",
+            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_runtime5.jsxs)(
+            "div",
             {
-              name,
-              control,
-              render: ({ field: { value, onChange } }) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                  SelectTable,
+              style: { justifyContent: col.textAlign ?? "left" },
+              className: (0, import_classnames4.default)("r-headercell-div"),
+              children: [
+                col.field === "checkbox" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  import_reactstrap3.Input,
                   {
-                    ...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);
+                    checked: totalCount > 0 && selectedRows?.length >= totalCount,
+                    type: "checkbox",
+                    className: (0, import_classnames4.default)("cursor-pointer", { "d-none": !isMulti }),
+                    style: { textAlign: col.textAlign ?? "left", marginTop: 6 },
+                    onChange: (e) => {
+                      if (selectEnable) {
+                        if (e.target.checked) {
+                          setSelectedRows(dataSource.map((item) => {
+                            return item;
+                          }));
                         } 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);
-                          }
+                          setSelectedRows([]);
                         }
                       }
-                    },
-                    handleAdd: handleAddNew,
-                    isClearable,
-                    isMulti,
-                    placeholder,
-                    invalid: errors,
-                    loadOptions,
-                    options: defaultOptions,
-                    isDisabled: disabled,
-                    columns,
-                    fieldValue,
-                    fieldLabel,
-                    formatOptionLabel: labelComponent ? labelComponent : void 0
+                    }
                   }
-                );
-              }
+                ),
+                col.field !== "checkbox" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "header-content", children: t(col.headerText ?? "") }) })
+              ]
             }
-          ),
-          errors && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_reactstrap5.FormFeedback, { children: errors?.message })
-        ] })
-      ]
+          )
+        }
+      )
     }
-  ) });
+  ) }, `header-${indexCol}`);
 };
-var select_table_default = SelectTableBox;
+var header_default = HeaderTableCol;
 
-// src/component/edit-form/index.tsx
+// src/component/table/command.tsx
+var import_react8 = require("react");
+var import_classnames5 = __toESM(require("classnames"));
+var import_reactstrap4 = require("reactstrap");
+var import_react_i18next4 = require("react-i18next");
+
+// src/component/icon/index.tsx
+var Icon = __toESM(require("becoxy-icons"));
+var import_react7 = require("react");
+var import_jsx_runtime6 = 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_runtime6.jsx)(import_react7.Fragment, { children: iconName === "" ? "" : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TagIcon, { fontSize: size }) });
+  }
+};
+var icon_default = IconCustom;
+
+// src/component/table/command.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var defaultWidth = 200;
-var EditForm = (0, import_react8.forwardRef)((props, ref) => {
+var CommandElement = (props) => {
+  const { commandItems, rowData, indexRow, handleCommandClick, indexFocus, setIndexFocus } = props;
+  const { t } = (0, import_react_i18next4.useTranslation)();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "d-flex align-items-center", style: { columnGap: 10 }, children: commandItems.map((item, index) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      import_reactstrap4.Button,
+      {
+        id: `command-item-${indexRow}-${index}`,
+        tabIndex: -1,
+        style: { padding: "5px", minWidth: 45, height: "100%" },
+        className: (0, import_classnames5.default)("command-item", {
+          "btn-icon": item.tooltip === ""
+        }),
+        color: item.color ? item.color : "#000",
+        onClick: (e) => {
+          handleCommandClick(item.id, rowData, indexRow);
+          if (indexRow === indexFocus) {
+            setIndexFocus(void 0);
+          }
+          e.preventDefault();
+        },
+        children: [
+          item.icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(icon_default, { iconName: item.icon, size: 16 }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_reactstrap4.UncontrolledTooltip, { className: "r-tooltip", target: `command-item-${indexRow}-${index}`, place: "top", children: t(item.tooltip ?? "") })
+        ]
+      },
+      `command-${index}`
+    );
+  }) }) });
+};
+var command_default = CommandElement;
+
+// src/component/select-table-tree/index.tsx
+var import_react9 = __toESM(require("react"));
+var import_reactstrap5 = require("reactstrap");
+var import_react_i18next5 = require("react-i18next");
+var import_classnames6 = __toESM(require("classnames"));
+var import_becoxy_icons4 = require("becoxy-icons");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var defaultMaxHeight2 = 250;
+var SelectTableTree = (0, import_react9.forwardRef)((props, ref) => {
   const {
     id,
-    field,
-    displayValue,
-    menuHeight,
     menuWidth,
-    rowData,
+    width,
     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();
-  });
+    options,
+    columns,
+    onChange,
+    value,
+    fieldValue,
+    fieldLabel,
+    fieldChildren,
+    maxHeight,
+    handleAdd,
+    isClearable,
+    component,
+    formatOptionLabel,
+    isMulti,
+    noHeader,
+    isDisabled,
+    showFooter,
+    selectChilds,
+    footerComponent,
+    formatSetting,
+    onOpenMenu,
+    onPaste
+  } = props;
+  const selectTableRef = (0, import_react9.useRef)();
+  const selectMenuTableRef = (0, import_react9.useRef)();
+  const inputRef = (0, import_react9.useRef)();
+  const [dropdownOpen, setDropdownOpen] = (0, import_react9.useState)(false);
+  const [isFocus, setIsFocus] = (0, import_react9.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react9.useState)("");
+  const { t } = (0, import_react_i18next5.useTranslation)();
+  const areAllItemsSelected = (value2, options2, fieldValue2) => {
+    const checkAllSelected = (nodes) => {
+      return nodes.every((node) => {
+        const isSelected = value2.includes(node[fieldValue2]);
+        const childrenSelected = node.children ? checkAllSelected(node.children) : true;
+        return isSelected && childrenSelected;
+      });
+    };
+    return checkAllSelected(options2);
+  };
+  const isSelectedAll = (0, import_react9.useMemo)(() => {
+    return isMulti === true && options.length > 0 && areAllItemsSelected(value, options, fieldValue ?? "value");
+  }, [options, value]);
+  (0, import_react9.useEffect)(() => {
+    if (dropdownOpen && onOpenMenu) {
+      onOpenMenu();
+    }
+  }, [dropdownOpen]);
+  const defaultColumns = [
+    {
+      headerText: "Name",
+      field: fieldLabel ?? "label",
+      width: menuWidth
+    }
+  ];
   const closeMenu = () => {
-    setTimeout(() => {
-      setDropdownOpen(false);
-    }, onChangeField ? 10 : 0);
+    setDropdownOpen(false);
   };
-  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);
+  (0, import_react9.useEffect)(() => {
+    if (dropdownOpen && value && !isMulti && selectMenuTableRef) {
+      const index = options?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"]);
+      if (index >= 0) {
+        selectMenuTableRef.current.scrollTo({ top: (index - 1) * 30 });
       }
     }
   }, [dropdownOpen]);
-  (0, import_react8.useEffect)(() => {
-    if (dropdownOpen && itemsField.length > 0) {
-      itemsField.forEach((ele) => {
-        setValue(ele.name, rowData[ele.name] ?? "");
+  (0, import_react9.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_react9.useEffect)(() => {
+    if (searchTerm && !dropdownOpen) {
+      setDropdownOpen(true);
+    }
+  }, [searchTerm]);
+  const handleOpenClose = () => {
+    setSearchTerm("");
     if (dropdownOpen) {
       closeMenu();
     } else {
-      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);
-        }
+      if (!isDisabled) {
+        setDropdownOpen(true);
       }
     }
   };
+  const listKeyUse = ["Escape", "Space", "F9"];
   const handleOnKeyDown = (e) => {
+    let key = "";
+    if (onKeyDown && (!dropdownOpen || !listKeyUse.includes(e.code) || e.code === "Escape" && !(isClearable && value && !isDisabled))) {
+      key = onKeyDown(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`);
+    if (!key) {
+      if (e.code === "F9") {
+        handleAdd();
         flag = true;
       } else if (e.code === "Space") {
-        setDropdownOpen(true);
-        flag = true;
+        if (!searchTerm) {
+          handleOpenClose();
+          flag = true;
+        }
+      } else if (e.code === "Escape") {
+        if (dropdownOpen && isClearable && value && !isDisabled) {
+          onChange(void 0);
+          handleOpenClose();
+          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 renderHeaderCol = (col, indexCol) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "th",
+      {
+        className: (0, import_classnames6.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,
+          maxWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
+          top: `${0 * 35}px`
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.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 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 checkSearch = (keyword, data, columnsSearch) => {
+    if (!keyword || columnsSearch.length === 0) {
+      return true;
     }
-  };
-  const elementChange = (field2) => {
-    if (onChangeField) {
-      onChangeField(rowData, field2, setValue, getValues);
-      const rs = getValues();
-      if (rs) {
-        onChange(rs);
+    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;
       }
     }
+    if (data[fieldChildren ?? "children"]) {
+      return data[fieldChildren ?? "children"].some((child) => checkSearch(keyword, child, columnsSearch));
+    }
+    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_table_default,
-          {
-            id: `form-element-${field}-${index}`,
-            defaultOptions: item.options ?? [],
-            control,
-            name: item.name,
-            label: item.label ? item.label : "",
-            labelSize: `text-left ${labelSize}`,
-            errors: errors[item.name],
-            disabled: item.disabled,
-            callback: () => {
-              elementChange(item.name);
-            }
-          },
-          index
-        ) }, index);
-      }
-    }) });
+  const checkOverflow = (indexRow, indexCol) => {
+    const element = document.getElementById(`select-${id}-${indexRow}-${indexCol}`);
+    return element && element.scrollWidth > element.clientWidth;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    "div",
-    {
-      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,
+  const getSelectAll = (tree, checkValue = false) => {
+    const selects = [];
+    const traverse = (items) => {
+      items.forEach((item) => {
+        if (item[fieldValue ?? "value"] && !(checkValue && value?.includes(item[fieldValue ?? "value"]))) {
+          selects.push(item[fieldValue ?? "value"]);
+        }
+        if (item[fieldChildren ?? "children"] && item[fieldChildren ?? "children"].length > 0) {
+          traverse(item[fieldChildren ?? "children"]);
+        }
+      });
+    };
+    traverse(tree);
+    return selects;
+  };
+  const RenderElement = import_react9.default.memo((props2) => {
+    const { indexRow, row, isSelected, level = 0 } = props2;
+    const [expanded, setExpanded] = (0, import_react9.useState)(row.expanded);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        "tr",
         {
-          isOpen: dropdownOpen,
-          toggle: () => {
-          },
+          id: `row-select-table-${indexRow}`,
+          className: (0, import_classnames6.default)("r-select-row", { "fisrt-row": indexRow === 0 && level === 0 }),
           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,
+            isMulti && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              "td",
               {
-                className: "formula-dropdown icon-dropdown p-0",
+                className: (0, import_classnames6.default)(`r-select-rowcell`, { "r-select-active": !isMulti && value && isSelected }),
                 style: {
-                  minWidth: minWidth ? minWidth : defaultWidth,
-                  width: menuWidth ? menuWidth : "min-content",
-                  maxWidth: innerWidth > 1280 ? 1280 : innerWidth,
-                  borderRadius: 8,
-                  zIndex: 1056
+                  textAlign: "center",
+                  paddingLeft: level * 15 + (row[fieldChildren ?? "children"]?.length > 0 ? 0 : 10)
                 },
-                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",
+                onClick: (e) => {
+                  if (isMulti) {
+                    const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
+                    if (index > -1) {
+                      if (!selectChilds) {
+                        value?.splice(index, 1);
+                      } else {
+                        value?.splice(index, 1);
+                        getSelectAll(row[fieldChildren ?? "children"]).forEach((x) => {
+                          const index2 = value?.findIndex((y) => y === x);
+                          if (index2 > -1) {
+                            value?.splice(index2, 1);
+                          }
+                        });
+                      }
+                      onChange([...value]);
+                    } else {
+                      if (value) {
+                        if (!selectChilds) {
+                          onChange([...value, row[fieldValue ?? "value"]]);
+                        } else {
+                          onChange([...value, row[fieldValue ?? "value"], ...getSelectAll(row[fieldChildren ?? "children"], true)]);
+                        }
+                      } else {
+                        onChange([row[fieldValue ?? "value"]]);
+                      }
+                    }
+                    e.stopPropagation();
+                  }
+                },
+                children: [
+                  row[fieldChildren ?? "children"]?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    import_becoxy_icons4.ChevronRight,
                     {
-                      onKeyDown: (e) => formKeyDown(e, handleSubmit(handleOnSubmit)),
-                      className: "p-1",
-                      style: {
-                        maxHeight: menuHeight ? menuHeight : 300,
-                        overflow: "auto"
+                      onClick: (e) => {
+                        if (expanded) {
+                          row.expanded = false;
+                          setExpanded(false);
+                        } else {
+                          row.expanded = true;
+                          setExpanded(true);
+                        }
+                        e.stopPropagation();
                       },
-                      children: itemsField ? renderForm(itemsField) : ""
+                      fontSize: 18,
+                      className: (0, import_classnames6.default)("me-50 pb-0 r-icon-expand", { "is-open": expanded })
                     }
                   ),
-                  /* @__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, "");
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    import_reactstrap5.Input,
+                    {
+                      checked: isSelected,
+                      type: "checkbox",
+                      className: "cursor-pointer",
+                      onChange: () => {
+                      }
+                    }
+                  )
+                ]
+              }
+            ),
+            (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], formatSetting?.decimalSeparator ?? ".", formatSetting?.thousandSeparator ?? ",", col.fraction ?? 0, true) ?? 0;
+              } else if (col.type === "date") {
+                valueDisplay = valueDisplay ? formatDateTime(valueDisplay, formatSetting?.dateFormat) : "";
+              } else if (col.type === "datetime") {
+                valueDisplay = valueDisplay ? formatDateTime(valueDisplay, formatSetting?.dateFormat ?? "DD/MM/yyyy HH:mm") : "";
+              }
+              return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react9.Fragment, { children: [
+                col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                  "td",
+                  {
+                    id: `select-${id}-${indexRow}-${indexCol}`,
+                    className: (0, import_classnames6.default)(`r-select-rowcell`, { "r-select-active": !isMulti && value && isSelected }),
+                    style: {
+                      paddingLeft: 9 + (indexCol === 0 && !isMulti ? level * 10 + (row[fieldChildren ?? "children"]?.length > 0 || level === 0 ? 0 : 15) : 0),
+                      textAlign: col.textAlign ? col.textAlign : "left"
+                    },
+                    onClick: (e) => {
+                      if (isMulti) {
+                        const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
+                        if (index > -1) {
+                          if (!selectChilds) {
+                            value?.splice(index, 1);
+                          } else {
+                            value?.splice(index, 1);
+                            getSelectAll(row[fieldChildren ?? "children"]).forEach((x) => {
+                              const index2 = value?.findIndex((y) => y === x);
+                              if (index2 > -1) {
+                                value?.splice(index2, 1);
                               }
                             });
-                          },
-                          onKeyDown: (e) => {
-                            if (e.code === "Tab") {
-                              closeMenu();
+                          }
+                          onChange([...value]);
+                        } else {
+                          if (value) {
+                            if (!selectChilds) {
+                              onChange([...value, row[fieldValue ?? "value"]]);
+                            } else {
+                              onChange([...value, row[fieldValue ?? "value"], ...getSelectAll(row[fieldChildren ?? "children"], true)]);
                             }
-                          },
-                          children: t("Clear")
+                          } else {
+                            onChange([row[fieldValue ?? "value"]]);
+                          }
                         }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                        import_reactstrap6.Button,
+                        e.stopPropagation();
+                      } else {
+                        onChange(row);
+                        setSearchTerm("");
+                        closeMenu();
+                      }
+                      e.preventDefault();
+                      e.stopPropagation();
+                    },
+                    children: [
+                      !isMulti && indexCol === 0 && row[fieldChildren ?? "children"]?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        import_becoxy_icons4.ChevronRight,
                         {
-                          ref: buttonRef,
-                          color: "primary",
-                          className: "btn btn-primary py-25 px-50",
-                          onClick: handleSubmit(handleOnSubmit),
-                          onKeyDown: (e) => {
-                            if (e.code === "Tab") {
-                              closeMenu();
+                          onClick: (e) => {
+                            if (expanded) {
+                              row.expanded = false;
+                              setExpanded(false);
+                            } else {
+                              row.expanded = true;
+                              setExpanded(true);
                             }
+                            e.stopPropagation();
                           },
-                          children: t("Save")
+                          fontSize: 18,
+                          className: (0, import_classnames6.default)("me-50 r-icon-expand", { "is-open": expanded })
                         }
-                      )
-                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, {})
-                  ] })
-                ] })
-              }
-            )
+                      ),
+                      col.template ? col.template(row, indexRow) : col.type === "numeric" && Number(row[col.field]) < 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
+                        " ",
+                        `${formatSetting?.prefixNegative ?? "-"}${value}${formatSetting?.suffixNegative ?? ""}`
+                      ] }) : valueDisplay
+                    ]
+                  },
+                  `col-${indexRow}-${indexCol}`
+                ),
+                checkOverflow(indexRow, indexCol) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_reactstrap5.UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : col.type === "numeric" && Number(row[col.field]) < 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
+                  " ",
+                  `${formatSetting?.prefixNegative ?? "-"}${value}${formatSetting?.suffixNegative ?? ""}`
+                ] }) : valueDisplay })
+              ] }, indexCol);
+            })
           ]
+        },
+        `row-${indexRow}`
+      ),
+      row[fieldChildren ?? "children"] && row.expanded && row[fieldChildren ?? "children"].map((child, indexChild) => {
+        if (checkSearch(searchTerm, child, columns ? columns : defaultColumns)) {
+          const isSelectedChild = value && (isMulti ? value?.some((x) => x === child[fieldValue ?? "value"]) : value[fieldValue ?? "value"] === child[fieldValue ?? "value"]);
+          return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RenderElement, { isSelected: isSelectedChild, indexRow: indexChild, row: child, level: level + 1 }, `select-table-${indexRow}-${indexChild}`);
         }
-      ) })
-    }
-  );
-});
-var edit_form_default = EditForm;
-
-// src/component/sidebar-setting-column/index.tsx
-var import_react10 = require("react");
-var import_reactstrap7 = require("reactstrap");
-var import_react_i18next7 = require("react-i18next");
-
-// 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 /* @__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)
+      })
+    ] });
+  });
+  const RenderTable = (props2) => {
+    const {} = props2;
+    let countDisplay = 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("table", { style: { width: "100%" }, children: [
+        !(noHeader && (columns?.length ?? 0) > 0) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("tr", { className: "r-select-row", role: "row", children: [
+          isMulti && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "th",
+            {
+              className: (0, import_classnames6.default)(`r-select-headercell checkbox-column`),
+              style: { width: 40, minWidth: 40, maxWidth: 100, top: `0px` },
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "div",
+                {
+                  style: { justifyContent: "center" },
+                  className: (0, import_classnames6.default)("r-select-headercell-div"),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    import_reactstrap5.Input,
+                    {
+                      checked: isSelectedAll,
+                      type: "checkbox",
+                      onClick: (e) => {
+                        if (isMulti) {
+                          if (isSelectedAll) {
+                            onChange([]);
+                          } else {
+                            onChange(getSelectAll(options));
+                          }
+                          e.stopPropagation();
+                        }
+                      },
+                      readOnly: true,
+                      className: (0, import_classnames6.default)("cursor-pointer", { "d-none": !isMulti }),
+                      style: { textAlign: "center", marginTop: 6 }
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          (columns ? columns : defaultColumns).map((col, index) => {
+            return renderHeaderCol(col, index);
+          })
+        ] }) }),
+        options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tbody", { className: "r-select-gridcontent", children: options?.map((row, indexRow) => {
+          if (checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
+            const isSelected = value && (isMulti ? value?.some((x) => x === row[fieldValue ?? "value"]) : value[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
+            countDisplay++;
+            return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RenderElement, { isSelected, indexRow, row }, `select-table-${indexRow}`);
+          }
+        }) }) })
       ] }),
-      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_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;
-
-// 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 {
-    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);
+      countDisplay === 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "r-no-data", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.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.")
+      ] })
+    ] });
+  };
+  const getSelectedRecords = (tree, value2) => {
+    const records = [];
+    const traverse = (nodes) => {
+      nodes.forEach((node) => {
+        if (value2.includes(node[fieldValue ?? "value"])) {
+          records.push(node);
+        }
+        if (node.children && node.children.length > 0) {
+          traverse(node.children);
+        }
+      });
+    };
+    traverse(tree);
+    return records;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "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_classnames6.default)("react-select-table", { "is-invalid": invalid }),
+      ref,
+      id,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: selectTableRef, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        import_reactstrap5.Dropdown,
+        {
+          isOpen: dropdownOpen,
+          toggle: () => {
+          },
+          onMouseDown: (e) => e.preventDefault(),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              import_reactstrap5.DropdownToggle,
+              {
+                onClick: (e) => {
+                  if (!isDisabled) {
+                    inputRef?.current.focus();
+                    handleOpenClose();
+                  }
+                  e.preventDefault();
+                },
+                tag: "div",
+                style: { width: "100%" },
+                className: (0, import_classnames6.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_runtime8.jsxs)("div", { className: "select-table-container", children: [
+                    isMulti ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_classnames6.default)("select-value is-mutil", { "d-none": searchTerm }), children: getSelectedRecords(options, value).map((ele, index) => {
+                      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+                        index === 0 ? "" : ", ",
+                        ele[fieldLabel ?? "label"]
+                      ] }, index);
+                    }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: (0, import_classnames6.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_runtime8.jsx)("div", { className: (0, import_classnames6.default)("select-placeholder"), children: placeholder }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "input-container", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      "input",
+                      {
+                        style: { textAlign: textAlign ?? "left" },
+                        ref: inputRef,
+                        className: (0, import_classnames6.default)("select-input"),
+                        readOnly: isDisabled,
+                        value: searchTerm,
+                        onPaste: (e) => onPaste && !dropdownOpen && onPaste(e),
+                        onChange: (val) => {
+                          setSearchTerm(val.target.value);
+                        },
+                        onKeyDown: (e) => handleOnKeyDown(e)
+                      }
+                    ) })
+                  ] }),
+                  isClearable && value && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    "div",
+                    {
+                      className: (0, import_classnames6.default)("cursor-pointer"),
+                      onClick: (e) => {
+                        onChange(isMulti ? [] : void 0);
+                        e.stopPropagation();
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.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_runtime8.jsx)("div", { className: "select-table-indicator", onMouseDown: (e) => e.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { height: "20", width: "20", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)(
+              import_reactstrap5.DropdownMenu,
+              {
+                container: component,
+                className: "formula-dropdown icon-dropdown p-0",
+                style: {
+                  width: width ? width + 2 : "min-content",
+                  position: "fixed",
+                  borderRadius: 4,
+                  zIndex: 9999
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_reactstrap5.DropdownItem, { className: (0, import_classnames6.default)("p-0 menu-select-table"), style: { borderRadius: "6px" }, tag: "div", header: true, children: dropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  "div",
+                  {
+                    onMouseDown: (e) => {
+                      if (!isDisabled) {
+                        inputRef?.current.focus();
+                        e.preventDefault();
+                      }
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "r-select-grid r-select-tree-grid", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "r-select-gridtable ", ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight2 }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RenderTable, {}) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: (0, import_classnames6.default)("r-select-footer", { "d-none": !(showFooter === true || handleAdd || isMulti) }), children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_reactstrap5.Button, { outline: true, color: "primary", onClick: handleAdd, className: (0, import_classnames6.default)("r-btn d-flex align-items-center", { "d-none": !handleAdd }), children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_becoxy_icons4.Plus, { className: "me-50", fontSize: 16 }),
+                          t("AddNew"),
+                          " (F9)"
+                        ] }),
+                        isMulti && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "ms-50 text-primary h-100 d-flex align-items-center", onClick: handleAdd, children: t("countSelected", { item: value?.length ?? 0 }) }),
+                        footerComponent ? footerComponent() : null
+                      ] })
+                    ] })
+                  }
+                ) })
+              }
+            )
+          ]
         }
-      },
-      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)("r-sidebar", `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
-            ]
-          }
-        )
-      ]
+      ) })
     }
   );
+});
+
+// src/component/table/index.tsx
+var import_react_number_format2 = require("react-number-format");
+
+// src/component/table/toolbar-top.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var renderToolbarTop = (toolbarTopOption) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "r-toolbar-items", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
+      return item.align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) }) : "";
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
+      return item.align === "center" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-center-${index}`) }) : "";
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
+      return item.align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) }) : "";
+    }) })
+  ] }) });
 };
-var sidebar_default = Sidebar;
+var toolbar_top_default = renderToolbarTop;
 
-// src/component/sidebar-setting-column/index.tsx
-var import_classnames9 = __toESM(require("classnames"));
+// src/component/edit-form/index.tsx
+var import_react13 = require("react");
+var import_reactstrap9 = require("reactstrap");
+var import_react_hook_form4 = require("react-hook-form");
+var import_yup = require("@hookform/resolvers/yup");
+var import_react_i18next9 = require("react-i18next");
+var import_classnames10 = __toESM(require("classnames"));
+
+// src/component/input-text/index.tsx
+var import_react_hook_form = require("react-hook-form");
+var import_reactstrap6 = require("reactstrap");
+var import_classnames7 = __toESM(require("classnames"));
+var import_react10 = require("react");
+var import_react_i18next6 = require("react-i18next");
 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 };
+var TextInput = (props) => {
+  const { t } = (0, import_react_i18next6.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_runtime10.jsx)(import_react10.Fragment, { children: isLabel === false ? "" : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_reactstrap6.Label, { for: name, children: [
+      t(label ? label : ""),
+      " ",
+      required ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-danger", children: "*" }) : "",
+      " "
+    ] }) });
   };
-  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 = () => {
+  const renderInput = () => {
     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);
-          }
-        }
-      }
-    );
-  };
-  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;
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_react_hook_form.Controller,
+        {
+          name,
+          control,
+          render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            import_reactstrap6.Input,
+            {
+              id,
+              value: !isNullOrUndefined(value) ? value : "",
+              onChange: (val) => {
+                if (min || max) {
+                  if (min && Number(val.target.value) >= min) {
+                    onChange(val.target.value);
+                    if (callback) {
+                      callback(val);
+                    }
+                  }
+                  if (max && Number(val.target.value) <= max) {
+                    onChange(val.target.value);
+                    if (callback) {
+                      callback(val);
+                    }
+                  }
+                } else {
+                  onChange(val.target.value);
+                  if (callback) {
+                    callback(val);
+                  }
+                }
+              },
+              style: { height: `${height}px` },
+              autoFocus,
+              disabled,
+              placeholder,
+              type: type ? type : "text",
+              invalid: errors && true,
+              className: "h-100",
+              rows: row,
+              min,
+              max,
+              readOnly,
+              ...rest
             }
-            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
-    }
-  ];
-  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",
-          {
-            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}`
-    );
+      ),
+      errors && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_reactstrap6.FormFeedback, { children: errors?.message })
+    ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-    sidebar_default,
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react10.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "div",
     {
-      open: openSidebar,
-      toggleSidebar: handleCancel,
-      width: 700,
+      className: (0, import_classnames7.default)(
+        " align",
+        {
+          [labelSize ? labelSize : ""]: labelSize,
+          [classes ? classes : ""]: classes,
+          "form-row-inline-error": errors
+        },
+        inLine === false ? "form-group " : "form-row-inline d-flex"
+      ),
       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_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();
-                      },
-                      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 })
-                            }
-                          )
-                        }
-                      )
-                    },
-                    `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()
-          }
-        )
+        renderLabel(),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_classnames7.default)("form-input-content", { "hidden-label": isLabel === false }), children: renderInput() })
       ]
     }
-  );
+  ) });
 };
-var sidebar_setting_column_default = SidebarSetColumn;
+var input_text_default = TextInput;
 
-// src/component/table/paging/index.tsx
-var import_becoxy_icons5 = require("becoxy-icons");
-var import_classnames10 = __toESM(require("classnames"));
+// src/component/input-number/index.tsx
+var import_react_hook_form2 = require("react-hook-form");
+var import_reactstrap7 = require("reactstrap");
+var import_classnames8 = __toESM(require("classnames"));
 var import_react11 = require("react");
-var import_react_i18next8 = require("react-i18next");
+var import_react_number_format = require("react-number-format");
+var import_react_i18next7 = 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;
+var NumberInput = (props) => {
+  const {
+    id,
+    control,
+    fractionCurrency,
+    name,
+    min,
+    max,
+    label,
+    labelSize,
+    required,
+    errors,
+    disabled,
+    isLabel,
+    fixedDecimalScale,
+    placeholder,
+    inLine,
+    callback,
+    decimalSeparator = ",",
+    thousandSeparator = ".",
+    classes,
+    width,
+    allowNegative
+  } = props;
+  const { t } = (0, import_react_i18next7.useTranslation)();
+  const renderLabel = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react11.Fragment, { children: isLabel === false ? "" : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_reactstrap7.Label, { className: "form-label", for: name, children: [
+      t(label ? label : ""),
+      " ",
+      required ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-danger", children: "*" }) : "",
+      " "
+    ] }) });
   };
-  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 }) }),
+  const renderInput = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react11.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        "button",
+        import_react_hook_form2.Controller,
         {
-          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: "..."
+          name,
+          control,
+          render: ({ field: { value, onChange } }) => {
+            let floatValue = parseFloat(value);
+            const numericFormatProps = {
+              value: !isNullOrUndefined(value) ? value : "",
+              thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
+              decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
+              allowNegative: allowNegative ?? false,
+              decimalScale: fractionCurrency ?? 0,
+              fixedDecimalScale
+            };
+            return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              import_react_number_format.NumericFormat,
+              {
+                ...numericFormatProps,
+                className: (0, import_classnames8.default)("form-control text-right", {
+                  "is-invalid": errors
+                }),
+                onValueChange: (values) => {
+                  floatValue = values?.floatValue;
+                  const textBeforeDot = values?.value.split(".")[1];
+                  onChange(textBeforeDot ? parseFloat(values?.value).toFixed(textBeforeDot.length) : values?.floatValue);
+                },
+                onFocus: (e) => {
+                  e.target.setSelectionRange(0, e.target.innerText.length - 1);
+                },
+                onChange: () => {
+                  if (callback) {
+                    callback(floatValue);
+                  }
+                },
+                onBlur: () => {
+                  if (max && floatValue > max) {
+                    onChange(max);
+                  } else if (min && floatValue < min) {
+                    onChange(min);
+                  } else {
+                    onChange(floatValue);
+                  }
+                },
+                placeholder,
+                disabled
+              }
+            );
+          }
         }
       ),
-      renderPageNumber(currentPageNumber),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        "button",
+      errors && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_reactstrap7.FormFeedback, { children: errors?.message })
+    ] });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react11.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
+    {
+      className: (0, import_classnames8.default)(
+        " align",
         {
-          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: "..."
-        }
+          [labelSize ? labelSize : ""]: labelSize,
+          [classes ? classes : ""]: classes,
+          "form-row-inline-error": errors
+        },
+        inLine === false ? "form-group " : "form-row-inline d-flex"
       ),
-      /* @__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 });
-          },
-          menuWidth: 90,
-          width: 90,
-          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 }) })
-  ] }) });
+      children: [
+        renderLabel(),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { width: width ? width : void 0 }, className: (0, import_classnames8.default)("form-input-content", { "hidden-label": isLabel === false }), children: renderInput() })
+      ]
+    }
+  ) });
 };
+var input_number_default = NumberInput;
 
-// src/component/table/header.tsx
-var import_react12 = require("react");
-var import_classnames11 = __toESM(require("classnames"));
+// src/component/edit-form/select-table/index.tsx
+var import_react_hook_form3 = require("react-hook-form");
 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_classnames9 = __toESM(require("classnames"));
+var import_react12 = require("react");
+var import_react_i18next8 = require("react-i18next");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var HeaderTableCol = (props) => {
+var SelectTableBox = (props) => {
   const {
-    selectEnable,
-    dataSource,
-    setSelectedRows,
-    col,
-    indexCol,
-    indexParent,
-    objWidthFix,
-    totalCount,
-    selectedRows,
-    column,
-    setColumn,
-    isMulti
+    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 { t } = (0, import_react_i18next9.useTranslation)();
-  const handleResize = (e, { size }) => {
-    if (size.width > 50) {
-      const newColumns = [...column];
-      newColumns[indexCol].width = size.width;
-      setColumn(newColumns);
+  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_runtime12.jsx)(import_react12.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react_resizable.Resizable,
+  const renderLabel = (props2) => {
+    const { t } = (0, import_react_i18next8.useTranslation)();
+    const { isLabel: isLabel2, desciptionLabel: desciptionLabel2, id: id2, classLabel: classLabel2, name: name2, label: label2, required: required2 } = props2;
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react12.Fragment, { children: [
+      isLabel2 === false ? "" : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_reactstrap8.Label, { id: `label-${id2}`, className: classLabel2, for: name2, children: [
+        t(label2 ? label2 : ""),
+        " ",
+        required2 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-danger", children: "*" }) : ""
+      ] }),
+      (!isNullOrUndefined(desciptionLabel2) && desciptionLabel2 !== "") ?? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.UncontrolledTooltip, { target: `label-${id2}`, children: t(desciptionLabel2 ?? "") }) })
+    ] });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react12.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "div",
     {
-      className: "r-resize",
-      width: typeof col.width === "number" ? col.width : Number((col.width ?? "").replaceAll(new RegExp(`[^0-9]`, "g"), "")),
-      height: 0,
-      onResize: handleResize,
-      draggableOpts: { enableUserSelectHack: false },
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        "th",
+      className: (0, import_classnames9.default)(
+        inLine === false ? "form-group " : "form-row-inline d-flex",
+        "align",
         {
-          rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
-          colSpan: col.columns?.length ?? 1,
-          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,
-            right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0,
-            width: col.width ? typeof col.width === "number" ? col.width : col.width?.includes("px") || col.width?.includes("%") ? col.width : `${col.width}px` : "auto",
-            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_runtime12.jsxs)(
-            "div",
+          [labelSize ? labelSize : ""]: labelSize,
+          "form-row-inline-error": errors
+        }
+      ),
+      children: [
+        renderLabel({ isLabel, desciptionLabel, classLabel, name, label, required, id: id ?? "" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: (0, import_classnames9.default)("form-input-content", { "hidden-label": isLabel === false }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            import_react_hook_form3.Controller,
             {
-              style: { justifyContent: col.textAlign ?? "left" },
-              className: (0, import_classnames11.default)("r-headercell-div"),
-              children: [
-                col.field === "checkbox" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  import_reactstrap8.Input,
+              name,
+              control,
+              render: ({ field: { value, onChange } }) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  SelectTable,
                   {
-                    checked: totalCount > 0 && selectedRows?.length >= totalCount,
-                    type: "checkbox",
-                    className: (0, import_classnames11.default)("cursor-pointer", { "d-none": !isMulti }),
-                    style: { textAlign: col.textAlign ?? "left", marginTop: 6 },
-                    onChange: (e) => {
-                      if (selectEnable) {
-                        if (e.target.checked) {
-                          setSelectedRows(dataSource.map((item) => {
-                            return item;
-                          }));
+                    ...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 {
-                          setSelectedRows([]);
+                          if (isMulti) {
+                            onChange(!isNullOrUndefined(val) ? val.map((item) => item[fieldValue ?? "value"]) : []);
+                          } else {
+                            onChange(!isNullOrUndefined(val) ? val[fieldValue ?? "value"] : void 0);
+                          }
+                          if (callback) {
+                            callback(val);
+                          }
                         }
                       }
-                    }
-                  }
-                ),
-                col.field !== "checkbox" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "header-content", children: t(col.headerText ?? "") }) })
-              ]
-            }
-          )
-        }
-      )
-    }
-  ) }, `header-${indexCol}`);
-};
-var header_default = HeaderTableCol;
-
-// src/component/table/command.tsx
-var import_react14 = require("react");
-var import_classnames12 = __toESM(require("classnames"));
-var import_reactstrap9 = require("reactstrap");
-var import_react_i18next10 = require("react-i18next");
-
-// src/component/icon/index.tsx
-var Icon = __toESM(require("becoxy-icons"));
-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_runtime13.jsx)(import_react13.Fragment, { children: iconName === "" ? "" : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TagIcon, { fontSize: size }) });
-  }
-};
-var icon_default = IconCustom;
-
-// src/component/table/command.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var CommandElement = (props) => {
-  const { commandItems, rowData, indexRow, handleCommandClick, indexFocus, setIndexFocus } = props;
-  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_classnames12.default)("command-item", {
-          "btn-icon": item.tooltip === ""
-        }),
-        color: item.color ? item.color : "#000",
-        onClick: (e) => {
-          handleCommandClick(item.id, rowData, indexRow);
-          if (indexRow === indexFocus) {
-            setIndexFocus(void 0);
-          }
-          e.preventDefault();
-        },
-        children: [
-          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}`
-    );
-  }) }) });
+                    },
+                    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_runtime12.jsx)(import_reactstrap8.FormFeedback, { children: errors?.message })
+        ] })
+      ]
+    }
+  ) });
 };
-var command_default = CommandElement;
+var select_table_default = SelectTableBox;
 
-// src/component/select-table-tree/index.tsx
-var import_react15 = __toESM(require("react"));
-var import_reactstrap10 = require("reactstrap");
-var import_react_i18next11 = require("react-i18next");
-var import_classnames13 = __toESM(require("classnames"));
-var import_becoxy_icons6 = require("becoxy-icons");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var defaultMaxHeight2 = 250;
-var SelectTableTree = (0, import_react15.forwardRef)((props, ref) => {
+// src/component/edit-form/index.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var defaultWidth = 200;
+var EditForm = (0, import_react13.forwardRef)((props, ref) => {
   const {
     id,
+    field,
+    displayValue,
+    menuHeight,
     menuWidth,
-    width,
+    rowData,
     invalid,
+    onChange,
+    onChangeField,
     onKeyDown,
+    defaultValues,
     placeholder,
     textAlign,
-    options,
-    columns,
-    onChange,
-    value,
-    fieldValue,
-    fieldLabel,
-    fieldChildren,
-    maxHeight,
-    handleAdd,
+    schema,
+    onFormOpen,
+    onFormSubmit,
+    footerTemplate,
+    minWidth,
+    onPaste,
+    openOnFocus,
     isClearable,
-    component,
-    formatOptionLabel,
-    isMulti,
-    noHeader,
-    isDisabled,
-    showFooter,
-    selectChilds,
-    footerComponent,
-    formatSetting,
-    onOpenMenu,
-    onPaste
+    labelSize = "label-small"
   } = props;
-  const selectTableRef = (0, import_react15.useRef)();
-  const selectMenuTableRef = (0, import_react15.useRef)();
-  const inputRef = (0, import_react15.useRef)();
-  const [dropdownOpen, setDropdownOpen] = (0, import_react15.useState)(false);
-  const [isFocus, setIsFocus] = (0, import_react15.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react15.useState)("");
-  const { t } = (0, import_react_i18next11.useTranslation)();
-  const areAllItemsSelected = (value2, options2, fieldValue2) => {
-    const checkAllSelected = (nodes) => {
-      return nodes.every((node) => {
-        const isSelected = value2.includes(node[fieldValue2]);
-        const childrenSelected = node.children ? checkAllSelected(node.children) : true;
-        return isSelected && childrenSelected;
-      });
-    };
-    return checkAllSelected(options2);
-  };
-  const isSelectedAll = (0, import_react15.useMemo)(() => {
-    return isMulti === true && options.length > 0 && areAllItemsSelected(value, options, fieldValue ?? "value");
-  }, [options, value]);
-  (0, import_react15.useEffect)(() => {
-    if (dropdownOpen && onOpenMenu) {
-      onOpenMenu();
-    }
-  }, [dropdownOpen]);
-  const defaultColumns = [
-    {
-      headerText: "Name",
-      field: fieldLabel ?? "label",
-      width: menuWidth
-    }
-  ];
+  const { innerWidth } = window;
+  const inputRef = (0, import_react13.useRef)();
+  const editFormRef = (0, import_react13.useRef)();
+  const buttonRef = (0, import_react13.useRef)();
+  const [dropdownOpen, setDropdownOpen] = (0, import_react13.useState)(false);
+  const [itemsField, setItemsField] = (0, import_react13.useState)([]);
+  const { t } = (0, import_react_i18next9.useTranslation)();
+  useOnClickOutside(editFormRef, () => {
+    closeMenu();
+  });
   const closeMenu = () => {
-    setDropdownOpen(false);
+    setTimeout(() => {
+      setDropdownOpen(false);
+    }, onChangeField ? 10 : 0);
   };
-  (0, import_react15.useEffect)(() => {
-    if (dropdownOpen && value && !isMulti && selectMenuTableRef) {
-      const index = options?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"]);
-      if (index >= 0) {
-        selectMenuTableRef.current.scrollTo({ top: (index - 1) * 30 });
+  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_react13.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_react15.useEffect)(() => {
-    if (inputRef && !isDisabled) {
-      inputRef.current.addEventListener("blur", function() {
-        setDropdownOpen(false);
-        setSearchTerm("");
-        setIsFocus(false);
-      });
-      inputRef.current.addEventListener("focus", function() {
-        if (!isFocus) {
-          setIsFocus(true);
-        }
+  (0, import_react13.useEffect)(() => {
+    if (dropdownOpen && itemsField.length > 0) {
+      itemsField.forEach((ele) => {
+        setValue(ele.name, rowData[ele.name] ?? "");
       });
     }
-  }, [inputRef]);
-  (0, import_react15.useEffect)(() => {
-    if (searchTerm && !dropdownOpen) {
-      setDropdownOpen(true);
-    }
-  }, [searchTerm]);
-  const handleOpenClose = () => {
-    setSearchTerm("");
+  }, [dropdownOpen, itemsField]);
+  const handleOnClick = () => {
     if (dropdownOpen) {
       closeMenu();
     } else {
-      if (!isDisabled) {
-        setDropdownOpen(true);
+      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", "F9"];
   const handleOnKeyDown = (e) => {
-    let key = "";
-    if (onKeyDown && (!dropdownOpen || !listKeyUse.includes(e.code) || e.code === "Escape" && !(isClearable && value && !isDisabled))) {
-      key = onKeyDown(e);
-    }
     let flag = false;
-    if (!key) {
-      if (e.code === "F9") {
-        handleAdd();
+    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") {
-        if (!searchTerm) {
-          handleOpenClose();
-          flag = true;
-        }
-      } else if (e.code === "Escape") {
-        if (dropdownOpen && isClearable && value && !isDisabled) {
-          onChange(void 0);
-          handleOpenClose();
-          flag = true;
-        }
+        setDropdownOpen(true);
+        flag = true;
       }
     }
-    if (flag) {
+    if (onKeyDown && !flag) {
+      const key = onKeyDown(e);
+      if (key === "ArrowRight" || key === "ArrowLeft") {
+        closeMenu();
+      }
+    } else {
       e.stopPropagation();
       e.preventDefault();
     }
   };
-  const renderHeaderCol = (col, indexCol) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react15.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      "th",
-      {
-        className: (0, import_classnames13.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,
-          maxWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
-          top: `${0 * 35}px`
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.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 ?? "")
-          }
-        )
+  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();
+        }
       }
-    ) }, `header-select-${indexCol}`);
+    }
   };
-  const checkSearch = (keyword, data, columnsSearch) => {
-    if (!keyword || columnsSearch.length === 0) {
-      return true;
+  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();
     }
-    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;
+  };
+  const elementChange = (field2) => {
+    if (onChangeField) {
+      onChangeField(rowData, field2, setValue, getValues);
+      const rs = getValues();
+      if (rs) {
+        onChange(rs);
       }
     }
-    if (data[fieldChildren ?? "children"]) {
-      return data[fieldChildren ?? "children"].some((child) => checkSearch(keyword, child, columnsSearch));
-    }
-    return false;
-  };
-  const checkOverflow = (indexRow, indexCol) => {
-    const element = document.getElementById(`select-${id}-${indexRow}-${indexCol}`);
-    return element && element.scrollWidth > element.clientWidth;
   };
-  const getSelectAll = (tree, checkValue = false) => {
-    const selects = [];
-    const traverse = (items) => {
-      items.forEach((item) => {
-        if (item[fieldValue ?? "value"] && !(checkValue && value?.includes(item[fieldValue ?? "value"]))) {
-          selects.push(item[fieldValue ?? "value"]);
-        }
-        if (item[fieldChildren ?? "children"] && item[fieldChildren ?? "children"].length > 0) {
-          traverse(item[fieldChildren ?? "children"]);
-        }
-      });
-    };
-    traverse(tree);
-    return selects;
+  const renderForm = (rows) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap9.Row, { className: "gy-25", children: rows.map((item, index) => {
+      if (item.type === "numeric") {
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap9.Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.jsx)(import_reactstrap9.Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.jsx)(import_reactstrap9.Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ (0, import_jsx_runtime13.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);
+      }
+    }) });
   };
-  const RenderElement = import_react15.default.memo((props2) => {
-    const { indexRow, row, isSelected, level = 0 } = props2;
-    const [expanded, setExpanded] = (0, import_react15.useState)(row.expanded);
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-        "tr",
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "div",
+    {
+      className: "form-edit",
+      ref,
+      id,
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: editFormRef, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        import_reactstrap9.Dropdown,
         {
-          id: `row-select-table-${indexRow}`,
-          className: (0, import_classnames13.default)("r-select-row", { "fisrt-row": indexRow === 0 && level === 0 }),
+          isOpen: dropdownOpen,
+          toggle: () => {
+          },
           children: [
-            isMulti && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-              "td",
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap9.DropdownToggle, { tag: "div", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              import_reactstrap9.Input,
+              {
+                style: { backgroundColor: "#FFF", textAlign: textAlign ?? "left" },
+                placeholder,
+                innerRef: inputRef,
+                className: (0, import_classnames10.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_runtime13.jsx)(
+              import_reactstrap9.DropdownMenu,
               {
-                className: (0, import_classnames13.default)(`r-select-rowcell`, { "r-select-active": !isMulti && value && isSelected }),
+                className: "formula-dropdown icon-dropdown p-0",
                 style: {
-                  textAlign: "center",
-                  paddingLeft: level * 15 + (row[fieldChildren ?? "children"]?.length > 0 ? 0 : 10)
-                },
-                onClick: (e) => {
-                  if (isMulti) {
-                    const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
-                    if (index > -1) {
-                      if (!selectChilds) {
-                        value?.splice(index, 1);
-                      } else {
-                        value?.splice(index, 1);
-                        getSelectAll(row[fieldChildren ?? "children"]).forEach((x) => {
-                          const index2 = value?.findIndex((y) => y === x);
-                          if (index2 > -1) {
-                            value?.splice(index2, 1);
-                          }
-                        });
-                      }
-                      onChange([...value]);
-                    } else {
-                      if (value) {
-                        if (!selectChilds) {
-                          onChange([...value, row[fieldValue ?? "value"]]);
-                        } else {
-                          onChange([...value, row[fieldValue ?? "value"], ...getSelectAll(row[fieldChildren ?? "children"], true)]);
-                        }
-                      } else {
-                        onChange([row[fieldValue ?? "value"]]);
-                      }
-                    }
-                    e.stopPropagation();
-                  }
+                  minWidth: minWidth ? minWidth : defaultWidth,
+                  width: menuWidth ? menuWidth : "min-content",
+                  maxWidth: innerWidth > 1280 ? 1280 : innerWidth,
+                  borderRadius: 8,
+                  zIndex: 1056
                 },
-                children: [
-                  row[fieldChildren ?? "children"]?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                    import_becoxy_icons6.ChevronRight,
+                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_reactstrap9.DropdownItem, { className: "p-0", style: { borderRadius: "6px" }, tag: "div", header: true, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    "div",
                     {
-                      onClick: (e) => {
-                        if (expanded) {
-                          row.expanded = false;
-                          setExpanded(false);
-                        } else {
-                          row.expanded = true;
-                          setExpanded(true);
-                        }
-                        e.stopPropagation();
+                      onKeyDown: (e) => formKeyDown(e, handleSubmit(handleOnSubmit)),
+                      className: "p-1",
+                      style: {
+                        maxHeight: menuHeight ? menuHeight : 300,
+                        overflow: "auto"
                       },
-                      fontSize: 18,
-                      className: (0, import_classnames13.default)("me-50 pb-0 r-icon-expand", { "is-open": expanded })
+                      children: itemsField ? renderForm(itemsField) : ""
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                    import_reactstrap10.Input,
-                    {
-                      checked: isSelected,
-                      type: "checkbox",
-                      className: "cursor-pointer",
-                      onChange: () => {
-                      }
-                    }
-                  )
-                ]
-              }
-            ),
-            (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], formatSetting?.decimalSeparator ?? ".", formatSetting?.thousandSeparator ?? ",", col.fraction ?? 0, true) ?? 0;
-              } else if (col.type === "date") {
-                valueDisplay = valueDisplay ? formatDateTime(valueDisplay, formatSetting?.dateFormat) : "";
-              } else if (col.type === "datetime") {
-                valueDisplay = valueDisplay ? formatDateTime(valueDisplay, formatSetting?.dateFormat ?? "DD/MM/yyyy HH:mm") : "";
-              }
-              return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react15.Fragment, { children: [
-                col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-                  "td",
-                  {
-                    id: `select-${id}-${indexRow}-${indexCol}`,
-                    className: (0, import_classnames13.default)(`r-select-rowcell`, { "r-select-active": !isMulti && value && isSelected }),
-                    style: {
-                      paddingLeft: 9 + (indexCol === 0 && !isMulti ? level * 10 + (row[fieldChildren ?? "children"]?.length > 0 || level === 0 ? 0 : 15) : 0),
-                      textAlign: col.textAlign ? col.textAlign : "left"
-                    },
-                    onClick: (e) => {
-                      if (isMulti) {
-                        const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
-                        if (index > -1) {
-                          if (!selectChilds) {
-                            value?.splice(index, 1);
-                          } else {
-                            value?.splice(index, 1);
-                            getSelectAll(row[fieldChildren ?? "children"]).forEach((x) => {
-                              const index2 = value?.findIndex((y) => y === x);
-                              if (index2 > -1) {
-                                value?.splice(index2, 1);
+                  /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.jsx)("div", { className: "text-primary py-25", style: { fontSize: 12 }, children: footerTemplate ? footerTemplate(rowData) : "" }),
+                    !onChangeField ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "d-flex justify-content-end", children: [
+                      isClearable && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                        import_reactstrap9.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, "");
                               }
                             });
-                          }
-                          onChange([...value]);
-                        } else {
-                          if (value) {
-                            if (!selectChilds) {
-                              onChange([...value, row[fieldValue ?? "value"]]);
-                            } else {
-                              onChange([...value, row[fieldValue ?? "value"], ...getSelectAll(row[fieldChildren ?? "children"], true)]);
+                          },
+                          onKeyDown: (e) => {
+                            if (e.code === "Tab") {
+                              closeMenu();
                             }
-                          } else {
-                            onChange([row[fieldValue ?? "value"]]);
-                          }
+                          },
+                          children: t("Clear")
                         }
-                        e.stopPropagation();
-                      } else {
-                        onChange(row);
-                        setSearchTerm("");
-                        closeMenu();
-                      }
-                      e.preventDefault();
-                      e.stopPropagation();
-                    },
-                    children: [
-                      !isMulti && indexCol === 0 && row[fieldChildren ?? "children"]?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                        import_becoxy_icons6.ChevronRight,
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                        import_reactstrap9.Button,
                         {
-                          onClick: (e) => {
-                            if (expanded) {
-                              row.expanded = false;
-                              setExpanded(false);
-                            } else {
-                              row.expanded = true;
-                              setExpanded(true);
+                          ref: buttonRef,
+                          color: "primary",
+                          className: "btn btn-primary py-25 px-50",
+                          onClick: handleSubmit(handleOnSubmit),
+                          onKeyDown: (e) => {
+                            if (e.code === "Tab") {
+                              closeMenu();
                             }
-                            e.stopPropagation();
                           },
-                          fontSize: 18,
-                          className: (0, import_classnames13.default)("me-50 r-icon-expand", { "is-open": expanded })
+                          children: t("Save")
                         }
-                      ),
-                      col.template ? col.template(row, indexRow) : col.type === "numeric" && Number(row[col.field]) < 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
-                        " ",
-                        `${formatSetting?.prefixNegative ?? "-"}${value}${formatSetting?.suffixNegative ?? ""}`
-                      ] }) : valueDisplay
-                    ]
-                  },
-                  `col-${indexRow}-${indexCol}`
-                ),
-                checkOverflow(indexRow, indexCol) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_reactstrap10.UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : col.type === "numeric" && Number(row[col.field]) < 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
-                  " ",
-                  `${formatSetting?.prefixNegative ?? "-"}${value}${formatSetting?.suffixNegative ?? ""}`
-                ] }) : valueDisplay })
-              ] }, indexCol);
-            })
+                      )
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, {})
+                  ] })
+                ] })
+              }
+            )
           ]
-        },
-        `row-${indexRow}`
-      ),
-      row[fieldChildren ?? "children"] && row.expanded && row[fieldChildren ?? "children"].map((child, indexChild) => {
-        if (checkSearch(searchTerm, child, columns ? columns : defaultColumns)) {
-          const isSelectedChild = value && (isMulti ? value?.some((x) => x === child[fieldValue ?? "value"]) : value[fieldValue ?? "value"] === child[fieldValue ?? "value"]);
-          return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RenderElement, { isSelected: isSelectedChild, indexRow: indexChild, row: child, level: level + 1 }, `select-table-${indexRow}-${indexChild}`);
         }
-      })
-    ] });
-  });
-  const RenderTable = (props2) => {
-    const {} = props2;
-    let countDisplay = 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("table", { style: { width: "100%" }, children: [
-        !(noHeader && (columns?.length ?? 0) > 0) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("tr", { className: "r-select-row", role: "row", children: [
-          isMulti && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-            "th",
-            {
-              className: (0, import_classnames13.default)(`r-select-headercell checkbox-column`),
-              style: { width: 40, minWidth: 40, maxWidth: 100, top: `0px` },
-              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      ) })
+    }
+  );
+});
+var edit_form_default = EditForm;
+
+// src/component/sidebar-setting-column/index.tsx
+var import_react15 = require("react");
+var import_reactstrap10 = require("reactstrap");
+var import_react_i18next11 = require("react-i18next");
+
+// src/component/modal-header/index.tsx
+var import_becoxy_icons5 = require("becoxy-icons");
+var import_classnames11 = __toESM(require("classnames"));
+var import_react_i18next10 = require("react-i18next");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var ModalHeader = (props) => {
+  const { title, handleModal, typeModal = "Edit", component } = props;
+  const { t } = (0, import_react_i18next10.useTranslation)();
+  const handleModalIcon = () => {
+    if (typeModal === "Edit" || typeModal === "Approval") {
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_becoxy_icons5.Edit, { fontSize: 17, className: "me-1" });
+    } else if (typeModal === "View") {
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_becoxy_icons5.Info, { fontSize: 17, className: "me-1" });
+    } else if (typeModal === "Detail") {
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_becoxy_icons5.Info, { fontSize: 17, className: "me-1" });
+    } else if (typeModal === "Order") {
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "e-icons e-sorting-1 me-1", style: { fontSize: "14px" } });
+    } else if (typeModal === "Process") {
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "e-flat e-icons e-paste-match-destination me-1", style: { fontSize: "14px" } });
+    } else {
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_becoxy_icons5.Plus, { fontSize: 17, className: "me-1" });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "modal-header d-flex align-items-center justify-content-between mb-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "d-flex align-items-center justify-content-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("h5", { className: "modal-title", children: [
+        handleModalIcon(),
+        " ",
+        t(title)
+      ] }),
+      component ? component() : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, {})
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "todo-item-action d-flex align-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_becoxy_icons5.X,
+      {
+        className: (0, import_classnames11.default)("fw-normal mt-25 cursor-pointer", { "d-none": !handleModal }),
+        fontSize: 20,
+        onClick: handleModal
+      }
+    ) })
+  ] });
+};
+var modal_header_default = ModalHeader;
+
+// src/component/sidebar/index.tsx
+var import_becoxy_icons6 = require("becoxy-icons");
+var import_classnames12 = __toESM(require("classnames"));
+var import_react14 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Sidebar = (props) => {
+  const {
+    open,
+    children,
+    toggleSidebar,
+    width,
+    keyboard,
+    hiddenBackground,
+    hiddenFullScreenButton
+  } = props;
+  const [isFullScreen, setIsFullScreen] = (0, import_react14.useState)(false);
+  const [flag, setFlag] = (0, import_react14.useState)(open);
+  (0, import_react14.useEffect)(() => {
+    if (open !== flag) {
+      if (open) {
+        setFlag(open);
+      } else {
+        setTimeout(() => {
+          setFlag(open);
+        }, 50);
+      }
+    }
+  }, [open]);
+  const handClose = () => {
+    setFlag(false);
+    setTimeout(() => {
+      toggleSidebar();
+    }, 400);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      tabIndex: 0,
+      className: (0, import_classnames12.default)({ "d-none": !open }),
+      onKeyDown: (e) => {
+        if (!keyboard && e.code === "Escape" && flag) {
+          handClose();
+          e.stopPropagation();
+          e.preventDefault();
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "div",
+          {
+            className: (0, import_classnames12.default)("offcanvas-backdrop fade", {
+              "d-none": !flag || hiddenBackground,
+              show: flag
+            }),
+            style: { zIndex: 1056 },
+            onClick: handClose
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          "div",
+          {
+            className: (0, import_classnames12.default)("r-sidebar", `customizer-${width ?? 600}`, {
+              open: flag,
+              fullscreen: isFullScreen
+            }),
+            style: { zIndex: 1057 },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                 "div",
                 {
-                  style: { justifyContent: "center" },
-                  className: (0, import_classnames13.default)("r-select-headercell-div"),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                    import_reactstrap10.Input,
-                    {
-                      checked: isSelectedAll,
-                      type: "checkbox",
-                      onClick: (e) => {
-                        if (isMulti) {
-                          if (isSelectedAll) {
-                            onChange([]);
-                          } else {
-                            onChange(getSelectAll(options));
-                          }
-                          e.stopPropagation();
-                        }
-                      },
-                      readOnly: true,
-                      className: (0, import_classnames13.default)("cursor-pointer", { "d-none": !isMulti }),
-                      style: { textAlign: "center", marginTop: 6 }
-                    }
-                  )
+                  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_classnames12.default)({ "d-none": hiddenFullScreenButton }),
+                  onClick: () => {
+                    setIsFullScreen(!isFullScreen);
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_becoxy_icons6.ChevronLeft, { className: `${isFullScreen ? "d-none" : ""}`, fontSize: 16 }),
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_becoxy_icons6.ChevronRight, { className: `${!isFullScreen ? "d-none" : ""}`, fontSize: 15 })
+                  ]
                 }
-              )
-            }
-          ),
-          (columns ? columns : defaultColumns).map((col, index) => {
-            return renderHeaderCol(col, index);
-          })
-        ] }) }),
-        options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tbody", { className: "r-select-gridcontent", children: options?.map((row, indexRow) => {
-          if (checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
-            const isSelected = value && (isMulti ? value?.some((x) => x === row[fieldValue ?? "value"]) : value[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
-            countDisplay++;
-            return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RenderElement, { isSelected, indexRow, row }, `select-table-${indexRow}`);
+              ),
+              children
+            ]
           }
-        }) }) })
-      ] }),
-      countDisplay === 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "r-no-data", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.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.")
-      ] })
+        )
+      ]
+    }
+  );
+};
+var sidebar_default = Sidebar;
+
+// src/component/sidebar-setting-column/index.tsx
+var import_classnames13 = __toESM(require("classnames"));
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var SidebarSetColumn = (props) => {
+  const { column, setColumn, openSidebar, handleSidebar } = props;
+  const { t } = (0, import_react_i18next11.useTranslation)();
+  const [dataSource, setDataSource] = (0, import_react15.useState)([]);
+  const [indexFocus, setIndexFocus] = (0, import_react15.useState)();
+  (0, import_react15.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_react15.useState)(getWindowSize());
+  (0, import_react15.useEffect)(() => {
+    const handleWindowResize = () => {
+      setWindowSize(getWindowSize());
+    };
+    window.addEventListener("resize", handleWindowResize);
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
+  const renderFooterButtons = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react15.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap10.Button, { color: "primary", onClick: handleSubmit, className: "me-1", children: t("Confirm") }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap10.Button, { color: "secondary", onClick: handleCancel, outline: true, children: t("Close") })
     ] });
   };
-  const getSelectedRecords = (tree, value2) => {
-    const records = [];
-    const traverse = (nodes) => {
-      nodes.forEach((node) => {
-        if (value2.includes(node[fieldValue ?? "value"])) {
-          records.push(node);
+  const visibleTemplate = (item, index) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      import_reactstrap10.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);
+          }
         }
-        if (node.children && node.children.length > 0) {
-          traverse(node.children);
+      }
+    );
+  };
+  const fixColumnTemplate = (item, index) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      import_reactstrap10.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);
+          }
         }
-      });
-    };
-    traverse(tree);
-    return records;
+      }
+    );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    "div",
+  const columns = [
     {
-      className: (0, import_classnames13.default)("react-select-table", { "is-invalid": invalid }),
-      ref,
-      id,
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: selectTableRef, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-        import_reactstrap10.Dropdown,
-        {
-          isOpen: dropdownOpen,
-          toggle: () => {
-          },
-          onMouseDown: (e) => e.preventDefault(),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-              import_reactstrap10.DropdownToggle,
-              {
-                onClick: (e) => {
-                  if (!isDisabled) {
-                    inputRef?.current.focus();
-                    handleOpenClose();
-                  }
-                  e.preventDefault();
-                },
-                tag: "div",
-                style: { width: "100%" },
-                className: (0, import_classnames13.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_runtime15.jsxs)("div", { className: "select-table-container", children: [
-                    isMulti ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: (0, import_classnames13.default)("select-value is-mutil", { "d-none": searchTerm }), children: getSelectedRecords(options, value).map((ele, index) => {
-                      return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { children: [
-                        index === 0 ? "" : ", ",
-                        ele[fieldLabel ?? "label"]
-                      ] }, index);
-                    }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: (0, import_classnames13.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_runtime15.jsx)("div", { className: (0, import_classnames13.default)("select-placeholder"), children: placeholder }),
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "input-container", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                      "input",
-                      {
-                        style: { textAlign: textAlign ?? "left" },
-                        ref: inputRef,
-                        className: (0, import_classnames13.default)("select-input"),
-                        readOnly: isDisabled,
-                        value: searchTerm,
-                        onPaste: (e) => onPaste && !dropdownOpen && onPaste(e),
-                        onChange: (val) => {
-                          setSearchTerm(val.target.value);
-                        },
-                        onKeyDown: (e) => handleOnKeyDown(e)
-                      }
-                    ) })
-                  ] }),
-                  isClearable && value && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                    "div",
-                    {
-                      className: (0, import_classnames13.default)("cursor-pointer"),
-                      onClick: (e) => {
-                        onChange(isMulti ? [] : void 0);
-                        e.stopPropagation();
-                      },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.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_runtime15.jsx)("div", { className: "select-table-indicator", onMouseDown: (e) => e.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { height: "20", width: "20", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime15.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" }) }) })
-                ]
-              }
+      field: "headerText",
+      headerText: "Column name",
+      template: (e) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.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 renderHeaderCol = (col, indexCol) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      import_react15.Fragment,
+      {
+        children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "th",
+          {
+            className: (0, import_classnames13.default)(
+              `r-headercell fix-${col.fixedType}`,
+              { "cell-fixed": col.fixedType }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              import_reactstrap10.DropdownMenu,
+            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_runtime16.jsx)(
+              "div",
               {
-                container: component,
-                className: "formula-dropdown icon-dropdown p-0",
+                role: "textbox",
+                title: t(col.headerText ?? ""),
                 style: {
-                  width: width ? width + 2 : "min-content",
-                  position: "fixed",
-                  borderRadius: 4,
-                  zIndex: 9999
+                  height: `${1 * 42}px`,
+                  justifyContent: col.textAlign ?? "left"
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_reactstrap10.DropdownItem, { className: (0, import_classnames13.default)("p-0 menu-select-table"), style: { borderRadius: "6px" }, tag: "div", header: true, children: dropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                  "div",
-                  {
-                    onMouseDown: (e) => {
-                      if (!isDisabled) {
-                        inputRef?.current.focus();
-                        e.preventDefault();
-                      }
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "r-select-grid r-select-tree-grid", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-select-gridtable ", ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight2 }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RenderTable, {}) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: (0, import_classnames13.default)("r-select-footer", { "d-none": !(showFooter === true || handleAdd || isMulti) }), children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_reactstrap10.Button, { outline: true, color: "primary", onClick: handleAdd, className: (0, import_classnames13.default)("r-btn d-flex align-items-center", { "d-none": !handleAdd }), children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_becoxy_icons6.Plus, { className: "me-50", fontSize: 16 }),
-                          t("AddNew"),
-                          " (F9)"
-                        ] }),
-                        isMulti && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "ms-50 text-primary h-100 d-flex align-items-center", onClick: handleAdd, children: t("countSelected", { item: value?.length ?? 0 }) }),
-                        footerComponent ? footerComponent() : null
-                      ] })
-                    ] })
-                  }
-                ) })
+                className: "r-headercell-div",
+                children: t(col.headerText ?? "")
               }
             )
-          ]
-        }
-      ) })
+          }
+        )
+      },
+      `header-${indexCol}`
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    sidebar_default,
+    {
+      open: openSidebar,
+      toggleSidebar: handleCancel,
+      width: 700,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(modal_header_default, { typeModal: "Edit", handleModal: handleCancel, title: "Column setup" }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "ms-2 react-table-edit", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-grid", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-gridtable", style: { height: windowSize.innerHeight - 120 }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("table", { style: { width: "100%" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("thead", { className: "r-gridheader", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tr", { className: "r-row", role: "row", children: columns.map((col, index) => {
+            return renderHeaderCol(col, index);
+          }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tbody", { className: "r-gridcontent", children: dataSource?.map((row, indexRow) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "tr",
+              {
+                className: (0, import_classnames13.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_runtime16.jsx)(import_react15.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                    "td",
+                    {
+                      className: (0, import_classnames13.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();
+                      },
+                      onClick: (e) => {
+                        if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
+                          if (indexRow !== indexFocus) {
+                            setIndexFocus(indexRow);
+                          }
+                          e.stopPropagation();
+                        }
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                        "div",
+                        {
+                          className: (0, import_classnames13.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_runtime16.jsx)(
+                            "div",
+                            {
+                              className: (0, import_classnames13.default)("r-rowcell-content"),
+                              style: {
+                                margin: "7px 9px"
+                              },
+                              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-cell-text", children: col.template ? col.template(row, indexRow) : value })
+                            }
+                          )
+                        }
+                      )
+                    },
+                    `col-${indexRow}-${indexCol}`
+                  ) }, indexCol);
+                })
+              },
+              `row-${indexRow}`
+            );
+          }) })
+        ] }) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "div",
+          {
+            className: "d-flex justify-content-end p-1 ",
+            style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" },
+            children: renderFooterButtons()
+          }
+        )
+      ]
     }
   );
-});
-
-// src/component/table/index.tsx
-var import_react_number_format2 = require("react-number-format");
-
-// src/component/table/toolbar-top.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var renderToolbarTop = (toolbarTopOption) => {
-  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)(import_jsx_runtime16.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime16.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)(import_jsx_runtime16.Fragment, { children: /* @__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_runtime16.jsx)("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
-      return item.align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) }) : "";
-    }) })
-  ] }) });
 };
-var toolbar_top_default = renderToolbarTop;
+var sidebar_setting_column_default = SidebarSetColumn;
 
 // src/component/input-date/index.tsx
 var import_react16 = require("react");
 var import_react_datepicker = __toESM(require("react-datepicker"));
 var import_react_input_mask = __toESM(require("react-input-mask"));
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var DateInput = (props) => {
+var DateInput = (0, import_react16.forwardRef)((props, ref) => {
   const { id, onKeyDown, dateFormat, className, onChange, value } = props;
   const [open, setOpen] = (0, import_react16.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -2926,7 +2926,7 @@ var DateInput = (props) => {
       }
     }
   );
-};
+});
 var input_date_default = DateInput;
 
 // src/component/table/index.tsx