react-table-edit 0.5.5 → 0.5.7

package/dist/index.mjs

@@ -1,8 +1,8 @@
 // test-app/src/component/table/index.tsx
-import { Fragment as Fragment13, forwardRef as forwardRef2, useEffect as useEffect7, useImperativeHandle, useRef as useRef2, useState as useState6 } from "react";
-import { Button as Button3, DropdownMenu as DropdownMenu2, DropdownToggle as DropdownToggle2, Input as Input6, UncontrolledDropdown, UncontrolledTooltip } from "reactstrap";
-import classnames6 from "classnames";
-import { useTranslation as useTranslation9 } from "react-i18next";
+import { Fragment as Fragment15, forwardRef as forwardRef3, useEffect as useEffect8, useImperativeHandle, useRef as useRef3, useState as useState7 } from "react";
+import { Button as Button4, DropdownMenu as DropdownMenu3, DropdownToggle as DropdownToggle3, Input as Input7, UncontrolledDropdown, UncontrolledTooltip as UncontrolledTooltip2 } from "reactstrap";
+import classnames7 from "classnames";
+import { useTranslation as useTranslation10 } from "react-i18next";
 import Select3 from "react-select";
 import AsyncSelect from "react-select/async";
 import { AlertCircle, Info as Info2, Settings } from "becoxy-icons";
@@ -293,7 +293,7 @@ var IconCustom = (props) => {
 var icon_default = IconCustom;
 
 // test-app/src/component/table/index.tsx
-import moment from "moment";
+import moment2 from "moment";
 
 // test-app/src/component/edit-form/index.tsx
 import { forwardRef, useEffect as useEffect3, useRef, useState as useState2 } from "react";
@@ -1470,7 +1470,8 @@ var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOpt
               onChangePage({ totalItem, pageSize, currentPage: index, old: currentPage });
             },
             children: index
-          }
+          },
+          `page-${index}`
         )
       );
     }
@@ -1526,10 +1527,533 @@ var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOpt
   ] }) });
 };
 
-// test-app/src/component/table/index.tsx
+// test-app/src/component/select-table/index.tsx
+import { forwardRef as forwardRef2, Fragment as Fragment13, useEffect as useEffect7, useRef as useRef2, useState as useState6 } from "react";
+import {
+  DropdownItem as DropdownItem2,
+  DropdownMenu as DropdownMenu2,
+  DropdownToggle as DropdownToggle2,
+  Dropdown as Dropdown2,
+  Button as Button3,
+  UncontrolledTooltip,
+  Input as Input6
+} from "reactstrap";
+import { useTranslation as useTranslation9 } from "react-i18next";
+import classnames6 from "classnames";
+import moment from "moment";
+import { Plus as Plus2 } from "becoxy-icons";
 import { Fragment as Fragment14, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
-var TableEdit = forwardRef2((props, ref) => {
+var defaultMaxHeight = 300;
+var SelectTable = forwardRef2((props, ref) => {
+  const {
+    id,
+    menuWidth,
+    invalid,
+    onKeyDown,
+    placeholder,
+    textAlign,
+    options,
+    columns,
+    decimalSeparator,
+    thousandSeparator,
+    onChange,
+    value,
+    fieldValue,
+    fieldLabel,
+    loadOptions,
+    maxHeight,
+    handleAdd,
+    isClearable,
+    component,
+    isMulti
+  } = props;
+  const selectTableRef = useRef2();
+  const selectMenuTableRef = useRef2();
+  const inputRef = useRef2();
+  const [dropdownOpen, setDropdownOpen] = useState6(false);
+  const [indexFocus, setIndexFocus] = useState6(-1);
+  const [isFocus, setIsFocus] = useState6(false);
+  const [searchTerm, setSearchTerm] = useState6("");
+  const [optionsLoad, setOptionsLoad] = useState6();
   const { t } = useTranslation9();
+  const defaultColumns = [
+    {
+      field: "key",
+      headerText: "Code",
+      width: 100,
+      maxWidth: 120,
+      minWidth: 80
+    },
+    {
+      headerText: "Name",
+      field: "label",
+      width: 150,
+      maxWidth: 200,
+      minWidth: 250
+    }
+  ];
+  const closeMenu = () => {
+    setDropdownOpen(false);
+  };
+  useEffect7(() => {
+    if (dropdownOpen) {
+      if (value) {
+        if (selectMenuTableRef) {
+          const elementFocus = document.getElementById(`row-select-table-${(optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"])}`);
+          if (elementFocus) {
+            const rect = elementFocus.getBoundingClientRect();
+            const parentRect = selectMenuTableRef.current?.getBoundingClientRect();
+            if (rect.top < parentRect.top || rect.bottom > parentRect.bottom) {
+              selectMenuTableRef.current.scrollTo({
+                top: elementFocus.offsetTop,
+                behavior: "smooth"
+              });
+            }
+          }
+        }
+      }
+    }
+  }, [dropdownOpen]);
+  let timeOutBlur;
+  useEffect7(() => {
+    if (inputRef) {
+      inputRef.current.addEventListener("blur", function() {
+        timeOutBlur = setTimeout(() => {
+          if (document.activeElement?.className !== "select-input" && !selectTableRef.current?.contains(document.activeElement)) {
+            setDropdownOpen(false);
+            setIsFocus(false);
+          }
+        }, 100);
+      });
+      inputRef.current.addEventListener("focus", function() {
+        if (!isFocus) {
+          setIsFocus(true);
+        }
+      });
+    }
+  }, [inputRef]);
+  useEffect7(() => {
+    if (searchTerm && !dropdownOpen) {
+      setDropdownOpen(true);
+      setIndexFocus(0);
+    }
+  }, [searchTerm]);
+  const handleOpenClose = () => {
+    setSearchTerm("");
+    if (dropdownOpen) {
+      closeMenu();
+    } else {
+      setDropdownOpen(true);
+    }
+  };
+  const listKeyUse = ["Escape", "Space", "Enter", "Tab", "NumpadEnter", "ArrowDown", "ArrowUp", "F9"];
+  const handleOnKeyDown = (e) => {
+    let key = "";
+    if (onKeyDown && (!dropdownOpen || !listKeyUse.includes(e.code))) {
+      key = onKeyDown(e);
+      if (key === "ArrowRight" || key === "ArrowLeft") {
+        closeMenu();
+      }
+    }
+    let flag = false;
+    if (!key) {
+      if (e.code === "F9") {
+        handleAdd();
+        flag = true;
+      } else if (e.code === "Escape" || e.code === "Space") {
+        if (dropdownOpen) {
+          onChange((optionsLoad ? optionsLoad : options)[indexFocus]);
+        }
+        if (!searchTerm) {
+          handleOpenClose();
+          flag = true;
+        }
+      } else if (e.code === "Enter" || e.code === "Tab" || e.code === "NumpadEnter") {
+        if (dropdownOpen) {
+          onChange((optionsLoad ? optionsLoad : options)[indexFocus]);
+          handleOpenClose();
+          flag = true;
+        }
+      } else if (e.code === "ArrowDown") {
+        if (dropdownOpen) {
+          let newIndex = 0;
+          if (indexFocus >= 0) {
+            newIndex = indexFocus + 1;
+          } else if (value) {
+            newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((e2) => e2[fieldValue ?? "value"] === value[fieldValue ?? "value"]) + 1;
+          }
+          if (newIndex < (optionsLoad ? optionsLoad : options).length) {
+            setIndexFocus(newIndex);
+            checkIfElementIsOutOfScroll(0);
+          } else {
+            setIndexFocus(0);
+            checkIfElementIsOutOfScroll(1);
+          }
+          flag = true;
+        } else {
+          handleOpenClose();
+          flag = true;
+        }
+      } else if (e.code === "ArrowUp") {
+        if (dropdownOpen) {
+          let newIndex = 0;
+          if (indexFocus >= 0) {
+            newIndex = indexFocus - 1;
+          } else if (value) {
+            newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((e2) => e2[fieldValue ?? "value"] === value[fieldValue ?? "value"]) - 1;
+          }
+          if (newIndex >= 0) {
+            setIndexFocus(newIndex);
+            checkIfElementIsOutOfScroll(2);
+          } else {
+            setIndexFocus((optionsLoad ? optionsLoad : options).length - 1);
+            checkIfElementIsOutOfScroll(3);
+          }
+          flag = true;
+        }
+      }
+    }
+    if (flag) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  };
+  const checkIfElementIsOutOfScroll = (flag) => {
+    if (selectMenuTableRef) {
+      const elementFocus = document.getElementById(`row-select-table-${indexFocus}`);
+      if (elementFocus) {
+        const rect = elementFocus.getBoundingClientRect();
+        const parentRect = selectMenuTableRef.current?.getBoundingClientRect();
+        if (flag === 1) {
+          scrollToElement(selectMenuTableRef.current, 0);
+        } else if (flag === 3) {
+          scrollToElement(selectMenuTableRef.current, selectMenuTableRef.current.scrollHeight);
+        } else if (flag === 0 && rect.bottom + 30 > parentRect.bottom) {
+          scrollToElement(selectMenuTableRef.current, elementFocus.offsetTop - selectMenuTableRef.current.offsetTop - parentRect.height + rect.height + 50);
+        } else if (flag === 2 && rect.top < parentRect.top + 50) {
+          scrollToElement(selectMenuTableRef.current, elementFocus.offsetTop - 65);
+        }
+      }
+    }
+  };
+  let timeOutElement;
+  const scrollToElement = (elemment, top) => {
+    clearTimeout(timeOutElement);
+    timeOutElement = setTimeout(() => {
+      elemment.scrollTo({
+        top
+      });
+    }, 100);
+  };
+  const renderHeaderCol = (col, indexCol) => {
+    return /* @__PURE__ */ jsx13(
+      Fragment13,
+      {
+        children: col.visible !== false && /* @__PURE__ */ jsx13(
+          "th",
+          {
+            className: classnames6(
+              `r-select-headercell fix-${col.fixedType}`,
+              { "cell-fixed": col.fixedType }
+            ),
+            style: {
+              width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width,
+              minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
+              top: `${0 * 35}px`,
+              maxWidth: col.maxWidth
+            },
+            children: /* @__PURE__ */ jsx13(
+              "div",
+              {
+                role: "textbox",
+                title: t(col.headerText ?? ""),
+                style: {
+                  height: `${1 * 35}px`,
+                  justifyContent: col.textAlign ?? "left"
+                },
+                className: "r-select-headercell-div",
+                children: t(col.headerText ?? "")
+              }
+            )
+          }
+        )
+      },
+      `header-select-${indexCol}`
+    );
+  };
+  const checkSearch = (keyword, data, columnsSearch) => {
+    if (!keyword || columnsSearch.length === 0) {
+      return true;
+    }
+    for (let index = 0; index < columnsSearch.length; index++) {
+      const key = columnsSearch[index].field.trim();
+      if (data[key] && data[key].toString().trim().toLowerCase().includes(keyword.trim().toLowerCase())) {
+        return true;
+      }
+    }
+    return false;
+  };
+  const callbackLoadOption = (rs) => {
+    setOptionsLoad(rs);
+  };
+  useEffect7(() => {
+    if (!searchTerm) {
+      setOptionsLoad(void 0);
+    }
+  }, [searchTerm]);
+  const checkOverflow = (element) => {
+    return element && element.scrollWidth > element.clientWidth;
+  };
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      className: "react-select-table",
+      ref,
+      id,
+      children: /* @__PURE__ */ jsx13("div", { ref: selectTableRef, children: /* @__PURE__ */ jsxs12(
+        Dropdown2,
+        {
+          isOpen: dropdownOpen,
+          toggle: () => {
+          },
+          children: [
+            /* @__PURE__ */ jsxs12(
+              DropdownToggle2,
+              {
+                onClick: () => {
+                  inputRef?.current.focus();
+                  clearTimeout(timeOutBlur);
+                  handleOpenClose();
+                },
+                tabIndex: 0,
+                tag: "div",
+                className: classnames6("select-table-control", { "r-select-is-focus": isFocus }, { "r-select-is-invalid": invalid }),
+                children: [
+                  /* @__PURE__ */ jsxs12("div", { className: "select-table-container", children: [
+                    isMulti ? /* @__PURE__ */ jsx13(Fragment14, { children: /* @__PURE__ */ jsx13("div", { className: classnames6("select-value is-mutil", { "d-none": searchTerm }), children: value?.map((ele, index) => {
+                      return /* @__PURE__ */ jsxs12("span", { children: [
+                        index === 0 ? "" : ", ",
+                        ele[fieldLabel ?? "label"]
+                      ] }, index);
+                    }) }) }) : /* @__PURE__ */ jsx13(Fragment14, { children: /* @__PURE__ */ jsxs12("div", { className: classnames6("select-value", { "d-none": searchTerm }), children: [
+                      value ? value[fieldLabel ?? "label"] : "",
+                      " "
+                    ] }) }),
+                    /* @__PURE__ */ jsx13("div", { className: classnames6("select-placeholder", { "d-none": (isMulti ? value?.length > 0 : value) || searchTerm }), children: placeholder }),
+                    /* @__PURE__ */ jsx13("div", { className: "input-container", children: /* @__PURE__ */ jsx13(
+                      "input",
+                      {
+                        style: { textAlign: textAlign ?? "left" },
+                        ref: inputRef,
+                        className: classnames6("select-input"),
+                        value: searchTerm,
+                        onChange: (val) => {
+                          if (loadOptions && val.target.value) {
+                            loadOptions(val.target.value, callbackLoadOption);
+                          }
+                          setSearchTerm(val.target.value);
+                        },
+                        onKeyDown: (e) => handleOnKeyDown(e)
+                      }
+                    ) })
+                  ] }),
+                  /* @__PURE__ */ jsx13(
+                    "div",
+                    {
+                      className: classnames6("select-table-indicator cursor-pointer", { "d-none": !isClearable || !value }),
+                      onClick: (e) => {
+                        onChange(isMulti ? [] : void 0);
+                        e.stopPropagation();
+                      },
+                      children: /* @__PURE__ */ jsx13("svg", { height: "20", width: "20", style: { color: "#c4c4c4" }, viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", className: "css-tj5bde-Svg", children: /* @__PURE__ */ jsx13("path", { d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z" }) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx13("div", { className: "select-table-indicator", children: /* @__PURE__ */ jsx13("svg", { height: "20", width: "20", style: { color: dropdownOpen ? "#000000af" : "#c4c4c4" }, viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", className: "css-tj5bde-Svg", children: /* @__PURE__ */ jsx13("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx13(
+              DropdownMenu2,
+              {
+                container: component,
+                className: "formula-dropdown icon-dropdown p-0",
+                style: {
+                  width: menuWidth ? menuWidth : "min-content",
+                  position: "fixed",
+                  zIndex: 9999
+                },
+                children: /* @__PURE__ */ jsx13(DropdownItem2, { className: classnames6("p-0 menu-select-table"), style: { borderRadius: "6px" }, tag: "div", header: true, children: /* @__PURE__ */ jsx13(
+                  "div",
+                  {
+                    onMouseDown: (e) => {
+                      inputRef?.current.focus();
+                      clearTimeout(timeOutBlur);
+                      e.preventDefault();
+                    },
+                    children: /* @__PURE__ */ jsxs12("div", { className: "r-select-grid", children: [
+                      /* @__PURE__ */ jsx13("div", { className: "r-select-gridtable", ref: selectMenuTableRef, style: { maxHeight: maxHeight ?? defaultMaxHeight }, children: /* @__PURE__ */ jsxs12("table", { style: { width: "100%" }, children: [
+                        /* @__PURE__ */ jsx13("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ jsxs12("tr", { className: "r-select-row", role: "row", children: [
+                          isMulti && /* @__PURE__ */ jsx13("th", { className: classnames6(`r-select-headercell`), style: { width: 40, top: `0px` }, children: /* @__PURE__ */ jsx13(
+                            "div",
+                            {
+                              style: { justifyContent: "center" },
+                              className: classnames6("r-select-headercell-div"),
+                              children: /* @__PURE__ */ jsx13(
+                                Input6,
+                                {
+                                  checked: (optionsLoad ? optionsLoad : options).length > 0 && value?.length >= (optionsLoad ? optionsLoad : options).length,
+                                  type: "checkbox",
+                                  className: classnames6("cursor-pointer", { "d-none": !isMulti }),
+                                  style: { textAlign: "center", marginTop: 6 },
+                                  onChange: (e) => {
+                                    if (isMulti) {
+                                      if (e.target.checked) {
+                                        onChange((optionsLoad ? optionsLoad : options).map((item) => {
+                                          return item;
+                                        }));
+                                      } else {
+                                        onChange([]);
+                                      }
+                                    }
+                                  }
+                                }
+                              )
+                            }
+                          ) }),
+                          (columns ? columns : defaultColumns).map((col, index) => {
+                            return renderHeaderCol(col, index);
+                          })
+                        ] }) }),
+                        (optionsLoad ? optionsLoad : options).length > 0 ? /* @__PURE__ */ jsx13(Fragment14, { children: /* @__PURE__ */ jsx13("tbody", { className: "r-select-gridcontent", children: (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
+                          if (loadOptions || checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
+                            const refRow = useRef2(null);
+                            const isSelected = isMulti && value?.some((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
+                            return /* @__PURE__ */ jsxs12(
+                              "tr",
+                              {
+                                id: `row-select-table-${indexRow}`,
+                                className: classnames6("r-select-row", { "last-row": indexRow === (optionsLoad ? optionsLoad : options).length - 1 }, { "fisrt-row": indexRow === 0 }),
+                                children: [
+                                  isMulti && /* @__PURE__ */ jsx13(
+                                    "td",
+                                    {
+                                      className: classnames6(`r-select-rowcell`, { "r-select-move": indexFocus === indexRow, "r-select-active": !isMulti && value && value[fieldValue ?? "value"] === row[fieldValue ?? "value"] }),
+                                      style: { width: 40, textAlign: "center", padding: 0, paddingBottom: 6 },
+                                      onClick: (e) => {
+                                        if (isMulti) {
+                                          const index = value?.findIndex((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
+                                          if (index > -1) {
+                                            value?.splice(index, 1);
+                                            onChange(value);
+                                          } else {
+                                            if (value) {
+                                              value?.push(row);
+                                              onChange(value);
+                                            } else {
+                                              onChange([row]);
+                                            }
+                                          }
+                                          e.stopPropagation();
+                                        }
+                                      },
+                                      children: /* @__PURE__ */ jsx13(
+                                        Input6,
+                                        {
+                                          checked: isSelected,
+                                          type: "checkbox",
+                                          className: "cursor-pointer",
+                                          onChange: () => {
+                                          },
+                                          style: { textAlign: "center", marginTop: 6 }
+                                        }
+                                      )
+                                    }
+                                  ),
+                                  (columns ? columns : defaultColumns).map((col, indexCol) => {
+                                    let valueDisplay = row[col.field];
+                                    if (col.type === "numeric" || col.typeCondition && col.typeCondition(row) === "numeric") {
+                                      valueDisplay = formartNumberic(row[col.field], decimalSeparator ?? ".", thousandSeparator ?? ",", col.fraction ?? 0, true) ?? 0;
+                                    } else if (col.type === "date") {
+                                      valueDisplay = valueDisplay ? moment(valueDisplay).format("DD/MM/yyyy") : "";
+                                    } else if (col.type === "datetime") {
+                                      valueDisplay = valueDisplay ? moment(valueDisplay).format("DD/MM/yyyy HH:mm") : "";
+                                    }
+                                    return /* @__PURE__ */ jsxs12(Fragment13, { children: [
+                                      col.visible !== false && /* @__PURE__ */ jsx13(
+                                        "td",
+                                        {
+                                          id: `content-select-${indexRow}-${indexCol}`,
+                                          ref: refRow,
+                                          className: classnames6(`r-select-rowcell`, { "r-select-move": indexFocus === indexRow, "r-select-active": !isMulti && value && value[fieldValue ?? "value"] === row[fieldValue ?? "value"] }),
+                                          style: {
+                                            minWidth: col.minWidth,
+                                            width: col.width,
+                                            maxWidth: col.maxWidth,
+                                            textAlign: col.textAlign ? col.textAlign : "left"
+                                          },
+                                          onClick: (e) => {
+                                            if (isMulti) {
+                                              const index = value?.findIndex((x) => x[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
+                                              if (index > -1) {
+                                                value?.splice(index, 1);
+                                                onChange(value);
+                                              } else {
+                                                if (value) {
+                                                  value?.push(row);
+                                                  onChange(value);
+                                                } else {
+                                                  onChange([row]);
+                                                }
+                                              }
+                                            } else {
+                                              onChange(row);
+                                              closeMenu();
+                                            }
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                          },
+                                          onMouseMove: (e) => {
+                                            if (indexRow !== indexFocus) {
+                                              setIndexFocus(indexRow);
+                                            }
+                                            e.stopPropagation();
+                                          },
+                                          children: col.template ? col.template(row, indexRow) : valueDisplay
+                                        },
+                                        `col-${indexRow}-${indexCol}`
+                                      ),
+                                      checkOverflow(refRow.current) && /* @__PURE__ */ jsx13(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-select-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay })
+                                    ] }, indexCol);
+                                  })
+                                ]
+                              },
+                              `row-${indexRow}`
+                            );
+                          }
+                        }) }) }) : /* @__PURE__ */ jsx13("div", { className: "r-no-data", children: t("No data available.") })
+                      ] }) }),
+                      /* @__PURE__ */ jsx13("div", { className: "r-select-footer", children: /* @__PURE__ */ jsxs12(Button3, { outline: true, color: "primary", className: "r-btn-add d-flex align-items-center", onClick: handleAdd, children: [
+                        /* @__PURE__ */ jsx13(Plus2, { className: "me-50", fontSize: 16 }),
+                        t("AddNew"),
+                        " (F9)"
+                      ] }) })
+                    ] })
+                  }
+                ) })
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  );
+});
+var select_table_default = SelectTable;
+
+// test-app/src/component/table/index.tsx
+import { Fragment as Fragment16, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+var TableEdit = forwardRef3((props, ref) => {
+  const { t } = useTranslation10();
   const {
     idTable,
     dataSource,
@@ -1562,31 +2086,31 @@ var TableEdit = forwardRef2((props, ref) => {
       refeshFocusRow: handleRefeshRow
     };
   });
-  const [refreshRow, setRefreshRow] = useState6(false);
-  const [indexFocus, setIndexFocus] = useState6();
-  const [selectedRows, setSelectedRows] = useState6([]);
-  const [headerColumns, setHeaderColumns] = useState6([[]]);
-  const [contentColumns, setContentColumns] = useState6([]);
-  const [levelCol, setLevelCol] = useState6(0);
-  const [columnFistEdit, setColumnFistEdit] = useState6(0);
-  const [columnLastEdit, setColumnlastEdit] = useState6(0);
-  const [objWidthFix, setObjWidthFix] = useState6({});
-  const [openPopupTree, setOpenPopupTree] = useState6(false);
-  const [openPopupSetupColumn, setOpenPopupSetupColumn] = useState6(false);
-  const [searchTerm, setSearchTerm] = useState6("");
-  const tableElement = useRef2(null);
-  const gridRef = useRef2();
+  const [refreshRow, setRefreshRow] = useState7(false);
+  const [indexFocus, setIndexFocus] = useState7();
+  const [selectedRows, setSelectedRows] = useState7([]);
+  const [headerColumns, setHeaderColumns] = useState7([[]]);
+  const [contentColumns, setContentColumns] = useState7([]);
+  const [levelCol, setLevelCol] = useState7(0);
+  const [columnFistEdit, setColumnFistEdit] = useState7(0);
+  const [columnLastEdit, setColumnlastEdit] = useState7(0);
+  const [objWidthFix, setObjWidthFix] = useState7({});
+  const [openPopupTree, setOpenPopupTree] = useState7(false);
+  const [openPopupSetupColumn, setOpenPopupSetupColumn] = useState7(false);
+  const [searchTerm, setSearchTerm] = useState7("");
+  const tableElement = useRef3(null);
+  const gridRef = useRef3();
   let totalCount = dataSource.length;
   const pagingClient = pagingSetting?.allowPaging && (pagingSetting?.pagingClient || !(editDisable || addDisable));
   const searchClient = searchSetting?.searchEnable && (searchSetting?.searchClient || !(editDisable || addDisable));
   const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? "id";
   const fieldUniKey = columns.filter((item) => item.isUnikey === true)?.map((item) => item.field);
-  useEffect7(() => {
+  useEffect8(() => {
     if (pagingClient && pagingSetting.setCurrentPage && Math.ceil(totalCount / (pagingSetting?.pageSize ?? 1)) < (pagingSetting.currentPage ?? 1)) {
       pagingSetting.setCurrentPage(1);
     }
   }, [dataSource]);
-  useEffect7(() => {
+  useEffect8(() => {
     let indexFirst = -1;
     let indexlast = -1;
     let letfWidthFix = 0;
@@ -1619,7 +2143,7 @@ var TableEdit = forwardRef2((props, ref) => {
     setColumnFistEdit(indexFirst + 1);
     setColumnlastEdit(indexlast + 1);
   }, [contentColumns]);
-  useEffect7(() => {
+  useEffect8(() => {
     const arrHeaderColumns = [];
     const arrContentColumns = [];
     let headerLevelRow = 0;
@@ -1636,7 +2160,7 @@ var TableEdit = forwardRef2((props, ref) => {
     setHeaderColumns(arrHeaderColumns);
     setContentColumns(arrContentColumns);
   }, [columns]);
-  useEffect7(() => {
+  useEffect8(() => {
     const arrHeaderColumns = [];
     const arrContentColumns = [];
     let headerLevelRow = 0;
@@ -1747,7 +2271,7 @@ var TableEdit = forwardRef2((props, ref) => {
     }
   };
   const searchTemplate = () => {
-    return /* @__PURE__ */ jsx13(Fragment13, { children: /* @__PURE__ */ jsx13("div", { className: "me-50 r-search", children: /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(Fragment15, { children: /* @__PURE__ */ jsx14("div", { className: "me-50 r-search", children: /* @__PURE__ */ jsx14(
       react_input_default,
       {
         style: { width: "230px" },
@@ -1768,12 +2292,12 @@ var TableEdit = forwardRef2((props, ref) => {
   const renderEdit = (row, col, indexRow, indexCol) => {
     switch (col?.editTypeCondition ? col?.editTypeCondition(row) : col.editType) {
       case "date":
-        return /* @__PURE__ */ jsx13(
-          Input6,
+        return /* @__PURE__ */ jsx14(
+          Input7,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
-            value: row[col.field] ? moment(row[col.field]).format("yyyy-MM-DD") : row[col.field],
+            value: row[col.field] ? moment2(row[col.field]).format("yyyy-MM-DD") : row[col.field],
             onChange: (val) => {
               row[col.field] = val.target.value;
               if (col.callback) {
@@ -1781,7 +2305,7 @@ var TableEdit = forwardRef2((props, ref) => {
               }
               handleDataChange(row, col, indexRow);
             },
-            className: classnames6("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: classnames7("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             type: "date",
             max: "9999-12-31",
             onKeyDown: (e) => {
@@ -1791,12 +2315,12 @@ var TableEdit = forwardRef2((props, ref) => {
           }
         );
       case "datetime":
-        return /* @__PURE__ */ jsx13(
-          Input6,
+        return /* @__PURE__ */ jsx14(
+          Input7,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
-            value: row[col.field] ? moment(row[col.field]).format("yyyy-MM-DD HH:MM") : row[col.field],
+            value: row[col.field] ? moment2(row[col.field]).format("yyyy-MM-DD HH:MM") : row[col.field],
             onChange: (val) => {
               row[col.field] = val.target.value;
               if (col.callback) {
@@ -1804,7 +2328,7 @@ var TableEdit = forwardRef2((props, ref) => {
               }
               handleDataChange(row, col, indexRow);
             },
-            className: classnames6("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: classnames7("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             type: "datetime-local",
             max: "9999-12-31T23:59",
             onKeyDown: (e) => {
@@ -1824,8 +2348,8 @@ var TableEdit = forwardRef2((props, ref) => {
         if (!valueAsyncSelect && col.selectSettings?.defaultValue) {
           valueAsyncSelect = col.selectSettings?.defaultValue(row);
         }
-        return /* @__PURE__ */ jsxs12("div", { className: classnames6("d-flex select-group", { "is-invalid": col.validate && col.validate(row[col.field], row) }), children: [
-          /* @__PURE__ */ jsx13(
+        return /* @__PURE__ */ jsxs13("div", { className: classnames7("d-flex select-group", { "is-invalid": col.validate && col.validate(row[col.field], row) }), children: [
+          /* @__PURE__ */ jsx14(
             AsyncSelect,
             {
               menuPosition: "fixed",
@@ -1844,23 +2368,23 @@ var TableEdit = forwardRef2((props, ref) => {
               placeholder: t("Select"),
               id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
               loadOptions: col.selectSettings?.loadOptions,
-              className: classnames6("react-select"),
+              className: classnames7("react-select"),
               onKeyDown: (e) => {
                 if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
                 }
               }
             }
           ),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(
             "span",
             {
               onClick: () => {
-                if (col.selectSettings?.handIconGroupClick) {
-                  col.selectSettings?.handIconGroupClick("right");
+                if (col.selectSettings?.handAddNew) {
+                  col.selectSettings?.handAddNew("right");
                 }
               },
-              className: classnames6("input-group-text", { "d-none": !col.selectSettings?.iconGroup }),
-              children: /* @__PURE__ */ jsx13(icon_default, { iconName: col.selectSettings?.iconGroup ?? "", size: 16 })
+              className: classnames7("input-group-text", { "d-none": !col.selectSettings?.iconGroup }),
+              children: /* @__PURE__ */ jsx14(icon_default, { iconName: col.selectSettings?.iconGroup ?? "", size: 16 })
             }
           )
         ] });
@@ -1877,7 +2401,7 @@ var TableEdit = forwardRef2((props, ref) => {
         } else {
           valueSelect = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? options?.find((val) => val[col.selectSettings?.fieldValue ?? "value"] === row[col.field]) : "";
         }
-        return /* @__PURE__ */ jsx13(
+        return /* @__PURE__ */ jsx14(
           Select3,
           {
             menuPosition: "fixed",
@@ -1896,7 +2420,56 @@ var TableEdit = forwardRef2((props, ref) => {
             isClearable: col.selectSettings?.isClearable ?? false,
             classNamePrefix: col.selectSettings?.widthPopup ? `select-${col.selectSettings?.widthPopup}` : "select",
             placeholder: t("Select"),
-            className: classnames6("react-select", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: classnames7("react-select", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            onKeyDown: (e) => {
+              if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
+              }
+            }
+          }
+        );
+      case "selectTable":
+        let valueSelectTable;
+        let optionsSelectTable = [];
+        if (col.selectSettings?.optionsField) {
+          optionsSelectTable = row[col.selectSettings?.optionsField] ? row[col.selectSettings?.optionsField] : [];
+        } else {
+          optionsSelectTable = col.selectSettings?.options ? col.selectSettings?.validateOption ? col.selectSettings?.options.filter((item) => col.selectSettings?.validateOption(item, row)) : col.selectSettings?.options : [];
+        }
+        if (col.selectSettings?.isMulti) {
+          valueSelectTable = !isNullOrUndefined(row[col.field]) && row[col.field]?.length > 0 ? optionsSelectTable?.filter((val) => row[col.field]?.includes(val[col.selectSettings?.fieldValue ?? "value"])) : [];
+        } else {
+          valueSelectTable = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? optionsSelectTable?.find((val) => val[col.selectSettings?.fieldValue ?? "value"] === row[col.field]) : "";
+        }
+        return /* @__PURE__ */ jsx14(
+          select_table_default,
+          {
+            id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
+            value: valueSelectTable,
+            options: optionsSelectTable,
+            rowData: row,
+            onChange: (val) => {
+              row[col.field] = col.selectSettings?.isMulti ? val?.map((item) => item[col.selectSettings?.fieldValue ?? "value"]) ?? [] : val ? val[col.selectSettings?.fieldValue ?? "value"] : void 0;
+              if (col.callback) {
+                col.callback(val, indexRow);
+              }
+              handleDataChange(row, col, indexRow);
+            },
+            fieldValue: col.selectSettings?.fieldValue,
+            fieldLabel: col.selectSettings?.fieldLabel,
+            component: tableElement,
+            columns: col.selectSettings?.columns,
+            isClearable: col.selectSettings?.isClearable ?? false,
+            decimalSeparator,
+            thousandSeparator,
+            placeholder: t("Select"),
+            loadOptions: col.selectSettings?.loadOptions,
+            field: col.field,
+            handleAdd: col.selectSettings?.handAddNew,
+            isMulti: col.selectSettings?.isMulti,
+            invalid: col.validate && col.validate(row[col.field], row),
+            maxHeight: col.selectSettings?.heightPopup ? Number(col.selectSettings?.heightPopup) : void 0,
+            menuWidth: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : void 0,
+            textAlign: col.textAlign ?? "left",
             onKeyDown: (e) => {
               if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
               }
@@ -1918,14 +2491,14 @@ var TableEdit = forwardRef2((props, ref) => {
             }
           }
         };
-        return /* @__PURE__ */ jsx13(
+        return /* @__PURE__ */ jsx14(
           "div",
           {
             onKeyDown: (e) => {
               if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
               }
             },
-            children: /* @__PURE__ */ jsx13(
+            children: /* @__PURE__ */ jsx14(
               DropDownTreeComponent,
               {
                 id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -1936,7 +2509,7 @@ var TableEdit = forwardRef2((props, ref) => {
                   parentValue: "parentId",
                   child: "children"
                 },
-                className: classnames6("select-tree", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+                className: classnames7("select-tree", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
                 allowFiltering: false,
                 value: valueSelectTree,
                 popupHeight: 250,
@@ -1964,8 +2537,8 @@ var TableEdit = forwardRef2((props, ref) => {
           }
         );
       case "checkbox":
-        return /* @__PURE__ */ jsx13(
-          Input6,
+        return /* @__PURE__ */ jsx14(
+          Input7,
           {
             checked: row[col.field],
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -1987,13 +2560,13 @@ var TableEdit = forwardRef2((props, ref) => {
         );
       case "numeric":
         let valueCurrency = row[col.field];
-        return /* @__PURE__ */ jsx13(
-          Input6,
+        return /* @__PURE__ */ jsx14(
+          Input7,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
             defaultValue: formartNumberic(valueCurrency, decimalSeparator, thousandSeparator, col.numericSettings?.fraction),
-            className: classnames6("border-0 rounded-0 input-numeric", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: classnames7("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("-");
@@ -2077,8 +2650,8 @@ var TableEdit = forwardRef2((props, ref) => {
           }
         );
       case "color":
-        return /* @__PURE__ */ jsx13("div", { style: { padding: "4px 8px" }, children: /* @__PURE__ */ jsx13(
-          Input6,
+        return /* @__PURE__ */ jsx14("div", { style: { padding: "4px 8px" }, children: /* @__PURE__ */ jsx14(
+          Input7,
           {
             type: "color",
             value: row[col.field],
@@ -2100,7 +2673,7 @@ var TableEdit = forwardRef2((props, ref) => {
           `col-${indexRow}-${indexCol}`
         ) });
       case "form":
-        return /* @__PURE__ */ jsx13(
+        return /* @__PURE__ */ jsx14(
           edit_form_default,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -2122,13 +2695,13 @@ var TableEdit = forwardRef2((props, ref) => {
           }
         );
       default:
-        return /* @__PURE__ */ jsx13(
-          Input6,
+        return /* @__PURE__ */ jsx14(
+          Input7,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
             defaultValue: isNullOrUndefined(row[col.field]) ? "" : row[col.field],
-            className: classnames6("border-0 rounded-0 input-element", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: classnames7("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;
@@ -2166,14 +2739,14 @@ var TableEdit = forwardRef2((props, ref) => {
     }
   };
   const renderCommand = (commandItems, rowData, i) => {
-    return /* @__PURE__ */ jsx13(Fragment13, { children: /* @__PURE__ */ jsx13("div", { className: "d-flex align-items-center", style: { columnGap: 10 }, children: commandItems.map((item, index) => {
-      return /* @__PURE__ */ jsxs12(
-        Button3,
+    return /* @__PURE__ */ jsx14(Fragment15, { children: /* @__PURE__ */ jsx14("div", { className: "d-flex align-items-center", style: { columnGap: 10 }, children: commandItems.map((item, index) => {
+      return /* @__PURE__ */ jsxs13(
+        Button4,
         {
           id: `command-item-${i}`,
           tabIndex: -1,
           style: { padding: "5px", minWidth: 45, height: "100%" },
-          className: classnames6("command-item", {
+          className: classnames7("command-item", {
             "btn-icon": item.tooltip === ""
           }),
           color: item.color ? item.color : "#000",
@@ -2185,8 +2758,8 @@ var TableEdit = forwardRef2((props, ref) => {
             e.preventDefault();
           },
           children: [
-            item.icon && /* @__PURE__ */ jsx13(icon_default, { iconName: item.icon, size: 16 }),
-            /* @__PURE__ */ jsx13(UncontrolledTooltip, { className: "r-tooltip", target: `command-item-${i}`, place: "top", children: t(item.tooltip ?? "") })
+            item.icon && /* @__PURE__ */ jsx14(icon_default, { iconName: item.icon, size: 16 }),
+            /* @__PURE__ */ jsx14(UncontrolledTooltip2, { className: "r-tooltip", target: `command-item-${i}`, place: "top", children: t(item.tooltip ?? "") })
           ]
         },
         `command-${index}`
@@ -2443,7 +3016,7 @@ var TableEdit = forwardRef2((props, ref) => {
       }
     }
   };
-  useEffect7(() => {
+  useEffect8(() => {
     setIndexFocus(-1);
     if (setSelectedItem) {
       if (isMulti) {
@@ -2470,7 +3043,7 @@ var TableEdit = forwardRef2((props, ref) => {
       }
     }
   }, [selectedRows]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!isMulti) {
       if (dataSource && selectedItem && selectedItem[fieldKey]) {
         if (selectedRows?.length === 0 || selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
@@ -2487,10 +3060,10 @@ var TableEdit = forwardRef2((props, ref) => {
   }, [selectedItem]);
   const renderContentCol = (col, row, indexRow, indexCol, isSelected) => {
     if (col.field === "command") {
-      return col.visible !== false && /* @__PURE__ */ jsx13(
+      return col.visible !== false && /* @__PURE__ */ jsx14(
         "td",
         {
-          className: classnames6(
+          className: classnames7(
             `r-rowcell p-0 fix-${col.fixedType}`,
             { "cell-fixed": col.fixedType },
             { "r-active": isSelected && editDisable || indexFocus === indexRow }
@@ -2500,15 +3073,15 @@ var TableEdit = forwardRef2((props, ref) => {
             right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
             textAlign: col.textAlign ? col.textAlign : "left"
           },
-          children: /* @__PURE__ */ jsx13("div", { className: "r-rowcell-div ", children: renderCommand(col.commandItems, row, indexRow) })
+          children: /* @__PURE__ */ jsx14("div", { className: "r-rowcell-div ", children: renderCommand(col.commandItems, row, indexRow) })
         },
         `col-${indexRow}-${indexCol}`
       );
     } else if (col.field === "#") {
-      return col.visible !== false && /* @__PURE__ */ jsx13(
+      return col.visible !== false && /* @__PURE__ */ jsx14(
         "td",
         {
-          className: classnames6(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
+          className: classnames7(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
           tabIndex: Number(`${indexRow}${indexCol}`),
           style: {
             left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
@@ -2552,15 +3125,15 @@ var TableEdit = forwardRef2((props, ref) => {
               e.stopPropagation();
             }
           },
-          children: /* @__PURE__ */ jsx13("div", { className: "r-rowcell-div pt-50", children: indexRow + 1 })
+          children: /* @__PURE__ */ jsx14("div", { className: "r-rowcell-div pt-50", children: indexRow + 1 })
         },
         `col-${indexRow}-${indexCol}`
       );
     } else if (col.field === "checkbox") {
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(
         "td",
         {
-          className: classnames6(
+          className: classnames7(
             `r-rowcell p-0 fix-${col.fixedType}`,
             { "cell-fixed": col.fixedType },
             { "r-active": isSelected && editDisable || indexFocus === indexRow }
@@ -2570,7 +3143,7 @@ var TableEdit = forwardRef2((props, ref) => {
             right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
             textAlign: col.textAlign ? col.textAlign : "center"
           },
-          children: /* @__PURE__ */ jsx13(
+          children: /* @__PURE__ */ jsx14(
             "div",
             {
               className: "r-rowcell-div cursor-pointer",
@@ -2594,8 +3167,8 @@ var TableEdit = forwardRef2((props, ref) => {
                   e.stopPropagation();
                 }
               },
-              children: /* @__PURE__ */ jsx13(
-                Input6,
+              children: /* @__PURE__ */ jsx14(
+                Input7,
                 {
                   checked: isSelected,
                   type: "checkbox",
@@ -2615,16 +3188,16 @@ var TableEdit = forwardRef2((props, ref) => {
       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 ? moment(value).format("DD/MM/yyyy") : "";
+        value = value ? moment2(value).format("DD/MM/yyyy") : "";
       } else if (col.editType === "datetime") {
-        value = value ? moment(value).format("DD/MM/yyyy HH:mm") : "";
+        value = value ? moment2(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__ */ jsx13(Fragment13, { children: col.visible !== false && /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(Fragment15, { children: col.visible !== false && /* @__PURE__ */ jsx14(
         "td",
         {
-          className: classnames6(
+          className: classnames7(
             `r-rowcell fix-${col.fixedType}`,
             { "cell-fixed": col.fixedType },
             { "r-active": isSelected && editDisable || indexFocus === indexRow }
@@ -2666,28 +3239,28 @@ var TableEdit = forwardRef2((props, ref) => {
               e.stopPropagation();
             }
           },
-          children: /* @__PURE__ */ jsx13(
+          children: /* @__PURE__ */ jsx14(
             "div",
             {
-              className: classnames6("r-rowcell-div"),
+              className: classnames7("r-rowcell-div"),
               style: {
                 width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width
               },
-              children: /* @__PURE__ */ jsxs12(
+              children: /* @__PURE__ */ jsxs13(
                 "div",
                 {
                   id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
-                  className: classnames6("r-rowcell-content", { "r-is-invalid": errorMessage }),
+                  className: classnames7("r-rowcell-content", { "r-is-invalid": errorMessage }),
                   style: {
                     margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2,
                     color: col.editType === "numeric" && Number(row[col.field]) < 0 ? "red" : ""
                   },
                   children: [
-                    typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : /* @__PURE__ */ jsx13("div", { id: `content-${indexRow}-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }),
-                    /* @__PURE__ */ jsx13("span", { id: `error-${indexRow}-${indexCol}`, className: classnames6("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: /* @__PURE__ */ jsx13(AlertCircle, { fontSize: 15.5 }) }),
-                    !(typeDis === 1 && !refreshRow) && col.haveToolTip && /* @__PURE__ */ jsx13(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${indexRow}-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : value }),
-                    /* @__PURE__ */ jsx13(
-                      UncontrolledTooltip,
+                    typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : /* @__PURE__ */ jsx14("div", { id: `content-${idTable}-${indexRow}-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }),
+                    /* @__PURE__ */ jsx14("span", { id: `error-${indexRow}-${indexCol}`, className: classnames7("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: /* @__PURE__ */ jsx14(AlertCircle, { fontSize: 15.5 }) }),
+                    !(typeDis === 1 && !refreshRow) && checkOverflow(indexRow, indexCol) && /* @__PURE__ */ jsx14(UncontrolledTooltip2, { className: "r-tooltip", autohide: false, target: `content-${idTable}-${indexRow}-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : value }),
+                    /* @__PURE__ */ jsx14(
+                      UncontrolledTooltip2,
                       {
                         target: `error-${indexRow}-${indexCol}`,
                         className: "r-tooltip tooltip-error",
@@ -2704,14 +3277,18 @@ var TableEdit = forwardRef2((props, ref) => {
       ) }, indexCol);
     }
   };
+  const checkOverflow = (indexRow, indexCol) => {
+    const element = document.getElementById(`content-${idTable}-${indexRow}-${indexCol}`);
+    return element && element.scrollWidth > element.clientWidth;
+  };
   const renderHeaderCol = (col, indexCol, indexParent) => {
     if (col.field === "checkbox") {
-      return /* @__PURE__ */ jsx13(Fragment13, { children: col.visible !== false && /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(Fragment15, { children: col.visible !== false && /* @__PURE__ */ jsx14(
         "th",
         {
           rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
           colSpan: col.columns?.length ?? 1,
-          className: classnames6(
+          className: classnames7(
             `r-headercell fix-${col.fixedType}`,
             { "cell-fixed": col.fixedType }
           ),
@@ -2723,17 +3300,17 @@ var TableEdit = forwardRef2((props, ref) => {
             minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
             maxWidth: col.maxWidth
           },
-          children: /* @__PURE__ */ jsx13(
+          children: /* @__PURE__ */ jsx14(
             "div",
             {
               style: { justifyContent: col.textAlign ?? "left" },
-              className: classnames6("r-headercell-div"),
-              children: /* @__PURE__ */ jsx13(
-                Input6,
+              className: classnames7("r-headercell-div"),
+              children: /* @__PURE__ */ jsx14(
+                Input7,
                 {
                   checked: totalCount > 0 && selectedRows?.length >= totalCount,
                   type: "checkbox",
-                  className: classnames6("cursor-pointer", { "d-none": !isMulti }),
+                  className: classnames7("cursor-pointer", { "d-none": !isMulti }),
                   style: { textAlign: col.textAlign ?? "left", marginTop: 6 },
                   onChange: (e) => {
                     if (selectEnable) {
@@ -2753,15 +3330,15 @@ var TableEdit = forwardRef2((props, ref) => {
         }
       ) }, `header-${indexCol}`);
     } else if (col.field === "#") {
-      return /* @__PURE__ */ jsx13(
-        Fragment13,
+      return /* @__PURE__ */ jsx14(
+        Fragment15,
         {
-          children: col.visible !== false && /* @__PURE__ */ jsx13(
+          children: col.visible !== false && /* @__PURE__ */ jsx14(
             "th",
             {
               rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
               colSpan: col.columns?.length ?? 1,
-              className: classnames6(
+              className: classnames7(
                 `r-headercell fix-${col.fixedType}`,
                 { "cell-fixed": col.fixedType }
               ),
@@ -2773,7 +3350,7 @@ var TableEdit = forwardRef2((props, ref) => {
                 left: col.fixedType === "left" ? objWidthFix[col.index ?? 0] : void 0,
                 right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0
               },
-              children: /* @__PURE__ */ jsx13(
+              children: /* @__PURE__ */ jsx14(
                 "div",
                 {
                   title: t(col.headerText ?? ""),
@@ -2788,15 +3365,15 @@ var TableEdit = forwardRef2((props, ref) => {
         `header-${indexCol}`
       );
     } else {
-      return /* @__PURE__ */ jsx13(
-        Fragment13,
+      return /* @__PURE__ */ jsx14(
+        Fragment15,
         {
-          children: col.visible !== false && /* @__PURE__ */ jsx13(
+          children: col.visible !== false && /* @__PURE__ */ jsx14(
             "th",
             {
               rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
               colSpan: col.columns?.length ?? 1,
-              className: classnames6(
+              className: classnames7(
                 `r-headercell fix-${col.fixedType}`,
                 { "cell-fixed": col.fixedType }
               ),
@@ -2808,7 +3385,7 @@ var TableEdit = forwardRef2((props, ref) => {
                 right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0,
                 maxWidth: col.maxWidth
               },
-              children: /* @__PURE__ */ jsx13(
+              children: /* @__PURE__ */ jsx14(
                 "div",
                 {
                   role: "textbox",
@@ -2826,10 +3403,10 @@ var TableEdit = forwardRef2((props, ref) => {
     }
   };
   const renderFooterCol = (col, indexCol) => {
-    return /* @__PURE__ */ jsx13(Fragment13, { children: col.visible !== false && /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(Fragment15, { children: col.visible !== false && /* @__PURE__ */ jsx14(
       "td",
       {
-        className: classnames6(
+        className: classnames7(
           `p-0 px-50 r-footer fix-${col.fixedType}`,
           { "cell-fixed": col.fixedType }
         ),
@@ -2841,56 +3418,56 @@ var TableEdit = forwardRef2((props, ref) => {
           maxWidth: col.maxWidth,
           textAlign: col.textAlign ? col.textAlign : "left"
         },
-        children: /* @__PURE__ */ jsx13("div", { className: "r-footer-div", children: col.haveSum === true && col.editType === "numeric" ? formartNumberic(dataSource.reduce(function(accumulator, currentValue) {
+        children: /* @__PURE__ */ jsx14("div", { className: "r-footer-div", children: col.haveSum === true && col.editType === "numeric" ? formartNumberic(dataSource.reduce(function(accumulator, currentValue) {
           return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
         }, 0), decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) : "" })
       }
     ) }, `summarycell-${indexCol}`);
   };
   const renderToolbarTop = () => {
-    return /* @__PURE__ */ jsx13("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: /* @__PURE__ */ jsxs12("div", { className: "r-toolbar-items", children: [
-      /* @__PURE__ */ jsx13("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
-        return item.align === "left" ? /* @__PURE__ */ jsx13("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) : "";
+    return /* @__PURE__ */ jsx14("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: /* @__PURE__ */ jsxs13("div", { className: "r-toolbar-items", children: [
+      /* @__PURE__ */ jsx14("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
+        return item.align === "left" ? /* @__PURE__ */ jsx14("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) : "";
       }) }),
-      /* @__PURE__ */ jsx13("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
-        return item.align === "center" ? /* @__PURE__ */ jsx13("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-center-${index}`) : "";
+      /* @__PURE__ */ jsx14("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
+        return item.align === "center" ? /* @__PURE__ */ jsx14("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-center-${index}`) : "";
       }) }),
-      /* @__PURE__ */ jsx13("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
-        return item.align === "right" ? /* @__PURE__ */ jsx13("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) : "";
+      /* @__PURE__ */ jsx14("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
+        return item.align === "right" ? /* @__PURE__ */ jsx14("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) : "";
       }) })
     ] }) });
   };
   const renderToolbarBottom = () => {
-    return /* @__PURE__ */ jsx13("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: /* @__PURE__ */ jsxs12("div", { className: "r-toolbar-items", children: [
-      /* @__PURE__ */ jsxs12("div", { className: "r-toolbar-left", children: [
-        /* @__PURE__ */ jsx13("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx13(Button3, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
-        (indexFocus ?? -1) > -1 ? /* @__PURE__ */ jsxs12(Fragment14, { children: [
-          /* @__PURE__ */ jsx13("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx13(Button3, { color: "success", outline: true, onClick: () => {
+    return /* @__PURE__ */ jsx14("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: /* @__PURE__ */ jsxs13("div", { className: "r-toolbar-items", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "r-toolbar-left", children: [
+        /* @__PURE__ */ jsx14("div", { className: classnames7("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx14(Button4, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
+        (indexFocus ?? -1) > -1 ? /* @__PURE__ */ jsxs13(Fragment16, { children: [
+          /* @__PURE__ */ jsx14("div", { className: classnames7("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx14(Button4, { color: "success", outline: true, onClick: () => {
             handleDuplicate(dataSource[indexFocus ?? -1], indexFocus ?? -1);
           }, className: "d-flex", children: t("Duplicate") }) }),
-          /* @__PURE__ */ jsx13("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx13(Button3, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
-          /* @__PURE__ */ jsx13("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx13(Button3, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
-        ] }) : /* @__PURE__ */ jsx13(Fragment14, { children: " " }),
-        /* @__PURE__ */ jsx13("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx13(Button3, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
+          /* @__PURE__ */ jsx14("div", { className: classnames7("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx14(Button4, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
+          /* @__PURE__ */ jsx14("div", { className: classnames7("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx14(Button4, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
+        ] }) : /* @__PURE__ */ jsx14(Fragment16, { children: " " }),
+        /* @__PURE__ */ jsx14("div", { className: classnames7("r-toolbar-item", { "d-none": editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx14(Button4, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
         toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
-          return item.align === "left" ? /* @__PURE__ */ jsx13("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : "";
+          return item.align === "left" ? /* @__PURE__ */ jsx14("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : "";
         })
       ] }),
-      /* @__PURE__ */ jsx13("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
-        return item.align === "center" ? /* @__PURE__ */ jsx13("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : "";
+      /* @__PURE__ */ jsx14("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
+        return item.align === "center" ? /* @__PURE__ */ jsx14("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : "";
       }) }),
-      /* @__PURE__ */ jsxs12("div", { className: "r-toolbar-right", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "r-toolbar-right", children: [
         toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
-          return item.align === "right" ? /* @__PURE__ */ jsx13("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : "";
+          return item.align === "right" ? /* @__PURE__ */ jsx14("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : "";
         }),
-        /* @__PURE__ */ jsx13("div", { className: classnames6("r-toolbar-item me-25", { "d-none": headerColumns.length > 1 }), "aria-disabled": "false", children: /* @__PURE__ */ jsx13(Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
-        /* @__PURE__ */ jsx13("div", { className: classnames6("r-toolbar-item me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsxs12(UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
-          /* @__PURE__ */ jsx13(DropdownToggle2, { href: "/", tag: "a", color: "info", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx13(Info2, { className: "cursor-pointer" }) }),
-          /* @__PURE__ */ jsx13(DropdownMenu2, { children: /* @__PURE__ */ jsxs12("div", { className: "d-flex flex-column p-50 py-25", children: [
-            /* @__PURE__ */ jsx13("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__ */ jsx13("div", { style: { fontSize: 13 }, children: "Ch\u1ECDn \xF4 v\xE0 Ctrl + V \u0111\u1EC3 d\xE1n th\xF4ng tin t\u1EEB excel" }),
-            /* @__PURE__ */ jsx13("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__ */ jsx13("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + V \u0111\u1EC3  d\xE1n h\xE0ng" })
+        /* @__PURE__ */ jsx14("div", { className: classnames7("r-toolbar-item me-25", { "d-none": headerColumns.length > 1 }), "aria-disabled": "false", children: /* @__PURE__ */ jsx14(Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
+        /* @__PURE__ */ jsx14("div", { className: classnames7("r-toolbar-item me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsxs13(UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
+          /* @__PURE__ */ jsx14(DropdownToggle3, { href: "/", tag: "a", color: "info", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx14(Info2, { className: "cursor-pointer" }) }),
+          /* @__PURE__ */ jsx14(DropdownMenu3, { children: /* @__PURE__ */ jsxs13("div", { className: "d-flex flex-column p-50 py-25", children: [
+            /* @__PURE__ */ jsx14("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__ */ jsx14("div", { style: { fontSize: 13 }, children: "Ch\u1ECDn \xF4 v\xE0 Ctrl + V \u0111\u1EC3 d\xE1n th\xF4ng tin t\u1EEB excel" }),
+            /* @__PURE__ */ jsx14("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__ */ jsx14("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" })
           ] }) })
         ] }) })
       ] })
@@ -2919,10 +3496,10 @@ var TableEdit = forwardRef2((props, ref) => {
         const flagDisplay = !pagingClient || totalCount > (pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1) && totalCount <= (pagingSetting.pageSize ?? 0) * (pagingSetting.currentPage ?? 0);
         if (flagDisplay) {
           countDisplay++;
-          return /* @__PURE__ */ jsx13(
+          return /* @__PURE__ */ jsx14(
             "tr",
             {
-              className: classnames6("r-row", { "fisrt-row": countDisplay === 0 }),
+              className: classnames7("r-row", { "fisrt-row": countDisplay === 0 }),
               children: contentColumns.map((col, indexCol) => {
                 return renderContentCol(col, row, indexRow, indexCol, isSelected);
               })
@@ -2933,29 +3510,29 @@ var TableEdit = forwardRef2((props, ref) => {
       }
     });
   };
-  useEffect7(() => {
+  useEffect8(() => {
     if (pagingClient && pagingSetting?.setCurrentPage && (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm)) {
       pagingSetting?.setCurrentPage(1);
     }
   }, [searchTerm, searchSetting?.searchTerm]);
-  return /* @__PURE__ */ jsxs12(Fragment13, { children: [
-    /* @__PURE__ */ jsxs12("div", { className: "react-table-edit", children: [
-      /* @__PURE__ */ jsxs12("div", { className: "r-grid", ref: gridRef, children: [
-        toolbarSetting?.showTopToolbar ? /* @__PURE__ */ jsx13(Fragment14, { children: renderToolbarTop() }) : /* @__PURE__ */ jsx13(Fragment14, {}),
-        /* @__PURE__ */ jsx13("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ jsxs12("table", { style: { width: "100%" }, children: [
-          /* @__PURE__ */ jsx13("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
-            return /* @__PURE__ */ jsx13("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
+  return /* @__PURE__ */ jsxs13(Fragment15, { children: [
+    /* @__PURE__ */ jsxs13("div", { className: "react-table-edit", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "r-grid", ref: gridRef, children: [
+        toolbarSetting?.showTopToolbar ? /* @__PURE__ */ jsx14(Fragment16, { children: renderToolbarTop() }) : /* @__PURE__ */ jsx14(Fragment16, {}),
+        /* @__PURE__ */ jsx14("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ jsxs13("table", { style: { width: "100%" }, children: [
+          /* @__PURE__ */ jsx14("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
+            return /* @__PURE__ */ jsx14("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
               return renderHeaderCol(col, index, indexParent);
             }) }, indexParent);
           }) }),
-          /* @__PURE__ */ jsx13("tbody", { className: "r-gridcontent", children: renderData() }),
-          /* @__PURE__ */ jsx13("tfoot", { className: "r-gridfoot", children: haveSum == true ? /* @__PURE__ */ jsx13("tr", { className: "r-row", children: contentColumns.map((col, index) => {
+          /* @__PURE__ */ jsx14("tbody", { className: "r-gridcontent", children: renderData() }),
+          /* @__PURE__ */ jsx14("tfoot", { className: "r-gridfoot", children: haveSum == true ? /* @__PURE__ */ jsx14("tr", { className: "r-row", children: contentColumns.map((col, index) => {
             return renderFooterCol(col, index);
-          }) }) : /* @__PURE__ */ jsx13(Fragment14, {}) })
+          }) }) : /* @__PURE__ */ jsx14(Fragment16, {}) })
         ] }) }),
-        toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ jsx13(Fragment14, { children: renderToolbarBottom() }) : /* @__PURE__ */ jsx13(Fragment14, {})
+        toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ jsx14(Fragment16, { children: renderToolbarBottom() }) : /* @__PURE__ */ jsx14(Fragment16, {})
       ] }),
-      pagingSetting?.allowPaging ? /* @__PURE__ */ jsx13(
+      pagingSetting?.allowPaging ? /* @__PURE__ */ jsx14(
         PagingComponent,
         {
           onChangePage,
@@ -2965,9 +3542,9 @@ var TableEdit = forwardRef2((props, ref) => {
           totalItem: pagingClient ? totalCount : pagingSetting?.totalItem ?? 0,
           onChangePageSize
         }
-      ) : /* @__PURE__ */ jsx13(Fragment14, {})
+      ) : /* @__PURE__ */ jsx14(Fragment16, {})
     ] }),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       sidebar_setting_column_default,
       {
         handleSidebar: () => {
@@ -2985,10 +3562,10 @@ var table_default = TableEdit;
 // test-app/src/component/tab-menu/index.tsx
 import { ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight3 } from "becoxy-icons";
 import classNames6 from "classnames";
-import { Fragment as Fragment15, useEffect as useEffect8, useState as useState7 } from "react";
+import { Fragment as Fragment17, useEffect as useEffect9, useState as useState8 } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import { DropdownItem as DropdownItem2, DropdownMenu as DropdownMenu3, DropdownToggle as DropdownToggle3, UncontrolledDropdown as UncontrolledDropdown2 } from "reactstrap";
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { DropdownItem as DropdownItem3, DropdownMenu as DropdownMenu4, DropdownToggle as DropdownToggle4, UncontrolledDropdown as UncontrolledDropdown2 } from "reactstrap";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 var TabsMenuComponent = ({
   buttonWidth,
   tabParent,
@@ -3000,14 +3577,14 @@ var TabsMenuComponent = ({
   renderModal
 }) => {
   const navigate = useNavigate();
-  const [dataMenu, setDataMenu] = useState7([]);
-  const [openMenu, setOpenMenu] = useState7(false);
-  const [url, setUrl] = useState7("");
-  const [contentWidth, setContentWidth] = useState7(0);
-  const [componentWidth, setComponentWidth] = useState7(0);
-  const [scrollPosition, setScrollPosition] = useState7(0);
-  const [dataItem, setDataItem] = useState7([]);
-  const [openModal, setOpenModal] = useState7({});
+  const [dataMenu, setDataMenu] = useState8([]);
+  const [openMenu, setOpenMenu] = useState8(false);
+  const [url, setUrl] = useState8("");
+  const [contentWidth, setContentWidth] = useState8(0);
+  const [componentWidth, setComponentWidth] = useState8(0);
+  const [scrollPosition, setScrollPosition] = useState8(0);
+  const [dataItem, setDataItem] = useState8([]);
+  const [openModal, setOpenModal] = useState8({});
   const handleWindowResize = () => {
     const tabEle = document.getElementById(`tab-component-${resourceCode}`);
     const tabContent = document.getElementById(`content-component-${resourceCode}`);
@@ -3016,7 +3593,7 @@ var TabsMenuComponent = ({
       setContentWidth(tabContent?.offsetWidth ?? 0);
     }
   };
-  useEffect8(() => {
+  useEffect9(() => {
     setUrl(window.location.pathname);
     window.addEventListener("resize", handleWindowResize);
     setTimeout(() => {
@@ -3032,7 +3609,7 @@ var TabsMenuComponent = ({
       window.removeEventListener("resize", handleWindowResize);
     };
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     const item = resources?.find((x) => x.code === (resourceCodeParent ? resourceCodeParent : resourceCode));
     if (item) {
       if (resourceCodeParent) {
@@ -3063,23 +3640,23 @@ var TabsMenuComponent = ({
   const handleModal = (name) => {
     setOpenModal((old) => ({ ...old, [name]: !(openModal[name] ?? false) }));
   };
-  return /* @__PURE__ */ jsxs13(Fragment15, { children: [
+  return /* @__PURE__ */ jsxs14(Fragment17, { children: [
     renderModal ? renderModal({ handleModal, windowSize, openModal, setDataItem, dataItem }) : "",
-    /* @__PURE__ */ jsxs13("div", { className: classNames6("tab-custom", { "tab-parent": tabParent }, { "tab-child": tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [
-      /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsxs14("div", { className: classNames6("tab-custom", { "tab-parent": tabParent }, { "tab-child": tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [
+      /* @__PURE__ */ jsx15(
         "div",
         {
           onClick: () => handleScroll(-200),
           className: classNames6("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
-          children: /* @__PURE__ */ jsx14(ChevronLeft3, {})
+          children: /* @__PURE__ */ jsx15(ChevronLeft3, {})
         }
       ),
-      /* @__PURE__ */ jsx14("div", { id: `tab-component-${resourceCode}`, className: "tab-component", children: /* @__PURE__ */ jsx14("div", { id: `content-component-${resourceCode}`, children: dataMenu.map((item) => {
+      /* @__PURE__ */ jsx15("div", { id: `tab-component-${resourceCode}`, className: "tab-component", children: /* @__PURE__ */ jsx15("div", { id: `content-component-${resourceCode}`, children: dataMenu.map((item) => {
         if (item?.resAttributes?.IS_MENU === "1") {
-          return /* @__PURE__ */ jsxs13(UncontrolledDropdown2, { className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: "down", style: { backgroundColor: openMenu ? "#e0e0e0" : "" }, children: [
-            /* @__PURE__ */ jsx14(DropdownToggle3, { color: "#00000", style: { border: "none", boxShadow: "none", margin: 0, padding: 0 }, className: "background-none", children: /* @__PURE__ */ jsx14("div", { children: item.name }) }),
-            /* @__PURE__ */ jsx14(DropdownMenu3, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => /* @__PURE__ */ jsx14(
-              DropdownItem2,
+          return /* @__PURE__ */ jsxs14(UncontrolledDropdown2, { className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: "down", style: { backgroundColor: openMenu ? "#e0e0e0" : "" }, children: [
+            /* @__PURE__ */ jsx15(DropdownToggle4, { color: "#00000", style: { border: "none", boxShadow: "none", margin: 0, padding: 0 }, className: "background-none", children: /* @__PURE__ */ jsx15("div", { children: item.name }) }),
+            /* @__PURE__ */ jsx15(DropdownMenu4, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => /* @__PURE__ */ jsx15(
+              DropdownItem3,
               {
                 style: { borderRadius: "5px", margin: "0 0.5rem", width: "95%" },
                 onClick: () => {
@@ -3095,7 +3672,7 @@ var TabsMenuComponent = ({
             )) })
           ] }, item.code);
         } else {
-          return /* @__PURE__ */ jsx14(
+          return /* @__PURE__ */ jsx15(
             Link,
             {
               to: item.url,
@@ -3106,12 +3683,12 @@ var TabsMenuComponent = ({
           );
         }
       }) }) }),
-      /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx15(
         "div",
         {
           onClick: () => handleScroll(200),
           className: classNames6("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
-          children: /* @__PURE__ */ jsx14(ChevronRight3, {})
+          children: /* @__PURE__ */ jsx15(ChevronRight3, {})
         }
       )
     ] })