react-table-edit 0.0.1 → 0.0.2

package/dist/index.js

@@ -42,7 +42,7 @@ __export(Table_edit_exports, {
 });
 module.exports = __toCommonJS(Table_edit_exports);
 
-// test-app/component/table/index.tsx
+// test-app/src/component/table/index.tsx
 var import_react12 = require("react");
 var import_reactstrap8 = require("reactstrap");
 var import_classnames9 = __toESM(require("classnames"));
@@ -52,7 +52,7 @@ var import_ej2_react_grids2 = require("@syncfusion/ej2-react-grids");
 var import_async = __toESM(require("react-select/async"));
 var import_becoxy_icons4 = require("becoxy-icons");
 
-// test-app/component/react-input/index.tsx
+// test-app/src/component/react-input/index.tsx
 var import_becoxy_icons = require("becoxy-icons");
 var import_classnames = __toESM(require("classnames"));
 var import_react = require("react");
@@ -84,7 +84,7 @@ var ReactInput = (props) => {
 };
 var react_input_default = ReactInput;
 
-// test-app/component/notifications.tsx
+// test-app/src/component/notifications.tsx
 var import_react2 = require("react");
 var import_sweetalert2 = __toESM(require("sweetalert2"));
 var import_sweetalert2_react_content = __toESM(require("sweetalert2-react-content"));
@@ -219,7 +219,7 @@ var messageBoxConfirm2 = async (t, data, data2, message) => {
   });
 };
 
-// test-app/component/utils.ts
+// test-app/src/component/utils.ts
 var import_react3 = require("react");
 var useOnClickOutside = (ref, handler) => {
   (0, import_react3.useEffect)(
@@ -296,7 +296,7 @@ var formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 10,
   }
 };
 
-// test-app/component/icon/index.tsx
+// test-app/src/component/icon/index.tsx
 var Icon = __toESM(require("becoxy-icons"));
 var import_react4 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -311,11 +311,11 @@ var IconCustom = (props) => {
 };
 var icon_default = IconCustom;
 
-// test-app/component/table/index.tsx
+// test-app/src/component/table/index.tsx
 var import_moment = __toESM(require("moment"));
 var import_ej2_react_dropdowns = require("@syncfusion/ej2-react-dropdowns");
 
-// test-app/component/edit-form/index.tsx
+// test-app/src/component/edit-form/index.tsx
 var import_react9 = require("react");
 var import_reactstrap6 = require("reactstrap");
 var import_react_hook_form5 = require("react-hook-form");
@@ -323,7 +323,7 @@ var import_yup = require("@hookform/resolvers/yup");
 var import_react_i18next5 = require("react-i18next");
 var import_classnames6 = __toESM(require("classnames"));
 
-// test-app/component/input-text/index.tsx
+// test-app/src/component/input-text/index.tsx
 var import_react_hook_form = require("react-hook-form");
 var import_reactstrap2 = require("reactstrap");
 var import_classnames2 = __toESM(require("classnames"));
@@ -414,7 +414,7 @@ var TextInput = (props) => {
 };
 var input_text_default = TextInput;
 
-// test-app/component/select/index.tsx
+// test-app/src/component/select/index.tsx
 var import_react_hook_form2 = require("react-hook-form");
 var import_reactstrap3 = require("reactstrap");
 var import_react_select = __toESM(require("react-select"));
@@ -503,7 +503,7 @@ var SelectBox = (props) => {
 };
 var select_default = SelectBox;
 
-// test-app/component/creactable-select/index.tsx
+// test-app/src/component/creactable-select/index.tsx
 var import_react_hook_form3 = require("react-hook-form");
 var import_reactstrap4 = require("reactstrap");
 var import_classnames4 = __toESM(require("classnames"));
@@ -574,7 +574,7 @@ var CreatableSelectBox = (props) => {
 };
 var creactable_select_default = CreatableSelectBox;
 
-// test-app/component/input-number/index.tsx
+// test-app/src/component/input-number/index.tsx
 var import_react_hook_form4 = require("react-hook-form");
 var import_reactstrap5 = require("reactstrap");
 var import_classnames5 = __toESM(require("classnames"));
@@ -708,7 +708,7 @@ var NumberInput = (props) => {
 };
 var input_number_default = NumberInput;
 
-// test-app/component/edit-form/index.tsx
+// test-app/src/component/edit-form/index.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var defaultWidth = 200;
 var EditForm = (0, import_react9.forwardRef)((props, ref) => {
@@ -1043,13 +1043,13 @@ var EditForm = (0, import_react9.forwardRef)((props, ref) => {
 });
 var edit_form_default = EditForm;
 
-// test-app/component/sidebar-setting-column/index.tsx
+// test-app/src/component/sidebar-setting-column/index.tsx
 var import_react11 = require("react");
 var import_reactstrap7 = require("reactstrap");
 var import_react_i18next7 = require("react-i18next");
 var import_ej2_react_grids = require("@syncfusion/ej2-react-grids");
 
-// test-app/component/modal-header/index.tsx
+// test-app/src/component/modal-header/index.tsx
 var import_becoxy_icons2 = require("becoxy-icons");
 var import_classnames7 = __toESM(require("classnames"));
 var import_react_i18next6 = require("react-i18next");
@@ -1093,7 +1093,7 @@ var ModalHeader = (props) => {
 };
 var modal_header_default = ModalHeader;
 
-// test-app/component/sidebar/index.tsx
+// test-app/src/component/sidebar/index.tsx
 var import_becoxy_icons3 = require("becoxy-icons");
 var import_classnames8 = __toESM(require("classnames"));
 var import_react10 = require("react");
@@ -1154,7 +1154,7 @@ var Sidebar = (props) => {
         /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "div",
           {
-            className: (0, import_classnames8.default)("customizer d-none d-md-block ", `customizer-${width ?? 600}`, {
+            className: (0, import_classnames8.default)("sidebar-customizer d-none d-md-block ", `sidebar-customizer-${width ?? 600}`, {
               open: flag,
               fullscreen: isFullScreen
             }),
@@ -1197,7 +1197,7 @@ var Sidebar = (props) => {
 };
 var sidebar_default = Sidebar;
 
-// test-app/component/sidebar-setting-column/index.tsx
+// test-app/src/component/sidebar-setting-column/index.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var SidebarSetColumn = (props) => {
   const { column, setColumn, openSidebar, handleSidebar } = props;
@@ -1207,7 +1207,7 @@ var SidebarSetColumn = (props) => {
     if (openSidebar) {
       setDataSource([...column]);
     }
-  }, [openSidebar]);
+  }, [column, openSidebar]);
   const handleCancel = () => {
     handleSidebar();
     setDataSource([]);
@@ -1365,7 +1365,7 @@ var SidebarSetColumn = (props) => {
 };
 var sidebar_setting_column_default = SidebarSetColumn;
 
-// test-app/component/table/index.tsx
+// test-app/src/component/table/index.tsx
 var import_ej2_react_popups = require("@syncfusion/ej2-react-popups");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
@@ -1417,7 +1417,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
   const [refreshRow, setRefreshRow] = (0, import_react12.useState)(false);
   const [indexFocus, setIndexFocus] = (0, import_react12.useState)();
   const [selectedRows, setSelectedRows] = (0, import_react12.useState)([]);
-  const [tableColumns, setTableColumns] = (0, import_react12.useState)([...columns]);
+  const [tableColumns, setTableColumns] = (0, import_react12.useState)([]);
   const [columnFistEdit, setColumnFistEdit] = (0, import_react12.useState)(0);
   const [columnLastEdit, setColumnlastEdit] = (0, import_react12.useState)(0);
   const [objWidthFix, setObjWidthFix] = (0, import_react12.useState)({});
@@ -1470,17 +1470,36 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
       dataSourceChange(dataSource);
     }
     if (rowChange) {
-      await rowChange(row, indexRow, col.field);
-      for (let index = 0; index <= tableColumns.length; index++) {
-        if (!editDisable && indexFocus === indexRow && (!col.disabledCondition || !col.disabledCondition(row)) && tableColumns[index] && tableColumns[index].editEnable) {
-          const element = document.getElementById(`${idTable}-col${index + 1}-row${indexRow + 1}`);
-          if (element) {
-            if (element.className.includes("input-element")) {
-              element.value = row[tableColumns[index].field] ?? "";
-            } else if (element.className.includes("input-numeric")) {
-              element.value = row[tableColumns[index].field] ? formartNumberic(row[tableColumns[index].field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction) : 0;
-            } else if (element.className.includes("input-checkbox")) {
-              element.checked = row[tableColumns[index].field] ?? false;
+      const rs = rowChange(row, indexRow, col.field);
+      if (rs && rs?.then) {
+        rs.then(() => {
+          for (let index = 0; index <= tableColumns.length; index++) {
+            if (!editDisable && indexFocus === indexRow && (!col.disabledCondition || !col.disabledCondition(row)) && tableColumns[index] && tableColumns[index].editEnable) {
+              const element = document.getElementById(`${idTable}-col${index + 1}-row${indexRow + 1}`);
+              if (element) {
+                if (element.className.includes("input-element")) {
+                  element.value = row[tableColumns[index].field] ?? "";
+                } else if (element.className.includes("input-numeric")) {
+                  element.value = row[tableColumns[index].field] ? formartNumberic(row[tableColumns[index].field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction) : 0;
+                } else if (element.className.includes("input-checkbox")) {
+                  element.checked = row[tableColumns[index].field] ?? false;
+                }
+              }
+            }
+          }
+        });
+      } else {
+        for (let index = 0; index <= tableColumns.length; index++) {
+          if (!editDisable && indexFocus === indexRow && (!col.disabledCondition || !col.disabledCondition(row)) && tableColumns[index] && tableColumns[index].editEnable) {
+            const element = document.getElementById(`${idTable}-col${index + 1}-row${indexRow + 1}`);
+            if (element) {
+              if (element.className.includes("input-element")) {
+                element.value = row[tableColumns[index].field] ?? "";
+              } else if (element.className.includes("input-numeric")) {
+                element.value = row[tableColumns[index].field] ? formartNumberic(row[tableColumns[index].field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction) : 0;
+              } else if (element.className.includes("input-checkbox")) {
+                element.checked = row[tableColumns[index].field] ?? false;
+              }
             }
           }
         }
@@ -2233,7 +2252,11 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
       return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "td",
         {
-          className: (0, import_classnames9.default)(`e-rowcell p-0 fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "e-active": isSelected && editDisable || indexFocus === indexRow }),
+          className: (0, import_classnames9.default)(
+            `e-rowcell p-0 fix-${col.fixedType}`,
+            { "cell-fixed": col.fixedType },
+            { "e-active": isSelected && editDisable || indexFocus === indexRow }
+          ),
           style: {
             width: col.width,
             minWidth: col.minWidth,
@@ -2307,7 +2330,11 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
       return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "td",
         {
-          className: (0, import_classnames9.default)(`e-rowcell p-0 fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "e-active": isSelected && editDisable || indexFocus === indexRow }),
+          className: (0, import_classnames9.default)(
+            `e-rowcell p-0 fix-${col.fixedType}`,
+            { "cell-fixed": col.fixedType },
+            { "e-active": isSelected && editDisable || indexFocus === indexRow }
+          ),
           style: {
             width: col.width,
             minWidth: col.minWidth,
@@ -2370,7 +2397,11 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
       return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react12.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "td",
         {
-          className: (0, import_classnames9.default)(`e-rowcell fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "e-active": isSelected && editDisable || indexFocus === indexRow }),
+          className: (0, import_classnames9.default)(
+            `e-rowcell fix-${col.fixedType}`,
+            { "cell-fixed": col.fixedType },
+            { "e-active": isSelected && editDisable || indexFocus === indexRow }
+          ),
           style: {
             left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
             right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
@@ -2431,7 +2462,10 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
       return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react12.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "th",
         {
-          className: (0, import_classnames9.default)(`e-headercell fix-${col.fixedType}`, { "cell-fixed": col.fixedType }),
+          className: (0, import_classnames9.default)(
+            `e-headercell fix-${col.fixedType}`,
+            { "cell-fixed": col.fixedType }
+          ),
           style: {
             width: col.width,
             padding: 0,
@@ -2477,7 +2511,10 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
           children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "th",
             {
-              className: (0, import_classnames9.default)(`e-headercell fix-${col.fixedType}`, { "cell-fixed": col.fixedType }),
+              className: (0, import_classnames9.default)(
+                `e-headercell fix-${col.fixedType}`,
+                { "cell-fixed": col.fixedType }
+              ),
               style: {
                 padding: 0,
                 width: 40,
@@ -2507,7 +2544,10 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
           children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "th",
             {
-              className: (0, import_classnames9.default)(`e-headercell fix-${col.fixedType}`, { "cell-fixed": col.fixedType }),
+              className: (0, import_classnames9.default)(
+                `e-headercell fix-${col.fixedType}`,
+                { "cell-fixed": col.fixedType }
+              ),
               style: {
                 width: col.width,
                 padding: 0,
@@ -2536,7 +2576,10 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react12.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "td",
       {
-        className: (0, import_classnames9.default)(`e-summarycell p-0 px-50 fix-${col.fixedType}`, { "cell-fixed": col.fixedType }),
+        className: (0, import_classnames9.default)(
+          `e-summarycell p-0 px-50 fix-${col.fixedType}`,
+          { "cell-fixed": col.fixedType }
+        ),
         style: {
           height: 30,
           fontSize: 14,
@@ -2605,33 +2648,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: "table-edit-custom", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "e-grid e-default e-bothlines", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "react-table-edit", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "e-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, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { ref: gridRef, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-gridcontent", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: tableElement, className: "e-content", 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: "e-gridheader", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { className: "e-row", role: "row", children: tableColumns.map((col, index) => {
-              return renderHeaderCol(col, index);
-            }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { className: "rowgroup", style: { overflowY: "scroll" }, children: dataSource?.map((row, indexRow) => {
-              const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
-              return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                "tr",
-                {
-                  className: "e-row",
-                  children: tableColumns.map((col, indexCol) => {
-                    return renderContentCol(col, row, indexRow, indexCol, isSelected);
-                  })
-                },
-                `row-${indexRow}`
-              );
-            }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tfoot", { className: "e-gridfoot", children: haveSum == true ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { className: "e-row", children: tableColumns.map((col, index) => {
-              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, {})
-        ] })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-gridcontent", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: tableElement, className: "e-content", 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: "e-gridheader", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { className: "e-row", role: "row", children: tableColumns.map((col, index) => {
+            return renderHeaderCol(col, index);
+          }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { className: "e-gridcontent", style: { overflowY: "scroll" }, children: dataSource?.map((row, indexRow) => {
+            const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
+            return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "tr",
+              {
+                className: "e-row",
+                children: tableColumns.map((col, indexCol) => {
+                  return renderContentCol(col, row, indexRow, indexCol, isSelected);
+                })
+              },
+              `row-${indexRow}`
+            );
+          }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tfoot", { className: "e-gridfoot", children: haveSum == true ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { className: "e-row", children: tableColumns.map((col, index) => {
+            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, {})
       ] }),
       allowPaging ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         import_ej2_react_grids2.PagerComponent,

package/dist/index.mjs

@@ -1,4 +1,4 @@
-// test-app/component/table/index.tsx
+// test-app/src/component/table/index.tsx
 import { Fragment as Fragment12, forwardRef as forwardRef2, useEffect as useEffect5, useImperativeHandle, useRef as useRef3, useState as useState5 } from "react";
 import { Button as Button3, DropdownMenu as DropdownMenu2, DropdownToggle as DropdownToggle2, Input as Input6, UncontrolledDropdown } from "reactstrap";
 import classnames5 from "classnames";
@@ -8,7 +8,7 @@ import { PagerComponent } from "@syncfusion/ej2-react-grids";
 import AsyncSelect from "react-select/async";
 import { AlertCircle, Info as Info2, Settings } from "becoxy-icons";
 
-// test-app/component/react-input/index.tsx
+// test-app/src/component/react-input/index.tsx
 import { X } from "becoxy-icons";
 import classNames from "classnames";
 import { Fragment, useState } from "react";
@@ -40,7 +40,7 @@ var ReactInput = (props) => {
 };
 var react_input_default = ReactInput;
 
-// test-app/component/notifications.tsx
+// test-app/src/component/notifications.tsx
 import { Fragment as Fragment2 } from "react";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
@@ -175,7 +175,7 @@ var messageBoxConfirm2 = async (t, data, data2, message) => {
   });
 };
 
-// test-app/component/utils.ts
+// test-app/src/component/utils.ts
 import { useEffect } from "react";
 var useOnClickOutside = (ref, handler) => {
   useEffect(
@@ -252,7 +252,7 @@ var formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 10,
   }
 };
 
-// test-app/component/icon/index.tsx
+// test-app/src/component/icon/index.tsx
 import * as Icon from "becoxy-icons";
 import { Fragment as Fragment3 } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
@@ -267,11 +267,11 @@ var IconCustom = (props) => {
 };
 var icon_default = IconCustom;
 
-// test-app/component/table/index.tsx
+// test-app/src/component/table/index.tsx
 import moment from "moment";
 import { DropDownTreeComponent } from "@syncfusion/ej2-react-dropdowns";
 
-// test-app/component/edit-form/index.tsx
+// test-app/src/component/edit-form/index.tsx
 import { forwardRef, useEffect as useEffect2, useRef, useState as useState2 } from "react";
 import {
   DropdownItem,
@@ -289,7 +289,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { useTranslation as useTranslation5 } from "react-i18next";
 import classNames2 from "classnames";
 
-// test-app/component/input-text/index.tsx
+// test-app/src/component/input-text/index.tsx
 import { Controller } from "react-hook-form";
 import { Input as Input2, Label, FormFeedback } from "reactstrap";
 import classnames from "classnames";
@@ -380,7 +380,7 @@ var TextInput = (props) => {
 };
 var input_text_default = TextInput;
 
-// test-app/component/select/index.tsx
+// test-app/src/component/select/index.tsx
 import { Controller as Controller2 } from "react-hook-form";
 import { Label as Label2, FormFeedback as FormFeedback2 } from "reactstrap";
 import Select from "react-select";
@@ -469,7 +469,7 @@ var SelectBox = (props) => {
 };
 var select_default = SelectBox;
 
-// test-app/component/creactable-select/index.tsx
+// test-app/src/component/creactable-select/index.tsx
 import { Controller as Controller3 } from "react-hook-form";
 import { Label as Label3, FormFeedback as FormFeedback3 } from "reactstrap";
 import classnames3 from "classnames";
@@ -540,7 +540,7 @@ var CreatableSelectBox = (props) => {
 };
 var creactable_select_default = CreatableSelectBox;
 
-// test-app/component/input-number/index.tsx
+// test-app/src/component/input-number/index.tsx
 import { Controller as Controller4 } from "react-hook-form";
 import { Input as Input3, Label as Label4, FormFeedback as FormFeedback4 } from "reactstrap";
 import classnames4 from "classnames";
@@ -674,7 +674,7 @@ var NumberInput = (props) => {
 };
 var input_number_default = NumberInput;
 
-// test-app/component/edit-form/index.tsx
+// test-app/src/component/edit-form/index.tsx
 import { Fragment as Fragment8, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var defaultWidth = 200;
 var EditForm = forwardRef((props, ref) => {
@@ -1009,7 +1009,7 @@ var EditForm = forwardRef((props, ref) => {
 });
 var edit_form_default = EditForm;
 
-// test-app/component/sidebar-setting-column/index.tsx
+// test-app/src/component/sidebar-setting-column/index.tsx
 import { Fragment as Fragment10, useEffect as useEffect4, useRef as useRef2, useState as useState4 } from "react";
 import { Button as Button2, Input as Input5 } from "reactstrap";
 import { useTranslation as useTranslation7 } from "react-i18next";
@@ -1023,7 +1023,7 @@ import {
   CommandColumn
 } from "@syncfusion/ej2-react-grids";
 
-// test-app/component/modal-header/index.tsx
+// test-app/src/component/modal-header/index.tsx
 import { Edit, Info, Plus, X as X2 } from "becoxy-icons";
 import classNames3 from "classnames";
 import { useTranslation as useTranslation6 } from "react-i18next";
@@ -1067,7 +1067,7 @@ var ModalHeader = (props) => {
 };
 var modal_header_default = ModalHeader;
 
-// test-app/component/sidebar/index.tsx
+// test-app/src/component/sidebar/index.tsx
 import { ChevronLeft, ChevronRight } from "becoxy-icons";
 import classNames4 from "classnames";
 import { useEffect as useEffect3, useState as useState3 } from "react";
@@ -1128,7 +1128,7 @@ var Sidebar = (props) => {
         /* @__PURE__ */ jsxs9(
           "div",
           {
-            className: classNames4("customizer d-none d-md-block ", `customizer-${width ?? 600}`, {
+            className: classNames4("sidebar-customizer d-none d-md-block ", `sidebar-customizer-${width ?? 600}`, {
               open: flag,
               fullscreen: isFullScreen
             }),
@@ -1171,7 +1171,7 @@ var Sidebar = (props) => {
 };
 var sidebar_default = Sidebar;
 
-// test-app/component/sidebar-setting-column/index.tsx
+// test-app/src/component/sidebar-setting-column/index.tsx
 import { Fragment as Fragment11, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var SidebarSetColumn = (props) => {
   const { column, setColumn, openSidebar, handleSidebar } = props;
@@ -1181,7 +1181,7 @@ var SidebarSetColumn = (props) => {
     if (openSidebar) {
       setDataSource([...column]);
     }
-  }, [openSidebar]);
+  }, [column, openSidebar]);
   const handleCancel = () => {
     handleSidebar();
     setDataSource([]);
@@ -1339,7 +1339,7 @@ var SidebarSetColumn = (props) => {
 };
 var sidebar_setting_column_default = SidebarSetColumn;
 
-// test-app/component/table/index.tsx
+// test-app/src/component/table/index.tsx
 import { TooltipComponent } from "@syncfusion/ej2-react-popups";
 import { Fragment as Fragment13, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 var TableEdit = forwardRef2((props, ref) => {
@@ -1391,7 +1391,7 @@ var TableEdit = forwardRef2((props, ref) => {
   const [refreshRow, setRefreshRow] = useState5(false);
   const [indexFocus, setIndexFocus] = useState5();
   const [selectedRows, setSelectedRows] = useState5([]);
-  const [tableColumns, setTableColumns] = useState5([...columns]);
+  const [tableColumns, setTableColumns] = useState5([]);
   const [columnFistEdit, setColumnFistEdit] = useState5(0);
   const [columnLastEdit, setColumnlastEdit] = useState5(0);
   const [objWidthFix, setObjWidthFix] = useState5({});
@@ -1444,17 +1444,36 @@ var TableEdit = forwardRef2((props, ref) => {
       dataSourceChange(dataSource);
     }
     if (rowChange) {
-      await rowChange(row, indexRow, col.field);
-      for (let index = 0; index <= tableColumns.length; index++) {
-        if (!editDisable && indexFocus === indexRow && (!col.disabledCondition || !col.disabledCondition(row)) && tableColumns[index] && tableColumns[index].editEnable) {
-          const element = document.getElementById(`${idTable}-col${index + 1}-row${indexRow + 1}`);
-          if (element) {
-            if (element.className.includes("input-element")) {
-              element.value = row[tableColumns[index].field] ?? "";
-            } else if (element.className.includes("input-numeric")) {
-              element.value = row[tableColumns[index].field] ? formartNumberic(row[tableColumns[index].field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction) : 0;
-            } else if (element.className.includes("input-checkbox")) {
-              element.checked = row[tableColumns[index].field] ?? false;
+      const rs = rowChange(row, indexRow, col.field);
+      if (rs && rs?.then) {
+        rs.then(() => {
+          for (let index = 0; index <= tableColumns.length; index++) {
+            if (!editDisable && indexFocus === indexRow && (!col.disabledCondition || !col.disabledCondition(row)) && tableColumns[index] && tableColumns[index].editEnable) {
+              const element = document.getElementById(`${idTable}-col${index + 1}-row${indexRow + 1}`);
+              if (element) {
+                if (element.className.includes("input-element")) {
+                  element.value = row[tableColumns[index].field] ?? "";
+                } else if (element.className.includes("input-numeric")) {
+                  element.value = row[tableColumns[index].field] ? formartNumberic(row[tableColumns[index].field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction) : 0;
+                } else if (element.className.includes("input-checkbox")) {
+                  element.checked = row[tableColumns[index].field] ?? false;
+                }
+              }
+            }
+          }
+        });
+      } else {
+        for (let index = 0; index <= tableColumns.length; index++) {
+          if (!editDisable && indexFocus === indexRow && (!col.disabledCondition || !col.disabledCondition(row)) && tableColumns[index] && tableColumns[index].editEnable) {
+            const element = document.getElementById(`${idTable}-col${index + 1}-row${indexRow + 1}`);
+            if (element) {
+              if (element.className.includes("input-element")) {
+                element.value = row[tableColumns[index].field] ?? "";
+              } else if (element.className.includes("input-numeric")) {
+                element.value = row[tableColumns[index].field] ? formartNumberic(row[tableColumns[index].field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction) : 0;
+              } else if (element.className.includes("input-checkbox")) {
+                element.checked = row[tableColumns[index].field] ?? false;
+              }
             }
           }
         }
@@ -2207,7 +2226,11 @@ var TableEdit = forwardRef2((props, ref) => {
       return /* @__PURE__ */ jsx12(
         "td",
         {
-          className: classnames5(`e-rowcell p-0 fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "e-active": isSelected && editDisable || indexFocus === indexRow }),
+          className: classnames5(
+            `e-rowcell p-0 fix-${col.fixedType}`,
+            { "cell-fixed": col.fixedType },
+            { "e-active": isSelected && editDisable || indexFocus === indexRow }
+          ),
           style: {
             width: col.width,
             minWidth: col.minWidth,
@@ -2281,7 +2304,11 @@ var TableEdit = forwardRef2((props, ref) => {
       return /* @__PURE__ */ jsx12(
         "td",
         {
-          className: classnames5(`e-rowcell p-0 fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "e-active": isSelected && editDisable || indexFocus === indexRow }),
+          className: classnames5(
+            `e-rowcell p-0 fix-${col.fixedType}`,
+            { "cell-fixed": col.fixedType },
+            { "e-active": isSelected && editDisable || indexFocus === indexRow }
+          ),
           style: {
             width: col.width,
             minWidth: col.minWidth,
@@ -2344,7 +2371,11 @@ var TableEdit = forwardRef2((props, ref) => {
       return /* @__PURE__ */ jsx12(Fragment12, { children: col.visible !== false && /* @__PURE__ */ jsx12(
         "td",
         {
-          className: classnames5(`e-rowcell fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "e-active": isSelected && editDisable || indexFocus === indexRow }),
+          className: classnames5(
+            `e-rowcell fix-${col.fixedType}`,
+            { "cell-fixed": col.fixedType },
+            { "e-active": isSelected && editDisable || indexFocus === indexRow }
+          ),
           style: {
             left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
             right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
@@ -2405,7 +2436,10 @@ var TableEdit = forwardRef2((props, ref) => {
       return /* @__PURE__ */ jsx12(Fragment12, { children: col.visible !== false && /* @__PURE__ */ jsx12(
         "th",
         {
-          className: classnames5(`e-headercell fix-${col.fixedType}`, { "cell-fixed": col.fixedType }),
+          className: classnames5(
+            `e-headercell fix-${col.fixedType}`,
+            { "cell-fixed": col.fixedType }
+          ),
           style: {
             width: col.width,
             padding: 0,
@@ -2451,7 +2485,10 @@ var TableEdit = forwardRef2((props, ref) => {
           children: col.visible !== false && /* @__PURE__ */ jsx12(
             "th",
             {
-              className: classnames5(`e-headercell fix-${col.fixedType}`, { "cell-fixed": col.fixedType }),
+              className: classnames5(
+                `e-headercell fix-${col.fixedType}`,
+                { "cell-fixed": col.fixedType }
+              ),
               style: {
                 padding: 0,
                 width: 40,
@@ -2481,7 +2518,10 @@ var TableEdit = forwardRef2((props, ref) => {
           children: col.visible !== false && /* @__PURE__ */ jsx12(
             "th",
             {
-              className: classnames5(`e-headercell fix-${col.fixedType}`, { "cell-fixed": col.fixedType }),
+              className: classnames5(
+                `e-headercell fix-${col.fixedType}`,
+                { "cell-fixed": col.fixedType }
+              ),
               style: {
                 width: col.width,
                 padding: 0,
@@ -2510,7 +2550,10 @@ var TableEdit = forwardRef2((props, ref) => {
     return /* @__PURE__ */ jsx12(Fragment12, { children: col.visible !== false && /* @__PURE__ */ jsx12(
       "td",
       {
-        className: classnames5(`e-summarycell p-0 px-50 fix-${col.fixedType}`, { "cell-fixed": col.fixedType }),
+        className: classnames5(
+          `e-summarycell p-0 px-50 fix-${col.fixedType}`,
+          { "cell-fixed": col.fixedType }
+        ),
         style: {
           height: 30,
           fontSize: 14,
@@ -2579,33 +2622,31 @@ var TableEdit = forwardRef2((props, ref) => {
     ] }) });
   };
   return /* @__PURE__ */ jsxs11(Fragment12, { children: [
-    /* @__PURE__ */ jsxs11("div", { className: "table-edit-custom", children: [
-      /* @__PURE__ */ jsxs11("div", { className: "e-grid e-default e-bothlines", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "react-table-edit", children: [
+      /* @__PURE__ */ jsxs11("div", { className: "e-grid", ref: gridRef, children: [
         showTopToolbar ? /* @__PURE__ */ jsx12(Fragment13, { children: renderToolbarTop() }) : /* @__PURE__ */ jsx12(Fragment13, {}),
-        /* @__PURE__ */ jsxs11("div", { ref: gridRef, children: [
-          /* @__PURE__ */ jsx12("div", { className: "e-gridcontent", children: /* @__PURE__ */ jsx12("div", { ref: tableElement, className: "e-content", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ jsxs11("table", { style: { width: "100%" }, children: [
-            /* @__PURE__ */ jsx12("thead", { className: "e-gridheader", children: /* @__PURE__ */ jsx12("tr", { className: "e-row", role: "row", children: tableColumns.map((col, index) => {
-              return renderHeaderCol(col, index);
-            }) }) }),
-            /* @__PURE__ */ jsx12("tbody", { className: "rowgroup", style: { overflowY: "scroll" }, children: dataSource?.map((row, indexRow) => {
-              const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
-              return /* @__PURE__ */ jsx12(
-                "tr",
-                {
-                  className: "e-row",
-                  children: tableColumns.map((col, indexCol) => {
-                    return renderContentCol(col, row, indexRow, indexCol, isSelected);
-                  })
-                },
-                `row-${indexRow}`
-              );
-            }) }),
-            /* @__PURE__ */ jsx12("tfoot", { className: "e-gridfoot", children: haveSum == true ? /* @__PURE__ */ jsx12("tr", { className: "e-row", children: tableColumns.map((col, index) => {
-              return renderFooterCol(col, index);
-            }) }) : /* @__PURE__ */ jsx12(Fragment13, {}) })
-          ] }) }) }),
-          showBottomToolbar ? /* @__PURE__ */ jsx12(Fragment13, { children: renderToolbarBottom() }) : /* @__PURE__ */ jsx12(Fragment13, {})
-        ] })
+        /* @__PURE__ */ jsx12("div", { className: "e-gridcontent", children: /* @__PURE__ */ jsx12("div", { ref: tableElement, className: "e-content", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ jsxs11("table", { style: { width: "100%" }, children: [
+          /* @__PURE__ */ jsx12("thead", { className: "e-gridheader", children: /* @__PURE__ */ jsx12("tr", { className: "e-row", role: "row", children: tableColumns.map((col, index) => {
+            return renderHeaderCol(col, index);
+          }) }) }),
+          /* @__PURE__ */ jsx12("tbody", { className: "e-gridcontent", style: { overflowY: "scroll" }, children: dataSource?.map((row, indexRow) => {
+            const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
+            return /* @__PURE__ */ jsx12(
+              "tr",
+              {
+                className: "e-row",
+                children: tableColumns.map((col, indexCol) => {
+                  return renderContentCol(col, row, indexRow, indexCol, isSelected);
+                })
+              },
+              `row-${indexRow}`
+            );
+          }) }),
+          /* @__PURE__ */ jsx12("tfoot", { className: "e-gridfoot", children: haveSum == true ? /* @__PURE__ */ jsx12("tr", { className: "e-row", children: tableColumns.map((col, index) => {
+            return renderFooterCol(col, index);
+          }) }) : /* @__PURE__ */ jsx12(Fragment13, {}) })
+        ] }) }) }),
+        showBottomToolbar ? /* @__PURE__ */ jsx12(Fragment13, { children: renderToolbarBottom() }) : /* @__PURE__ */ jsx12(Fragment13, {})
       ] }),
       allowPaging ? /* @__PURE__ */ jsx12(
         PagerComponent,

package/package.json

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