npm - react-table-edit - Versions diffs - 1.2.1 → 1.2.2 - Mend

react-table-edit 1.2.1 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.js CHANGED Viewed

@@ -3413,7 +3413,6 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
   const focusNewElement = (col, row, onLoad = false) => {
     setTimeout(() => {
       const element = document.getElementById(`${idTable}-col${col}-row${row}`);
-      console.log(element);
       if (element) {
         if (element.className.includes("react-select") || element.className.includes("form-edit")) {
           element.getElementsByTagName("input")[0]?.focus();
@@ -3796,92 +3795,163 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
       }
     }
   }, [selectedItem]);
-  const ContentColComponent = ({ col, indexCol, indexRow, isSelected, row }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: col.field === "command" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      "td",
-      {
-        className: (0, import_classnames14.default)(
-          `r-rowcell p-0 fix-${col.fixedType}`,
-          { "cell-fixed": col.fixedType },
-          { "r-active": isSelected && editDisable || indexFocus === indexRow }
-        ),
-        style: {
-          left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
-          right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
-          textAlign: col.textAlign ? col.textAlign : "left"
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-rowcell-div command", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(command_default, { commandItems: col.commandItems ?? [], handleCommandClick, indexRow, rowData: row, setIndexFocus, indexFocus }) })
-      },
-      `col-${indexRow}-${indexCol}`
-    ) }) : col.field === "#" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      "td",
-      {
-        className: (0, import_classnames14.default)(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
-        tabIndex: Number(`${indexRow}${indexCol}`),
-        style: {
-          left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
-          right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
-          textAlign: "center"
-        },
-        onCopy: (e) => {
-          if (!editDisable && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
-            navigator.clipboard.writeText(JSON.stringify(row));
-            notificationSuccess(t("CopySuccessful"));
-            e.stopPropagation();
-          }
+  const renderContentCol = (col, row, indexRow, indexCol, isSelected) => {
+    if (col.field === "command") {
+      return col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "td",
+        {
+          className: (0, import_classnames14.default)(
+            `r-rowcell p-0 fix-${col.fixedType}`,
+            { "cell-fixed": col.fixedType },
+            { "r-active": isSelected && editDisable || indexFocus === indexRow }
+          ),
+          style: {
+            left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
+            right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
+            textAlign: col.textAlign ? col.textAlign : "left"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-rowcell-div command", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(command_default, { commandItems: col.commandItems ?? [], handleCommandClick, indexRow, rowData: row, setIndexFocus, indexFocus }) })
         },
-        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];
+        `col-${indexRow}-${indexCol}`
+      );
+    } else if (col.field === "#") {
+      return col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "td",
+        {
+          className: (0, import_classnames14.default)(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
+          tabIndex: Number(`${indexRow}${indexCol}`),
+          style: {
+            left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
+            right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
+            textAlign: "center"
+          },
+          onCopy: (e) => {
+            if (!editDisable && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
+              navigator.clipboard.writeText(JSON.stringify(row));
+              notificationSuccess(t("CopySuccessful"));
+              e.stopPropagation();
+            }
+          },
+          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];
+                }
+                changeDataSource(dataSource);
+                notificationSuccess(t("PasteSuccessful"));
+              }).catch((ex) => {
+                alert(ex);
+              });
+              e.stopPropagation();
+            }
+          },
+          onClick: (e) => {
+            if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
+              if (!editDisable && indexRow != indexFocus) {
+                setIndexFocus(indexRow);
               }
-              changeDataSource(dataSource);
-              notificationSuccess(t("PasteSuccessful"));
-            }).catch((ex) => {
-              alert(ex);
-            });
-            e.stopPropagation();
-          }
-        },
-        onClick: (e) => {
-          if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
-            if (!editDisable && indexRow != indexFocus) {
-              setIndexFocus(indexRow);
+              e.stopPropagation();
             }
-            e.stopPropagation();
-          }
-        },
-        onKeyDown: (e) => {
-          if (e.code === "KeyD" && e.ctrlKey == true && (!editDisable && !addDisable) && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
-            handleDuplicate(row, indexRow);
-            e.preventDefault();
-            e.stopPropagation();
-          }
+          },
+          onKeyDown: (e) => {
+            if (e.code === "KeyD" && e.ctrlKey == true && (!editDisable && !addDisable) && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
+              handleDuplicate(row, indexRow);
+              e.preventDefault();
+              e.stopPropagation();
+            }
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-rowcell-div", children: indexRow + 1 })
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-rowcell-div", children: indexRow + 1 })
-      },
-      `col-${indexRow}-${indexCol}`
-    ) : col.field === "checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      "td",
-      {
-        className: (0, import_classnames14.default)(
-          `r-rowcell p-0 fix-${col.fixedType}`,
-          { "cell-fixed": col.fixedType },
-          { "r-active": isSelected && editDisable || indexFocus === indexRow }
-        ),
-        style: {
-          left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
-          right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
-          textAlign: col.textAlign ? col.textAlign : "center"
+        `col-${indexRow}-${indexCol}`
+      );
+    } else if (col.field === "checkbox") {
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "td",
+        {
+          className: (0, import_classnames14.default)(
+            `r-rowcell p-0 fix-${col.fixedType}`,
+            { "cell-fixed": col.fixedType },
+            { "r-active": isSelected && editDisable || indexFocus === indexRow }
+          ),
+          style: {
+            left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
+            right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
+            textAlign: col.textAlign ? col.textAlign : "center"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "div",
+            {
+              className: "r-rowcell-div cursor-pointer",
+              onClick: (e) => {
+                if (selectEnable) {
+                  const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
+                  if (index > -1) {
+                    if (isMulti) {
+                      selectedRows?.splice(index, 1);
+                      setSelectedRows([...selectedRows]);
+                    } else {
+                      setSelectedRows([]);
+                    }
+                  } else {
+                    if (isMulti) {
+                      setSelectedRows([...selectedRows, row]);
+                    } else {
+                      setSelectedRows([row]);
+                    }
+                  }
+                  e.stopPropagation();
+                }
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                import_reactstrap11.Input,
+                {
+                  checked: isSelected,
+                  type: "checkbox",
+                  className: "cursor-pointer",
+                  onChange: () => {
+                  },
+                  style: { textAlign: col.textAlign ?? "center", marginTop: 6 }
+                }
+              )
+            }
+          )
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          "div",
-          {
-            className: "r-rowcell-div cursor-pointer",
-            onClick: (e) => {
-              if (selectEnable) {
+        `col-${indexRow}-${indexCol}`
+      );
+    } else {
+      let value = row[col.field];
+      if (col.editType === "numeric" || col.editTypeCondition && col.editTypeCondition(row) === "numeric") {
+        value = formartNumberic(row[col.field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) ?? 0;
+      } else if (col.editType === "date") {
+        value = value ? (0, import_moment3.default)(value).format("DD/MM/yyyy") : "";
+      } else if (col.editType === "datetime") {
+        value = value ? (0, import_moment3.default)(value).format("DD/MM/yyyy HH:mm") : "";
+      }
+      const typeDis = !editDisable && (indexFocus === indexRow || col.editType === "checkbox") && (!col.disabledCondition || !col.disabledCondition(row)) ? col.editEnable ? 1 : col.template ? 2 : 3 : col.template ? 2 : 3;
+      const errorMessage = typeDis === 1 || col.field === "" || !col.validate ? "" : col.validate(row[col.field], row);
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react16.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "td",
+        {
+          className: (0, import_classnames14.default)(
+            `r-rowcell fix-${col.fixedType}`,
+            { "cell-fixed": col.fixedType },
+            { "r-active": isSelected && editDisable || indexFocus === indexRow }
+          ),
+          style: {
+            left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
+            right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
+            padding: 0,
+            textAlign: col.textAlign ? col.textAlign : "left"
+          },
+          onClick: (e) => {
+            if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
+              if (!editDisable && indexRow != indexFocus) {
+                setIndexFocus(indexRow);
+                focusNewElement(indexCol + 1, indexRow + 1, true);
+              }
+              if (selectEnable && editDisable) {
                 const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
                 if (index > -1) {
                   if (isMulti) {
@@ -3897,116 +3967,51 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
                     setSelectedRows([row]);
                   }
                 }
-                e.stopPropagation();
               }
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              import_reactstrap11.Input,
-              {
-                checked: isSelected,
-                type: "checkbox",
-                className: "cursor-pointer",
-                onChange: () => {
-                },
-                style: { textAlign: col.textAlign ?? "center", marginTop: 6 }
-              }
-            )
-          }
-        )
-      },
-      `col-${indexRow}-${indexCol}`
-    ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContenComponent, { col, indexCol, indexRow, isSelected, row }) });
-  };
-  const ContenComponent = ({ col, indexCol, indexRow, isSelected, row }) => {
-    let value = row[col.field];
-    if (col.editType === "numeric" || col.editTypeCondition && col.editTypeCondition(row) === "numeric") {
-      value = formartNumberic(row[col.field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) ?? 0;
-    } else if (col.editType === "date") {
-      value = value ? (0, import_moment3.default)(value).format("DD/MM/yyyy") : "";
-    } else if (col.editType === "datetime") {
-      value = value ? (0, import_moment3.default)(value).format("DD/MM/yyyy HH:mm") : "";
-    }
-    const typeDis = !editDisable && (indexFocus === indexRow || col.editType === "checkbox") && (!col.disabledCondition || !col.disabledCondition(row)) ? col.editEnable ? 1 : col.template ? 2 : 3 : col.template ? 2 : 3;
-    const errorMessage = typeDis === 1 || col.field === "" || !col.validate ? "" : col.validate(row[col.field], row);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react16.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      "td",
-      {
-        className: (0, import_classnames14.default)(
-          `r-rowcell fix-${col.fixedType}`,
-          { "cell-fixed": col.fixedType },
-          { "r-active": isSelected && editDisable || indexFocus === indexRow }
-        ),
-        style: {
-          left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
-          right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
-          padding: 0,
-          textAlign: col.textAlign ? col.textAlign : "left"
-        },
-        onClick: (e) => {
-          if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
-            if (!editDisable && indexRow != indexFocus) {
-              setIndexFocus(indexRow);
-              focusNewElement(indexCol + 1, indexRow + 1, true);
+              e.stopPropagation();
             }
-            if (selectEnable && editDisable) {
-              const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
-              if (index > -1) {
-                if (isMulti) {
-                  selectedRows?.splice(index, 1);
-                  setSelectedRows([...selectedRows]);
-                } else {
-                  setSelectedRows([]);
-                }
-              } else {
-                if (isMulti) {
-                  setSelectedRows([...selectedRows, row]);
-                } else {
-                  setSelectedRows([row]);
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "div",
+            {
+              className: (0, import_classnames14.default)("r-rowcell-div"),
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+                "div",
+                {
+                  id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
+                  className: (0, import_classnames14.default)("r-rowcell-content", { "r-is-invalid": errorMessage }),
+                  style: {
+                    margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2,
+                    color: col.editType === "numeric" && Number(row[col.field]) < 0 ? "red" : ""
+                  },
+                  children: [
+                    typeDis === 1 && !refreshRow ? RenderEdit(row, col, indexCol, indexRow) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }),
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { id: `error-${indexRow}-${indexCol}`, className: (0, import_classnames14.default)("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_becoxy_icons7.AlertCircle, { fontSize: 15.5 }) }),
+                    !(typeDis === 1 && !refreshRow) && checkOverflow(indexRow, indexCol) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : value }),
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                      import_reactstrap11.UncontrolledTooltip,
+                      {
+                        target: `error-${indexRow}-${indexCol}`,
+                        className: "r-tooltip tooltip-error",
+                        children: errorMessage?.toString() ?? ""
+                      }
+                    )
+                  ]
                 }
-              }
+              )
             }
-          }
+          )
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          "div",
-          {
-            className: (0, import_classnames14.default)("r-rowcell-div"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-              "div",
-              {
-                id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
-                className: (0, import_classnames14.default)("r-rowcell-content", { "r-is-invalid": errorMessage }),
-                style: {
-                  margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2,
-                  color: col.editType === "numeric" && Number(row[col.field]) < 0 ? "red" : ""
-                },
-                children: [
-                  typeDis === 1 && !refreshRow ? RenderEdit(row, col, indexCol, indexRow) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }),
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { id: `error-${indexRow}-${indexCol}`, className: (0, import_classnames14.default)("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_becoxy_icons7.AlertCircle, { fontSize: 15.5 }) }),
-                  !(typeDis === 1 && !refreshRow) && checkOverflow(indexRow, indexCol) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : value }),
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                    import_reactstrap11.UncontrolledTooltip,
-                    {
-                      target: `error-${indexRow}-${indexCol}`,
-                      className: "r-tooltip tooltip-error",
-                      children: errorMessage?.toString() ?? ""
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        )
-      },
-      `col-${indexRow}-${indexCol}`
-    ) }, indexCol);
+        `col-${indexRow}-${indexCol}`
+      ) }, indexCol);
+    }
   };
   const checkOverflow = (indexRow, indexCol) => {
     const element = document.getElementById(`content-${idTable}-row${indexRow}col-${indexCol}`);
     return element && element.scrollWidth > element.clientWidth;
   };
-  const FooterComponent = ({ col, indexCol }) => {
-    return col.visible !== false ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const renderFooterCol = (col, indexCol) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react16.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "td",
       {
         className: (0, import_classnames14.default)(
@@ -4022,9 +4027,9 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
           return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
         }, 0), decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) : "" })
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {});
+    ) }, `summarycell-${indexCol}`);
   };
-  const ToolbarTopComponent = () => {
+  const renderToolbarTop = () => {
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "r-toolbar-items", children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
         return item.align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) : "";
@@ -4037,7 +4042,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
       }) })
     ] }) });
   };
-  const ToolbarBottomComponent = () => {
+  const renderToolbarBottom = () => {
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "r-toolbar-items", children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "r-toolbar-left", children: [
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.Button, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
@@ -4091,10 +4096,10 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
     }
     return false;
   };
-  const TableComponent = () => {
+  const renderData = () => {
     totalCount = 0;
     let countDisplay = -1;
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: dataSource.map((row, indexRow) => {
+    return dataSource.map((row, indexRow) => {
       const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
       const flagSearch = !searchClient || checkSearch(searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm, row, searchSetting?.keyField ?? []);
       if (flagSearch) {
@@ -4107,14 +4112,14 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
             {
               className: (0, import_classnames14.default)("r-row", { "fisrt-row": countDisplay === 0 }),
               children: contentColumns.map((col, indexCol) => {
-                return col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContentColComponent, { col, row, indexCol, indexRow, isSelected }, `Content-${indexRow}-${indexCol}`);
+                return renderContentCol(col, row, indexRow, indexCol, isSelected);
               })
             },
             `row-${indexRow}`
           );
         }
       }
-    }) });
+    });
   };
   (0, import_react16.useEffect)(() => {
     if (pagingClient && pagingSetting?.setCurrentPage && (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm)) {
@@ -4124,7 +4129,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react16.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "react-table-edit", children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "r-grid", ref: gridRef, children: [
-        toolbarSetting?.showTopToolbar ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ToolbarTopComponent, {}) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {}),
+        toolbarSetting?.showTopToolbar ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: renderToolbarTop() }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {}),
         /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime16.jsxs)("table", { style: { width: "100%" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
             return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
@@ -4148,12 +4153,12 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
               );
             }) }, `header-${-indexParent}`);
           }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tbody", { className: "r-gridcontent", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TableComponent, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tbody", { className: "r-gridcontent", children: renderData() }),
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tfoot", { className: "r-gridfoot", children: haveSum == true ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tr", { className: "r-row", children: contentColumns.map((col, index) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FooterComponent, { col, indexCol: index }, `summarycell-${index}`);
+            return renderFooterCol(col, index);
           }) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {}) })
         ] }) }),
-        toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ToolbarBottomComponent, {}) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {})
+        toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: renderToolbarBottom() }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {})
       ] }),
       pagingSetting?.allowPaging ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         PagingComponent,

package/dist/index.mjs CHANGED Viewed

@@ -3382,7 +3382,6 @@ var TableEdit = forwardRef4((props, ref) => {
   const focusNewElement = (col, row, onLoad = false) => {
     setTimeout(() => {
       const element = document.getElementById(`${idTable}-col${col}-row${row}`);
-      console.log(element);
       if (element) {
         if (element.className.includes("react-select") || element.className.includes("form-edit")) {
           element.getElementsByTagName("input")[0]?.focus();
@@ -3765,92 +3764,163 @@ var TableEdit = forwardRef4((props, ref) => {
       }
     }
   }, [selectedItem]);
-  const ContentColComponent = ({ col, indexCol, indexRow, isSelected, row }) => {
-    return /* @__PURE__ */ jsx16(Fragment21, { children: col.field === "command" ? /* @__PURE__ */ jsx16(Fragment21, { children: /* @__PURE__ */ jsx16(
-      "td",
-      {
-        className: classnames9(
-          `r-rowcell p-0 fix-${col.fixedType}`,
-          { "cell-fixed": col.fixedType },
-          { "r-active": isSelected && editDisable || indexFocus === indexRow }
-        ),
-        style: {
-          left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
-          right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
-          textAlign: col.textAlign ? col.textAlign : "left"
-        },
-        children: /* @__PURE__ */ jsx16("div", { className: "r-rowcell-div command", children: /* @__PURE__ */ jsx16(command_default, { commandItems: col.commandItems ?? [], handleCommandClick, indexRow, rowData: row, setIndexFocus, indexFocus }) })
-      },
-      `col-${indexRow}-${indexCol}`
-    ) }) : col.field === "#" ? /* @__PURE__ */ jsx16(
-      "td",
-      {
-        className: classnames9(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
-        tabIndex: Number(`${indexRow}${indexCol}`),
-        style: {
-          left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
-          right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
-          textAlign: "center"
-        },
-        onCopy: (e) => {
-          if (!editDisable && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
-            navigator.clipboard.writeText(JSON.stringify(row));
-            notificationSuccess(t("CopySuccessful"));
-            e.stopPropagation();
-          }
+  const renderContentCol = (col, row, indexRow, indexCol, isSelected) => {
+    if (col.field === "command") {
+      return col.visible !== false && /* @__PURE__ */ jsx16(
+        "td",
+        {
+          className: classnames9(
+            `r-rowcell p-0 fix-${col.fixedType}`,
+            { "cell-fixed": col.fixedType },
+            { "r-active": isSelected && editDisable || indexFocus === indexRow }
+          ),
+          style: {
+            left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
+            right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
+            textAlign: col.textAlign ? col.textAlign : "left"
+          },
+          children: /* @__PURE__ */ jsx16("div", { className: "r-rowcell-div command", children: /* @__PURE__ */ jsx16(command_default, { commandItems: col.commandItems ?? [], handleCommandClick, indexRow, rowData: row, setIndexFocus, indexFocus }) })
         },
-        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];
+        `col-${indexRow}-${indexCol}`
+      );
+    } else if (col.field === "#") {
+      return col.visible !== false && /* @__PURE__ */ jsx16(
+        "td",
+        {
+          className: classnames9(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
+          tabIndex: Number(`${indexRow}${indexCol}`),
+          style: {
+            left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
+            right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
+            textAlign: "center"
+          },
+          onCopy: (e) => {
+            if (!editDisable && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
+              navigator.clipboard.writeText(JSON.stringify(row));
+              notificationSuccess(t("CopySuccessful"));
+              e.stopPropagation();
+            }
+          },
+          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];
+                }
+                changeDataSource(dataSource);
+                notificationSuccess(t("PasteSuccessful"));
+              }).catch((ex) => {
+                alert(ex);
+              });
+              e.stopPropagation();
+            }
+          },
+          onClick: (e) => {
+            if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
+              if (!editDisable && indexRow != indexFocus) {
+                setIndexFocus(indexRow);
               }
-              changeDataSource(dataSource);
-              notificationSuccess(t("PasteSuccessful"));
-            }).catch((ex) => {
-              alert(ex);
-            });
-            e.stopPropagation();
-          }
-        },
-        onClick: (e) => {
-          if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
-            if (!editDisable && indexRow != indexFocus) {
-              setIndexFocus(indexRow);
+              e.stopPropagation();
             }
-            e.stopPropagation();
-          }
-        },
-        onKeyDown: (e) => {
-          if (e.code === "KeyD" && e.ctrlKey == true && (!editDisable && !addDisable) && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
-            handleDuplicate(row, indexRow);
-            e.preventDefault();
-            e.stopPropagation();
-          }
+          },
+          onKeyDown: (e) => {
+            if (e.code === "KeyD" && e.ctrlKey == true && (!editDisable && !addDisable) && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
+              handleDuplicate(row, indexRow);
+              e.preventDefault();
+              e.stopPropagation();
+            }
+          },
+          children: /* @__PURE__ */ jsx16("div", { className: "r-rowcell-div", children: indexRow + 1 })
         },
-        children: /* @__PURE__ */ jsx16("div", { className: "r-rowcell-div", children: indexRow + 1 })
-      },
-      `col-${indexRow}-${indexCol}`
-    ) : col.field === "checkbox" ? /* @__PURE__ */ jsx16(
-      "td",
-      {
-        className: classnames9(
-          `r-rowcell p-0 fix-${col.fixedType}`,
-          { "cell-fixed": col.fixedType },
-          { "r-active": isSelected && editDisable || indexFocus === indexRow }
-        ),
-        style: {
-          left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
-          right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
-          textAlign: col.textAlign ? col.textAlign : "center"
+        `col-${indexRow}-${indexCol}`
+      );
+    } else if (col.field === "checkbox") {
+      return /* @__PURE__ */ jsx16(
+        "td",
+        {
+          className: classnames9(
+            `r-rowcell p-0 fix-${col.fixedType}`,
+            { "cell-fixed": col.fixedType },
+            { "r-active": isSelected && editDisable || indexFocus === indexRow }
+          ),
+          style: {
+            left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
+            right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
+            textAlign: col.textAlign ? col.textAlign : "center"
+          },
+          children: /* @__PURE__ */ jsx16(
+            "div",
+            {
+              className: "r-rowcell-div cursor-pointer",
+              onClick: (e) => {
+                if (selectEnable) {
+                  const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
+                  if (index > -1) {
+                    if (isMulti) {
+                      selectedRows?.splice(index, 1);
+                      setSelectedRows([...selectedRows]);
+                    } else {
+                      setSelectedRows([]);
+                    }
+                  } else {
+                    if (isMulti) {
+                      setSelectedRows([...selectedRows, row]);
+                    } else {
+                      setSelectedRows([row]);
+                    }
+                  }
+                  e.stopPropagation();
+                }
+              },
+              children: /* @__PURE__ */ jsx16(
+                Input9,
+                {
+                  checked: isSelected,
+                  type: "checkbox",
+                  className: "cursor-pointer",
+                  onChange: () => {
+                  },
+                  style: { textAlign: col.textAlign ?? "center", marginTop: 6 }
+                }
+              )
+            }
+          )
         },
-        children: /* @__PURE__ */ jsx16(
-          "div",
-          {
-            className: "r-rowcell-div cursor-pointer",
-            onClick: (e) => {
-              if (selectEnable) {
+        `col-${indexRow}-${indexCol}`
+      );
+    } else {
+      let value = row[col.field];
+      if (col.editType === "numeric" || col.editTypeCondition && col.editTypeCondition(row) === "numeric") {
+        value = formartNumberic(row[col.field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) ?? 0;
+      } else if (col.editType === "date") {
+        value = value ? moment3(value).format("DD/MM/yyyy") : "";
+      } else if (col.editType === "datetime") {
+        value = value ? moment3(value).format("DD/MM/yyyy HH:mm") : "";
+      }
+      const typeDis = !editDisable && (indexFocus === indexRow || col.editType === "checkbox") && (!col.disabledCondition || !col.disabledCondition(row)) ? col.editEnable ? 1 : col.template ? 2 : 3 : col.template ? 2 : 3;
+      const errorMessage = typeDis === 1 || col.field === "" || !col.validate ? "" : col.validate(row[col.field], row);
+      return /* @__PURE__ */ jsx16(Fragment20, { children: col.visible !== false && /* @__PURE__ */ jsx16(
+        "td",
+        {
+          className: classnames9(
+            `r-rowcell fix-${col.fixedType}`,
+            { "cell-fixed": col.fixedType },
+            { "r-active": isSelected && editDisable || indexFocus === indexRow }
+          ),
+          style: {
+            left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
+            right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
+            padding: 0,
+            textAlign: col.textAlign ? col.textAlign : "left"
+          },
+          onClick: (e) => {
+            if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
+              if (!editDisable && indexRow != indexFocus) {
+                setIndexFocus(indexRow);
+                focusNewElement(indexCol + 1, indexRow + 1, true);
+              }
+              if (selectEnable && editDisable) {
                 const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
                 if (index > -1) {
                   if (isMulti) {
@@ -3866,116 +3936,51 @@ var TableEdit = forwardRef4((props, ref) => {
                     setSelectedRows([row]);
                   }
                 }
-                e.stopPropagation();
               }
-            },
-            children: /* @__PURE__ */ jsx16(
-              Input9,
-              {
-                checked: isSelected,
-                type: "checkbox",
-                className: "cursor-pointer",
-                onChange: () => {
-                },
-                style: { textAlign: col.textAlign ?? "center", marginTop: 6 }
-              }
-            )
-          }
-        )
-      },
-      `col-${indexRow}-${indexCol}`
-    ) : /* @__PURE__ */ jsx16(ContenComponent, { col, indexCol, indexRow, isSelected, row }) });
-  };
-  const ContenComponent = ({ col, indexCol, indexRow, isSelected, row }) => {
-    let value = row[col.field];
-    if (col.editType === "numeric" || col.editTypeCondition && col.editTypeCondition(row) === "numeric") {
-      value = formartNumberic(row[col.field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) ?? 0;
-    } else if (col.editType === "date") {
-      value = value ? moment3(value).format("DD/MM/yyyy") : "";
-    } else if (col.editType === "datetime") {
-      value = value ? moment3(value).format("DD/MM/yyyy HH:mm") : "";
-    }
-    const typeDis = !editDisable && (indexFocus === indexRow || col.editType === "checkbox") && (!col.disabledCondition || !col.disabledCondition(row)) ? col.editEnable ? 1 : col.template ? 2 : 3 : col.template ? 2 : 3;
-    const errorMessage = typeDis === 1 || col.field === "" || !col.validate ? "" : col.validate(row[col.field], row);
-    return /* @__PURE__ */ jsx16(Fragment20, { children: col.visible !== false && /* @__PURE__ */ jsx16(
-      "td",
-      {
-        className: classnames9(
-          `r-rowcell fix-${col.fixedType}`,
-          { "cell-fixed": col.fixedType },
-          { "r-active": isSelected && editDisable || indexFocus === indexRow }
-        ),
-        style: {
-          left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
-          right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
-          padding: 0,
-          textAlign: col.textAlign ? col.textAlign : "left"
-        },
-        onClick: (e) => {
-          if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
-            if (!editDisable && indexRow != indexFocus) {
-              setIndexFocus(indexRow);
-              focusNewElement(indexCol + 1, indexRow + 1, true);
+              e.stopPropagation();
             }
-            if (selectEnable && editDisable) {
-              const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
-              if (index > -1) {
-                if (isMulti) {
-                  selectedRows?.splice(index, 1);
-                  setSelectedRows([...selectedRows]);
-                } else {
-                  setSelectedRows([]);
-                }
-              } else {
-                if (isMulti) {
-                  setSelectedRows([...selectedRows, row]);
-                } else {
-                  setSelectedRows([row]);
+          },
+          children: /* @__PURE__ */ jsx16(
+            "div",
+            {
+              className: classnames9("r-rowcell-div"),
+              children: /* @__PURE__ */ jsxs15(
+                "div",
+                {
+                  id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
+                  className: classnames9("r-rowcell-content", { "r-is-invalid": errorMessage }),
+                  style: {
+                    margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2,
+                    color: col.editType === "numeric" && Number(row[col.field]) < 0 ? "red" : ""
+                  },
+                  children: [
+                    typeDis === 1 && !refreshRow ? RenderEdit(row, col, indexCol, indexRow) : /* @__PURE__ */ jsx16("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }),
+                    /* @__PURE__ */ jsx16("span", { id: `error-${indexRow}-${indexCol}`, className: classnames9("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: /* @__PURE__ */ jsx16(AlertCircle, { fontSize: 15.5 }) }),
+                    !(typeDis === 1 && !refreshRow) && checkOverflow(indexRow, indexCol) && /* @__PURE__ */ jsx16(UncontrolledTooltip5, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : value }),
+                    /* @__PURE__ */ jsx16(
+                      UncontrolledTooltip5,
+                      {
+                        target: `error-${indexRow}-${indexCol}`,
+                        className: "r-tooltip tooltip-error",
+                        children: errorMessage?.toString() ?? ""
+                      }
+                    )
+                  ]
                 }
-              }
+              )
             }
-          }
+          )
         },
-        children: /* @__PURE__ */ jsx16(
-          "div",
-          {
-            className: classnames9("r-rowcell-div"),
-            children: /* @__PURE__ */ jsxs15(
-              "div",
-              {
-                id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
-                className: classnames9("r-rowcell-content", { "r-is-invalid": errorMessage }),
-                style: {
-                  margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2,
-                  color: col.editType === "numeric" && Number(row[col.field]) < 0 ? "red" : ""
-                },
-                children: [
-                  typeDis === 1 && !refreshRow ? RenderEdit(row, col, indexCol, indexRow) : /* @__PURE__ */ jsx16("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }),
-                  /* @__PURE__ */ jsx16("span", { id: `error-${indexRow}-${indexCol}`, className: classnames9("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: /* @__PURE__ */ jsx16(AlertCircle, { fontSize: 15.5 }) }),
-                  !(typeDis === 1 && !refreshRow) && checkOverflow(indexRow, indexCol) && /* @__PURE__ */ jsx16(UncontrolledTooltip5, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : value }),
-                  /* @__PURE__ */ jsx16(
-                    UncontrolledTooltip5,
-                    {
-                      target: `error-${indexRow}-${indexCol}`,
-                      className: "r-tooltip tooltip-error",
-                      children: errorMessage?.toString() ?? ""
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        )
-      },
-      `col-${indexRow}-${indexCol}`
-    ) }, indexCol);
+        `col-${indexRow}-${indexCol}`
+      ) }, indexCol);
+    }
   };
   const checkOverflow = (indexRow, indexCol) => {
     const element = document.getElementById(`content-${idTable}-row${indexRow}col-${indexCol}`);
     return element && element.scrollWidth > element.clientWidth;
   };
-  const FooterComponent = ({ col, indexCol }) => {
-    return col.visible !== false ? /* @__PURE__ */ jsx16(
+  const renderFooterCol = (col, indexCol) => {
+    return /* @__PURE__ */ jsx16(Fragment20, { children: col.visible !== false && /* @__PURE__ */ jsx16(
       "td",
       {
         className: classnames9(
@@ -3991,9 +3996,9 @@ var TableEdit = forwardRef4((props, ref) => {
           return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
         }, 0), decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) : "" })
       }
-    ) : /* @__PURE__ */ jsx16(Fragment21, {});
+    ) }, `summarycell-${indexCol}`);
   };
-  const ToolbarTopComponent = () => {
+  const renderToolbarTop = () => {
     return /* @__PURE__ */ jsx16("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: /* @__PURE__ */ jsxs15("div", { className: "r-toolbar-items", children: [
       /* @__PURE__ */ jsx16("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
         return item.align === "left" ? /* @__PURE__ */ jsx16("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) : "";
@@ -4006,7 +4011,7 @@ var TableEdit = forwardRef4((props, ref) => {
       }) })
     ] }) });
   };
-  const ToolbarBottomComponent = () => {
+  const renderToolbarBottom = () => {
     return /* @__PURE__ */ jsx16("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: /* @__PURE__ */ jsxs15("div", { className: "r-toolbar-items", children: [
       /* @__PURE__ */ jsxs15("div", { className: "r-toolbar-left", children: [
         /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx16(Button6, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
@@ -4060,10 +4065,10 @@ var TableEdit = forwardRef4((props, ref) => {
     }
     return false;
   };
-  const TableComponent = () => {
+  const renderData = () => {
     totalCount = 0;
     let countDisplay = -1;
-    return /* @__PURE__ */ jsx16(Fragment21, { children: dataSource.map((row, indexRow) => {
+    return dataSource.map((row, indexRow) => {
       const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
       const flagSearch = !searchClient || checkSearch(searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm, row, searchSetting?.keyField ?? []);
       if (flagSearch) {
@@ -4076,14 +4081,14 @@ var TableEdit = forwardRef4((props, ref) => {
             {
               className: classnames9("r-row", { "fisrt-row": countDisplay === 0 }),
               children: contentColumns.map((col, indexCol) => {
-                return col.visible !== false && /* @__PURE__ */ jsx16(ContentColComponent, { col, row, indexCol, indexRow, isSelected }, `Content-${indexRow}-${indexCol}`);
+                return renderContentCol(col, row, indexRow, indexCol, isSelected);
               })
             },
             `row-${indexRow}`
           );
         }
       }
-    }) });
+    });
   };
   useEffect9(() => {
     if (pagingClient && pagingSetting?.setCurrentPage && (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm)) {
@@ -4093,7 +4098,7 @@ var TableEdit = forwardRef4((props, ref) => {
   return /* @__PURE__ */ jsxs15(Fragment20, { children: [
     /* @__PURE__ */ jsxs15("div", { className: "react-table-edit", children: [
       /* @__PURE__ */ jsxs15("div", { className: "r-grid", ref: gridRef, children: [
-        toolbarSetting?.showTopToolbar ? /* @__PURE__ */ jsx16(ToolbarTopComponent, {}) : /* @__PURE__ */ jsx16(Fragment21, {}),
+        toolbarSetting?.showTopToolbar ? /* @__PURE__ */ jsx16(Fragment21, { children: renderToolbarTop() }) : /* @__PURE__ */ jsx16(Fragment21, {}),
         /* @__PURE__ */ jsx16("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ jsxs15("table", { style: { width: "100%" }, children: [
           /* @__PURE__ */ jsx16("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
             return /* @__PURE__ */ jsx16("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
@@ -4117,12 +4122,12 @@ var TableEdit = forwardRef4((props, ref) => {
               );
             }) }, `header-${-indexParent}`);
           }) }),
-          /* @__PURE__ */ jsx16("tbody", { className: "r-gridcontent", children: /* @__PURE__ */ jsx16(TableComponent, {}) }),
+          /* @__PURE__ */ jsx16("tbody", { className: "r-gridcontent", children: renderData() }),
           /* @__PURE__ */ jsx16("tfoot", { className: "r-gridfoot", children: haveSum == true ? /* @__PURE__ */ jsx16("tr", { className: "r-row", children: contentColumns.map((col, index) => {
-            return /* @__PURE__ */ jsx16(FooterComponent, { col, indexCol: index }, `summarycell-${index}`);
+            return renderFooterCol(col, index);
           }) }) : /* @__PURE__ */ jsx16(Fragment21, {}) })
         ] }) }),
-        toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ jsx16(ToolbarBottomComponent, {}) : /* @__PURE__ */ jsx16(Fragment21, {})
+        toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ jsx16(Fragment21, { children: renderToolbarBottom() }) : /* @__PURE__ */ jsx16(Fragment21, {})
       ] }),
       pagingSetting?.allowPaging ? /* @__PURE__ */ jsx16(
         PagingComponent,

package/package.json CHANGED Viewed

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