react-table-edit 0.0.1

package/dist/index.js

@@ -0,0 +1,2677 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// index.ts
+var Table_edit_exports = {};
+__export(Table_edit_exports, {
+  default: () => Table_edit_default,
+  messageBoxConfirm: () => messageBoxConfirm,
+  messageBoxConfirm2: () => messageBoxConfirm2,
+  messageBoxConfirmApprove: () => messageBoxConfirmApprove,
+  messageBoxConfirmDelete: () => messageBoxConfirmDelete,
+  messageBoxError: () => messageBoxError,
+  messageHtmlBoxError: () => messageHtmlBoxError,
+  notificationError: () => notificationError,
+  notificationSuccess: () => notificationSuccess
+});
+module.exports = __toCommonJS(Table_edit_exports);
+
+// test-app/component/table/index.tsx
+var import_react12 = require("react");
+var import_reactstrap8 = require("reactstrap");
+var import_classnames9 = __toESM(require("classnames"));
+var import_react_i18next8 = require("react-i18next");
+var import_react_select2 = __toESM(require("react-select"));
+var import_ej2_react_grids2 = require("@syncfusion/ej2-react-grids");
+var import_async = __toESM(require("react-select/async"));
+var import_becoxy_icons4 = require("becoxy-icons");
+
+// test-app/component/react-input/index.tsx
+var import_becoxy_icons = require("becoxy-icons");
+var import_classnames = __toESM(require("classnames"));
+var import_react = require("react");
+var import_reactstrap = require("reactstrap");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ReactInput = (props) => {
+  const { setSearchTerm, onKeyPress, placeholder, style } = props;
+  const [value, setValue] = (0, import_react.useState)(props.value);
+  const handelClear = () => {
+    setValue("");
+    setSearchTerm("");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_reactstrap.Input,
+      {
+        style,
+        placeholder,
+        onKeyPress,
+        className: (0, import_classnames.default)("input__value", {
+          "is-clearable": value
+        }),
+        value,
+        onChange: (val) => setValue(val.target.value)
+      }
+    ),
+    value ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_becoxy_icons.X, { className: "input__clear-icon", onClick: handelClear, strokeWidth: 3, fontSize: 16 }) : ""
+  ] }) });
+};
+var react_input_default = ReactInput;
+
+// test-app/component/notifications.tsx
+var import_react2 = require("react");
+var import_sweetalert2 = __toESM(require("sweetalert2"));
+var import_sweetalert2_react_content = __toESM(require("sweetalert2-react-content"));
+var import_react_hot_toast = __toESM(require("react-hot-toast"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var MySwal = (0, import_sweetalert2_react_content.default)(import_sweetalert2.default);
+var notificationSuccess = (param) => {
+  return import_react_hot_toast.default.success(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "toastify-header", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "title-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h6", { className: "toast-title", children: param }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "toastify-body", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { className: "list-unstyled mb-0", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", {}) }) })
+    ] })
+  );
+};
+var messageBoxError = (t, message) => {
+  MySwal.fire({
+    title: t("Important"),
+    text: t(message),
+    allowOutsideClick: false,
+    showCancelButton: true,
+    showConfirmButton: false,
+    cancelButtonText: t("Ok"),
+    customClass: {
+      cancelButton: "btn btn-danger ms-1"
+    },
+    buttonsStyling: false
+  });
+};
+var messageHtmlBoxError = (t, message, title) => {
+  MySwal.fire({
+    title: title ? t(title) : t("Important"),
+    html: message.map((item, index) => {
+      return `<div style="min-width: 448px padding: 7px width:100% border: 1px solid #e0e0e0${index !== 0 ? " border-top-width: 0px" : ""}">${item}</div>`;
+    }).join(""),
+    allowOutsideClick: false,
+    showCancelButton: true,
+    showConfirmButton: false,
+    cancelButtonText: t("Ok"),
+    width: "auto",
+    customClass: {
+      cancelButton: "btn btn-danger ms-1"
+    },
+    buttonsStyling: false
+  });
+};
+var messageBoxConfirmDelete = (t, handle, data) => {
+  MySwal.fire({
+    title: t("Confirm"),
+    text: t("Do you want to delete item?"),
+    allowOutsideClick: false,
+    showCancelButton: true,
+    confirmButtonText: t("Delete"),
+    cancelButtonText: t("Cancel"),
+    customClass: {
+      confirmButton: "btn btn-primary",
+      cancelButton: "btn btn-danger ms-1"
+    },
+    buttonsStyling: false
+  }).then(async (result) => {
+    if (result.value) {
+      handle(data);
+    }
+  });
+};
+var messageBoxConfirmApprove = (t, handle, data) => {
+  MySwal.fire({
+    title: t("Confirm"),
+    text: t("Do you want to approve item?"),
+    allowOutsideClick: false,
+    showCancelButton: true,
+    confirmButtonText: t("Approve"),
+    cancelButtonText: t("Cancel"),
+    customClass: {
+      confirmButton: "btn btn-primary",
+      cancelButton: "btn btn-danger ms-1"
+    },
+    buttonsStyling: false
+  }).then(async (result) => {
+    if (result.value) {
+      handle(data);
+    }
+  });
+};
+var messageBoxConfirm = (t, handle, data, message) => {
+  MySwal.fire({
+    title: t("Confirm"),
+    text: t(message),
+    allowOutsideClick: false,
+    showCancelButton: true,
+    confirmButtonText: t("Ok"),
+    cancelButtonText: t("Cancel"),
+    customClass: {
+      confirmButton: "btn btn-primary",
+      cancelButton: "btn btn-danger ms-1"
+    },
+    buttonsStyling: false
+  }).then(async (result) => {
+    if (result.value) {
+      handle(data);
+    }
+  });
+};
+var notificationError = (param) => {
+  return import_react_hot_toast.default.error(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "toastify-header", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "title-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h6", { className: "toast-title", children: param }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "toastify-body", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { className: "list-unstyled mb-0", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", {}) }) })
+    ] })
+  );
+};
+var messageBoxConfirm2 = async (t, data, data2, message) => {
+  return new Promise((resolve) => {
+    MySwal.fire({
+      title: t("Confirm"),
+      text: t(message),
+      allowOutsideClick: false,
+      showCancelButton: true,
+      confirmButtonText: t("Ok"),
+      cancelButtonText: t("Cancel"),
+      customClass: {
+        confirmButton: "btn btn-primary",
+        cancelButton: "btn btn-danger ms-1"
+      },
+      buttonsStyling: false
+    }).then((result) => {
+      if (result.isConfirmed) {
+        resolve(true);
+      } else {
+        resolve(false);
+      }
+    });
+  });
+};
+
+// test-app/component/utils.ts
+var import_react3 = require("react");
+var useOnClickOutside = (ref, handler) => {
+  (0, import_react3.useEffect)(
+    () => {
+      const listener = (event) => {
+        if (!ref.current || ref.current.contains(event.target)) {
+          return;
+        }
+        handler(event);
+      };
+      document.addEventListener("mousedown", listener);
+      document.addEventListener("touchstart", listener);
+      return () => {
+        document.removeEventListener("mousedown", listener);
+        document.removeEventListener("touchstart", listener);
+      };
+    },
+    // ** Add ref and handler to effect dependencies
+    // ** It's worth noting that because passed in handler is a new ...
+    // ** ... function on every render that will cause this effect ...
+    // ** ... callback/cleanup to run every render. It's not a big deal ...
+    // ** ... but to optimize you can wrap handler in useCallback before ...
+    // ** ... passing it into this hook.
+    [ref, handler]
+  );
+};
+var isNullOrUndefined = (d) => {
+  if (d === null || d === void 0) {
+    return true;
+  }
+  return false;
+};
+var generateUUID = () => {
+  let d = (/* @__PURE__ */ new Date()).getTime();
+  let d2 = typeof performance !== "undefined" && performance.now && performance.now() * 1e3 || 0;
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+    let r = Math.random() * 16;
+    if (d > 0) {
+      r = (d + r) % 16 | 0;
+      d = Math.floor(d / 16);
+    } else {
+      r = (d2 + r) % 16 | 0;
+      d2 = Math.floor(d2 / 16);
+    }
+    return (c === "x" ? r : 3).toString(16);
+  });
+};
+var formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 10, isDone) => {
+  if (str || str == "0") {
+    str = str.toString();
+    const value = decimalSeparator !== "." ? str.toString().replaceAll(".", decimalSeparator ?? "") : str;
+    const arr = value.toString().split(decimalSeparator ?? "", 2);
+    let flag = value.toString().includes(decimalSeparator ?? "");
+    if ((arr[0]?.length ?? 0) < 3) {
+      return flag ? `${arr[0]}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ""}` : arr[0];
+    } else {
+      let count = 0;
+      for (let i = (arr[0]?.length ?? 0) - 2; i >= 0; i--) {
+        if (((arr[0]?.length ?? 0) - i - count) % 3 === 0 && i > 0) {
+          arr[0] = `${arr[0]?.substring(0, i)}${thousandSeparator}${arr[0]?.substring(i, arr[0]?.length ?? 0)}`;
+          count++;
+        }
+      }
+      if (arr[0]?.lastIndexOf(thousandSeparator ?? "") === (arr[0]?.length ?? 0) - 1) {
+        arr[0] = arr[0]?.slice(0, (arr[0]?.length ?? 0) - 1);
+      }
+      if (isDone) {
+        flag = (arr[1]?.substring(0, fraction) ?? "") !== "";
+      }
+      return flag ? `${arr[0]}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ""}` : arr[0];
+    }
+  } else {
+    return "";
+  }
+};
+
+// test-app/component/icon/index.tsx
+var Icon = __toESM(require("becoxy-icons"));
+var import_react4 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var IconCustom = (props) => {
+  const { iconName, size } = props;
+  if (iconName === "") {
+    return null;
+  } else {
+    const TagIcon = iconName === "" ? "" : Icon[iconName];
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react4.Fragment, { children: iconName === "" ? "" : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TagIcon, { fontSize: size }) });
+  }
+};
+var icon_default = IconCustom;
+
+// test-app/component/table/index.tsx
+var import_moment = __toESM(require("moment"));
+var import_ej2_react_dropdowns = require("@syncfusion/ej2-react-dropdowns");
+
+// test-app/component/edit-form/index.tsx
+var import_react9 = require("react");
+var import_reactstrap6 = require("reactstrap");
+var import_react_hook_form5 = require("react-hook-form");
+var import_yup = require("@hookform/resolvers/yup");
+var import_react_i18next5 = require("react-i18next");
+var import_classnames6 = __toESM(require("classnames"));
+
+// test-app/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_react5 = require("react");
+var import_react_i18next = require("react-i18next");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var TextInput = (props) => {
+  const { t } = (0, import_react_i18next.useTranslation)();
+  const { control, id, name, min, max, type, label, labelSize, required, errors, height, disabled, row, isLabel, placeholder, autoFocus, inLine, callback, readOnly, classes, ...rest } = props;
+  const renderLabel = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.Fragment, { children: isLabel === false ? "" : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_reactstrap2.Label, { for: name, children: [
+      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_form.Controller,
+        {
+          name,
+          control,
+          render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)(import_reactstrap2.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_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_runtime4.jsx)("div", { className: (0, import_classnames2.default)("form-input-content", { "hidden-label": isLabel === false }), children: renderInput() })
+      ]
+    }
+  ) });
+};
+var input_text_default = TextInput;
+
+// test-app/component/select/index.tsx
+var import_react_hook_form2 = require("react-hook-form");
+var import_reactstrap3 = require("reactstrap");
+var import_react_select = __toESM(require("react-select"));
+var import_classnames3 = __toESM(require("classnames"));
+var import_react6 = require("react");
+var import_react_i18next2 = require("react-i18next");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var SelectBox = (props) => {
+  const { t } = (0, import_react_i18next2.useTranslation)();
+  const { control, id, placeholder, fieldValue, confirmHandle, disabled, name, options, label, isLabel, labelSize, classes, required, errors, isMulti, isClearable, labelComponent, callback, inLine, onInputChange, ref, menuPosition, ...rest } = props;
+  const handChange = ({ onChange, val }) => {
+    onChange(!isNullOrUndefined(val) && isMulti ? val.map((item) => item.value) : !isNullOrUndefined(val) && !isMulti ? fieldValue ? val[fieldValue] : val?.value : void 0);
+    if (callback) {
+      callback(val);
+    }
+  };
+  const renderSelect = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react6.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_react_hook_form2.Controller,
+        {
+          name,
+          control,
+          render: ({ field: { value, onChange } }) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_react_select.default,
+              {
+                ...rest,
+                id,
+                value: isMulti && value?.length > 0 ? value.map((x) => options.find((val) => (fieldValue ? val[fieldValue] : val.value) === x)) : !isNullOrUndefined(value) && value !== "" ? options.find((val) => (fieldValue ? val[fieldValue] : val.value) === value) : "",
+                onChange: (val) => {
+                  if ((fieldValue && val ? val[fieldValue] : val?.value) !== value) {
+                    if (confirmHandle) {
+                      confirmHandle(handChange, onChange, val);
+                    } else {
+                      onChange(!isNullOrUndefined(val) && isMulti ? val.map((item) => item.value) : !isNullOrUndefined(val) && !isMulti ? fieldValue ? val[fieldValue] : val?.value : void 0);
+                      if (callback) {
+                        callback(val);
+                      }
+                    }
+                  }
+                },
+                onInputChange,
+                form: name,
+                placeholder: placeholder ? placeholder : "",
+                classNamePrefix: "select",
+                className: `react-select ${errors && "is-invalid"}`,
+                options,
+                isMulti,
+                isDisabled: disabled,
+                isClearable,
+                menuPosition: menuPosition ?? "fixed",
+                formatOptionLabel: labelComponent ? labelComponent : void 0,
+                ref
+              }
+            );
+          }
+        }
+      ),
+      errors && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_reactstrap3.FormFeedback, { children: errors?.message })
+    ] });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react6.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className: (0, import_classnames3.default)(
+        inLine === false ? "form-group " : "form-row-inline d-flex",
+        "align",
+        {
+          [labelSize ? labelSize : ""]: labelSize,
+          [classes ? classes : ""]: classes,
+          "form-row-inline-error": errors
+        }
+      ),
+      children: [
+        isLabel === false ? "" : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_reactstrap3.Label, { className: "form-label", for: name, children: [
+          t(label ? label : ""),
+          " ",
+          required ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-danger", children: "*" }) : "",
+          " "
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_classnames3.default)("form-input-content", { "hidden-label": isLabel === false }), children: renderSelect() })
+      ]
+    }
+  ) });
+};
+var select_default = SelectBox;
+
+// test-app/component/creactable-select/index.tsx
+var import_react_hook_form3 = require("react-hook-form");
+var import_reactstrap4 = require("reactstrap");
+var import_classnames4 = __toESM(require("classnames"));
+var import_react7 = require("react");
+var import_react_i18next3 = require("react-i18next");
+var import_creatable = __toESM(require("react-select/creatable"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var CreatableSelectBox = (props) => {
+  const { t } = (0, import_react_i18next3.useTranslation)();
+  const { isMulti, id, isLabel, control, placeholder, fieldValue, name, options, label, labelSize, required, errors, inLine, isClearable, labelComponent, onInputChange, callback, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react7.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      className: (0, import_classnames4.default)(
+        inLine === false ? "form-group " : "form-row-inline d-flex",
+        "align",
+        {
+          [labelSize ? labelSize : ""]: labelSize,
+          "form-row-inline-error": errors
+        }
+      ),
+      children: [
+        isLabel === false ? "" : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_reactstrap4.Label, { className: "form-label", for: name, children: [
+          t(label),
+          " ",
+          required ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-danger", children: "*" }) : "",
+          " "
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_classnames4.default)("form-input-content", { "hidden-label": isLabel === false }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            import_react_hook_form3.Controller,
+            {
+              name,
+              control,
+              render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                import_creatable.default,
+                {
+                  ...rest,
+                  id,
+                  value: isMulti && value?.length > 0 ? value.map((x) => options.find((val) => (fieldValue ? val[fieldValue] : val.value) === x)) : !isNullOrUndefined(value) && value !== "" ? options.find((val) => (fieldValue ? val[fieldValue] : val.value) === value) : "",
+                  onChange: (val) => {
+                    if (fieldValue && val.__isNew__) {
+                      val[fieldValue] = val.value;
+                    }
+                    onChange(!isNullOrUndefined(val) && isMulti ? val.map((item) => item.value) : !isNullOrUndefined(val) && !isMulti ? fieldValue ? val[fieldValue] : val?.value : void 0);
+                    if (callback) {
+                      callback(val);
+                    }
+                  },
+                  onInputChange,
+                  classNamePrefix: "select",
+                  className: `react-select ${errors && "is-invalid"}`,
+                  options,
+                  placeholder,
+                  isMulti,
+                  isClearable,
+                  menuPosition: "fixed",
+                  formatOptionLabel: labelComponent ? labelComponent : void 0
+                }
+              )
+            }
+          ),
+          errors && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_reactstrap4.FormFeedback, { children: errors?.message })
+        ] })
+      ]
+    }
+  ) });
+};
+var creactable_select_default = CreatableSelectBox;
+
+// test-app/component/input-number/index.tsx
+var import_react_hook_form4 = require("react-hook-form");
+var import_reactstrap5 = require("reactstrap");
+var import_classnames5 = __toESM(require("classnames"));
+var import_react8 = require("react");
+var import_react_i18next4 = require("react-i18next");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var NumberInput = (props) => {
+  const { t } = (0, import_react_i18next4.useTranslation)();
+  const {
+    control,
+    id,
+    fractionCurrency = 10,
+    name,
+    min,
+    max,
+    type,
+    label,
+    labelSize,
+    required,
+    errors,
+    height,
+    disabled,
+    row,
+    isLabel,
+    placeholder,
+    autoFocus,
+    inLine,
+    callback,
+    readOnly,
+    decimalSeparator = ",",
+    thousandSeparator = ".",
+    classes,
+    ...rest
+  } = props;
+  const renderLabel = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react8.Fragment, { children: isLabel === false ? "" : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_reactstrap5.Label, { className: "form-label", for: name, children: [
+      t(label ? label : ""),
+      " ",
+      required ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-danger", children: "*" }) : "",
+      " "
+    ] }) });
+  };
+  const renderInput = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react8.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        import_react_hook_form4.Controller,
+        {
+          name,
+          control,
+          render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            import_reactstrap5.Input,
+            {
+              id,
+              value: formartNumberic(value, decimalSeparator, thousandSeparator, fractionCurrency),
+              onChange: (val) => {
+                let newVal = "";
+                const flag = val.target?.value.startsWith("-");
+                if (val.target?.value.endsWith(decimalSeparator)) {
+                  if ((val.target?.value.match(new RegExp(decimalSeparator === "," ? "," : "\\.", "g")) || []).length > 1 || fractionCurrency === 0) {
+                    newVal = val.target?.value.slice(0, -1).replaceAll(thousandSeparator, "");
+                  } else {
+                    newVal = val.target?.value.replaceAll(thousandSeparator, "");
+                  }
+                } else {
+                  newVal = val.target.value.replaceAll(new RegExp(`[^0-9${decimalSeparator}]`, "g"), "");
+                }
+                if (decimalSeparator !== ".") {
+                  newVal = newVal.replaceAll(decimalSeparator, ".");
+                }
+                onChange(flag ? `-${newVal}` : newVal);
+              },
+              onBlur: (val) => {
+                let newVal = "";
+                const flag = val.target?.value.startsWith("-");
+                if (val.target?.value.endsWith(decimalSeparator)) {
+                  newVal = val.target?.value.slice(0, -1).replaceAll(new RegExp(`[^0-9${decimalSeparator}]`, "g"), "");
+                } else {
+                  newVal = val.target.value.replaceAll(new RegExp(`[^0-9${decimalSeparator}]`, "g"), "");
+                }
+                if (decimalSeparator !== ".") {
+                  newVal = newVal.replaceAll(decimalSeparator, ".");
+                }
+                let value2 = flag ? 0 - Number(newVal) : Number(newVal);
+                if (max !== void 0 && value2 > max) {
+                  value2 = max;
+                } else if (min !== void 0 && value2 < min) {
+                  value2 = min;
+                }
+                onChange(value2);
+                if (callback) {
+                  callback(value2);
+                }
+              },
+              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_runtime7.jsx)(import_reactstrap5.FormFeedback, { children: errors?.message })
+    ] });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      className: (0, import_classnames5.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_runtime7.jsx)("div", { className: (0, import_classnames5.default)("form-input-content", { "hidden-label": isLabel === false }), children: renderInput() })
+      ]
+    }
+  ) });
+};
+var input_number_default = NumberInput;
+
+// test-app/component/edit-form/index.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var defaultWidth = 200;
+var EditForm = (0, import_react9.forwardRef)((props, ref) => {
+  const {
+    id,
+    field,
+    displayValue,
+    menuHeight,
+    menuWidth,
+    rowData,
+    invalid,
+    onChange,
+    onChangeField,
+    onKeyDown,
+    defaultValues,
+    placeholder,
+    textAlign,
+    schema,
+    onFormOpen,
+    onFormSubmit,
+    footerTemplate,
+    minWidth,
+    openOnFocus,
+    labelSize = "label-small"
+  } = props;
+  const { innerWidth } = window;
+  const inputRef = (0, import_react9.useRef)();
+  const editFormRef = (0, import_react9.useRef)();
+  const buttonRef = (0, import_react9.useRef)();
+  const [dropdownOpen, setDropdownOpen] = (0, import_react9.useState)(false);
+  const [itemsField, setItemsField] = (0, import_react9.useState)([]);
+  const { t } = (0, import_react_i18next5.useTranslation)();
+  useOnClickOutside(editFormRef, () => {
+    closeMenu();
+  });
+  const closeMenu = () => {
+    setTimeout(() => {
+      setDropdownOpen(false);
+    }, onChangeField ? 10 : 0);
+  };
+  const {
+    control,
+    handleSubmit,
+    getValues,
+    reset,
+    setValue,
+    formState: { errors }
+  } = (0, import_react_hook_form5.useForm)({
+    mode: "onChange",
+    defaultValues,
+    resolver: (0, import_yup.yupResolver)(schema)
+  });
+  (0, import_react9.useEffect)(() => {
+    if (dropdownOpen) {
+      if (onFormOpen && itemsField.length === 0) {
+        onFormOpen(rowData, itemsField, setItemsField);
+      }
+    }
+  }, [dropdownOpen]);
+  (0, import_react9.useEffect)(() => {
+    if (dropdownOpen && itemsField.length > 0) {
+      itemsField.forEach((ele) => {
+        setValue(ele.name, rowData[ele.name] ?? "");
+      });
+    }
+  }, [dropdownOpen, itemsField]);
+  const handleOnClick = () => {
+    if (dropdownOpen) {
+      if (!openOnFocus) {
+        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);
+        }
+      }
+    }
+  };
+  const handleOnKeyDown = (e) => {
+    let flag = false;
+    if (dropdownOpen) {
+      if (e.code === "Escape") {
+        closeMenu();
+        flag = true;
+      } else if (e.code === "Enter") {
+        closeMenu();
+        flag = true;
+      } else if (e.code === "ArrowDown") {
+        focusElement(`form-element-${field}-0`);
+        flag = true;
+      }
+    } else {
+      if (e.code === "ArrowDown") {
+        setDropdownOpen(true);
+        focusElement(`form-element-${field}-0`);
+        flag = true;
+      } else if (e.code === "Space") {
+        setDropdownOpen(true);
+        flag = true;
+      }
+    }
+    if (onKeyDown && !flag) {
+      const key = onKeyDown(e);
+      if (key === "ArrowRight" || key === "ArrowLeft") {
+        closeMenu();
+      }
+    } else {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  };
+  const handleOnFocus = () => {
+    if (openOnFocus) {
+      setDropdownOpen(true);
+      if (field) {
+        setTimeout(() => {
+          focusElement(`form-element-${field}-0`, true);
+        }, 100);
+      }
+    }
+  };
+  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 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 elementChange = (field2) => {
+    if (onChangeField) {
+      onChangeField(rowData, field2, setValue, getValues);
+      const rs = getValues();
+      if (rs) {
+        onChange(rs);
+      }
+    }
+  };
+  const renderForm = (rows) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_reactstrap6.Row, { className: "gy-25", children: rows.map((item, index) => {
+      if (item.type === "numeric") {
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_reactstrap6.Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          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_runtime8.jsx)(import_reactstrap6.Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)(import_reactstrap6.Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          select_default,
+          {
+            id: `form-element-${field}-${index}`,
+            options: item.options ?? [],
+            control,
+            name: item.name,
+            label: item.label ? item.label : "",
+            labelSize: `text-left ${labelSize}`,
+            menuPortalTarget: document.body,
+            errors: errors[item.name],
+            disabled: item.disabled,
+            callback: () => {
+              elementChange(item.name);
+            }
+          },
+          index
+        ) }, index);
+      } else if (item.type === "selectCreatable") {
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_reactstrap6.Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          creactable_select_default,
+          {
+            id: `form-element-${field}-${index}`,
+            options: item.options ?? [],
+            control,
+            name: item.name,
+            placeholder: t("Select"),
+            menuPortalTarget: document.body,
+            label: item.label ? item.label : "",
+            labelSize: ` ${labelSize}`,
+            errors: errors[item.name],
+            callback: () => {
+              elementChange(item.name);
+            }
+          },
+          index
+        ) }, index);
+      }
+    }) });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      className: "from-edit",
+      ref,
+      id,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: editFormRef, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        import_reactstrap6.Dropdown,
+        {
+          isOpen: dropdownOpen,
+          toggle: () => {
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_reactstrap6.DropdownToggle, { tag: "div", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              import_reactstrap6.Input,
+              {
+                style: { backgroundColor: "#FFF", textAlign: textAlign ?? "left" },
+                placeholder,
+                innerRef: inputRef,
+                className: (0, import_classnames6.default)("input-display", { "is-invalid": invalid }),
+                value: displayValue,
+                onFocus: handleOnFocus,
+                onClick: handleOnClick,
+                onKeyDown: (e) => handleOnKeyDown(e),
+                readOnly: true
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              import_reactstrap6.DropdownMenu,
+              {
+                className: "formula-dropdown icon-dropdown p-0",
+                style: {
+                  minWidth: minWidth ? minWidth : defaultWidth,
+                  width: menuWidth ? menuWidth : "min-content",
+                  maxWidth: innerWidth > 1280 ? 1280 : innerWidth,
+                  borderRadius: 8,
+                  zIndex: 1060
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_reactstrap6.DropdownItem, { className: "p-0", style: { borderRadius: "6px" }, tag: "div", header: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_reactstrap6.Form, { className: "todo-modal", onKeyDown: (e) => formKeyDown(e, handleSubmit(handleOnSubmit)), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    "div",
+                    {
+                      className: "p-1",
+                      style: {
+                        maxHeight: menuHeight ? menuHeight : 300,
+                        overflow: "auto"
+                      },
+                      children: itemsField ? renderForm(itemsField) : ""
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "d-flex justify-content-between p-50", style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-primary py-25", style: { fontSize: 12 }, children: footerTemplate ? footerTemplate(rowData) : "" }),
+                    !onChangeField ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      import_reactstrap6.Button,
+                      {
+                        ref: buttonRef,
+                        color: "primary",
+                        className: "btn btn-primary py-25 px-50",
+                        onClick: handleSubmit(handleOnSubmit),
+                        onKeyDown: (e) => {
+                          if (e.code === "Tab") {
+                            closeMenu();
+                          }
+                        },
+                        children: t("Save")
+                      }
+                    ) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, {})
+                  ] })
+                ] }) })
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  );
+});
+var edit_form_default = EditForm;
+
+// test-app/component/sidebar-setting-column/index.tsx
+var import_react11 = require("react");
+var import_reactstrap7 = require("reactstrap");
+var import_react_i18next7 = require("react-i18next");
+var import_ej2_react_grids = require("@syncfusion/ej2-react-grids");
+
+// test-app/component/modal-header/index.tsx
+var import_becoxy_icons2 = require("becoxy-icons");
+var import_classnames7 = __toESM(require("classnames"));
+var import_react_i18next6 = require("react-i18next");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ModalHeader = (props) => {
+  const { title, handleModal, typeModal = "Edit", component } = props;
+  const { t } = (0, import_react_i18next6.useTranslation)();
+  const handleModalIcon = () => {
+    if (typeModal === "Edit" || typeModal === "Approval") {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_becoxy_icons2.Edit, { fontSize: 17, className: "me-1" });
+    } else if (typeModal === "View") {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_becoxy_icons2.Info, { fontSize: 17, className: "me-1" });
+    } else if (typeModal === "Detail") {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_becoxy_icons2.Info, { fontSize: 17, className: "me-1" });
+    } else if (typeModal === "Order") {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "e-icons e-sorting-1 me-1", style: { fontSize: "14px" } });
+    } else if (typeModal === "Process") {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "e-flat e-icons e-paste-match-destination me-1", style: { fontSize: "14px" } });
+    } else {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_becoxy_icons2.Plus, { fontSize: 17, className: "me-1" });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "modal-header d-flex align-items-center justify-content-between mb-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "d-flex align-items-center justify-content-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("h5", { className: "modal-title", children: [
+        handleModalIcon(),
+        " ",
+        t(title)
+      ] }),
+      component ? component() : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, {})
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "todo-item-action d-flex align-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_becoxy_icons2.X,
+      {
+        className: (0, import_classnames7.default)("fw-normal mt-25 cursor-pointer", { "d-none": !handleModal }),
+        fontSize: 20,
+        onClick: handleModal
+      }
+    ) })
+  ] });
+};
+var modal_header_default = ModalHeader;
+
+// test-app/component/sidebar/index.tsx
+var import_becoxy_icons3 = require("becoxy-icons");
+var import_classnames8 = __toESM(require("classnames"));
+var import_react10 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Sidebar = (props) => {
+  const {
+    open,
+    children,
+    toggleSidebar,
+    width,
+    keyboard,
+    hiddenBackground,
+    hiddenFullScreenButton
+  } = props;
+  const [isFullScreen, setIsFullScreen] = (0, import_react10.useState)(false);
+  const [flag, setFlag] = (0, import_react10.useState)(open);
+  (0, import_react10.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_runtime10.jsxs)(
+    "div",
+    {
+      tabIndex: 0,
+      className: (0, import_classnames8.default)({ "d-none": !open }),
+      onKeyDown: (e) => {
+        if (!keyboard && e.code === "Escape" && flag) {
+          handClose();
+          e.stopPropagation();
+          e.preventDefault();
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsxs)(
+          "div",
+          {
+            className: (0, import_classnames8.default)("customizer d-none d-md-block ", `customizer-${width ?? 600}`, {
+              open: flag,
+              fullscreen: isFullScreen
+            }),
+            style: { zIndex: 1057 },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)(import_becoxy_icons3.ChevronLeft, { className: `${isFullScreen ? "d-none" : ""}`, fontSize: 16 }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_becoxy_icons3.ChevronRight, { className: `${!isFullScreen ? "d-none" : ""}`, fontSize: 15 })
+                  ]
+                }
+              ),
+              children
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var sidebar_default = Sidebar;
+
+// test-app/component/sidebar-setting-column/index.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var SidebarSetColumn = (props) => {
+  const { column, setColumn, openSidebar, handleSidebar } = props;
+  const { t } = (0, import_react_i18next7.useTranslation)();
+  const [dataSource, setDataSource] = (0, import_react11.useState)([]);
+  (0, import_react11.useEffect)(() => {
+    if (openSidebar) {
+      setDataSource([...column]);
+    }
+  }, [openSidebar]);
+  const handleCancel = () => {
+    handleSidebar();
+    setDataSource([]);
+  };
+  const handleSubmit = () => {
+    setColumn([...dataSource]);
+    handleCancel();
+  };
+  const getWindowSize = () => {
+    const { innerWidth, innerHeight } = window;
+    return { innerWidth, innerHeight };
+  };
+  const gird = (0, import_react11.useRef)(null);
+  const [windowSize, setWindowSize] = (0, import_react11.useState)(getWindowSize());
+  (0, import_react11.useEffect)(() => {
+    const handleWindowResize = () => {
+      setWindowSize(getWindowSize());
+    };
+    window.addEventListener("resize", handleWindowResize);
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
+  const renderFooterButtons = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react11.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_reactstrap7.Button, { color: "primary", onClick: handleSubmit, className: "me-1", children: t("Confirm") }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_reactstrap7.Button, { color: "secondary", onClick: handleCancel, outline: true, children: t("Close") })
+    ] });
+  };
+  const visibleTemplate = (item) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_reactstrap7.Input,
+      {
+        defaultChecked: item.visible ?? true,
+        disabled: item.invisibleDisable,
+        type: "checkbox",
+        style: { height: 18 },
+        className: " cursor-pointer",
+        onChange: (e) => {
+          if (dataSource) {
+            item.column.dataSource[item.index].visible = e.target.checked;
+            setDataSource(item.column.dataSource);
+          }
+        }
+      }
+    );
+  };
+  const fixColumnTemplate = (item) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.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 (item.index * 2 <= item.column.dataSource.length) {
+                item.column.dataSource[item.index].fixedType = "left";
+              } else {
+                item.column.dataSource[item.index].fixedType = "right";
+              }
+            } else {
+              item.column.dataSource[item.index].fixedType = "";
+            }
+            setDataSource(item.column.dataSource);
+          }
+        }
+      }
+    );
+  };
+  const columns = [
+    {
+      isPrimaryKey: true,
+      field: "headerText",
+      headerText: "Column name",
+      template: (e) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: t(e.headerText) });
+      },
+      visible: true,
+      width: 100,
+      maxWidth: 120,
+      minWidth: 80
+    },
+    {
+      isPrimaryKey: true,
+      template: visibleTemplate,
+      headerText: "Display",
+      dataSource,
+      visible: true,
+      width: 100,
+      maxWidth: 120,
+      minWidth: 80
+    },
+    {
+      isPrimaryKey: true,
+      template: fixColumnTemplate,
+      headerText: "Fix the column",
+      dataSource,
+      visible: true,
+      width: 100,
+      maxWidth: 120,
+      minWidth: 80
+    },
+    {
+      isPrimaryKey: true,
+      field: "width",
+      headerText: "Column width",
+      template: (item) => {
+        return item.width ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+          t(item.width),
+          "px"
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
+      },
+      visible: true,
+      width: 100,
+      maxWidth: 120,
+      minWidth: 80
+    }
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    sidebar_default,
+    {
+      open: openSidebar,
+      toggleSidebar: handleCancel,
+      width: 700,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(modal_header_default, { typeModal: "Edit", handleModal: handleCancel, title: "Column setup" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          import_ej2_react_grids.GridComponent,
+          {
+            className: "ms-2",
+            dataSource,
+            ref: gird,
+            height: windowSize.innerHeight - 160,
+            allowRowDragAndDrop: true,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ej2_react_grids.ColumnsDirective, { children: columns.map((col, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ej2_react_grids.ColumnDirective, { ...col, headerText: t(col.headerText) }, index)) }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ej2_react_grids.Inject, { services: [import_ej2_react_grids.RowDD, import_ej2_react_grids.Selection, import_ej2_react_grids.CommandColumn] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "div",
+          {
+            className: "d-flex justify-content-end p-1 ",
+            style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" },
+            children: renderFooterButtons()
+          }
+        )
+      ]
+    }
+  );
+};
+var sidebar_setting_column_default = SidebarSetColumn;
+
+// test-app/component/table/index.tsx
+var import_ej2_react_popups = require("@syncfusion/ej2-react-popups");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
+  const { t } = (0, import_react_i18next8.useTranslation)();
+  const {
+    idTable,
+    dataSource,
+    columns,
+    commandClick,
+    dataSourceChange,
+    rowChange,
+    allowPaging,
+    pageSize,
+    totalItem,
+    currentPage,
+    setCurrentPage,
+    setPageSize,
+    setDataSource,
+    height,
+    maxHeight,
+    minHeight,
+    defaultValue,
+    haveSum,
+    toolbarOptions,
+    toolbarBottomOptions,
+    showTopToolbar,
+    showBottomToolbar,
+    searchTerm,
+    setSearchTerm,
+    searchEnable,
+    setSelectedItem,
+    selectedItem,
+    selectEnable,
+    editDisable,
+    addDisable,
+    deleteAllDisable,
+    insertAfterDisable,
+    insertBeforeDisable,
+    duplicateDisable,
+    decimalSeparator = ",",
+    thousandSeparator = ".",
+    isMulti
+  } = props;
+  (0, import_react12.useImperativeHandle)(ref, () => {
+    return {
+      refeshFocusRow: handleRefeshRow
+    };
+  });
+  const [refreshRow, setRefreshRow] = (0, import_react12.useState)(false);
+  const [indexFocus, setIndexFocus] = (0, import_react12.useState)();
+  const [selectedRows, setSelectedRows] = (0, import_react12.useState)([]);
+  const [tableColumns, setTableColumns] = (0, import_react12.useState)([...columns]);
+  const [columnFistEdit, setColumnFistEdit] = (0, import_react12.useState)(0);
+  const [columnLastEdit, setColumnlastEdit] = (0, import_react12.useState)(0);
+  const [objWidthFix, setObjWidthFix] = (0, import_react12.useState)({});
+  const [openPopupTree, setOpenPopupTree] = (0, import_react12.useState)(false);
+  const [openPopupSetupColumn, setOpenPopupSetupColumn] = (0, import_react12.useState)(false);
+  const tableElement = (0, import_react12.useRef)(null);
+  const gridRef = (0, import_react12.useRef)();
+  const lag = window.localStorage.getItem("i18nextLng");
+  const lang = lag ? lag : "vi";
+  const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? "id";
+  const fieldUniKey = columns.filter((item) => item.isUnikey === true)?.map((item) => item.field);
+  (0, import_react12.useEffect)(() => {
+    let indexFirst = -1;
+    let indexlast = -1;
+    let letfWidthFix = 0;
+    let rightWidthFix = 0;
+    tableColumns.forEach((item, index) => {
+      if (item.fixedType === "left" && item.visible !== false) {
+        objWidthFix[index] = letfWidthFix;
+        letfWidthFix += Number(item.minWidth ? item.minWidth : item.field === "#" ? 40 : item.width ? item.width : 0);
+      }
+      if (tableColumns[tableColumns.length - 1 - index].fixedType === "right" && tableColumns[tableColumns.length - 1 - index].visible !== false) {
+        objWidthFix[tableColumns.length - 1 - index] = rightWidthFix;
+        rightWidthFix += Number(tableColumns[tableColumns.length - 1 - index].minWidth ? tableColumns[tableColumns.length - 1 - index].minWidth : tableColumns[tableColumns.length - 1 - index].field === "#" ? 40 : tableColumns[tableColumns.length - 1 - index].width ? tableColumns[tableColumns.length - 1 - index].width : 0);
+      }
+      if (item.editEnable && item.visible !== false && !item.disabledCondition) {
+        if (indexFirst === -1) {
+          indexFirst = index;
+        }
+        indexlast = index;
+      }
+    });
+    setObjWidthFix(objWidthFix);
+    setColumnFistEdit(indexFirst + 1);
+    setColumnlastEdit(indexlast + 1);
+  }, [tableColumns]);
+  (0, import_react12.useEffect)(() => {
+    setTableColumns(columns.map((item, index) => {
+      return { ...item, visible: item.invisibleDisable ? item.visible : tableColumns[index]?.visible ?? item.visible };
+    }));
+  }, [columns]);
+  const handleRefeshRow = () => {
+    setRefreshRow(true);
+    setTimeout(() => {
+      setRefreshRow(false);
+    }, 5);
+  };
+  const handleDataChange = async (row, col, indexRow) => {
+    if (dataSourceChange) {
+      dataSourceChange(dataSource);
+    }
+    if (rowChange) {
+      await rowChange(row, indexRow, col.field);
+      for (let index = 0; index <= tableColumns.length; index++) {
+        if (!editDisable && indexFocus === indexRow && (!col.disabledCondition || !col.disabledCondition(row)) && tableColumns[index] && tableColumns[index].editEnable) {
+          const element = document.getElementById(`${idTable}-col${index + 1}-row${indexRow + 1}`);
+          if (element) {
+            if (element.className.includes("input-element")) {
+              element.value = row[tableColumns[index].field] ?? "";
+            } else if (element.className.includes("input-numeric")) {
+              element.value = row[tableColumns[index].field] ? formartNumberic(row[tableColumns[index].field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction) : 0;
+            } else if (element.className.includes("input-checkbox")) {
+              element.checked = row[tableColumns[index].field] ?? false;
+            }
+          }
+        }
+      }
+    }
+  };
+  const handleKeyPress = (e) => {
+    if (e.code === "Enter" || e.code === "NumpadEnter") {
+      setSearchTerm(e.target.value);
+    }
+  };
+  const searchTemplate = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react12.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "me-50", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      react_input_default,
+      {
+        style: { width: "230px" },
+        value: searchTerm,
+        setSearchTerm,
+        placeholder: t("Search"),
+        onKeyPress: handleKeyPress
+      }
+    ) }) });
+  };
+  const defaultToolbarOption = searchEnable === true ? [{ template: searchTemplate, align: "left" }] : [];
+  let toolbarTopOption = [];
+  if (toolbarOptions) {
+    toolbarTopOption = [...defaultToolbarOption, ...toolbarOptions];
+  } else {
+    toolbarTopOption = [...defaultToolbarOption];
+  }
+  const renderEdit = (row, col, indexRow, indexCol) => {
+    switch (col?.editTypeCondition ? col?.editTypeCondition(row) : col.editType) {
+      case "date":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_reactstrap8.Input,
+          {
+            id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
+            style: { textAlign: col.textAlign, height: 29 },
+            value: row[col.field] ? (0, import_moment.default)(row[col.field]).format("yyyy-MM-DD") : row[col.field],
+            onChange: (val) => {
+              row[col.field] = val.target.value;
+              if (col.callback) {
+                col.callback(val.target.value, indexRow);
+              }
+              handleDataChange(row, col, indexRow);
+            },
+            className: (0, import_classnames9.default)("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            type: "date",
+            max: "9999-12-31",
+            onKeyDown: (e) => {
+              if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
+              }
+            }
+          }
+        );
+      case "datetime":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_reactstrap8.Input,
+          {
+            id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
+            style: { textAlign: col.textAlign, height: 29 },
+            value: row[col.field] ? (0, import_moment.default)(row[col.field]).format("yyyy-MM-DD HH:MM") : row[col.field],
+            onChange: (val) => {
+              row[col.field] = val.target.value;
+              if (col.callback) {
+                col.callback(val.target.value, indexRow);
+              }
+              handleDataChange(row, col, indexRow);
+            },
+            className: (0, import_classnames9.default)("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            type: "datetime-local",
+            max: "9999-12-31T23:59",
+            onKeyDown: (e) => {
+              if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
+              }
+            }
+          }
+        );
+      case "asyncSelect":
+        let optionAsyncSelects = [];
+        if (col.selectSettings?.optionsField) {
+          optionAsyncSelects = row[col.selectSettings?.optionsField] ? row[col.selectSettings?.optionsField] : [];
+        } else {
+          optionAsyncSelects = col.selectSettings?.options ? col.selectSettings?.validateOption ? col.selectSettings?.options.filter((item) => col.selectSettings?.validateOption(item, row)) : col.selectSettings?.options : [];
+        }
+        let valueAsyncSelect = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? optionAsyncSelects?.find((val) => val[col.selectSettings?.fieldValue ?? "value"] === row[col.field]) : void 0;
+        if (!valueAsyncSelect && col.selectSettings?.defaultValue) {
+          valueAsyncSelect = col.selectSettings?.defaultValue(row);
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: (0, import_classnames9.default)("d-flex select-group", { "is-invalid": col.validate && col.validate(row[col.field], row) }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            import_async.default,
+            {
+              menuPosition: "fixed",
+              value: valueAsyncSelect,
+              defaultOptions: optionAsyncSelects,
+              onChange: (val) => {
+                row[col.field] = val ? val[col.selectSettings?.fieldValue ?? "value"] : void 0;
+                if (col.callback) {
+                  col.callback(val, indexRow);
+                }
+                handleDataChange(row, col, indexRow);
+              },
+              menuPortalTarget: document.body,
+              isClearable: col.selectSettings?.isClearable ?? false,
+              classNamePrefix: col.selectSettings?.widthPopup ? `width-popup-${col.selectSettings?.widthPopup}` : "select",
+              placeholder: t("Select"),
+              id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
+              loadOptions: col.selectSettings?.loadOptions,
+              className: (0, import_classnames9.default)("react-select"),
+              onKeyDown: (e) => {
+                if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "span",
+            {
+              onClick: () => {
+                if (col.selectSettings?.handIconGroupClick) {
+                  col.selectSettings?.handIconGroupClick("right");
+                }
+              },
+              className: (0, import_classnames9.default)("input-group-text", { "d-none": !col.selectSettings?.iconGroup }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(icon_default, { iconName: col.selectSettings?.iconGroup ?? "", size: 16 })
+            }
+          )
+        ] });
+      case "select":
+        let valueSelect;
+        let options = [];
+        if (col.selectSettings?.optionsField) {
+          options = row[col.selectSettings?.optionsField] ? row[col.selectSettings?.optionsField] : [];
+        } else {
+          options = col.selectSettings?.options ? col.selectSettings?.validateOption ? col.selectSettings?.options.filter((item) => col.selectSettings?.validateOption(item, row)) : col.selectSettings?.options : [];
+        }
+        if (col.selectSettings?.isMulti) {
+          valueSelect = !isNullOrUndefined(row[col.field]) && row[col.field]?.length > 0 ? options?.filter((val) => row[col.field]?.includes(val[col.selectSettings?.fieldValue ?? "value"])) : [];
+        } else {
+          valueSelect = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? options?.find((val) => val[col.selectSettings?.fieldValue ?? "value"] === row[col.field]) : "";
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_react_select2.default,
+          {
+            menuPosition: "fixed",
+            id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
+            value: valueSelect,
+            options,
+            onChange: (val) => {
+              row[col.field] = col.selectSettings?.isMulti ? val?.map((item) => item[col.selectSettings?.fieldValue ?? "value"]) ?? [] : val ? val[col.selectSettings?.fieldValue ?? "value"] : void 0;
+              if (col.callback) {
+                col.callback(val, indexRow);
+              }
+              handleDataChange(row, col, indexRow);
+            },
+            menuPortalTarget: document.body,
+            isMulti: col.selectSettings?.isMulti ?? false,
+            isClearable: col.selectSettings?.isClearable ?? false,
+            classNamePrefix: col.selectSettings?.widthPopup ? `width-popup-${col.selectSettings?.widthPopup}` : "select",
+            placeholder: t("Select"),
+            className: (0, import_classnames9.default)("react-select", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            onKeyDown: (e) => {
+              if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
+              }
+            }
+          }
+        );
+      case "selectTree":
+        let valueSelectTree = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? [row[col.field]] : [];
+        const findItemInTree = (items, value) => {
+          for (let index = 0; index < items.length; index++) {
+            const item = items[index];
+            if (item[col.selectSettings?.fieldValue ? col.selectSettings?.fieldValue : "value"] === value) {
+              return { ...item };
+            } else if (item["children"]?.length > 0) {
+              const itemFilter = findItemInTree(item["children"], value);
+              if (itemFilter) {
+                return itemFilter;
+              }
+            }
+          }
+        };
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "div",
+          {
+            onKeyDown: (e) => {
+              if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
+              }
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              import_ej2_react_dropdowns.DropDownTreeComponent,
+              {
+                id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
+                fields: {
+                  dataSource: col.selectSettings?.options,
+                  value: col.selectSettings?.fieldValue ? col.selectSettings?.fieldValue : "value",
+                  text: "label",
+                  parentValue: "parentId",
+                  child: "children"
+                },
+                className: (0, import_classnames9.default)("select-tree", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+                allowFiltering: false,
+                value: valueSelectTree,
+                popupHeight: 250,
+                popupWidth: "auto",
+                changeOnBlur: false,
+                showClearButton: col.selectSettings?.isClearable,
+                change: (val) => {
+                  const item = val?.value?.length > 0 ? val?.value[0] : void 0;
+                  if (row[col.field] !== item) {
+                    row[col.field] = item;
+                    if (col.callback) {
+                      col.callback(item ? findItemInTree(col.selectSettings?.options, item) : void 0, indexRow);
+                    }
+                    handleDataChange(row, col, indexRow);
+                  }
+                },
+                open: () => {
+                  setOpenPopupTree(true);
+                },
+                close: () => {
+                  setOpenPopupTree(false);
+                }
+              }
+            )
+          }
+        );
+      case "checkbox":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_reactstrap8.Input,
+          {
+            checked: row[col.field],
+            id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
+            type: "checkbox",
+            className: "input-checkbox cursor-pointer",
+            style: { textAlign: col.textAlign ?? "left", marginTop: 6 },
+            onChange: (val) => {
+              row[col.field] = val.currentTarget.checked;
+              if (col.callback) {
+                col.callback(val.target.value, indexRow);
+              }
+              handleDataChange(row, col, indexRow);
+            },
+            onKeyDown: (e) => {
+              if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
+              }
+            }
+          }
+        );
+      case "numeric":
+        let valueCurrency = row[col.field];
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_reactstrap8.Input,
+          {
+            id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
+            style: { textAlign: col.textAlign, height: 29 },
+            defaultValue: formartNumberic(valueCurrency, decimalSeparator, thousandSeparator, col.numericSettings?.fraction),
+            className: (0, import_classnames9.default)("border-0 rounded-0 input-numeric", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            onChange: (val) => {
+              let newVal = "";
+              const flag = val.target?.value.startsWith("-");
+              if (val.target?.value.endsWith(decimalSeparator)) {
+                if ((val.target?.value.match(new RegExp(decimalSeparator === "," ? "," : "\\.", "g")) || []).length > 1 || col.numericSettings?.fraction === 0) {
+                  newVal = val.target?.value.slice(0, -1).replaceAll(thousandSeparator, "");
+                } else {
+                  newVal = val.target?.value.replaceAll(thousandSeparator, "");
+                }
+              } else {
+                newVal = val.target.value.replaceAll(new RegExp(`[^0-9${decimalSeparator === "," ? "," : "\\."}]`, "g"), "");
+              }
+              val.target.value = flag && col.numericSettings?.min !== 0 ? `-${formartNumberic(newVal, decimalSeparator, thousandSeparator, col.numericSettings?.fraction)}` : formartNumberic(newVal, decimalSeparator, thousandSeparator, col.numericSettings?.fraction);
+            },
+            onFocus: (e) => {
+              e.target.setSelectionRange(0, e.target.innerText.length - 1);
+            },
+            onBlur: (val) => {
+              let newVal = "";
+              const flag = val.target?.value.startsWith("-");
+              if (val.target?.value.endsWith(decimalSeparator)) {
+                newVal = val.target?.value.slice(0, -1).replaceAll(new RegExp(`[^0-9${decimalSeparator === "," ? "," : "\\."}]`, "g"), "");
+              } else {
+                newVal = val.target.value.replaceAll(new RegExp(`[^0-9${decimalSeparator === "," ? "," : "\\."}]`, "g"), "");
+              }
+              if (decimalSeparator === ",") {
+                newVal = newVal.replaceAll(",", ".");
+              }
+              let value = flag ? 0 - Number(newVal) : Number(newVal);
+              if (col.numericSettings?.max !== void 0 && value > col.numericSettings?.max) {
+                val.currentTarget.value = col.numericSettings?.max.toString();
+                value = col.numericSettings?.max;
+              } else if (col.numericSettings?.min !== void 0 && value < col.numericSettings?.min) {
+                value = col.numericSettings?.min;
+                val.currentTarget.value = col.numericSettings?.min.toString();
+              }
+              if (newVal !== row[col.field]) {
+                row[col.field] = value;
+                if (col.callback) {
+                  col.callback(val.target.value, indexRow);
+                }
+                handleDataChange(row, col, indexRow);
+              }
+            },
+            onKeyDown: (e) => {
+              if (e.key === "ArrowDown" || e.key === "NumpadEnter" || e.key === "ArrowUp" || e.key === "Enter" || e.key === "Tab") {
+                let newVal = "";
+                const flag = e.target?.value.startsWith("-");
+                if (e.target?.value.endsWith(decimalSeparator)) {
+                  newVal = e.target?.value.slice(0, -1).replaceAll(new RegExp(`[^0-9${decimalSeparator === "," ? "," : "\\."}]`, "g"), "");
+                } else {
+                  newVal = e.target.value.replaceAll(new RegExp(`[^0-9${decimalSeparator === "," ? "," : "\\."}]`, "g"), "");
+                }
+                if (decimalSeparator === ",") {
+                  newVal = newVal.replaceAll(",", ".");
+                }
+                let value = flag ? 0 - Number(newVal) : Number(newVal);
+                if (col.numericSettings?.max !== void 0 && value > col.numericSettings?.max) {
+                  e.target.value = col.numericSettings?.max.toString();
+                  value = col.numericSettings?.max;
+                } else if (col.numericSettings?.min !== void 0 && value < col.numericSettings?.min) {
+                  value = col.numericSettings?.min;
+                  e.target.value = col.numericSettings?.min.toString();
+                }
+                if (newVal !== row[col.field]) {
+                  row[col.field] = value;
+                  if (col.callback) {
+                    col.callback(e.target.value, indexRow);
+                  }
+                  handleDataChange(row, col, indexRow);
+                }
+              }
+              checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
+            },
+            onPaste: (e) => {
+              if (showBottomToolbar && !editDisable && !addDisable) {
+                pasteDataFromExcel(indexRow, indexCol);
+                e.preventDefault();
+              }
+            }
+          }
+        );
+      case "color":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { padding: "4px 8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_reactstrap8.Input,
+          {
+            type: "color",
+            value: row[col.field],
+            style: { textAlign: col.textAlign ?? "center", padding: 0, height: 23, border: "none" },
+            disabled: editDisable,
+            onChange: (val) => {
+              if (row[col.field] != val.target?.value) {
+                row[col.field] = val.target?.value;
+                if (col.callback) {
+                  col.callback(val.target.value, indexRow);
+                }
+                handleDataChange(row, col, indexRow);
+              }
+            },
+            onKeyDown: (val) => {
+              checkKeyDown(val, row, col, indexRow + 1, indexCol + 1);
+            }
+          },
+          `col-${indexRow}-${indexCol}`
+        ) });
+      case "form":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          edit_form_default,
+          {
+            id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
+            ...col.formSettings,
+            field: col.field,
+            displayValue: col.formSettings?.displayValue ? col.formSettings?.displayValue(row) : "",
+            placeholder: col.placeholder ? t(col.placeholder) : "",
+            rowData: row,
+            indexRow,
+            onChange: (val, field) => {
+              row = { ...row, ...val };
+              handleDataChange(row, col, indexRow);
+            },
+            invalid: col.validate && col.validate(row[col.field], row),
+            textAlign: col.textAlign,
+            onKeyDown: (e) => {
+              return checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
+            }
+          }
+        );
+      default:
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_reactstrap8.Input,
+          {
+            id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
+            style: { textAlign: col.textAlign, height: 29 },
+            defaultValue: isNullOrUndefined(row[col.field]) ? "" : row[col.field],
+            className: (0, import_classnames9.default)("border-0 rounded-0 input-element", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            onBlur: (val) => {
+              if (row[col.field] != val.target?.value) {
+                row[col.field] = val.target?.value;
+                if (col.callback) {
+                  col.callback(val.target.value, indexRow);
+                }
+                handleDataChange(row, col, indexRow);
+              }
+            },
+            onKeyDown: (e) => {
+              if (e.key === "ArrowDown" || e.key === "NumpadEnter" || e.key === "ArrowUp" || e.key === "Enter" || e.key === "Tab") {
+                if (row[col.field] != e.target?.value) {
+                  row[col.field] = e.target?.value;
+                  handleDataChange(row, col, indexRow);
+                  if (col.callback) {
+                    col.callback(e.target.value, indexRow);
+                  }
+                }
+              }
+              checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
+            },
+            onPaste: (e) => {
+              if (showBottomToolbar && !editDisable && !addDisable) {
+                pasteDataFromExcel(indexRow, indexCol);
+                e.preventDefault();
+              }
+            }
+          }
+        );
+    }
+  };
+  const handleCommandClick = (id, rowData, index) => {
+    if (commandClick) {
+      commandClick({ id, rowData, index });
+    }
+  };
+  const renderCommand = (commandItems, rowData, i) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react12.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "d-flex align-items-center", style: { columnGap: 10 }, children: commandItems.map((item, index) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        import_reactstrap8.Button,
+        {
+          tabIndex: -1,
+          style: { padding: "5px", minWidth: 45, height: "100%" },
+          className: (0, import_classnames9.default)("command-item", {
+            "btn-icon": item.tooltip === ""
+          }),
+          color: item.color ? item.color : "#000",
+          onClick: (e) => {
+            handleCommandClick(item.id, rowData, i);
+            if (i === indexFocus) {
+              setIndexFocus(void 0);
+            }
+            e.preventDefault();
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_ej2_react_popups.TooltipComponent, { content: t(item.tooltip ?? ""), children: item.icon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(icon_default, { iconName: item.icon, size: 16 }) })
+        },
+        `command-${index}`
+      );
+    }) }) });
+  };
+  const checkKeyDown = (e, row, col, indexRow, indexCol) => {
+    if (e.code === "ArrowRight") {
+      let newIndexCol = -1;
+      for (let i = indexCol; i < tableColumns.length; i++) {
+        if (tableColumns[i].editEnable && tableColumns[i].visible !== false && (!tableColumns[i].disabledCondition || !tableColumns[i].disabledCondition(row))) {
+          newIndexCol = i + 1;
+          break;
+        }
+      }
+      if (newIndexCol > -1) {
+        const element = document.getElementById(`${idTable}-col${newIndexCol}-row${indexRow}`);
+        if (element) {
+          if (element.className.includes("react-select") || element.className.includes("from-edit")) {
+            element.getElementsByTagName("input")[0]?.focus();
+          } else {
+            element.focus();
+          }
+          element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
+        }
+        e.preventDefault();
+        return e.code;
+      }
+    }
+    if (e.code === "ArrowLeft") {
+      let newIndexCol = -1;
+      for (let i = indexCol - 2; i >= 0; i--) {
+        if (tableColumns[i].editEnable && tableColumns[i].visible !== false && (!tableColumns[i].disabledCondition || !tableColumns[i].disabledCondition(row))) {
+          newIndexCol = i + 1;
+          break;
+        }
+      }
+      if (newIndexCol > -1) {
+        const element = document.getElementById(`${idTable}-col${newIndexCol}-row${indexRow}`);
+        if (element) {
+          if (element.className.includes("react-select") || element.className.includes("from-edit")) {
+            element.getElementsByTagName("input")[0]?.focus();
+          } else {
+            element.focus();
+          }
+          element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
+        }
+        e.preventDefault();
+        return e.code;
+      }
+    }
+    if (e.code === "ArrowUp") {
+      const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
+      if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--100__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--200__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--300__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--400__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--500__control--menu-is-open").length > 0)) {
+        if (indexRow > 1) {
+          setIndexFocus(indexRow - 2);
+          setTimeout(() => {
+            const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow - 1}`);
+            if (element2) {
+              if (element2.className.includes("react-select") || element2.className.includes("from-edit")) {
+                element2.getElementsByTagName("input")[0]?.focus();
+              } else {
+                element2.focus();
+              }
+            }
+          }, 100);
+          e.preventDefault();
+          return e.code;
+        }
+      }
+    }
+    if (e.code === "ArrowDown") {
+      const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
+      if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--100__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--200__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--300__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--400__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--500__control--menu-is-open").length > 0)) {
+        if (indexRow < dataSource?.length) {
+          setIndexFocus(indexRow);
+          setTimeout(() => {
+            const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow + 1}`);
+            if (element2) {
+              if (element2.className.includes("react-select") || element2.className.includes("from-edit")) {
+                element2.getElementsByTagName("input")[0]?.focus();
+              } else {
+                element2.focus();
+              }
+            }
+          }, 100);
+          e.preventDefault();
+          return e.code;
+        }
+      }
+    }
+    if (e.code === "Tab" && indexCol === columnLastEdit) {
+      if (indexRow === dataSource?.length) {
+        if (setDataSource) {
+          setDataSource([...dataSource, defaultValue ? { ...defaultValue } : {}]);
+        }
+        if (tableElement) {
+          setTimeout(() => {
+            tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
+          }, 100);
+        }
+        if (!(!editDisable && !addDisable)) {
+          return false;
+        }
+      }
+      setIndexFocus(indexRow);
+      setTimeout(() => {
+        const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${indexRow + 1}`);
+        if (element) {
+          if (element.className.includes("react-select") || element.className.includes("from-edit")) {
+            element.getElementsByTagName("input")[0]?.focus();
+          } else {
+            element.focus();
+            element.scrollIntoView();
+          }
+        }
+      }, 100);
+      e.preventDefault();
+    }
+    if ((e.code === "Enter" || e.code === "NumpadEnter") && (!editDisable && !addDisable)) {
+      const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
+      if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--100__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--200__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--300__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--400__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--500__control--menu-is-open").length > 0)) {
+        if (indexRow < dataSource?.length) {
+          setIndexFocus(indexRow);
+          setTimeout(() => {
+            const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow + 1}`);
+            if (element2) {
+              if (element2.className.includes("react-select") || element2.className.includes("from-edit")) {
+                element2.getElementsByTagName("input")[0]?.focus();
+              } else {
+                element2.focus();
+              }
+            }
+          }, 100);
+        } else {
+          handleAdd();
+        }
+        e.preventDefault();
+        return e.code;
+      }
+    }
+    if (e.code === "KeyD" && e.ctrlKey == true && (!editDisable && !addDisable)) {
+      handleDuplicate(dataSource[indexFocus ?? -1], indexRow);
+      e.preventDefault();
+      return e.code;
+    }
+    return "";
+  };
+  const onChangePage = (args) => {
+    if (args.newProp.currentPage === args.oldProp.currentPage) {
+      return;
+    }
+    setCurrentPage(args.currentPage);
+  };
+  const onChangePageSize = (args) => {
+    if (allowPaging) {
+      if (pageSize !== args.pageSize) {
+        setPageSize(args.pageSize);
+        setCurrentPage(1);
+      }
+    }
+  };
+  useOnClickOutside(gridRef, () => {
+    if (!openPopupTree) {
+      setTimeout(() => {
+        setIndexFocus(-1);
+      }, 50);
+    }
+  });
+  const handleAdd = () => {
+    if (setDataSource) {
+      setDataSource([...dataSource, defaultValue ? { ...defaultValue, id: generateUUID() } : {}]);
+    }
+    if (tableElement) {
+      setIndexFocus(dataSource?.length);
+      setTimeout(() => {
+        tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
+        const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${dataSource?.length + 1}`);
+        if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--100__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--200__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--300__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--400__control--menu-is-open").length > 0 || element.getElementsByClassName("width-popup--500__control--menu-is-open").length > 0)) {
+          if (element.className.includes("react-select") || element.className.includes("from-edit")) {
+            element.getElementsByTagName("input")[0]?.focus();
+          } else {
+            element.focus();
+          }
+        }
+      }, 100);
+    }
+  };
+  const deleteAll = () => {
+    if (!editDisable && !addDisable) {
+      setIndexFocus(-1);
+      if (setDataSource) {
+        setDataSource([]);
+      }
+    }
+  };
+  const handleDuplicate = (data, index) => {
+    if (showBottomToolbar && !editDisable && !addDisable) {
+      if (fieldKey) {
+        const newdata = { ...data };
+        fieldUniKey.forEach((item) => {
+          newdata[item] = defaultValue[item];
+        });
+        newdata[fieldKey] = defaultValue[fieldKey];
+        dataSource?.splice(index, 0, newdata);
+      } else {
+        dataSource?.splice(index, 0, { ...data });
+      }
+      if (setDataSource) {
+        setDataSource([...dataSource]);
+      }
+      if (tableElement && index === dataSource?.length) {
+        setTimeout(() => {
+          tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
+        }, 100);
+      }
+    }
+  };
+  const handleInsertAfter = () => {
+    if (showBottomToolbar && !editDisable && !addDisable) {
+      dataSource?.splice((indexFocus ?? -1) + 1, 0, { ...defaultValue });
+      if (setDataSource) {
+        setDataSource([...dataSource]);
+      }
+      if (tableElement && indexFocus === dataSource?.length) {
+        setTimeout(() => {
+          tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
+        }, 100);
+      }
+    }
+  };
+  const handleInsertBefore = () => {
+    if (showBottomToolbar && !editDisable && !addDisable) {
+      dataSource?.splice(indexFocus ?? -1, 0, { ...defaultValue });
+      if (setDataSource) {
+        setDataSource([...dataSource]);
+      }
+    }
+  };
+  const handleDeleteAll = () => {
+    if (showBottomToolbar && !editDisable && !addDisable) {
+      messageBoxConfirmDelete(t, deleteAll, "");
+    }
+  };
+  const pasteDataFromExcel = async (row, col) => {
+    const clipboard = await navigator.clipboard.readText();
+    const arrayRow = clipboard.trimEnd().split("\n");
+    arrayRow.forEach((item, indexRow) => {
+      const arrayCol = item.trimEnd().split("	");
+      let dataRow = dataSource[row + indexRow];
+      if (!dataRow) {
+        dataRow = { ...defaultValue };
+        dataSource?.push(dataRow);
+      }
+      arrayCol.forEach((element, index) => {
+        const column = tableColumns[col + index];
+        if ((!column.disabledCondition || !column.disabledCondition(row)) && column.editEnable) {
+          dataRow[column.field] = element;
+        }
+      });
+      rowChange(dataRow, row + indexRow, "");
+    });
+    handleRefeshRow();
+    if (setDataSource) {
+      setDataSource([...dataSource]);
+    }
+  };
+  (0, import_react12.useEffect)(() => {
+    if (setSelectedItem) {
+      if (isMulti) {
+        if (dataSource && selectedRows && selectedRows?.length !== selectedItem?.length) {
+          setSelectedItem([...selectedRows]);
+        }
+      } else {
+        if (dataSource && selectedRows?.length > 0) {
+          if (!selectedItem || selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
+            setSelectedItem({ ...selectedRows[0] });
+          }
+        } else {
+          setSelectedItem(void 0);
+        }
+      }
+    }
+  }, [selectedRows]);
+  (0, import_react12.useEffect)(() => {
+    if (!isMulti) {
+      if (dataSource && selectedItem && selectedItem[fieldKey]) {
+        if (selectedRows?.length === 0 || selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
+          setSelectedRows([selectedItem]);
+        }
+      } else {
+        setSelectedRows([]);
+      }
+    } else {
+      if (dataSource && selectedItem && selectedRows?.length !== selectedItem.length) {
+        setSelectedRows(selectedItem ? [...selectedItem] : []);
+      }
+    }
+  }, [selectedItem]);
+  const renderContentCol = (col, row, indexRow, indexCol, isSelected) => {
+    if (col.field === "command") {
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "td",
+        {
+          className: (0, import_classnames9.default)(`e-rowcell p-0 fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "e-active": isSelected && editDisable || indexFocus === indexRow }),
+          style: {
+            width: col.width,
+            minWidth: col.minWidth,
+            maxWidth: col.maxWidth,
+            left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
+            right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
+            textAlign: col.textAlign ? col.textAlign : "left"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-rowcell-div ", children: renderCommand(col.commandItems, row, indexRow) })
+        },
+        `col-${indexRow}-${indexCol}`
+      );
+    } else if (col.field === "#") {
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "td",
+        {
+          className: (0, import_classnames9.default)(`e-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "e-active": isSelected && editDisable || indexFocus === indexRow }),
+          tabIndex: Number(`${indexRow}${indexCol}`),
+          style: {
+            width: 40,
+            minWidth: 40,
+            maxWidth: 40,
+            left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
+            right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
+            textAlign: "center"
+          },
+          onCopy: (e) => {
+            if (!editDisable && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
+              navigator.clipboard.writeText(JSON.stringify(row));
+              notificationSuccess(t("CopySuccessful"));
+              e.stopPropagation();
+            }
+          },
+          onPaste: (e) => {
+            if (!editDisable && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
+              navigator.clipboard.readText().then((rs) => {
+                dataSource[indexRow] = JSON.parse(rs);
+                if (fieldKey) {
+                  dataSource[indexRow][fieldKey] = defaultValue[fieldKey];
+                }
+                if (setDataSource) {
+                  setDataSource([...dataSource]);
+                }
+                notificationSuccess(t("PasteSuccessful"));
+              }).catch((ex) => {
+                alert(ex);
+              });
+              e.stopPropagation();
+            }
+          },
+          onClick: (e) => {
+            if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
+              if (!editDisable && indexRow != indexFocus) {
+                setIndexFocus(indexRow);
+              }
+              e.stopPropagation();
+            }
+          },
+          onKeyDown: (e) => {
+            if (e.code === "KeyD" && e.ctrlKey == true && (!editDisable && !addDisable) && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
+              handleDuplicate(row, indexRow);
+              e.preventDefault();
+              e.stopPropagation();
+            }
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-rowcell-div pt-50", children: indexRow + 1 })
+        },
+        `col-${indexRow}-${indexCol}`
+      );
+    } else if (col.field === "checkbox") {
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "td",
+        {
+          className: (0, import_classnames9.default)(`e-rowcell p-0 fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "e-active": isSelected && editDisable || indexFocus === indexRow }),
+          style: {
+            width: col.width,
+            minWidth: col.minWidth,
+            maxWidth: col.maxWidth,
+            left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
+            right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
+            textAlign: col.textAlign ? col.textAlign : "center"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "div",
+            {
+              className: "e-rowcell-div cursor-pointer",
+              onClick: (e) => {
+                if (selectEnable) {
+                  const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
+                  if (index > -1) {
+                    if (isMulti) {
+                      selectedRows?.splice(index, 1);
+                      setSelectedRows([...selectedRows]);
+                    } else {
+                      setSelectedRows([]);
+                    }
+                  } else {
+                    if (isMulti) {
+                      setSelectedRows([...selectedRows, row]);
+                    } else {
+                      setSelectedRows([row]);
+                    }
+                  }
+                  e.stopPropagation();
+                }
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                import_reactstrap8.Input,
+                {
+                  checked: isSelected,
+                  type: "checkbox",
+                  className: "cursor-pointer",
+                  onChange: () => {
+                  },
+                  style: { textAlign: col.textAlign ?? "center", marginTop: 6 }
+                }
+              )
+            }
+          )
+        },
+        `col-${indexRow}-${indexCol}`
+      );
+    } else {
+      let value = row[col.field];
+      if (col.editType === "numeric" || col.editTypeCondition && col.editTypeCondition(row) === "numeric") {
+        value = formartNumberic(row[col.field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) ?? 0;
+      } else if (col.editType === "date") {
+        value = value ? (0, import_moment.default)(value).format("DD/MM/yyyy") : "";
+      } else if (col.editType === "datetime") {
+        value = value ? (0, import_moment.default)(value).format("DD/MM/yyyy HH:mm") : "";
+      }
+      const typeDis = !editDisable && (indexFocus === indexRow || col.editType === "checkbox") && (!col.disabledCondition || !col.disabledCondition(row)) ? col.editEnable ? 1 : col.template ? 2 : 3 : col.template ? 2 : 3;
+      const errorMessage = typeDis === 1 || col.field === "" || !col.validate ? "" : col.validate(row[col.field], row);
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react12.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "td",
+        {
+          className: (0, import_classnames9.default)(`e-rowcell fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "e-active": isSelected && editDisable || indexFocus === indexRow }),
+          style: {
+            left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
+            right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
+            padding: 0,
+            textAlign: col.textAlign ? col.textAlign : "left"
+          },
+          onFocus: (e) => {
+            if (!editDisable && indexRow != indexFocus) {
+              setIndexFocus(indexRow);
+            }
+            e.stopPropagation();
+          },
+          onClick: (e) => {
+            if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
+              if (!editDisable && indexRow != indexFocus) {
+                setIndexFocus(indexRow);
+              }
+              if (selectEnable && editDisable) {
+                const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
+                if (index > -1) {
+                  if (isMulti) {
+                    selectedRows?.splice(index, 1);
+                    setSelectedRows([...selectedRows]);
+                  } else {
+                    setSelectedRows([]);
+                  }
+                } else {
+                  if (isMulti) {
+                    setSelectedRows([...selectedRows, row]);
+                  } else {
+                    setSelectedRows([row]);
+                  }
+                }
+              }
+              e.stopPropagation();
+            }
+          },
+          title: `${value ?? ""}`,
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            "div",
+            {
+              id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
+              className: (0, import_classnames9.default)("e-rowcell-div", { "is-invalid": errorMessage }),
+              style: { padding: typeDis !== 1 ? errorMessage ? "2px 10px" : "6px 10px" : 2 },
+              children: [
+                typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : typeDis === 2 ? col.template(row, indexRow) : value,
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "icon-table", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_ej2_react_popups.TooltipComponent, { className: (0, import_classnames9.default)("cursor-pointer text-primary", { "d-none": !errorMessage }), content: errorMessage, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_becoxy_icons4.AlertCircle, { fontSize: 16.5 }) }) })
+              ]
+            }
+          )
+        },
+        `col-${indexRow}-${indexCol}`
+      ) }, indexCol);
+    }
+  };
+  const renderHeaderCol = (col, indexCol) => {
+    if (col.field === "checkbox") {
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react12.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "th",
+        {
+          className: (0, import_classnames9.default)(`e-headercell fix-${col.fixedType}`, { "cell-fixed": col.fixedType }),
+          style: {
+            width: col.width,
+            padding: 0,
+            minWidth: col.minWidth,
+            left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
+            right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
+            maxWidth: col.maxWidth
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "div",
+            {
+              style: { textAlign: "center", justifyContent: col.textAlign ?? "center" },
+              className: (0, import_classnames9.default)("e-headercell-div"),
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                import_reactstrap8.Input,
+                {
+                  checked: selectedRows?.length >= dataSource?.length && dataSource?.length > 0,
+                  type: "checkbox",
+                  className: (0, import_classnames9.default)("cursor-pointer", { "d-none": !isMulti }),
+                  style: { textAlign: col.textAlign ?? "center", marginTop: 6 },
+                  onChange: (e) => {
+                    if (selectEnable) {
+                      if (e.target.checked) {
+                        const arr = dataSource?.map((item) => {
+                          return item;
+                        });
+                        setSelectedRows(arr);
+                      } else {
+                        setSelectedRows([]);
+                      }
+                    }
+                  }
+                }
+              )
+            }
+          )
+        }
+      ) }, `header-${indexCol}`);
+    } else if (col.field === "#") {
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        import_react12.Fragment,
+        {
+          children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "th",
+            {
+              className: (0, import_classnames9.default)(`e-headercell fix-${col.fixedType}`, { "cell-fixed": col.fixedType }),
+              style: {
+                padding: 0,
+                width: 40,
+                minWidth: 40,
+                maxWidth: 40,
+                left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
+                right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "div",
+                {
+                  title: t(col.headerText ?? ""),
+                  style: { textAlign: "center", justifyContent: col.textAlign ?? "center" },
+                  className: "e-headercell-div",
+                  children: t(col.headerText ?? "")
+                }
+              )
+            }
+          )
+        },
+        `header-${indexCol}`
+      );
+    } else {
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        import_react12.Fragment,
+        {
+          children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "th",
+            {
+              className: (0, import_classnames9.default)(`e-headercell fix-${col.fixedType}`, { "cell-fixed": col.fixedType }),
+              style: {
+                width: col.width,
+                padding: 0,
+                minWidth: col.minWidth,
+                left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
+                right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
+                maxWidth: col.maxWidth
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "div",
+                {
+                  title: t(col.headerText ?? ""),
+                  style: { textAlign: "center", justifyContent: col.textAlign ?? "left" },
+                  className: "e-headercell-div",
+                  children: t(col.headerText ?? "")
+                }
+              )
+            }
+          )
+        },
+        `header-${indexCol}`
+      );
+    }
+  };
+  const renderFooterCol = (col, indexCol) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react12.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "td",
+      {
+        className: (0, import_classnames9.default)(`e-summarycell p-0 px-50 fix-${col.fixedType}`, { "cell-fixed": col.fixedType }),
+        style: {
+          height: 30,
+          fontSize: 14,
+          fontWeight: 600,
+          left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
+          right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
+          width: col.width,
+          minWidth: col.minWidth,
+          maxWidth: col.maxWidth,
+          whiteSpace: "nowrap",
+          textAlign: col.textAlign ? col.textAlign : "left"
+        },
+        children: col.haveSum === true && col.editType === "numeric" ? formartNumberic(dataSource?.reduce(function(accumulator, currentValue) {
+          return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
+        }, 0), decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) : ""
+      }
+    ) }, `summarycell-${indexCol}`);
+  };
+  const renderToolbarTop = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { id: "table_custom_top_toolbar", className: "e-control e-toolbar", "aria-orientation": "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "e-toolbar-items e-tbar-pos", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-toolbar-left", children: toolbarTopOption?.map((item, index) => {
+        return item.align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-toolbar-item e-template", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) : "";
+      }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-toolbar-center", children: toolbarTopOption?.map((item, index) => {
+        return item.align === "center" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-toolbar-item e-template", "aria-disabled": "false", children: item.template() }, `toolbar-top-center-${index}`) : "";
+      }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-toolbar-right", children: toolbarTopOption?.map((item, index) => {
+        return item.align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-toolbar-item e-template", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) : "";
+      }) })
+    ] }) });
+  };
+  const renderToolbarBottom = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { id: "table_custom_bottom_toolbar", className: "e-control e-toolbar e-lib e-keyboard ", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "e-toolbar-items e-tbar-pos", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "e-toolbar-left", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("e-toolbar-item e-template", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
+        (indexFocus ?? -1) > -1 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("e-toolbar-item e-template", { "d-none": editDisable || addDisable || duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: () => {
+            handleDuplicate(dataSource[indexFocus ?? -1], indexFocus ?? -1);
+          }, className: "d-flex", children: t("Duplicate") }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("e-toolbar-item e-template", { "d-none": editDisable || addDisable || insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("e-toolbar-item e-template", { "d-none": editDisable || addDisable || insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: " " }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("e-toolbar-item e-template", { "d-none": editDisable || addDisable || deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
+        toolbarBottomOptions?.map((item, index) => {
+          return item.align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-toolbar-item e-template", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : "";
+        })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-toolbar-center", children: toolbarBottomOptions?.map((item, index) => {
+        return item.align === "center" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-toolbar-item e-template", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : "";
+      }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "e-toolbar-right", children: [
+        toolbarBottomOptions?.map((item, index) => {
+          return item.align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-toolbar-item e-template", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : "";
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("e-toolbar-item e-template me-25"), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_becoxy_icons4.Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("e-toolbar-item e-template me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_reactstrap8.UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.DropdownToggle, { href: "/", tag: "a", color: "info", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_becoxy_icons4.Info, { className: "cursor-pointer" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.DropdownMenu, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "d-flex flex-column p-50 py-25", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\xE2n b\u1EA3n" }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { fontSize: 13 }, children: "Ch\u1ECDn \xF4 v\xE0 Ctrl + V \u0111\u1EC3 d\xE1n th\xF4ng tin t\u1EEB excel" }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\xE9p h\xE0ng" }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + V \u0111\u1EC3  d\xE1n h\xE0ng" })
+          ] }) })
+        ] }) })
+      ] })
+    ] }) });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "table-edit-custom", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "e-grid e-default e-bothlines", children: [
+        showTopToolbar ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: renderToolbarTop() }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { ref: gridRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-gridcontent", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: tableElement, className: "e-content", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("table", { style: { width: "100%" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("thead", { className: "e-gridheader", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { className: "e-row", role: "row", children: tableColumns.map((col, index) => {
+              return renderHeaderCol(col, index);
+            }) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { className: "rowgroup", style: { overflowY: "scroll" }, children: dataSource?.map((row, indexRow) => {
+              const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
+              return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "tr",
+                {
+                  className: "e-row",
+                  children: tableColumns.map((col, indexCol) => {
+                    return renderContentCol(col, row, indexRow, indexCol, isSelected);
+                  })
+                },
+                `row-${indexRow}`
+              );
+            }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tfoot", { className: "e-gridfoot", children: haveSum == true ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { className: "e-row", children: tableColumns.map((col, index) => {
+              return renderFooterCol(col, index);
+            }) }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {}) })
+          ] }) }) }),
+          showBottomToolbar ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: renderToolbarBottom() }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {})
+        ] })
+      ] }),
+      allowPaging ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        import_ej2_react_grids2.PagerComponent,
+        {
+          locale: lang,
+          click: onChangePage,
+          pageSize,
+          currentPage,
+          pageSizes: [20, 30, 50, 100],
+          totalRecordsCount: totalItem ? totalItem : void 0,
+          pageCount: 5,
+          dropDownChanged: onChangePageSize
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {})
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      sidebar_setting_column_default,
+      {
+        handleSidebar: () => {
+          setOpenPopupSetupColumn(!openPopupSetupColumn);
+        },
+        openSidebar: openPopupSetupColumn,
+        column: tableColumns,
+        setColumn: setTableColumns
+      }
+    )
+  ] });
+});
+var table_default = TableEdit;
+
+// index.ts
+var Table_edit_default = table_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  messageBoxConfirm,
+  messageBoxConfirm2,
+  messageBoxConfirmApprove,
+  messageBoxConfirmDelete,
+  messageBoxError,
+  messageHtmlBoxError,
+  notificationError,
+  notificationSuccess
+});