react-table-edit 0.4.7 → 0.4.9

package/dist/index.js

@@ -73,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,
@@ -1530,13 +1535,13 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
   const gridRef = (0, import_react12.useRef)();
   const lag = window.localStorage.getItem("i18nextLng");
   const lang = lag ? lag : "vi";
+  let totalCount = dataSource.length;
   const pagingClient = pagingSetting?.allowPaging && (pagingSetting?.pagingClient || !(editDisable || addDisable));
   const searchClient = searchSetting?.searchEnable && (searchSetting?.searchClient || !(editDisable || addDisable));
-  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);
   (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]);
@@ -2143,6 +2148,25 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
       );
     }) }) });
   };
+  const focusNewElement = (col, row, onLoad = false) => {
+    setTimeout(() => {
+      const element = document.getElementById(`${idTable}-col${col}-row${row}`);
+      if (element) {
+        if (element.className.includes("react-select") || element.className.includes("form-edit")) {
+          element.getElementsByTagName("input")[0]?.focus();
+        } else {
+          element.focus();
+        }
+        if ((tableElement.current?.scrollHeight ?? 0) > 0) {
+          if ((tableElement.current?.scrollTop ?? 0) > (row - 1) * 34) {
+            tableElement.current?.scrollTo({ behavior: "smooth", top: (row - 1) * 34 });
+          } else if ((tableElement.current?.clientHeight ?? 0) - (haveSum ? 30 : 0) - headerColumns.length * 42 < row * 34 - (tableElement.current?.scrollTop ?? 0)) {
+            tableElement.current?.scrollTo({ behavior: "smooth", top: (tableElement.current?.scrollTop ?? 0) + 34 });
+          }
+        }
+      }
+    }, onLoad ? 100 : 0);
+  };
   const moveIndexRowToNewPage = () => {
     changeDataSource(dataSource, true);
     if (pagingClient && pagingSetting?.setCurrentPage && totalCount % (pagingSetting?.pageSize ?? 0) === 0) {
@@ -2150,18 +2174,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
     }
     if (tableElement) {
       setIndexFocus(totalCount);
-      setTimeout(() => {
-        tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
-        const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${totalCount + 1}`);
-        if (element) {
-          if (element.className.includes("react-select") || element.className.includes("form-edit")) {
-            element.getElementsByTagName("input")[0]?.focus();
-          } else {
-            element.focus();
-            element.scrollIntoView();
-          }
-        }
-      }, 100);
+      focusNewElement(columnFistEdit, totalCount + 1, true);
     }
   };
   const checkKeyDown = (e, row, col, indexRow, indexCol) => {
@@ -2174,14 +2187,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(newIndexCol, indexRow);
         e.preventDefault();
         return e.code;
       }
@@ -2194,14 +2200,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(newIndexCol, indexRow);
         e.preventDefault();
         return e.code;
       }
@@ -2213,16 +2212,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(indexCol, indexRow - 1, true);
           e.preventDefault();
           return e.code;
         }
@@ -2235,16 +2225,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(indexCol, indexRow + 1, true);
           e.preventDefault();
           return e.code;
         }
@@ -2257,16 +2238,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(indexCol, indexRow + 1, true);
       }
       e.preventDefault();
       return e.code;
@@ -2280,16 +2252,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(indexCol, indexRow + 1, true);
         }
         e.preventDefault();
         return e.code;
@@ -2329,23 +2292,14 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
     }
   });
   const handleAdd = () => {
+    const lengthData = dataSource.length;
     changeDataSource(dataSource, true);
     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(columnFistEdit, lengthData + 1, true);
     }
   };
   const handleDuplicate = (data, index) => {
@@ -2428,6 +2382,13 @@ 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) {
+        if (searchSetting?.setSearchTerm) {
+          searchSetting?.setSearchTerm("");
+        } else {
+          setSearchTerm("");
+        }
+      }
       if (haveNew) {
         data.push(defaultValue ? { ...defaultValue, [fieldKey]: generateUUID() } : {});
         setDataSource([...data]);
@@ -2937,6 +2898,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: [

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());
     };
@@ -1488,17 +1493,17 @@ var TableEdit = forwardRef2((props, ref) => {
   const gridRef = useRef2();
   const lag = window.localStorage.getItem("i18nextLng");
   const lang = lag ? lag : "vi";
+  let totalCount = dataSource.length;
   const pagingClient = pagingSetting?.allowPaging && (pagingSetting?.pagingClient || !(editDisable || addDisable));
   const searchClient = searchSetting?.searchEnable && (searchSetting?.searchClient || !(editDisable || addDisable));
-  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;
@@ -2101,6 +2106,25 @@ var TableEdit = forwardRef2((props, ref) => {
       );
     }) }) });
   };
+  const focusNewElement = (col, row, onLoad = false) => {
+    setTimeout(() => {
+      const element = document.getElementById(`${idTable}-col${col}-row${row}`);
+      if (element) {
+        if (element.className.includes("react-select") || element.className.includes("form-edit")) {
+          element.getElementsByTagName("input")[0]?.focus();
+        } else {
+          element.focus();
+        }
+        if ((tableElement.current?.scrollHeight ?? 0) > 0) {
+          if ((tableElement.current?.scrollTop ?? 0) > (row - 1) * 34) {
+            tableElement.current?.scrollTo({ behavior: "smooth", top: (row - 1) * 34 });
+          } else if ((tableElement.current?.clientHeight ?? 0) - (haveSum ? 30 : 0) - headerColumns.length * 42 < row * 34 - (tableElement.current?.scrollTop ?? 0)) {
+            tableElement.current?.scrollTo({ behavior: "smooth", top: (tableElement.current?.scrollTop ?? 0) + 34 });
+          }
+        }
+      }
+    }, onLoad ? 100 : 0);
+  };
   const moveIndexRowToNewPage = () => {
     changeDataSource(dataSource, true);
     if (pagingClient && pagingSetting?.setCurrentPage && totalCount % (pagingSetting?.pageSize ?? 0) === 0) {
@@ -2108,18 +2132,7 @@ var TableEdit = forwardRef2((props, ref) => {
     }
     if (tableElement) {
       setIndexFocus(totalCount);
-      setTimeout(() => {
-        tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
-        const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${totalCount + 1}`);
-        if (element) {
-          if (element.className.includes("react-select") || element.className.includes("form-edit")) {
-            element.getElementsByTagName("input")[0]?.focus();
-          } else {
-            element.focus();
-            element.scrollIntoView();
-          }
-        }
-      }, 100);
+      focusNewElement(columnFistEdit, totalCount + 1, true);
     }
   };
   const checkKeyDown = (e, row, col, indexRow, indexCol) => {
@@ -2132,14 +2145,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(newIndexCol, indexRow);
         e.preventDefault();
         return e.code;
       }
@@ -2152,14 +2158,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(newIndexCol, indexRow);
         e.preventDefault();
         return e.code;
       }
@@ -2171,16 +2170,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(indexCol, indexRow - 1, true);
           e.preventDefault();
           return e.code;
         }
@@ -2193,16 +2183,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(indexCol, indexRow + 1, true);
           e.preventDefault();
           return e.code;
         }
@@ -2215,16 +2196,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(indexCol, indexRow + 1, true);
       }
       e.preventDefault();
       return e.code;
@@ -2238,16 +2210,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(indexCol, indexRow + 1, true);
         }
         e.preventDefault();
         return e.code;
@@ -2287,23 +2250,14 @@ var TableEdit = forwardRef2((props, ref) => {
     }
   });
   const handleAdd = () => {
+    const lengthData = dataSource.length;
     changeDataSource(dataSource, true);
     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(columnFistEdit, lengthData + 1, true);
     }
   };
   const handleDuplicate = (data, index) => {
@@ -2386,6 +2340,13 @@ var TableEdit = forwardRef2((props, ref) => {
   };
   const changeDataSource = (data, haveNew = false) => {
     if (!editDisable && !addDisable && setDataSource) {
+      if (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm) {
+        if (searchSetting?.setSearchTerm) {
+          searchSetting?.setSearchTerm("");
+        } else {
+          setSearchTerm("");
+        }
+      }
       if (haveNew) {
         data.push(defaultValue ? { ...defaultValue, [fieldKey]: generateUUID() } : {});
         setDataSource([...data]);
@@ -2394,7 +2355,7 @@ var TableEdit = forwardRef2((props, ref) => {
       }
     }
   };
-  useEffect5(() => {
+  useEffect6(() => {
     setIndexFocus(-1);
     if (setSelectedItem) {
       if (isMulti) {
@@ -2421,7 +2382,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 +2856,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,7 +2910,7 @@ 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";
@@ -2970,7 +2936,7 @@ var TabsMenuComponent = ({
       setContentWidth(tabContent?.offsetWidth ?? 0);
     }
   };
-  useEffect6(() => {
+  useEffect7(() => {
     setUrl(window.location.pathname);
     window.addEventListener("resize", handleWindowResize);
     setTimeout(() => {
@@ -2985,7 +2951,7 @@ var TabsMenuComponent = ({
       window.removeEventListener("resize", handleWindowResize);
     };
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     const item = resources?.find((x) => x.code === (resourceCodeParent ? resourceCodeParent : resourceCode));
     if (item) {
       if (resourceCodeParent) {

package/package.json

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