react-table-edit 1.2.1 → 1.2.3

package/dist/index.mjs

@@ -1,11 +1,11 @@
-// test-app/src/component/table/index.tsx
+// src/component/table/index.tsx
 import { Fragment as Fragment20, forwardRef as forwardRef4, useEffect as useEffect9, useImperativeHandle, useRef as useRef4, useState as useState8 } from "react";
 import { Button as Button6, DropdownMenu as DropdownMenu4, DropdownToggle as DropdownToggle4, Input as Input9, UncontrolledDropdown, UncontrolledTooltip as UncontrolledTooltip5 } from "reactstrap";
 import classnames9 from "classnames";
 import { useTranslation as useTranslation12 } from "react-i18next";
 import { AlertCircle, Info as Info2, Settings } from "becoxy-icons";
 
-// test-app/src/component/react-input/index.tsx
+// src/component/react-input/index.tsx
 import { X } from "becoxy-icons";
 import classNames from "classnames";
 import { Fragment, useEffect, useState } from "react";
@@ -42,7 +42,7 @@ var ReactInput = (props) => {
 };
 var react_input_default = ReactInput;
 
-// test-app/src/component/notifications.tsx
+// src/component/notifications.tsx
 import { Fragment as Fragment2 } from "react";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
@@ -179,7 +179,7 @@ var messageBoxConfirm2 = async (t, data, data2, message) => {
   });
 };
 
-// test-app/src/component/utils.ts
+// src/component/utils.ts
 import { useEffect as useEffect2 } from "react";
 var useOnClickOutside = (ref, handler) => {
   useEffect2(
@@ -305,10 +305,10 @@ var roundNumber = (num, fraction) => {
   return result;
 };
 
-// test-app/src/component/table/index.tsx
+// src/component/table/index.tsx
 import moment3 from "moment";
 
-// test-app/src/component/edit-form/index.tsx
+// src/component/edit-form/index.tsx
 import { forwardRef as forwardRef2, useEffect as useEffect4, useRef as useRef2, useState as useState3 } from "react";
 import {
   DropdownItem as DropdownItem2,
@@ -325,7 +325,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { useTranslation as useTranslation5 } from "react-i18next";
 import classNames2 from "classnames";
 
-// test-app/src/component/input-text/index.tsx
+// src/component/input-text/index.tsx
 import { Controller } from "react-hook-form";
 import { Input as Input2, Label, FormFeedback } from "reactstrap";
 import classnames from "classnames";
@@ -416,7 +416,7 @@ var TextInput = (props) => {
 };
 var input_text_default = TextInput;
 
-// test-app/src/component/input-number/index.tsx
+// src/component/input-number/index.tsx
 import { Controller as Controller2 } from "react-hook-form";
 import { Input as Input3, Label as Label2, FormFeedback as FormFeedback2 } from "reactstrap";
 import classnames2 from "classnames";
@@ -550,13 +550,13 @@ var NumberInput = (props) => {
 };
 var input_number_default = NumberInput;
 
-// test-app/src/component/edit-form/select-table/index.tsx
+// src/component/edit-form/select-table/index.tsx
 import { Controller as Controller3 } from "react-hook-form";
 import { FormFeedback as FormFeedback3, Label as Label3, UncontrolledTooltip as UncontrolledTooltip2 } from "reactstrap";
 import classnames4 from "classnames";
 import { Fragment as Fragment7 } from "react";
 
-// test-app/src/component/select-table/index.tsx
+// src/component/select-table/index.tsx
 import React, { forwardRef, Fragment as Fragment5, useEffect as useEffect3, useMemo, useRef, useState as useState2 } from "react";
 import {
   DropdownItem,
@@ -1134,7 +1134,7 @@ var SelectTable = forwardRef((props, ref) => {
   );
 });
 
-// test-app/src/component/edit-form/select-table/index.tsx
+// src/component/edit-form/select-table/index.tsx
 import { useTranslation as useTranslation4 } from "react-i18next";
 import { Fragment as Fragment8, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var SelectTableBox = (props) => {
@@ -1251,7 +1251,7 @@ var SelectTableBox = (props) => {
 };
 var select_table_default = SelectTableBox;
 
-// test-app/src/component/edit-form/index.tsx
+// src/component/edit-form/index.tsx
 import { Fragment as Fragment9, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var defaultWidth = 200;
 var EditForm = forwardRef2((props, ref) => {
@@ -1587,12 +1587,12 @@ var EditForm = forwardRef2((props, ref) => {
 });
 var edit_form_default = EditForm;
 
-// test-app/src/component/sidebar-setting-column/index.tsx
+// src/component/sidebar-setting-column/index.tsx
 import { Fragment as Fragment11, useEffect as useEffect6, useState as useState5 } from "react";
 import { Button as Button3, Input as Input6 } from "reactstrap";
 import { useTranslation as useTranslation7 } from "react-i18next";
 
-// test-app/src/component/modal-header/index.tsx
+// src/component/modal-header/index.tsx
 import { Edit, Info, Plus as Plus2, X as X2 } from "becoxy-icons";
 import classNames3 from "classnames";
 import { useTranslation as useTranslation6 } from "react-i18next";
@@ -1636,7 +1636,7 @@ var ModalHeader = (props) => {
 };
 var modal_header_default = ModalHeader;
 
-// test-app/src/component/sidebar/index.tsx
+// src/component/sidebar/index.tsx
 import { ChevronLeft, ChevronRight } from "becoxy-icons";
 import classNames4 from "classnames";
 import { useEffect as useEffect5, useState as useState4 } from "react";
@@ -1740,7 +1740,7 @@ var Sidebar = (props) => {
 };
 var sidebar_default = Sidebar;
 
-// test-app/src/component/sidebar-setting-column/index.tsx
+// src/component/sidebar-setting-column/index.tsx
 import classnames5 from "classnames";
 import { Fragment as Fragment12, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 var SidebarSetColumn = (props) => {
@@ -1992,7 +1992,7 @@ var SidebarSetColumn = (props) => {
 };
 var sidebar_setting_column_default = SidebarSetColumn;
 
-// test-app/src/component/table/paging/index.tsx
+// src/component/table/paging/index.tsx
 import { ChevronRight as ChevronRight2, ChevronLeft as ChevronLeft2, ChevronsLeft, ChevronsRight } from "becoxy-icons";
 import classNames5 from "classnames";
 import { Fragment as Fragment13, useEffect as useEffect7, useState as useState6 } from "react";
@@ -2078,7 +2078,7 @@ var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOpt
   ] }) });
 };
 
-// test-app/src/component/table/header.tsx
+// src/component/table/header.tsx
 import { Fragment as Fragment14 } from "react";
 import classnames6 from "classnames";
 import { Input as Input7 } from "reactstrap";
@@ -2168,13 +2168,13 @@ var HeaderTableCol = (props) => {
 };
 var header_default = HeaderTableCol;
 
-// test-app/src/component/table/command.tsx
+// src/component/table/command.tsx
 import { Fragment as Fragment17 } from "react";
 import classnames7 from "classnames";
 import { Button as Button4, UncontrolledTooltip as UncontrolledTooltip3 } from "reactstrap";
 import { useTranslation as useTranslation10 } from "react-i18next";
 
-// test-app/src/component/icon/index.tsx
+// src/component/icon/index.tsx
 import * as Icon from "becoxy-icons";
 import { Fragment as Fragment16 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
@@ -2189,7 +2189,7 @@ var IconCustom = (props) => {
 };
 var icon_default = IconCustom;
 
-// test-app/src/component/table/command.tsx
+// src/component/table/command.tsx
 import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var CommandElement = (props) => {
   const { commandItems, rowData, indexRow, handleCommandClick, indexFocus, setIndexFocus } = props;
@@ -2223,7 +2223,7 @@ var CommandElement = (props) => {
 };
 var command_default = CommandElement;
 
-// test-app/src/component/select-table-tree/index.tsx
+// src/component/select-table-tree/index.tsx
 import React2, { forwardRef as forwardRef3, Fragment as Fragment18, useEffect as useEffect8, useMemo as useMemo2, useRef as useRef3, useState as useState7 } from "react";
 import {
   DropdownItem as DropdownItem3,
@@ -2792,7 +2792,7 @@ var SelectTableTree = forwardRef3((props, ref) => {
   );
 });
 
-// test-app/src/component/table/index.tsx
+// src/component/table/index.tsx
 import { NumericFormat } from "react-number-format";
 import { Fragment as Fragment21, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 var TableEdit = forwardRef4((props, ref) => {
@@ -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" }
+                }
+              )
+            }
+          )
         },
-        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,
@@ -4151,7 +4156,7 @@ var TableEdit = forwardRef4((props, ref) => {
 });
 var table_default = TableEdit;
 
-// test-app/src/component/tab-menu/index.tsx
+// src/component/tab-menu/index.tsx
 import { ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight4 } from "becoxy-icons";
 import classNames6 from "classnames";
 import { Fragment as Fragment22, useEffect as useEffect10, useState as useState9 } from "react";
@@ -4287,13 +4292,13 @@ var TabsMenuComponent = ({
   ] });
 };
 
-// test-app/src/component/input-style/index.tsx
+// src/component/input-style/index.tsx
 import { Bold, Droplet, Italic, Type, Underline } from "becoxy-icons";
 import { Button as Button7, Input as Input10 } from "reactstrap";
 import classnames10 from "classnames";
 import { Fragment as Fragment23 } from "react";
 
-// test-app/src/component/input-style/fonts.ts
+// src/component/input-style/fonts.ts
 var OptionFont = [
   {
     value: 1,
@@ -5149,7 +5154,7 @@ var OptionFont = [
   }
 ];
 
-// test-app/src/component/input-style/index.tsx
+// src/component/input-style/index.tsx
 import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 var InputStyleComponent = (props) => {
   const {
@@ -5282,8 +5287,8 @@ var InputStyleComponent = (props) => {
   ] }) });
 };
 
-// index.ts
-var Table_edit_default = table_default;
+// src/index.ts
+var src_default = table_default;
 export {
   InputStyleComponent,
   SelectTable,
@@ -5291,7 +5296,7 @@ export {
   TabsMenuComponent,
   checkDecimalSeparator,
   checkThousandSeparator,
-  Table_edit_default as default,
+  src_default as default,
   formartNumberic,
   generateUUID,
   isNullOrUndefined,