react-table-edit 0.4.6 → 0.4.8

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { ReactNode, Dispatch, SetStateAction } from 'react';
 import { TFunction } from 'react-i18next';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type ITextAlign = 'center' | 'left' | 'right';
 type IEditType = 'text' | 'numeric' | 'asyncSelect' | 'datetime' | 'selectMulti' | 'selectTree' | 'date' | 'select' | 'checkbox' | 'form' | 'color';
@@ -184,4 +185,14 @@ declare const objSymbolThousand: any;
 declare const formartNumberic: (str: string | number, decimalSeparator: string, thousandSeparator: string, fraction?: number, isDone?: boolean) => string;
 declare const roundNumber: (num: number, fraction: number) => number;
 
-export { type FromItemsField, type IColumnTable, type ICommandItem, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditButton, type IFTableEditPaging, type IFTableEditProps, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFToolbarOptions, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, TableEdit as default, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, objSymbolDecimal, objSymbolThousand, roundNumber, useOnClickOutside };
+type IFDataProps = {
+    buttonWidth?: number;
+    tabParent?: boolean;
+    tabChild?: boolean;
+    resourceCodeParent?: string;
+    resourceCode: string;
+    resources: any[];
+};
+declare const TabsMenuComponent: ({ buttonWidth, tabParent, tabChild, resourceCodeParent, resources, resourceCode }: IFDataProps) => react_jsx_runtime.JSX.Element;
+
+export { type FromItemsField, type IColumnTable, type ICommandItem, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditButton, type IFTableEditPaging, type IFTableEditProps, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFToolbarOptions, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, TabsMenuComponent, TableEdit as default, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, objSymbolDecimal, objSymbolThousand, roundNumber, useOnClickOutside };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { ReactNode, Dispatch, SetStateAction } from 'react';
 import { TFunction } from 'react-i18next';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type ITextAlign = 'center' | 'left' | 'right';
 type IEditType = 'text' | 'numeric' | 'asyncSelect' | 'datetime' | 'selectMulti' | 'selectTree' | 'date' | 'select' | 'checkbox' | 'form' | 'color';
@@ -184,4 +185,14 @@ declare const objSymbolThousand: any;
 declare const formartNumberic: (str: string | number, decimalSeparator: string, thousandSeparator: string, fraction?: number, isDone?: boolean) => string;
 declare const roundNumber: (num: number, fraction: number) => number;
 
-export { type FromItemsField, type IColumnTable, type ICommandItem, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditButton, type IFTableEditPaging, type IFTableEditProps, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFToolbarOptions, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, TableEdit as default, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, objSymbolDecimal, objSymbolThousand, roundNumber, useOnClickOutside };
+type IFDataProps = {
+    buttonWidth?: number;
+    tabParent?: boolean;
+    tabChild?: boolean;
+    resourceCodeParent?: string;
+    resourceCode: string;
+    resources: any[];
+};
+declare const TabsMenuComponent: ({ buttonWidth, tabParent, tabChild, resourceCodeParent, resources, resourceCode }: IFDataProps) => react_jsx_runtime.JSX.Element;
+
+export { type FromItemsField, type IColumnTable, type ICommandItem, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditButton, type IFTableEditPaging, type IFTableEditProps, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFToolbarOptions, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, TabsMenuComponent, TableEdit as default, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, objSymbolDecimal, objSymbolThousand, roundNumber, useOnClickOutside };

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // index.ts
 var Table_edit_exports = {};
 __export(Table_edit_exports, {
+  TabsMenuComponent: () => TabsMenuComponent,
   default: () => Table_edit_default,
   formartNumberic: () => formartNumberic,
   generateUUID: () => generateUUID,
@@ -72,6 +73,11 @@ var ReactInput = (props) => {
     setValue("");
     setSearchTerm("");
   };
+  (0, import_react.useEffect)(() => {
+    if (!props.value) {
+      setValue("");
+    }
+  }, [props.value]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_reactstrap.Input,
@@ -1535,7 +1541,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
   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)(() => {
-    if (pagingClient && pagingSetting.setCurrentPage && dataSource?.length / (pagingSetting?.pageSize ?? 1) > (pagingSetting.currentPage ?? 1)) {
+    if (pagingClient && pagingSetting.setCurrentPage && Math.ceil(totalCount / (pagingSetting?.pageSize ?? 1)) < (pagingSetting.currentPage ?? 1)) {
       pagingSetting.setCurrentPage(1);
     }
   }, [dataSource]);
@@ -2163,6 +2169,18 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
       }, 100);
     }
   };
+  const focusNewElement = (idElement, onLoad = false) => {
+    setTimeout(() => {
+      const element = document.getElementById(idElement);
+      if (element) {
+        if (element.className.includes("react-select") || element.className.includes("form-edit")) {
+          element.getElementsByTagName("input")[0]?.focus();
+        } else {
+          element.focus();
+        }
+      }
+    }, onLoad ? 100 : 0);
+  };
   const checkKeyDown = (e, row, col, indexRow, indexCol) => {
     if (e.code === "ArrowRight") {
       let newIndexCol = -1;
@@ -2173,14 +2191,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
         }
       }
       if (newIndexCol > -1) {
-        const element = document.getElementById(`${idTable}-col${newIndexCol}-row${indexRow}`);
-        if (element) {
-          if (element.className.includes("react-select") || element.className.includes("form-edit")) {
-            element.getElementsByTagName("input")[0]?.focus();
-          } else {
-            element.focus();
-          }
-        }
+        focusNewElement(`${idTable}-col${newIndexCol}-row${indexRow}`);
         e.preventDefault();
         return e.code;
       }
@@ -2193,14 +2204,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
         }
       }
       if (newIndexCol > -1) {
-        const element = document.getElementById(`${idTable}-col${newIndexCol}-row${indexRow}`);
-        if (element) {
-          if (element.className.includes("react-select") || element.className.includes("form-edit")) {
-            element.getElementsByTagName("input")[0]?.focus();
-          } else {
-            element.focus();
-          }
-        }
+        focusNewElement(`${idTable}-col${newIndexCol}-row${indexRow}`);
         e.preventDefault();
         return e.code;
       }
@@ -2212,16 +2216,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
             pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) - 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("form-edit")) {
-                element2.getElementsByTagName("input")[0]?.focus();
-              } else {
-                element2.focus();
-              }
-            }
-          }, 100);
+          focusNewElement(`${idTable}-col${indexCol}-row${indexRow - 1}`, true);
           e.preventDefault();
           return e.code;
         }
@@ -2234,16 +2229,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
             pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
           }
           setIndexFocus(indexRow);
-          setTimeout(() => {
-            const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow + 1}`);
-            if (element2) {
-              if (element2.className.includes("react-select") || element2.className.includes("form-edit")) {
-                element2.getElementsByTagName("input")[0]?.focus();
-              } else {
-                element2.focus();
-              }
-            }
-          }, 100);
+          focusNewElement(`${idTable}-col${indexCol}-row${indexRow + 1}`, true);
           e.preventDefault();
           return e.code;
         }
@@ -2256,16 +2242,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
           pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
         }
         setIndexFocus(indexRow);
-        setTimeout(() => {
-          const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow + 1}`);
-          if (element) {
-            if (element.className.includes("react-select") || element.className.includes("form-edit")) {
-              element.getElementsByTagName("input")[0]?.focus();
-            } else {
-              element.focus();
-            }
-          }
-        }, 100);
+        focusNewElement(`${idTable}-col${indexCol}-row${indexRow + 1}`, true);
       }
       e.preventDefault();
       return e.code;
@@ -2279,16 +2256,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
             pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
           }
           setIndexFocus(indexRow);
-          setTimeout(() => {
-            const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow + 1}`);
-            if (element2) {
-              if (element2.className.includes("react-select") || element2.className.includes("form-edit")) {
-                element2.getElementsByTagName("input")[0]?.focus();
-              } else {
-                element2.focus();
-              }
-            }
-          }, 100);
+          focusNewElement(`${idTable}-col${indexCol}-row${indexRow + 1}`, true);
         }
         e.preventDefault();
         return e.code;
@@ -2329,22 +2297,13 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
   });
   const handleAdd = () => {
     changeDataSource(dataSource, true);
+    const lengthData = dataSource.length - 1;
     if (pagingSetting?.setCurrentPage) {
-      pagingSetting?.setCurrentPage(Math.floor(totalCount / (pagingSetting?.pageSize ?? 0)) + 1);
+      pagingSetting?.setCurrentPage(Math.floor(lengthData / (pagingSetting?.pageSize ?? 0)) + 1);
     }
     if (tableElement) {
-      setIndexFocus(totalCount);
-      setTimeout(() => {
-        tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
-        const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${totalCount + 1}`);
-        if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("select-100__control--menu-is-open").length > 0 || element.getElementsByClassName("select-200__control--menu-is-open").length > 0 || element.getElementsByClassName("select-300__control--menu-is-open").length > 0 || element.getElementsByClassName("select-400__control--menu-is-open").length > 0 || element.getElementsByClassName("select-500__control--menu-is-open").length > 0)) {
-          if (element.className.includes("react-select") || element.className.includes("form-edit")) {
-            element.getElementsByTagName("input")[0]?.focus();
-          } else {
-            element.focus();
-          }
-        }
-      }, 100);
+      setIndexFocus(lengthData);
+      focusNewElement(`${idTable}-col${columnFistEdit}-row${lengthData + 1}`, true);
     }
   };
   const handleDuplicate = (data, index) => {
@@ -2427,6 +2386,14 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
   };
   const changeDataSource = (data, haveNew = false) => {
     if (!editDisable && !addDisable && setDataSource) {
+      if (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm) {
+        console.log("\xE1dads");
+        if (searchSetting?.setSearchTerm) {
+          searchSetting?.setSearchTerm("");
+        } else {
+          setSearchTerm("");
+        }
+      }
       if (haveNew) {
         data.push(defaultValue ? { ...defaultValue, [fieldKey]: generateUUID() } : {});
         setDataSource([...data]);
@@ -2936,6 +2903,11 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
       }
     });
   };
+  (0, import_react12.useEffect)(() => {
+    if (pagingClient && pagingSetting?.setCurrentPage && (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm)) {
+      pagingSetting?.setCurrentPage(1);
+    }
+  }, [searchTerm, searchSetting?.searchTerm]);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react12.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "react-table-edit", children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "r-grid", ref: gridRef, children: [
@@ -2989,11 +2961,114 @@ var import_react13 = require("react");
 var import_react_router_dom = require("react-router-dom");
 var import_reactstrap9 = require("reactstrap");
 var import_jsx_runtime13 = require("react/jsx-runtime");
+var TabsMenuComponent = ({
+  buttonWidth,
+  tabParent,
+  tabChild,
+  resourceCodeParent,
+  resources,
+  resourceCode
+}) => {
+  const [dataMenu, setDataMenu] = (0, import_react13.useState)([]);
+  const [openMenu, setOpenMenu] = (0, import_react13.useState)(false);
+  const [url, setUrl] = (0, import_react13.useState)("");
+  const [contentWidth, setContentWidth] = (0, import_react13.useState)(0);
+  const [componentWidth, setComponentWidth] = (0, import_react13.useState)(0);
+  const [scrollPosition, setScrollPosition] = (0, import_react13.useState)(0);
+  const handleWindowResize = () => {
+    const tabEle = document.getElementById(`tab-component-${resourceCode}`);
+    const tabContent = document.getElementById(`content-component-${resourceCode}`);
+    if (tabEle && tabContent) {
+      setComponentWidth(tabEle?.offsetWidth ?? 0);
+      setContentWidth(tabContent?.offsetWidth ?? 0);
+    }
+  };
+  (0, import_react13.useEffect)(() => {
+    setUrl(window.location.pathname);
+    window.addEventListener("resize", handleWindowResize);
+    setTimeout(() => {
+      const tabEle = document.getElementById(`tab-component-${resourceCode}`);
+      const tabContent = document.getElementById(`content-component-${resourceCode}`);
+      if (tabEle && tabContent) {
+        setComponentWidth(tabEle?.offsetWidth ?? 0);
+        setContentWidth(tabContent?.offsetWidth ?? 0);
+      }
+    }, 100);
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
+  (0, import_react13.useEffect)(() => {
+    const item = resources?.find((x) => x.code === (resourceCodeParent ? resourceCodeParent : resourceCode));
+    if (item) {
+      if (resourceCodeParent) {
+        const data = item.children?.find((x) => x.code === resourceCode);
+        if (data) {
+          setDataMenu([...data.children]);
+        }
+      } else {
+        setDataMenu([...item.children]);
+      }
+    }
+  }, [resources]);
+  const toggleMenu = () => {
+    setOpenMenu(!openMenu);
+  };
+  const handleScroll = (scrollAmount) => {
+    let newScrollPosition = scrollPosition + scrollAmount;
+    const tabEle = document.getElementById(`tab-component-${resourceCode}`);
+    const tabContent = document.getElementById(`content-component-${resourceCode}`);
+    if (tabEle && tabContent && tabContent?.offsetWidth - tabEle?.offsetWidth - newScrollPosition > -200) {
+      if (newScrollPosition < 0) {
+        newScrollPosition = 0;
+      }
+      setScrollPosition(newScrollPosition);
+      tabEle.scrollLeft = newScrollPosition;
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: (0, import_classnames11.default)("tab-custom", { "tab-parent": tabParent }, { "tab-child": tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "div",
+      {
+        onClick: () => handleScroll(-200),
+        className: (0, import_classnames11.default)("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_becoxy_icons5.ChevronLeft, {})
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { id: `tab-component-${resourceCode}`, className: "tab-component", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { id: `content-component-${resourceCode}`, children: dataMenu.map((item) => {
+      if (item?.resAttributes?.IS_MENU === "1") {
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_reactstrap9.UncontrolledDropdown, { className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: "down", style: { backgroundColor: openMenu ? "#e0e0e0" : "" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap9.DropdownToggle, { color: "#00000", style: { border: "none", boxShadow: "none", margin: 0, padding: 0 }, className: "background-none", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: item.name }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap9.DropdownMenu, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_reactstrap9.DropdownItem, { style: { borderRadius: "5px", margin: "0 0.5rem", width: "95%", padding: "0.5rem 0.5rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_router_dom.Link, { to: x.url, style: { display: "block", width: "100%" }, children: x.name }) }, x.code)) })
+        ] }, item.code);
+      } else {
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          import_react_router_dom.Link,
+          {
+            to: item.url,
+            className: (0, import_classnames11.default)("tab-custom-item", { active: item.url === url || tabParent && url?.split("/").length > 3 && item.url.startsWith(url.substring(0, url.lastIndexOf("/"))) }),
+            children: item.name
+          },
+          item.code
+        );
+      }
+    }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "div",
+      {
+        onClick: () => handleScroll(200),
+        className: (0, import_classnames11.default)("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_becoxy_icons5.ChevronRight, {})
+      }
+    )
+  ] }) });
+};
 
 // index.ts
 var Table_edit_default = table_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  TabsMenuComponent,
   formartNumberic,
   generateUUID,
   isNullOrUndefined,

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // test-app/src/component/table/index.tsx
-import { Fragment as Fragment12, forwardRef as forwardRef2, useEffect as useEffect5, useImperativeHandle, useRef as useRef2, useState as useState5 } from "react";
+import { Fragment as Fragment12, forwardRef as forwardRef2, useEffect as useEffect6, useImperativeHandle, useRef as useRef2, useState as useState5 } from "react";
 import { Button as Button3, DropdownMenu as DropdownMenu2, DropdownToggle as DropdownToggle2, Input as Input6, UncontrolledDropdown } from "reactstrap";
 import classnames6 from "classnames";
 import { useTranslation as useTranslation8 } from "react-i18next";
@@ -11,7 +11,7 @@ import { AlertCircle, Info as Info2, Settings } from "becoxy-icons";
 // test-app/src/component/react-input/index.tsx
 import { X } from "becoxy-icons";
 import classNames from "classnames";
-import { Fragment, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import { Input } from "reactstrap";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ReactInput = (props) => {
@@ -21,6 +21,11 @@ var ReactInput = (props) => {
     setValue("");
     setSearchTerm("");
   };
+  useEffect(() => {
+    if (!props.value) {
+      setValue("");
+    }
+  }, [props.value]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Input,
@@ -178,9 +183,9 @@ var messageBoxConfirm2 = async (t, data, data2, message) => {
 };
 
 // test-app/src/component/utils.ts
-import { useEffect } from "react";
+import { useEffect as useEffect2 } from "react";
 var useOnClickOutside = (ref, handler) => {
-  useEffect(
+  useEffect2(
     () => {
       const listener = (event) => {
         if (!ref.current || ref.current.contains(event.target)) {
@@ -293,7 +298,7 @@ import moment from "moment";
 import { DropDownTreeComponent } from "@syncfusion/ej2-react-dropdowns";
 
 // test-app/src/component/edit-form/index.tsx
-import { forwardRef, useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import { forwardRef, useEffect as useEffect3, useRef, useState as useState2 } from "react";
 import {
   DropdownItem,
   DropdownMenu,
@@ -748,14 +753,14 @@ var EditForm = forwardRef((props, ref) => {
     defaultValues,
     resolver: yupResolver(schema)
   });
-  useEffect2(() => {
+  useEffect3(() => {
     if (dropdownOpen) {
       if (onFormOpen && itemsField.length === 0) {
         onFormOpen(rowData, itemsField, setItemsField);
       }
     }
   }, [dropdownOpen]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (dropdownOpen && itemsField.length > 0) {
       itemsField.forEach((ele) => {
         setValue(ele.name, rowData[ele.name] ?? "");
@@ -1031,7 +1036,7 @@ var EditForm = forwardRef((props, ref) => {
 var edit_form_default = EditForm;
 
 // test-app/src/component/sidebar-setting-column/index.tsx
-import { Fragment as Fragment10, useEffect as useEffect4, useState as useState4 } from "react";
+import { Fragment as Fragment10, useEffect as useEffect5, useState as useState4 } from "react";
 import { Button as Button2, Input as Input5 } from "reactstrap";
 import { useTranslation as useTranslation7 } from "react-i18next";
 
@@ -1082,7 +1087,7 @@ var modal_header_default = ModalHeader;
 // test-app/src/component/sidebar/index.tsx
 import { ChevronLeft, ChevronRight } from "becoxy-icons";
 import classNames4 from "classnames";
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import { useEffect as useEffect4, useState as useState3 } from "react";
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var Sidebar = (props) => {
   const {
@@ -1096,7 +1101,7 @@ var Sidebar = (props) => {
   } = props;
   const [isFullScreen, setIsFullScreen] = useState3(false);
   const [flag, setFlag] = useState3(open);
-  useEffect3(() => {
+  useEffect4(() => {
     if (open !== flag) {
       if (open) {
         setFlag(open);
@@ -1191,7 +1196,7 @@ var SidebarSetColumn = (props) => {
   const { t } = useTranslation7();
   const [dataSource, setDataSource] = useState4([]);
   const [indexFocus, setIndexFocus] = useState4();
-  useEffect4(() => {
+  useEffect5(() => {
     if (openSidebar) {
       setDataSource(column.map((e) => ({ ...e })));
     }
@@ -1209,7 +1214,7 @@ var SidebarSetColumn = (props) => {
     return { innerWidth, innerHeight };
   };
   const [windowSize, setWindowSize] = useState4(getWindowSize());
-  useEffect4(() => {
+  useEffect5(() => {
     const handleWindowResize = () => {
       setWindowSize(getWindowSize());
     };
@@ -1493,12 +1498,12 @@ var TableEdit = forwardRef2((props, ref) => {
   let totalCount = dataSource.length;
   const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? "id";
   const fieldUniKey = columns.filter((item) => item.isUnikey === true)?.map((item) => item.field);
-  useEffect5(() => {
-    if (pagingClient && pagingSetting.setCurrentPage && dataSource?.length / (pagingSetting?.pageSize ?? 1) > (pagingSetting.currentPage ?? 1)) {
+  useEffect6(() => {
+    if (pagingClient && pagingSetting.setCurrentPage && Math.ceil(totalCount / (pagingSetting?.pageSize ?? 1)) < (pagingSetting.currentPage ?? 1)) {
       pagingSetting.setCurrentPage(1);
     }
   }, [dataSource]);
-  useEffect5(() => {
+  useEffect6(() => {
     let indexFirst = -1;
     let indexlast = -1;
     let letfWidthFix = 0;
@@ -1531,7 +1536,7 @@ var TableEdit = forwardRef2((props, ref) => {
     setColumnFistEdit(indexFirst + 1);
     setColumnlastEdit(indexlast + 1);
   }, [contentColumns]);
-  useEffect5(() => {
+  useEffect6(() => {
     const arrHeaderColumns = [];
     const arrContentColumns = [];
     let headerLevelRow = 0;
@@ -1548,7 +1553,7 @@ var TableEdit = forwardRef2((props, ref) => {
     setHeaderColumns(arrHeaderColumns);
     setContentColumns(arrContentColumns);
   }, [columns]);
-  useEffect5(() => {
+  useEffect6(() => {
     const arrHeaderColumns = [];
     const arrContentColumns = [];
     let headerLevelRow = 0;
@@ -2122,6 +2127,18 @@ var TableEdit = forwardRef2((props, ref) => {
       }, 100);
     }
   };
+  const focusNewElement = (idElement, onLoad = false) => {
+    setTimeout(() => {
+      const element = document.getElementById(idElement);
+      if (element) {
+        if (element.className.includes("react-select") || element.className.includes("form-edit")) {
+          element.getElementsByTagName("input")[0]?.focus();
+        } else {
+          element.focus();
+        }
+      }
+    }, onLoad ? 100 : 0);
+  };
   const checkKeyDown = (e, row, col, indexRow, indexCol) => {
     if (e.code === "ArrowRight") {
       let newIndexCol = -1;
@@ -2132,14 +2149,7 @@ var TableEdit = forwardRef2((props, ref) => {
         }
       }
       if (newIndexCol > -1) {
-        const element = document.getElementById(`${idTable}-col${newIndexCol}-row${indexRow}`);
-        if (element) {
-          if (element.className.includes("react-select") || element.className.includes("form-edit")) {
-            element.getElementsByTagName("input")[0]?.focus();
-          } else {
-            element.focus();
-          }
-        }
+        focusNewElement(`${idTable}-col${newIndexCol}-row${indexRow}`);
         e.preventDefault();
         return e.code;
       }
@@ -2152,14 +2162,7 @@ var TableEdit = forwardRef2((props, ref) => {
         }
       }
       if (newIndexCol > -1) {
-        const element = document.getElementById(`${idTable}-col${newIndexCol}-row${indexRow}`);
-        if (element) {
-          if (element.className.includes("react-select") || element.className.includes("form-edit")) {
-            element.getElementsByTagName("input")[0]?.focus();
-          } else {
-            element.focus();
-          }
-        }
+        focusNewElement(`${idTable}-col${newIndexCol}-row${indexRow}`);
         e.preventDefault();
         return e.code;
       }
@@ -2171,16 +2174,7 @@ var TableEdit = forwardRef2((props, ref) => {
             pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) - 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("form-edit")) {
-                element2.getElementsByTagName("input")[0]?.focus();
-              } else {
-                element2.focus();
-              }
-            }
-          }, 100);
+          focusNewElement(`${idTable}-col${indexCol}-row${indexRow - 1}`, true);
           e.preventDefault();
           return e.code;
         }
@@ -2193,16 +2187,7 @@ var TableEdit = forwardRef2((props, ref) => {
             pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
           }
           setIndexFocus(indexRow);
-          setTimeout(() => {
-            const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow + 1}`);
-            if (element2) {
-              if (element2.className.includes("react-select") || element2.className.includes("form-edit")) {
-                element2.getElementsByTagName("input")[0]?.focus();
-              } else {
-                element2.focus();
-              }
-            }
-          }, 100);
+          focusNewElement(`${idTable}-col${indexCol}-row${indexRow + 1}`, true);
           e.preventDefault();
           return e.code;
         }
@@ -2215,16 +2200,7 @@ var TableEdit = forwardRef2((props, ref) => {
           pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
         }
         setIndexFocus(indexRow);
-        setTimeout(() => {
-          const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow + 1}`);
-          if (element) {
-            if (element.className.includes("react-select") || element.className.includes("form-edit")) {
-              element.getElementsByTagName("input")[0]?.focus();
-            } else {
-              element.focus();
-            }
-          }
-        }, 100);
+        focusNewElement(`${idTable}-col${indexCol}-row${indexRow + 1}`, true);
       }
       e.preventDefault();
       return e.code;
@@ -2238,16 +2214,7 @@ var TableEdit = forwardRef2((props, ref) => {
             pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
           }
           setIndexFocus(indexRow);
-          setTimeout(() => {
-            const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow + 1}`);
-            if (element2) {
-              if (element2.className.includes("react-select") || element2.className.includes("form-edit")) {
-                element2.getElementsByTagName("input")[0]?.focus();
-              } else {
-                element2.focus();
-              }
-            }
-          }, 100);
+          focusNewElement(`${idTable}-col${indexCol}-row${indexRow + 1}`, true);
         }
         e.preventDefault();
         return e.code;
@@ -2288,22 +2255,13 @@ var TableEdit = forwardRef2((props, ref) => {
   });
   const handleAdd = () => {
     changeDataSource(dataSource, true);
+    const lengthData = dataSource.length - 1;
     if (pagingSetting?.setCurrentPage) {
-      pagingSetting?.setCurrentPage(Math.floor(totalCount / (pagingSetting?.pageSize ?? 0)) + 1);
+      pagingSetting?.setCurrentPage(Math.floor(lengthData / (pagingSetting?.pageSize ?? 0)) + 1);
     }
     if (tableElement) {
-      setIndexFocus(totalCount);
-      setTimeout(() => {
-        tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
-        const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${totalCount + 1}`);
-        if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("select-100__control--menu-is-open").length > 0 || element.getElementsByClassName("select-200__control--menu-is-open").length > 0 || element.getElementsByClassName("select-300__control--menu-is-open").length > 0 || element.getElementsByClassName("select-400__control--menu-is-open").length > 0 || element.getElementsByClassName("select-500__control--menu-is-open").length > 0)) {
-          if (element.className.includes("react-select") || element.className.includes("form-edit")) {
-            element.getElementsByTagName("input")[0]?.focus();
-          } else {
-            element.focus();
-          }
-        }
-      }, 100);
+      setIndexFocus(lengthData);
+      focusNewElement(`${idTable}-col${columnFistEdit}-row${lengthData + 1}`, true);
     }
   };
   const handleDuplicate = (data, index) => {
@@ -2386,6 +2344,14 @@ var TableEdit = forwardRef2((props, ref) => {
   };
   const changeDataSource = (data, haveNew = false) => {
     if (!editDisable && !addDisable && setDataSource) {
+      if (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm) {
+        console.log("\xE1dads");
+        if (searchSetting?.setSearchTerm) {
+          searchSetting?.setSearchTerm("");
+        } else {
+          setSearchTerm("");
+        }
+      }
       if (haveNew) {
         data.push(defaultValue ? { ...defaultValue, [fieldKey]: generateUUID() } : {});
         setDataSource([...data]);
@@ -2394,7 +2360,7 @@ var TableEdit = forwardRef2((props, ref) => {
       }
     }
   };
-  useEffect5(() => {
+  useEffect6(() => {
     setIndexFocus(-1);
     if (setSelectedItem) {
       if (isMulti) {
@@ -2421,7 +2387,7 @@ var TableEdit = forwardRef2((props, ref) => {
       }
     }
   }, [selectedRows]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!isMulti) {
       if (dataSource && selectedItem && selectedItem[fieldKey]) {
         if (selectedRows?.length === 0 || selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
@@ -2895,6 +2861,11 @@ var TableEdit = forwardRef2((props, ref) => {
       }
     });
   };
+  useEffect6(() => {
+    if (pagingClient && pagingSetting?.setCurrentPage && (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm)) {
+      pagingSetting?.setCurrentPage(1);
+    }
+  }, [searchTerm, searchSetting?.searchTerm]);
   return /* @__PURE__ */ jsxs11(Fragment12, { children: [
     /* @__PURE__ */ jsxs11("div", { className: "react-table-edit", children: [
       /* @__PURE__ */ jsxs11("div", { className: "r-grid", ref: gridRef, children: [
@@ -2944,14 +2915,117 @@ var table_default = TableEdit;
 // test-app/src/component/tab-menu/index.tsx
 import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "becoxy-icons";
 import classNames5 from "classnames";
-import { Fragment as Fragment14, useEffect as useEffect6, useState as useState6 } from "react";
+import { Fragment as Fragment14, useEffect as useEffect7, useState as useState6 } from "react";
 import { Link } from "react-router-dom";
 import { DropdownItem as DropdownItem2, DropdownMenu as DropdownMenu3, DropdownToggle as DropdownToggle3, UncontrolledDropdown as UncontrolledDropdown2 } from "reactstrap";
 import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+var TabsMenuComponent = ({
+  buttonWidth,
+  tabParent,
+  tabChild,
+  resourceCodeParent,
+  resources,
+  resourceCode
+}) => {
+  const [dataMenu, setDataMenu] = useState6([]);
+  const [openMenu, setOpenMenu] = useState6(false);
+  const [url, setUrl] = useState6("");
+  const [contentWidth, setContentWidth] = useState6(0);
+  const [componentWidth, setComponentWidth] = useState6(0);
+  const [scrollPosition, setScrollPosition] = useState6(0);
+  const handleWindowResize = () => {
+    const tabEle = document.getElementById(`tab-component-${resourceCode}`);
+    const tabContent = document.getElementById(`content-component-${resourceCode}`);
+    if (tabEle && tabContent) {
+      setComponentWidth(tabEle?.offsetWidth ?? 0);
+      setContentWidth(tabContent?.offsetWidth ?? 0);
+    }
+  };
+  useEffect7(() => {
+    setUrl(window.location.pathname);
+    window.addEventListener("resize", handleWindowResize);
+    setTimeout(() => {
+      const tabEle = document.getElementById(`tab-component-${resourceCode}`);
+      const tabContent = document.getElementById(`content-component-${resourceCode}`);
+      if (tabEle && tabContent) {
+        setComponentWidth(tabEle?.offsetWidth ?? 0);
+        setContentWidth(tabContent?.offsetWidth ?? 0);
+      }
+    }, 100);
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
+  useEffect7(() => {
+    const item = resources?.find((x) => x.code === (resourceCodeParent ? resourceCodeParent : resourceCode));
+    if (item) {
+      if (resourceCodeParent) {
+        const data = item.children?.find((x) => x.code === resourceCode);
+        if (data) {
+          setDataMenu([...data.children]);
+        }
+      } else {
+        setDataMenu([...item.children]);
+      }
+    }
+  }, [resources]);
+  const toggleMenu = () => {
+    setOpenMenu(!openMenu);
+  };
+  const handleScroll = (scrollAmount) => {
+    let newScrollPosition = scrollPosition + scrollAmount;
+    const tabEle = document.getElementById(`tab-component-${resourceCode}`);
+    const tabContent = document.getElementById(`content-component-${resourceCode}`);
+    if (tabEle && tabContent && tabContent?.offsetWidth - tabEle?.offsetWidth - newScrollPosition > -200) {
+      if (newScrollPosition < 0) {
+        newScrollPosition = 0;
+      }
+      setScrollPosition(newScrollPosition);
+      tabEle.scrollLeft = newScrollPosition;
+    }
+  };
+  return /* @__PURE__ */ jsx13(Fragment14, { children: /* @__PURE__ */ jsxs12("div", { className: classNames5("tab-custom", { "tab-parent": tabParent }, { "tab-child": tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [
+    /* @__PURE__ */ jsx13(
+      "div",
+      {
+        onClick: () => handleScroll(-200),
+        className: classNames5("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
+        children: /* @__PURE__ */ jsx13(ChevronLeft2, {})
+      }
+    ),
+    /* @__PURE__ */ jsx13("div", { id: `tab-component-${resourceCode}`, className: "tab-component", children: /* @__PURE__ */ jsx13("div", { id: `content-component-${resourceCode}`, children: dataMenu.map((item) => {
+      if (item?.resAttributes?.IS_MENU === "1") {
+        return /* @__PURE__ */ jsxs12(UncontrolledDropdown2, { className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: "down", style: { backgroundColor: openMenu ? "#e0e0e0" : "" }, children: [
+          /* @__PURE__ */ jsx13(DropdownToggle3, { color: "#00000", style: { border: "none", boxShadow: "none", margin: 0, padding: 0 }, className: "background-none", children: /* @__PURE__ */ jsx13("div", { children: item.name }) }),
+          /* @__PURE__ */ jsx13(DropdownMenu3, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => /* @__PURE__ */ jsx13(DropdownItem2, { style: { borderRadius: "5px", margin: "0 0.5rem", width: "95%", padding: "0.5rem 0.5rem" }, children: /* @__PURE__ */ jsx13(Link, { to: x.url, style: { display: "block", width: "100%" }, children: x.name }) }, x.code)) })
+        ] }, item.code);
+      } else {
+        return /* @__PURE__ */ jsx13(
+          Link,
+          {
+            to: item.url,
+            className: classNames5("tab-custom-item", { active: item.url === url || tabParent && url?.split("/").length > 3 && item.url.startsWith(url.substring(0, url.lastIndexOf("/"))) }),
+            children: item.name
+          },
+          item.code
+        );
+      }
+    }) }) }),
+    /* @__PURE__ */ jsx13(
+      "div",
+      {
+        onClick: () => handleScroll(200),
+        className: classNames5("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
+        children: /* @__PURE__ */ jsx13(ChevronRight2, {})
+      }
+    )
+  ] }) });
+};
 
 // index.ts
 var Table_edit_default = table_default;
 export {
+  TabsMenuComponent,
   Table_edit_default as default,
   formartNumberic,
   generateUUID,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-table-edit",
   "license": "MIT",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",