react-table-edit 0.3.8 → 0.4.0

package/dist/index.js

@@ -1525,42 +1525,15 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
   const [columnLastEdit, setColumnlastEdit] = (0, import_react12.useState)(0);
   const [objWidthFix, setObjWidthFix] = (0, import_react12.useState)({});
   const [openPopupTree, setOpenPopupTree] = (0, import_react12.useState)(false);
-  const [dataDisplay, setDataDisplay] = (0, import_react12.useState)([]);
   const [openPopupSetupColumn, setOpenPopupSetupColumn] = (0, import_react12.useState)(false);
-  const [totalCount, setTotalCount] = (0, import_react12.useState)(0);
   const tableElement = (0, import_react12.useRef)(null);
   const gridRef = (0, import_react12.useRef)();
   const lag = window.localStorage.getItem("i18nextLng");
   const lang = lag ? lag : "vi";
   const pagingClient = pagingSetting?.allowPaging && !(editDisable || addDisable);
+  const 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) {
-      const length = dataSource.length;
-      if (length > 0) {
-        const arr = [];
-        for (let i = (pagingSetting?.pageSize ?? 0) * ((pagingSetting?.currentPage ?? 0) - 1); i < dataSource.length && i < (pagingSetting?.pageSize ?? 0) * (pagingSetting?.currentPage ?? 0); i++) {
-          arr.push(dataSource[i]);
-        }
-        setDataDisplay(arr);
-      }
-      setTotalCount(length);
-    }
-  }, [pagingSetting?.currentPage, pagingSetting?.pageSize]);
-  (0, import_react12.useEffect)(() => {
-    if (pagingClient && dataDisplay.length > 0) {
-      const length = dataSource?.length ?? 0;
-      if (length > 0) {
-        const arr = [];
-        for (let i = (pagingSetting?.pageSize ?? 0) * ((pagingSetting?.currentPage ?? 0) - 1); i < dataSource.length && i < (pagingSetting?.pageSize ?? 0) * (pagingSetting?.currentPage ?? 0); i++) {
-          arr.push(dataSource[i]);
-        }
-        setDataDisplay(arr);
-      }
-      setTotalCount(length);
-    }
-  }, [dataSource]);
   (0, import_react12.useEffect)(() => {
     let indexFirst = -1;
     let indexlast = -1;
@@ -1666,7 +1639,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
               }
             }
           }
-          changeDataSource(pagingClient ? dataDisplay : dataSource);
+          changeDataSource(dataSource);
           if (dataSourceChange) {
             dataSourceChange(dataSource);
           }
@@ -1686,7 +1659,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
             }
           }
         }
-        changeDataSource(pagingClient ? dataDisplay : dataSource);
+        changeDataSource(dataSource);
         if (dataSourceChange) {
           dataSourceChange(dataSource);
         }
@@ -1730,7 +1703,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
             onChange: (val) => {
               row[col.field] = val.target.value;
               if (col.callback) {
-                col.callback(val.target.value, indexRow);
+                col.callback(row, val.target.value, indexRow);
               }
               handleDataChange(row, col, indexRow);
             },
@@ -2142,35 +2115,25 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
       );
     }) }) });
   };
-  const moveIndexRowToNewPage = (isUp, addIfLast = false) => {
-    if (!isUp) {
-      let index = 0;
-      if (addIfLast) {
-        if (!pagingSetting?.allowPaging || (pagingSetting?.pageSize ?? 0) * ((pagingSetting?.currentPage ?? 1) - 1) + dataDisplay.length >= dataSource.length) {
-          changeDataSource(pagingClient ? dataDisplay : dataSource, true);
-        }
-      }
-      if (pagingClient && dataDisplay.length > (pagingSetting?.pageSize ?? 0) && pagingSetting?.setCurrentPage) {
-        pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 0) + 1);
-      } else {
-        index = dataDisplay.length - 1;
-      }
-      if (tableElement) {
-        setIndexFocus(index);
-        setTimeout(() => {
-          tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
-          const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${index + 1}`);
-          if (element) {
-            if (element.className.includes("react-select") || element.className.includes("form-edit")) {
-              element.getElementsByTagName("input")[0]?.focus();
-            } else {
-              element.focus();
-              element.scrollIntoView();
-            }
+  const moveIndexRowToNewPage = () => {
+    changeDataSource(dataSource, true);
+    if (pagingClient && pagingSetting?.setCurrentPage && totalCount % (pagingSetting?.pageSize ?? 0) === 0) {
+      pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 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) {
+          if (element.className.includes("react-select") || element.className.includes("form-edit")) {
+            element.getElementsByTagName("input")[0]?.focus();
+          } else {
+            element.focus();
+            element.scrollIntoView();
           }
-        }, 100);
-      }
-    } else {
+        }
+      }, 100);
     }
   };
   const checkKeyDown = (e, row, col, indexRow, indexCol) => {
@@ -2217,17 +2180,13 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
     } else if (e.code === "ArrowUp") {
       const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
       if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("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)) {
-        let index = -1;
         if (indexRow > 1) {
-          index = indexRow - 2;
-        } else if (pagingClient && (pagingSetting?.currentPage ?? 0) !== 1) {
-          index = (pagingSetting?.pageSize ?? 0) - 1;
-          pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) - 1);
-        }
-        if (index !== -1) {
-          setIndexFocus(index);
+          if (pagingClient && (pagingSetting?.currentPage ?? 0) !== 1 && indexRow % (pagingSetting?.pageSize ?? 0) === 1) {
+            pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) - 1);
+          }
+          setIndexFocus(indexRow - 2);
           setTimeout(() => {
-            const element2 = document.getElementById(`${idTable}-col${indexCol}-row${index + 1}`);
+            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();
@@ -2243,17 +2202,13 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
     } else if (e.code === "ArrowDown") {
       const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
       if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("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)) {
-        let index = -1;
-        if (indexRow < dataDisplay.length) {
-          index = indexRow;
-        } else if (pagingClient && (pagingSetting?.currentPage ?? 1) * (pagingSetting?.pageSize ?? 0) < totalCount) {
-          index = 0;
-          pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
-        }
-        if (index !== -1) {
-          setIndexFocus(index);
+        if (indexRow < totalCount) {
+          if (pagingClient && indexRow % (pagingSetting?.pageSize ?? 0) === 0) {
+            pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
+          }
+          setIndexFocus(indexRow);
           setTimeout(() => {
-            const element2 = document.getElementById(`${idTable}-col${indexCol}-row${index + 1}`);
+            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();
@@ -2267,12 +2222,15 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
         }
       }
     } else if (e.code === "Tab" && indexCol === columnLastEdit) {
-      if (indexRow === dataDisplay.length) {
-        moveIndexRowToNewPage(false, true);
+      if (indexRow === totalCount) {
+        moveIndexRowToNewPage();
       } else {
+        if (pagingClient && indexRow % (pagingSetting?.pageSize ?? 0) === 0) {
+          pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
+        }
         setIndexFocus(indexRow);
         setTimeout(() => {
-          const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${indexRow + 1}`);
+          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();
@@ -2283,15 +2241,19 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
         }, 100);
       }
       e.preventDefault();
+      return e.code;
     } else if ((e.code === "Enter" || e.code === "NumpadEnter") && (!editDisable && !addDisable)) {
       const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
       if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("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 (indexRow === dataDisplay.length) {
-          moveIndexRowToNewPage(false, true);
+        if (indexRow === totalCount) {
+          moveIndexRowToNewPage();
         } else {
+          if (pagingClient && indexRow % (pagingSetting?.pageSize ?? 0) === 0) {
+            pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
+          }
           setIndexFocus(indexRow);
           setTimeout(() => {
-            const element2 = document.getElementById(`${idTable}-col${columnFistEdit}-row${indexRow + 1}`);
+            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();
@@ -2339,18 +2301,13 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
     }
   });
   const handleAdd = () => {
-    changeDataSource(pagingClient ? dataDisplay : dataSource, true);
-    let index = 0;
-    if (pagingClient && dataDisplay.length > (pagingSetting?.pageSize ?? 0) && pagingSetting?.setCurrentPage) {
-      pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 0) + 1);
-    } else {
-      index = dataDisplay.length - 1;
-    }
+    changeDataSource(dataSource, true);
+    pagingSetting?.setCurrentPage(Math.floor(totalCount / (pagingSetting?.pageSize ?? 0)) + 1);
     if (tableElement) {
-      setIndexFocus(index);
+      setIndexFocus(totalCount);
       setTimeout(() => {
         tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
-        const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${index + 1}`);
+        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();
@@ -2370,15 +2327,12 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
         data[fieldKey] = defaultValue[fieldKey];
       }
       if (pagingClient) {
-        if (dataDisplay.length < (pagingSetting?.pageSize ?? 0)) {
-          dataDisplay.splice(index, 0, data);
-        }
         dataSource.splice(((pagingSetting?.currentPage ?? 1) - 1) * (pagingSetting?.pageSize ?? 0) + index, 0, { ...data });
       } else {
         dataSource.splice(index, 0, data);
       }
-      changeDataSource(pagingClient ? dataDisplay : dataSource);
-      if (tableElement && index === (pagingClient ? dataDisplay.length : dataSource.length)) {
+      changeDataSource(dataSource);
+      if (tableElement && index === totalCount) {
         setTimeout(() => {
           tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
         }, 100);
@@ -2388,15 +2342,12 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
   const handleInsertAfter = () => {
     if (toolbarSetting?.showBottomToolbar && !buttonSetting?.insertAfterDisable && !editDisable && !addDisable) {
       if (pagingClient) {
-        if (dataDisplay.length < (pagingSetting?.pageSize ?? 0)) {
-          dataDisplay.splice((indexFocus ?? -1) + 1, 0, { ...defaultValue });
-        }
         dataSource.splice(((pagingSetting?.currentPage ?? 1) - 1) * (pagingSetting?.pageSize ?? 0) + (indexFocus ?? -1) + 1, 0, { ...{ ...defaultValue } });
       } else {
         dataSource.splice((indexFocus ?? -1) + 1, 0, { ...defaultValue });
       }
-      changeDataSource(pagingClient ? dataDisplay : dataSource);
-      if (tableElement && indexFocus === dataSource.length) {
+      changeDataSource(dataSource);
+      if (tableElement && indexFocus === totalCount) {
         setTimeout(() => {
           tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
         }, 100);
@@ -2406,14 +2357,11 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
   const handleInsertBefore = () => {
     if (toolbarSetting?.showBottomToolbar && !buttonSetting?.insertBeforeDisable && !editDisable && !addDisable) {
       if (pagingClient) {
-        if (dataDisplay.length < (pagingSetting?.pageSize ?? 0)) {
-          dataDisplay.splice(indexFocus ?? -1, 0, { ...defaultValue });
-        }
         dataSource.splice(((pagingSetting?.currentPage ?? 1) - 1) * (pagingSetting?.pageSize ?? 0) + (indexFocus ?? -1), 0, { ...{ ...defaultValue } });
       } else {
         dataSource.splice(indexFocus ?? -1, 0, { ...defaultValue });
       }
-      changeDataSource(pagingClient ? dataDisplay : dataSource);
+      changeDataSource(dataSource);
     }
   };
   const handleDeleteAll = () => {
@@ -2446,29 +2394,15 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
       rowChange(dataRow, row + indexRow, "");
     });
     handleRefeshRow();
-    changeDataSource(pagingClient ? dataDisplay : dataSource);
+    changeDataSource(dataSource);
   };
   const changeDataSource = (data, haveNew = false) => {
-    if (data.length === 0 && !haveNew) {
-      setDataDisplay([]);
-      setDataSource([]);
-    } else if (!editDisable && !addDisable && setDataSource) {
-      if (pagingClient) {
-        if (haveNew) {
-          data.push(defaultValue ? { ...defaultValue, [fieldKey]: generateUUID() } : {});
-          setDataDisplay(data);
-          dataSource.push(defaultValue ? { ...defaultValue, [fieldKey]: generateUUID() } : {});
-        } else {
-          setDataDisplay([...data]);
-        }
-        setTotalCount(dataSource?.length ?? 0);
+    if (!editDisable && !addDisable && setDataSource) {
+      if (haveNew) {
+        data.push(defaultValue ? { ...defaultValue, [fieldKey]: generateUUID() } : {});
+        setDataSource([...data]);
       } else {
-        if (haveNew) {
-          data.push(defaultValue ? { ...defaultValue, [fieldKey]: generateUUID() } : {});
-          setDataSource([...data]);
-        } else {
-          setDataSource([...data]);
-        }
+        setDataSource([...data]);
       }
     }
   };
@@ -2554,18 +2488,11 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
           onPaste: (e) => {
             if (!editDisable && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
               navigator.clipboard.readText().then((rs) => {
-                if (pagingClient) {
-                  dataDisplay[indexRow] = JSON.parse(rs);
-                  if (fieldKey) {
-                    dataDisplay[indexRow][fieldKey] = defaultValue[fieldKey];
-                  }
-                } else {
-                  dataSource[indexRow] = JSON.parse(rs);
-                  if (fieldKey) {
-                    dataSource[indexRow][fieldKey] = defaultValue[fieldKey];
-                  }
+                dataSource[indexRow] = JSON.parse(rs);
+                if (fieldKey) {
+                  dataSource[indexRow][fieldKey] = defaultValue[fieldKey];
                 }
-                changeDataSource(pagingClient ? dataDisplay : dataSource);
+                changeDataSource(dataSource);
                 notificationSuccess(t("PasteSuccessful"));
               }).catch((ex) => {
                 alert(ex);
@@ -2772,22 +2699,16 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
               children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 import_reactstrap8.Input,
                 {
-                  checked: (pagingClient ? dataDisplay.length > 0 : dataSource.length > 0) && selectedRows?.length >= (pagingClient ? dataDisplay.length : dataSource.length),
+                  checked: totalCount > 0 && selectedRows?.length >= totalCount,
                   type: "checkbox",
                   className: (0, import_classnames10.default)("cursor-pointer", { "d-none": !isMulti }),
                   style: { textAlign: col.textAlign ?? "left", marginTop: 6 },
                   onChange: (e) => {
                     if (selectEnable) {
                       if (e.target.checked) {
-                        if (pagingClient) {
-                          setSelectedRows(dataDisplay.map((item) => {
-                            return item;
-                          }));
-                        } else {
-                          setSelectedRows(dataSource.map((item) => {
-                            return item;
-                          }));
-                        }
+                        setSelectedRows(dataSource.map((item) => {
+                          return item;
+                        }));
                       } else {
                         setSelectedRows([]);
                       }
@@ -2919,7 +2840,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames10.default)("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
         (indexFocus ?? -1) > -1 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames10.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: () => {
-            handleDuplicate(pagingClient ? dataDisplay[indexFocus ?? -1] : dataSource[indexFocus ?? -1], indexFocus ?? -1);
+            handleDuplicate(dataSource[indexFocus ?? -1], indexFocus ?? -1);
           }, className: "d-flex", children: t("Duplicate") }) }),
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames10.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames10.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
@@ -2959,24 +2880,13 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
               return renderHeaderCol(col, index, indexParent);
             }) }, indexParent);
           }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { className: "r-gridcontent", children: pagingClient ? dataDisplay.map((row, indexRow) => {
-            const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
-            return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-              "tr",
-              {
-                className: (0, import_classnames10.default)("r-row", { "last-row": indexRow === dataDisplay.length - 1 }, { "fisrt-row": indexRow === 0 }),
-                children: contentColumns.map((col, indexCol) => {
-                  return renderContentCol(col, row, indexRow, indexCol, isSelected);
-                })
-              },
-              `row-${indexRow}`
-            );
-          }) : dataSource.map((row, indexRow) => {
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { className: "r-gridcontent", children: dataSource.map((row, indexRow) => {
             const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
-            return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            const flagDisplay = !pagingClient || indexRow + 1 > (pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1) && indexRow < (pagingSetting.pageSize ?? 0) * (pagingSetting.currentPage ?? 0);
+            return flagDisplay && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "tr",
               {
-                className: (0, import_classnames10.default)("r-row", { "last-row": indexRow === dataDisplay.length - 1 }, { "fisrt-row": indexRow === 0 }),
+                className: (0, import_classnames10.default)("r-row", { "last-row": indexRow === (pagingClient ? totalCount % (pagingSetting?.pageSize ?? 0) : totalCount - 1) }, { "fisrt-row": indexRow === 0 }),
                 children: contentColumns.map((col, indexCol) => {
                   return renderContentCol(col, row, indexRow, indexCol, isSelected);
                 })

package/dist/index.mjs

@@ -1484,42 +1484,15 @@ var TableEdit = forwardRef2((props, ref) => {
   const [columnLastEdit, setColumnlastEdit] = useState5(0);
   const [objWidthFix, setObjWidthFix] = useState5({});
   const [openPopupTree, setOpenPopupTree] = useState5(false);
-  const [dataDisplay, setDataDisplay] = useState5([]);
   const [openPopupSetupColumn, setOpenPopupSetupColumn] = useState5(false);
-  const [totalCount, setTotalCount] = useState5(0);
   const tableElement = useRef2(null);
   const gridRef = useRef2();
   const lag = window.localStorage.getItem("i18nextLng");
   const lang = lag ? lag : "vi";
   const pagingClient = pagingSetting?.allowPaging && !(editDisable || addDisable);
+  const 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) {
-      const length = dataSource.length;
-      if (length > 0) {
-        const arr = [];
-        for (let i = (pagingSetting?.pageSize ?? 0) * ((pagingSetting?.currentPage ?? 0) - 1); i < dataSource.length && i < (pagingSetting?.pageSize ?? 0) * (pagingSetting?.currentPage ?? 0); i++) {
-          arr.push(dataSource[i]);
-        }
-        setDataDisplay(arr);
-      }
-      setTotalCount(length);
-    }
-  }, [pagingSetting?.currentPage, pagingSetting?.pageSize]);
-  useEffect5(() => {
-    if (pagingClient && dataDisplay.length > 0) {
-      const length = dataSource?.length ?? 0;
-      if (length > 0) {
-        const arr = [];
-        for (let i = (pagingSetting?.pageSize ?? 0) * ((pagingSetting?.currentPage ?? 0) - 1); i < dataSource.length && i < (pagingSetting?.pageSize ?? 0) * (pagingSetting?.currentPage ?? 0); i++) {
-          arr.push(dataSource[i]);
-        }
-        setDataDisplay(arr);
-      }
-      setTotalCount(length);
-    }
-  }, [dataSource]);
   useEffect5(() => {
     let indexFirst = -1;
     let indexlast = -1;
@@ -1625,7 +1598,7 @@ var TableEdit = forwardRef2((props, ref) => {
               }
             }
           }
-          changeDataSource(pagingClient ? dataDisplay : dataSource);
+          changeDataSource(dataSource);
           if (dataSourceChange) {
             dataSourceChange(dataSource);
           }
@@ -1645,7 +1618,7 @@ var TableEdit = forwardRef2((props, ref) => {
             }
           }
         }
-        changeDataSource(pagingClient ? dataDisplay : dataSource);
+        changeDataSource(dataSource);
         if (dataSourceChange) {
           dataSourceChange(dataSource);
         }
@@ -1689,7 +1662,7 @@ var TableEdit = forwardRef2((props, ref) => {
             onChange: (val) => {
               row[col.field] = val.target.value;
               if (col.callback) {
-                col.callback(val.target.value, indexRow);
+                col.callback(row, val.target.value, indexRow);
               }
               handleDataChange(row, col, indexRow);
             },
@@ -2101,35 +2074,25 @@ var TableEdit = forwardRef2((props, ref) => {
       );
     }) }) });
   };
-  const moveIndexRowToNewPage = (isUp, addIfLast = false) => {
-    if (!isUp) {
-      let index = 0;
-      if (addIfLast) {
-        if (!pagingSetting?.allowPaging || (pagingSetting?.pageSize ?? 0) * ((pagingSetting?.currentPage ?? 1) - 1) + dataDisplay.length >= dataSource.length) {
-          changeDataSource(pagingClient ? dataDisplay : dataSource, true);
-        }
-      }
-      if (pagingClient && dataDisplay.length > (pagingSetting?.pageSize ?? 0) && pagingSetting?.setCurrentPage) {
-        pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 0) + 1);
-      } else {
-        index = dataDisplay.length - 1;
-      }
-      if (tableElement) {
-        setIndexFocus(index);
-        setTimeout(() => {
-          tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
-          const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${index + 1}`);
-          if (element) {
-            if (element.className.includes("react-select") || element.className.includes("form-edit")) {
-              element.getElementsByTagName("input")[0]?.focus();
-            } else {
-              element.focus();
-              element.scrollIntoView();
-            }
+  const moveIndexRowToNewPage = () => {
+    changeDataSource(dataSource, true);
+    if (pagingClient && pagingSetting?.setCurrentPage && totalCount % (pagingSetting?.pageSize ?? 0) === 0) {
+      pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 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) {
+          if (element.className.includes("react-select") || element.className.includes("form-edit")) {
+            element.getElementsByTagName("input")[0]?.focus();
+          } else {
+            element.focus();
+            element.scrollIntoView();
           }
-        }, 100);
-      }
-    } else {
+        }
+      }, 100);
     }
   };
   const checkKeyDown = (e, row, col, indexRow, indexCol) => {
@@ -2176,17 +2139,13 @@ var TableEdit = forwardRef2((props, ref) => {
     } else if (e.code === "ArrowUp") {
       const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
       if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("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)) {
-        let index = -1;
         if (indexRow > 1) {
-          index = indexRow - 2;
-        } else if (pagingClient && (pagingSetting?.currentPage ?? 0) !== 1) {
-          index = (pagingSetting?.pageSize ?? 0) - 1;
-          pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) - 1);
-        }
-        if (index !== -1) {
-          setIndexFocus(index);
+          if (pagingClient && (pagingSetting?.currentPage ?? 0) !== 1 && indexRow % (pagingSetting?.pageSize ?? 0) === 1) {
+            pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) - 1);
+          }
+          setIndexFocus(indexRow - 2);
           setTimeout(() => {
-            const element2 = document.getElementById(`${idTable}-col${indexCol}-row${index + 1}`);
+            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();
@@ -2202,17 +2161,13 @@ var TableEdit = forwardRef2((props, ref) => {
     } else if (e.code === "ArrowDown") {
       const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
       if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("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)) {
-        let index = -1;
-        if (indexRow < dataDisplay.length) {
-          index = indexRow;
-        } else if (pagingClient && (pagingSetting?.currentPage ?? 1) * (pagingSetting?.pageSize ?? 0) < totalCount) {
-          index = 0;
-          pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
-        }
-        if (index !== -1) {
-          setIndexFocus(index);
+        if (indexRow < totalCount) {
+          if (pagingClient && indexRow % (pagingSetting?.pageSize ?? 0) === 0) {
+            pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
+          }
+          setIndexFocus(indexRow);
           setTimeout(() => {
-            const element2 = document.getElementById(`${idTable}-col${indexCol}-row${index + 1}`);
+            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();
@@ -2226,12 +2181,15 @@ var TableEdit = forwardRef2((props, ref) => {
         }
       }
     } else if (e.code === "Tab" && indexCol === columnLastEdit) {
-      if (indexRow === dataDisplay.length) {
-        moveIndexRowToNewPage(false, true);
+      if (indexRow === totalCount) {
+        moveIndexRowToNewPage();
       } else {
+        if (pagingClient && indexRow % (pagingSetting?.pageSize ?? 0) === 0) {
+          pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
+        }
         setIndexFocus(indexRow);
         setTimeout(() => {
-          const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${indexRow + 1}`);
+          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();
@@ -2242,15 +2200,19 @@ var TableEdit = forwardRef2((props, ref) => {
         }, 100);
       }
       e.preventDefault();
+      return e.code;
     } else if ((e.code === "Enter" || e.code === "NumpadEnter") && (!editDisable && !addDisable)) {
       const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
       if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("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 (indexRow === dataDisplay.length) {
-          moveIndexRowToNewPage(false, true);
+        if (indexRow === totalCount) {
+          moveIndexRowToNewPage();
         } else {
+          if (pagingClient && indexRow % (pagingSetting?.pageSize ?? 0) === 0) {
+            pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
+          }
           setIndexFocus(indexRow);
           setTimeout(() => {
-            const element2 = document.getElementById(`${idTable}-col${columnFistEdit}-row${indexRow + 1}`);
+            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();
@@ -2298,18 +2260,13 @@ var TableEdit = forwardRef2((props, ref) => {
     }
   });
   const handleAdd = () => {
-    changeDataSource(pagingClient ? dataDisplay : dataSource, true);
-    let index = 0;
-    if (pagingClient && dataDisplay.length > (pagingSetting?.pageSize ?? 0) && pagingSetting?.setCurrentPage) {
-      pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 0) + 1);
-    } else {
-      index = dataDisplay.length - 1;
-    }
+    changeDataSource(dataSource, true);
+    pagingSetting?.setCurrentPage(Math.floor(totalCount / (pagingSetting?.pageSize ?? 0)) + 1);
     if (tableElement) {
-      setIndexFocus(index);
+      setIndexFocus(totalCount);
       setTimeout(() => {
         tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
-        const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${index + 1}`);
+        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();
@@ -2329,15 +2286,12 @@ var TableEdit = forwardRef2((props, ref) => {
         data[fieldKey] = defaultValue[fieldKey];
       }
       if (pagingClient) {
-        if (dataDisplay.length < (pagingSetting?.pageSize ?? 0)) {
-          dataDisplay.splice(index, 0, data);
-        }
         dataSource.splice(((pagingSetting?.currentPage ?? 1) - 1) * (pagingSetting?.pageSize ?? 0) + index, 0, { ...data });
       } else {
         dataSource.splice(index, 0, data);
       }
-      changeDataSource(pagingClient ? dataDisplay : dataSource);
-      if (tableElement && index === (pagingClient ? dataDisplay.length : dataSource.length)) {
+      changeDataSource(dataSource);
+      if (tableElement && index === totalCount) {
         setTimeout(() => {
           tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
         }, 100);
@@ -2347,15 +2301,12 @@ var TableEdit = forwardRef2((props, ref) => {
   const handleInsertAfter = () => {
     if (toolbarSetting?.showBottomToolbar && !buttonSetting?.insertAfterDisable && !editDisable && !addDisable) {
       if (pagingClient) {
-        if (dataDisplay.length < (pagingSetting?.pageSize ?? 0)) {
-          dataDisplay.splice((indexFocus ?? -1) + 1, 0, { ...defaultValue });
-        }
         dataSource.splice(((pagingSetting?.currentPage ?? 1) - 1) * (pagingSetting?.pageSize ?? 0) + (indexFocus ?? -1) + 1, 0, { ...{ ...defaultValue } });
       } else {
         dataSource.splice((indexFocus ?? -1) + 1, 0, { ...defaultValue });
       }
-      changeDataSource(pagingClient ? dataDisplay : dataSource);
-      if (tableElement && indexFocus === dataSource.length) {
+      changeDataSource(dataSource);
+      if (tableElement && indexFocus === totalCount) {
         setTimeout(() => {
           tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
         }, 100);
@@ -2365,14 +2316,11 @@ var TableEdit = forwardRef2((props, ref) => {
   const handleInsertBefore = () => {
     if (toolbarSetting?.showBottomToolbar && !buttonSetting?.insertBeforeDisable && !editDisable && !addDisable) {
       if (pagingClient) {
-        if (dataDisplay.length < (pagingSetting?.pageSize ?? 0)) {
-          dataDisplay.splice(indexFocus ?? -1, 0, { ...defaultValue });
-        }
         dataSource.splice(((pagingSetting?.currentPage ?? 1) - 1) * (pagingSetting?.pageSize ?? 0) + (indexFocus ?? -1), 0, { ...{ ...defaultValue } });
       } else {
         dataSource.splice(indexFocus ?? -1, 0, { ...defaultValue });
       }
-      changeDataSource(pagingClient ? dataDisplay : dataSource);
+      changeDataSource(dataSource);
     }
   };
   const handleDeleteAll = () => {
@@ -2405,29 +2353,15 @@ var TableEdit = forwardRef2((props, ref) => {
       rowChange(dataRow, row + indexRow, "");
     });
     handleRefeshRow();
-    changeDataSource(pagingClient ? dataDisplay : dataSource);
+    changeDataSource(dataSource);
   };
   const changeDataSource = (data, haveNew = false) => {
-    if (data.length === 0 && !haveNew) {
-      setDataDisplay([]);
-      setDataSource([]);
-    } else if (!editDisable && !addDisable && setDataSource) {
-      if (pagingClient) {
-        if (haveNew) {
-          data.push(defaultValue ? { ...defaultValue, [fieldKey]: generateUUID() } : {});
-          setDataDisplay(data);
-          dataSource.push(defaultValue ? { ...defaultValue, [fieldKey]: generateUUID() } : {});
-        } else {
-          setDataDisplay([...data]);
-        }
-        setTotalCount(dataSource?.length ?? 0);
+    if (!editDisable && !addDisable && setDataSource) {
+      if (haveNew) {
+        data.push(defaultValue ? { ...defaultValue, [fieldKey]: generateUUID() } : {});
+        setDataSource([...data]);
       } else {
-        if (haveNew) {
-          data.push(defaultValue ? { ...defaultValue, [fieldKey]: generateUUID() } : {});
-          setDataSource([...data]);
-        } else {
-          setDataSource([...data]);
-        }
+        setDataSource([...data]);
       }
     }
   };
@@ -2513,18 +2447,11 @@ var TableEdit = forwardRef2((props, ref) => {
           onPaste: (e) => {
             if (!editDisable && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
               navigator.clipboard.readText().then((rs) => {
-                if (pagingClient) {
-                  dataDisplay[indexRow] = JSON.parse(rs);
-                  if (fieldKey) {
-                    dataDisplay[indexRow][fieldKey] = defaultValue[fieldKey];
-                  }
-                } else {
-                  dataSource[indexRow] = JSON.parse(rs);
-                  if (fieldKey) {
-                    dataSource[indexRow][fieldKey] = defaultValue[fieldKey];
-                  }
+                dataSource[indexRow] = JSON.parse(rs);
+                if (fieldKey) {
+                  dataSource[indexRow][fieldKey] = defaultValue[fieldKey];
                 }
-                changeDataSource(pagingClient ? dataDisplay : dataSource);
+                changeDataSource(dataSource);
                 notificationSuccess(t("PasteSuccessful"));
               }).catch((ex) => {
                 alert(ex);
@@ -2731,22 +2658,16 @@ var TableEdit = forwardRef2((props, ref) => {
               children: /* @__PURE__ */ jsx12(
                 Input6,
                 {
-                  checked: (pagingClient ? dataDisplay.length > 0 : dataSource.length > 0) && selectedRows?.length >= (pagingClient ? dataDisplay.length : dataSource.length),
+                  checked: totalCount > 0 && selectedRows?.length >= totalCount,
                   type: "checkbox",
                   className: classnames6("cursor-pointer", { "d-none": !isMulti }),
                   style: { textAlign: col.textAlign ?? "left", marginTop: 6 },
                   onChange: (e) => {
                     if (selectEnable) {
                       if (e.target.checked) {
-                        if (pagingClient) {
-                          setSelectedRows(dataDisplay.map((item) => {
-                            return item;
-                          }));
-                        } else {
-                          setSelectedRows(dataSource.map((item) => {
-                            return item;
-                          }));
-                        }
+                        setSelectedRows(dataSource.map((item) => {
+                          return item;
+                        }));
                       } else {
                         setSelectedRows([]);
                       }
@@ -2878,7 +2799,7 @@ var TableEdit = forwardRef2((props, ref) => {
         /* @__PURE__ */ jsx12("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
         (indexFocus ?? -1) > -1 ? /* @__PURE__ */ jsxs11(Fragment13, { children: [
           /* @__PURE__ */ jsx12("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: () => {
-            handleDuplicate(pagingClient ? dataDisplay[indexFocus ?? -1] : dataSource[indexFocus ?? -1], indexFocus ?? -1);
+            handleDuplicate(dataSource[indexFocus ?? -1], indexFocus ?? -1);
           }, className: "d-flex", children: t("Duplicate") }) }),
           /* @__PURE__ */ jsx12("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
           /* @__PURE__ */ jsx12("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
@@ -2918,24 +2839,13 @@ var TableEdit = forwardRef2((props, ref) => {
               return renderHeaderCol(col, index, indexParent);
             }) }, indexParent);
           }) }),
-          /* @__PURE__ */ jsx12("tbody", { className: "r-gridcontent", children: pagingClient ? dataDisplay.map((row, indexRow) => {
-            const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
-            return /* @__PURE__ */ jsx12(
-              "tr",
-              {
-                className: classnames6("r-row", { "last-row": indexRow === dataDisplay.length - 1 }, { "fisrt-row": indexRow === 0 }),
-                children: contentColumns.map((col, indexCol) => {
-                  return renderContentCol(col, row, indexRow, indexCol, isSelected);
-                })
-              },
-              `row-${indexRow}`
-            );
-          }) : dataSource.map((row, indexRow) => {
+          /* @__PURE__ */ jsx12("tbody", { className: "r-gridcontent", children: dataSource.map((row, indexRow) => {
             const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
-            return /* @__PURE__ */ jsx12(
+            const flagDisplay = !pagingClient || indexRow + 1 > (pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1) && indexRow < (pagingSetting.pageSize ?? 0) * (pagingSetting.currentPage ?? 0);
+            return flagDisplay && /* @__PURE__ */ jsx12(
               "tr",
               {
-                className: classnames6("r-row", { "last-row": indexRow === dataDisplay.length - 1 }, { "fisrt-row": indexRow === 0 }),
+                className: classnames6("r-row", { "last-row": indexRow === (pagingClient ? totalCount % (pagingSetting?.pageSize ?? 0) : totalCount - 1) }, { "fisrt-row": indexRow === 0 }),
                 children: contentColumns.map((col, indexCol) => {
                   return renderContentCol(col, row, indexRow, indexCol, isSelected);
                 })

package/package.json

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