react-table-edit 0.3.5 → 0.3.8

package/dist/index.js

@@ -1488,22 +1488,14 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
     commandClick,
     dataSourceChange,
     rowChange,
-    allowPaging,
-    pageSize,
-    totalItem,
-    currentPage,
-    setCurrentPage,
-    setPageSize,
+    pagingSetting,
     setDataSource,
     height,
     maxHeight,
     minHeight,
     defaultValue,
     haveSum,
-    toolbarOptions,
-    toolbarBottomOptions,
-    showTopToolbar,
-    showBottomToolbar,
+    toolbarSetting,
     searchTerm,
     setSearchTerm,
     searchEnable,
@@ -1512,10 +1504,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
     selectEnable,
     editDisable,
     addDisable,
-    deleteAllDisable,
-    insertAfterDisable,
-    insertBeforeDisable,
-    duplicateDisable,
+    buttonSetting,
     decimalSeparator = ",",
     thousandSeparator = ".",
     handleSelect,
@@ -1536,13 +1525,42 @@ 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 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;
@@ -1648,7 +1666,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
               }
             }
           }
-          changeDataSource(dataSource);
+          changeDataSource(pagingClient ? dataDisplay : dataSource);
           if (dataSourceChange) {
             dataSourceChange(dataSource);
           }
@@ -1668,7 +1686,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
             }
           }
         }
-        changeDataSource(dataSource);
+        changeDataSource(pagingClient ? dataDisplay : dataSource);
         if (dataSourceChange) {
           dataSourceChange(dataSource);
         }
@@ -1695,8 +1713,8 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
   };
   const defaultToolbarOption = searchEnable === true ? [{ template: searchTemplate, align: "left" }] : [];
   let toolbarTopOption = [];
-  if (toolbarOptions) {
-    toolbarTopOption = [...defaultToolbarOption, ...toolbarOptions];
+  if (toolbarSetting?.toolbarOptions) {
+    toolbarTopOption = [...defaultToolbarOption, ...toolbarSetting?.toolbarOptions];
   } else {
     toolbarTopOption = [...defaultToolbarOption];
   }
@@ -2004,7 +2022,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
               checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
             },
             onPaste: (e) => {
-              if (showBottomToolbar && !editDisable && !addDisable) {
+              if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable) {
                 pasteDataFromExcel(indexRow, indexCol);
                 e.preventDefault();
               }
@@ -2086,7 +2104,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
               checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
             },
             onPaste: (e) => {
-              if (showBottomToolbar && !editDisable && !addDisable) {
+              if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable) {
                 pasteDataFromExcel(indexRow, indexCol);
                 e.preventDefault();
               }
@@ -2124,6 +2142,37 @@ 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();
+            }
+          }
+        }, 100);
+      }
+    } else {
+    }
+  };
   const checkKeyDown = (e, row, col, indexRow, indexCol) => {
     if (e.code === "ArrowRight") {
       let newIndexCol = -1;
@@ -2145,8 +2194,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
         e.preventDefault();
         return e.code;
       }
-    }
-    if (e.code === "ArrowLeft") {
+    } else if (e.code === "ArrowLeft") {
       let newIndexCol = -1;
       for (let i = indexCol - 2; i >= 0; i--) {
         if (contentColumns[i].editEnable && contentColumns[i].visible !== false && (!contentColumns[i].disabledCondition || !contentColumns[i].disabledCondition(row))) {
@@ -2166,14 +2214,20 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
         e.preventDefault();
         return e.code;
       }
-    }
-    if (e.code === "ArrowUp") {
+    } 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) {
-          setIndexFocus(indexRow - 2);
+          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);
           setTimeout(() => {
-            const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow - 1}`);
+            const element2 = document.getElementById(`${idTable}-col${indexCol}-row${index + 1}`);
             if (element2) {
               if (element2.className.includes("react-select") || element2.className.includes("form-edit")) {
                 element2.getElementsByTagName("input")[0]?.focus();
@@ -2186,14 +2240,20 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
           return e.code;
         }
       }
-    }
-    if (e.code === "ArrowDown") {
+    } 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)) {
-        if (indexRow < dataSource?.length) {
-          setIndexFocus(indexRow);
+        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);
           setTimeout(() => {
-            const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow + 1}`);
+            const element2 = document.getElementById(`${idTable}-col${indexCol}-row${index + 1}`);
             if (element2) {
               if (element2.className.includes("react-select") || element2.className.includes("form-edit")) {
                 element2.getElementsByTagName("input")[0]?.focus();
@@ -2206,40 +2266,32 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
           return e.code;
         }
       }
-    }
-    if (e.code === "Tab" && indexCol === columnLastEdit) {
-      if (indexRow === dataSource?.length) {
-        changeDataSource(dataSource, true);
-        if (tableElement) {
-          setTimeout(() => {
-            tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
-          }, 100);
-        }
-        if (!(!editDisable && !addDisable)) {
-          return false;
-        }
-      }
-      setIndexFocus(indexRow);
-      setTimeout(() => {
-        const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${indexRow + 1}`);
-        if (element) {
-          if (element.className.includes("react-select") || element.className.includes("form-edit")) {
-            element.getElementsByTagName("input")[0]?.focus();
-          } else {
-            element.focus();
-            element.scrollIntoView();
+    } else if (e.code === "Tab" && indexCol === columnLastEdit) {
+      if (indexRow === dataDisplay.length) {
+        moveIndexRowToNewPage(false, true);
+      } else {
+        setIndexFocus(indexRow);
+        setTimeout(() => {
+          const element = document.getElementById(`${idTable}-col${columnFistEdit}-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);
+        }, 100);
+      }
       e.preventDefault();
-    }
-    if ((e.code === "Enter" || e.code === "NumpadEnter") && (!editDisable && !addDisable)) {
+    } 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 < dataSource?.length) {
+        if (indexRow === dataDisplay.length) {
+          moveIndexRowToNewPage(false, true);
+        } else {
           setIndexFocus(indexRow);
           setTimeout(() => {
-            const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow + 1}`);
+            const element2 = document.getElementById(`${idTable}-col${columnFistEdit}-row${indexRow + 1}`);
             if (element2) {
               if (element2.className.includes("react-select") || element2.className.includes("form-edit")) {
                 element2.getElementsByTagName("input")[0]?.focus();
@@ -2248,14 +2300,11 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
               }
             }
           }, 100);
-        } else {
-          handleAdd();
         }
         e.preventDefault();
         return e.code;
       }
-    }
-    if (e.code === "KeyD" && e.ctrlKey == true && (!editDisable && !addDisable)) {
+    } else if (e.code === "KeyD" && e.ctrlKey == true && (!editDisable && !addDisable)) {
       handleDuplicate(dataSource[indexFocus ?? -1], indexRow);
       e.preventDefault();
       return e.code;
@@ -2263,16 +2312,22 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
     return "";
   };
   const onChangePage = (args) => {
-    if (args.newProp.currentPage === args.oldProp.currentPage) {
-      return;
+    if (pagingSetting?.setCurrentPage) {
+      if (args.newProp.currentPage === args.oldProp.currentPage) {
+        return;
+      }
+      pagingSetting.setCurrentPage(args.currentPage);
     }
-    setCurrentPage(args.currentPage);
   };
   const onChangePageSize = (args) => {
-    if (allowPaging) {
-      if (pageSize !== args.pageSize) {
-        setPageSize(args.pageSize);
-        setCurrentPage(1);
+    if (pagingSetting?.allowPaging) {
+      if (pagingSetting?.pageSize !== args.pageSize) {
+        if (pagingSetting?.setPageSize) {
+          pagingSetting.setPageSize(args.pageSize);
+        }
+        if (pagingSetting?.setCurrentPage) {
+          pagingSetting.setCurrentPage(1);
+        }
       }
     }
   };
@@ -2284,12 +2339,18 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
     }
   });
   const handleAdd = () => {
-    changeDataSource(dataSource, true);
+    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;
+    }
     if (tableElement) {
-      setIndexFocus(dataSource?.length);
+      setIndexFocus(index);
       setTimeout(() => {
         tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
-        const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${dataSource?.length + 1}`);
+        const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${index + 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();
@@ -2300,26 +2361,24 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
       }, 100);
     }
   };
-  const deleteAll = () => {
-    if (!editDisable && !addDisable) {
-      setIndexFocus(-1);
-      changeDataSource([], false);
-    }
-  };
   const handleDuplicate = (data, index) => {
-    if (showBottomToolbar && !editDisable && !addDisable) {
+    if (toolbarSetting?.showBottomToolbar && !buttonSetting?.duplicateDisable && !editDisable && !addDisable) {
       if (fieldKey) {
-        const newdata = { ...data };
         fieldUniKey.forEach((item) => {
-          newdata[item] = defaultValue[item];
+          data[item] = defaultValue[item];
         });
-        newdata[fieldKey] = defaultValue[fieldKey];
-        dataSource?.splice(index, 0, newdata);
+        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 });
+        dataSource.splice(index, 0, data);
       }
-      changeDataSource(dataSource);
-      if (tableElement && index === dataSource?.length) {
+      changeDataSource(pagingClient ? dataDisplay : dataSource);
+      if (tableElement && index === (pagingClient ? dataDisplay.length : dataSource.length)) {
         setTimeout(() => {
           tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
         }, 100);
@@ -2327,10 +2386,17 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
     }
   };
   const handleInsertAfter = () => {
-    if (showBottomToolbar && !editDisable && !addDisable) {
-      dataSource?.splice((indexFocus ?? -1) + 1, 0, { ...defaultValue });
-      changeDataSource(dataSource);
-      if (tableElement && indexFocus === dataSource?.length) {
+    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) {
         setTimeout(() => {
           tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
         }, 100);
@@ -2338,16 +2404,29 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
     }
   };
   const handleInsertBefore = () => {
-    if (showBottomToolbar && !editDisable && !addDisable) {
-      dataSource?.splice(indexFocus ?? -1, 0, { ...defaultValue });
-      changeDataSource(dataSource);
+    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);
     }
   };
   const handleDeleteAll = () => {
-    if (showBottomToolbar && !editDisable && !addDisable) {
+    if (toolbarSetting?.showBottomToolbar && !buttonSetting?.deleteAllDisable && !editDisable && !addDisable) {
       messageBoxConfirmDelete(t, deleteAll, "");
     }
   };
+  const deleteAll = () => {
+    if (!editDisable && !addDisable) {
+      setIndexFocus(-1);
+      changeDataSource([], false);
+    }
+  };
   const pasteDataFromExcel = async (row, col) => {
     const clipboard = await navigator.clipboard.readText();
     const arrayRow = clipboard.trimEnd().split("\n");
@@ -2356,7 +2435,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
       let dataRow = dataSource[row + indexRow];
       if (!dataRow) {
         dataRow = { ...defaultValue };
-        dataSource?.push(dataRow);
+        dataSource.push(dataRow);
       }
       arrayCol.forEach((element, index) => {
         const column = contentColumns[col + index];
@@ -2367,15 +2446,31 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
       rowChange(dataRow, row + indexRow, "");
     });
     handleRefeshRow();
-    changeDataSource(dataSource);
+    changeDataSource(pagingClient ? dataDisplay : dataSource);
   };
   const changeDataSource = (data, haveNew = false) => {
-    if (!editDisable && !addDisable && setDataSource) {
-      if (haveNew) {
-        data.push(defaultValue ? { ...defaultValue, [fieldKey]: generateUUID() } : {});
+    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);
+      } else {
+        if (haveNew) {
+          data.push(defaultValue ? { ...defaultValue, [fieldKey]: generateUUID() } : {});
+          setDataSource([...data]);
+        } else {
+          setDataSource([...data]);
+        }
       }
     }
-    setDataSource([...data]);
   };
   (0, import_react12.useEffect)(() => {
     setIndexFocus(-1);
@@ -2459,11 +2554,18 @@ 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) => {
-                dataSource[indexRow] = JSON.parse(rs);
-                if (fieldKey) {
-                  dataSource[indexRow][fieldKey] = defaultValue[fieldKey];
+                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];
+                  }
                 }
-                changeDataSource(dataSource);
+                changeDataSource(pagingClient ? dataDisplay : dataSource);
                 notificationSuccess(t("PasteSuccessful"));
               }).catch((ex) => {
                 alert(ex);
@@ -2670,17 +2772,22 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
               children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 import_reactstrap8.Input,
                 {
-                  checked: selectedRows?.length >= dataSource?.length && dataSource?.length > 0,
+                  checked: (pagingClient ? dataDisplay.length > 0 : dataSource.length > 0) && selectedRows?.length >= (pagingClient ? dataDisplay.length : dataSource.length),
                   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) {
-                        const arr = dataSource?.map((item) => {
-                          return item;
-                        });
-                        setSelectedRows(arr);
+                        if (pagingClient) {
+                          setSelectedRows(dataDisplay.map((item) => {
+                            return item;
+                          }));
+                        } else {
+                          setSelectedRows(dataSource.map((item) => {
+                            return item;
+                          }));
+                        }
                       } else {
                         setSelectedRows([]);
                       }
@@ -2787,7 +2894,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
           maxWidth: col.maxWidth,
           textAlign: col.textAlign ? col.textAlign : "left"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-footer-div", children: col.haveSum === true && col.editType === "numeric" ? formartNumberic(dataSource?.reduce(function(accumulator, currentValue) {
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-footer-div", children: col.haveSum === true && col.editType === "numeric" ? formartNumberic(dataSource.reduce(function(accumulator, currentValue) {
           return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
         }, 0), decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) : "" })
       }
@@ -2811,22 +2918,22 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
       /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "r-toolbar-left", children: [
         /* @__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 || duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: () => {
-            handleDuplicate(dataSource[indexFocus ?? -1], indexFocus ?? -1);
+          /* @__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);
           }, 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 || 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 || insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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") }) })
         ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: " " }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames10.default)("r-toolbar-item", { "d-none": editDisable || addDisable || deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
-        toolbarBottomOptions?.map((item, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames10.default)("r-toolbar-item", { "d-none": editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
+        toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
           return item.align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : "";
         })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-toolbar-center", children: toolbarBottomOptions?.map((item, index) => {
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
         return item.align === "center" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : "";
       }) }),
       /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "r-toolbar-right", children: [
-        toolbarBottomOptions?.map((item, index) => {
+        toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
           return item.align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : "";
         }),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames10.default)("r-toolbar-item me-25", { "d-none": headerColumns.length > 1 }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_becoxy_icons4.Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
@@ -2845,19 +2952,31 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
   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: [
-        showTopToolbar ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: renderToolbarTop() }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {}),
+        toolbarSetting?.showTopToolbar ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: renderToolbarTop() }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {}),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("table", { style: { width: "100%" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
             return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
               return renderHeaderCol(col, index, indexParent);
             }) }, indexParent);
           }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { className: "r-gridcontent", children: dataSource?.map((row, indexRow) => {
+          /* @__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) => {
             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 === dataSource.length - 1 }, { "fisrt-row": indexRow === 0 }),
+                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);
                 })
@@ -2869,17 +2988,17 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
             return renderFooterCol(col, index);
           }) }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {}) })
         ] }) }),
-        showBottomToolbar ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: renderToolbarBottom() }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {})
+        toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: renderToolbarBottom() }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {})
       ] }),
-      allowPaging ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      pagingSetting?.allowPaging ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         import_ej2_react_grids.PagerComponent,
         {
           locale: lang,
           click: onChangePage,
-          pageSize,
-          currentPage,
+          pageSize: pagingSetting?.pageSize,
+          currentPage: pagingSetting?.currentPage,
           pageSizes: [20, 30, 50, 100],
-          totalRecordsCount: totalItem ? totalItem : void 0,
+          totalRecordsCount: pagingClient ? totalCount : pagingSetting?.totalItem ?? 0,
           pageCount: 5,
           dropDownChanged: onChangePageSize
         }