npm - react-table-edit - Versions diffs - 0.2.7 → 0.2.9 - Mend

react-table-edit 0.2.7 → 0.2.9

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

@@ -45,10 +45,10 @@ module.exports = __toCommonJS(Table_edit_exports);
 // test-app/src/component/table/index.tsx
 var import_react12 = require("react");
 var import_reactstrap8 = require("reactstrap");
-var import_classnames9 = __toESM(require("classnames"));
+var import_classnames10 = __toESM(require("classnames"));
 var import_react_i18next8 = require("react-i18next");
 var import_react_select2 = __toESM(require("react-select"));
-var import_ej2_react_grids2 = require("@syncfusion/ej2-react-grids");
+var import_ej2_react_grids = require("@syncfusion/ej2-react-grids");
 var import_async = __toESM(require("react-select/async"));
 var import_becoxy_icons4 = require("becoxy-icons");
@@ -1057,7 +1057,6 @@ var edit_form_default = EditForm;
 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/src/component/modal-header/index.tsx
 var import_becoxy_icons2 = require("becoxy-icons");
@@ -1208,16 +1207,18 @@ var Sidebar = (props) => {
 var sidebar_default = Sidebar;
 // test-app/src/component/sidebar-setting-column/index.tsx
+var import_classnames9 = __toESM(require("classnames"));
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var SidebarSetColumn = (props) => {
   const { column, setColumn, openSidebar, handleSidebar } = props;
   const { t } = (0, import_react_i18next7.useTranslation)();
   const [dataSource, setDataSource] = (0, import_react11.useState)([]);
+  const [indexFocus, setIndexFocus] = (0, import_react11.useState)();
   (0, import_react11.useEffect)(() => {
     if (openSidebar) {
-      setDataSource([...column]);
+      setDataSource(column.map((e) => ({ ...e })));
     }
-  }, [column, openSidebar]);
+  }, [openSidebar]);
   const handleCancel = () => {
     handleSidebar();
     setDataSource([]);
@@ -1230,7 +1231,6 @@ var SidebarSetColumn = (props) => {
     const { innerWidth, innerHeight } = window;
     return { innerWidth, innerHeight };
   };
-  const gird = (0, import_react11.useRef)(null);
   const [windowSize, setWindowSize] = (0, import_react11.useState)(getWindowSize());
   (0, import_react11.useEffect)(() => {
     const handleWindowResize = () => {
@@ -1247,7 +1247,7 @@ var SidebarSetColumn = (props) => {
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_reactstrap7.Button, { color: "secondary", onClick: handleCancel, outline: true, children: t("Close") })
     ] });
   };
-  const visibleTemplate = (item) => {
+  const visibleTemplate = (item, index) => {
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       import_reactstrap7.Input,
       {
@@ -1258,14 +1258,14 @@ var SidebarSetColumn = (props) => {
         className: " cursor-pointer",
         onChange: (e) => {
           if (dataSource) {
-            item.column.dataSource[item.index].visible = e.target.checked;
-            setDataSource(item.column.dataSource);
+            dataSource[index].visible = e.target.checked;
+            setDataSource(dataSource);
           }
         }
       }
     );
   };
-  const fixColumnTemplate = (item) => {
+  const fixColumnTemplate = (item, index) => {
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       import_reactstrap7.Input,
       {
@@ -1276,15 +1276,15 @@ var SidebarSetColumn = (props) => {
         onChange: (e) => {
           if (dataSource) {
             if (e.target.checked) {
-              if (item.index * 2 <= item.column.dataSource.length) {
-                item.column.dataSource[item.index].fixedType = "left";
+              if (index * 2 <= dataSource.length) {
+                dataSource[index].fixedType = "left";
               } else {
-                item.column.dataSource[item.index].fixedType = "right";
+                dataSource[index].fixedType = "right";
               }
             } else {
-              item.column.dataSource[item.index].fixedType = "";
+              dataSource[index].fixedType = void 0;
             }
-            setDataSource(item.column.dataSource);
+            setDataSource(dataSource);
           }
         }
       }
@@ -1292,53 +1292,82 @@ var SidebarSetColumn = (props) => {
   };
   const columns = [
     {
-      isPrimaryKey: true,
       field: "headerText",
       headerText: "Column name",
       template: (e) => {
         return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: t(e.headerText) });
       },
       visible: true,
-      width: 100,
-      maxWidth: 120,
-      minWidth: 80
+      width: 175,
+      maxWidth: 200,
+      minWidth: 150
     },
     {
-      isPrimaryKey: true,
+      field: "",
       template: visibleTemplate,
       headerText: "Display",
-      dataSource,
+      textAlign: "center",
       visible: true,
       width: 100,
       maxWidth: 120,
       minWidth: 80
     },
     {
-      isPrimaryKey: true,
+      field: "",
       template: fixColumnTemplate,
       headerText: "Fix the column",
-      dataSource,
+      textAlign: "center",
       visible: true,
       width: 100,
       maxWidth: 120,
       minWidth: 80
     },
     {
-      isPrimaryKey: true,
       field: "width",
       headerText: "Column width",
-      template: (item) => {
-        return item.width ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-          t(item.width),
-          "px"
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
-      },
+      textAlign: "right",
       visible: true,
       width: 100,
       maxWidth: 120,
       minWidth: 80
     }
   ];
+  const renderHeaderCol = (col, indexCol) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_react11.Fragment,
+      {
+        children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "th",
+          {
+            className: (0, import_classnames9.default)(
+              `r-headercell fix-${col.fixedType}`,
+              { "cell-fixed": col.fixedType }
+            ),
+            style: {
+              width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width,
+              minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
+              top: `${0 * 42}px`,
+              maxWidth: col.maxWidth
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "div",
+              {
+                role: "textbox",
+                title: t(col.headerText ?? ""),
+                style: {
+                  height: `${1 * 42}px`,
+                  justifyContent: col.textAlign ?? "left"
+                },
+                className: "r-headercell-div",
+                children: t(col.headerText ?? "")
+              }
+            )
+          }
+        )
+      },
+      `header-${indexCol}`
+    );
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     sidebar_default,
     {
@@ -1347,20 +1376,74 @@ var SidebarSetColumn = (props) => {
       width: 700,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(modal_header_default, { typeModal: "Edit", handleModal: handleCancel, title: "Column setup" }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-          import_ej2_react_grids.GridComponent,
-          {
-            className: "ms-2",
-            dataSource,
-            ref: gird,
-            height: windowSize.innerHeight - 160,
-            allowRowDragAndDrop: true,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ej2_react_grids.ColumnsDirective, { children: columns.map((col, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ej2_react_grids.ColumnDirective, { ...col, headerText: t(col.headerText) }, index)) }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ej2_react_grids.Inject, { services: [import_ej2_react_grids.RowDD, import_ej2_react_grids.Selection, import_ej2_react_grids.CommandColumn] })
-            ]
-          }
-        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ms-2 react-table-edit", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "r-grid", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "r-gridtable", style: { height: windowSize.innerHeight - 120 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("table", { style: { width: "100%" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("thead", { className: "r-gridheader", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tr", { className: "r-row", role: "row", children: columns.map((col, index) => {
+            return renderHeaderCol(col, index);
+          }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tbody", { className: "r-gridcontent", children: dataSource?.map((row, indexRow) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "tr",
+              {
+                className: (0, import_classnames9.default)("r-row", { "last-row": indexRow === dataSource.length - 1 }, { "fisrt-row": indexRow === 0 }),
+                children: columns.map((col, indexCol) => {
+                  let value = row[col.field];
+                  if (col.editType === "numeric" || col.editTypeCondition && col.editTypeCondition(row) === "numeric") {
+                    value = formartNumberic(row[col.field], ",", ".", col.numericSettings?.fraction, true) ?? 0;
+                  }
+                  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react11.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    "td",
+                    {
+                      className: (0, import_classnames9.default)(
+                        `r-rowcell fix-${col.fixedType}`,
+                        { "cell-fixed": col.fixedType },
+                        { "r-active": indexFocus === indexRow }
+                      ),
+                      style: {
+                        padding: 0,
+                        textAlign: col.textAlign ? col.textAlign : "left"
+                      },
+                      onFocus: (e) => {
+                        if (indexRow !== indexFocus) {
+                          setIndexFocus(indexRow);
+                        }
+                        e.stopPropagation();
+                      },
+                      onClick: (e) => {
+                        if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
+                          if (indexRow !== indexFocus) {
+                            setIndexFocus(indexRow);
+                          }
+                          e.stopPropagation();
+                        }
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                        "div",
+                        {
+                          className: (0, import_classnames9.default)("r-rowcell-div"),
+                          style: {
+                            width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : "auto"
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                            "div",
+                            {
+                              className: (0, import_classnames9.default)("r-rowcell-content"),
+                              style: {
+                                margin: "7px 9px"
+                              },
+                              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "r-cell-text", children: col.template ? col.template(row, indexRow) : value })
+                            }
+                          )
+                        }
+                      )
+                    },
+                    `col-${indexRow}-${indexCol}`
+                  ) }, indexCol);
+                })
+              },
+              `row-${indexRow}`
+            );
+          }) })
+        ] }) }) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "div",
           {
@@ -1612,7 +1695,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
               }
               handleDataChange(row, col, indexRow);
             },
-            className: (0, import_classnames9.default)("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: (0, import_classnames10.default)("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             type: "date",
             max: "9999-12-31",
             onKeyDown: (e) => {
@@ -1635,7 +1718,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
               }
               handleDataChange(row, col, indexRow);
             },
-            className: (0, import_classnames9.default)("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: (0, import_classnames10.default)("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             type: "datetime-local",
             max: "9999-12-31T23:59",
             onKeyDown: (e) => {
@@ -1655,7 +1738,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
         if (!valueAsyncSelect && col.selectSettings?.defaultValue) {
           valueAsyncSelect = col.selectSettings?.defaultValue(row);
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: (0, import_classnames9.default)("d-flex select-group", { "is-invalid": col.validate && col.validate(row[col.field], row) }), children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: (0, import_classnames10.default)("d-flex select-group", { "is-invalid": col.validate && col.validate(row[col.field], row) }), children: [
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             import_async.default,
             {
@@ -1675,7 +1758,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
               placeholder: t("Select"),
               id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
               loadOptions: col.selectSettings?.loadOptions,
-              className: (0, import_classnames9.default)("react-select"),
+              className: (0, import_classnames10.default)("react-select"),
               onKeyDown: (e) => {
                 if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
                 }
@@ -1690,7 +1773,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
                   col.selectSettings?.handIconGroupClick("right");
                 }
               },
-              className: (0, import_classnames9.default)("input-group-text", { "d-none": !col.selectSettings?.iconGroup }),
+              className: (0, import_classnames10.default)("input-group-text", { "d-none": !col.selectSettings?.iconGroup }),
               children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(icon_default, { iconName: col.selectSettings?.iconGroup ?? "", size: 16 })
             }
           )
@@ -1727,7 +1810,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
             isClearable: col.selectSettings?.isClearable ?? false,
             classNamePrefix: col.selectSettings?.widthPopup ? `select-${col.selectSettings?.widthPopup}` : "select",
             placeholder: t("Select"),
-            className: (0, import_classnames9.default)("react-select", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: (0, import_classnames10.default)("react-select", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             onKeyDown: (e) => {
               if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
               }
@@ -1767,7 +1850,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
                   parentValue: "parentId",
                   child: "children"
                 },
-                className: (0, import_classnames9.default)("select-tree", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+                className: (0, import_classnames10.default)("select-tree", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
                 allowFiltering: false,
                 value: valueSelectTree,
                 popupHeight: 250,
@@ -1824,7 +1907,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
             defaultValue: formartNumberic(valueCurrency, decimalSeparator, thousandSeparator, col.numericSettings?.fraction),
-            className: (0, import_classnames9.default)("border-0 rounded-0 input-numeric", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: (0, import_classnames10.default)("border-0 rounded-0 input-numeric", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             onChange: (val) => {
               let newVal = "";
               const flag = val.target?.value.startsWith("-");
@@ -1959,7 +2042,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
             defaultValue: isNullOrUndefined(row[col.field]) ? "" : row[col.field],
-            className: (0, import_classnames9.default)("border-0 rounded-0 input-element", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: (0, import_classnames10.default)("border-0 rounded-0 input-element", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             onBlur: (val) => {
               if (row[col.field] != val.target?.value) {
                 row[col.field] = val.target?.value;
@@ -2003,7 +2086,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
         {
           tabIndex: -1,
           style: { padding: "5px", minWidth: 45, height: "100%" },
-          className: (0, import_classnames9.default)("command-item", {
+          className: (0, import_classnames10.default)("command-item", {
             "btn-icon": item.tooltip === ""
           }),
           color: item.color ? item.color : "#000",
@@ -2032,7 +2115,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
       if (newIndexCol > -1) {
         const element = document.getElementById(`${idTable}-col${newIndexCol}-row${indexRow}`);
         if (element) {
-          if (element.className.includes("react-select") || element.className.includes("from-edit")) {
+          if (element.className.includes("react-select") || element.className.includes("form-edit")) {
             element.getElementsByTagName("input")[0]?.focus();
           } else {
             element.focus();
@@ -2053,7 +2136,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
       if (newIndexCol > -1) {
         const element = document.getElementById(`${idTable}-col${newIndexCol}-row${indexRow}`);
         if (element) {
-          if (element.className.includes("react-select") || element.className.includes("from-edit")) {
+          if (element.className.includes("react-select") || element.className.includes("form-edit")) {
             element.getElementsByTagName("input")[0]?.focus();
           } else {
             element.focus();
@@ -2071,7 +2154,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
           setTimeout(() => {
             const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow - 1}`);
             if (element2) {
-              if (element2.className.includes("react-select") || element2.className.includes("from-edit")) {
+              if (element2.className.includes("react-select") || element2.className.includes("form-edit")) {
                 element2.getElementsByTagName("input")[0]?.focus();
               } else {
                 element2.focus();
@@ -2091,7 +2174,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
           setTimeout(() => {
             const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow + 1}`);
             if (element2) {
-              if (element2.className.includes("react-select") || element2.className.includes("from-edit")) {
+              if (element2.className.includes("react-select") || element2.className.includes("form-edit")) {
                 element2.getElementsByTagName("input")[0]?.focus();
               } else {
                 element2.focus();
@@ -2119,7 +2202,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
       setTimeout(() => {
         const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${indexRow + 1}`);
         if (element) {
-          if (element.className.includes("react-select") || element.className.includes("from-edit")) {
+          if (element.className.includes("react-select") || element.className.includes("form-edit")) {
             element.getElementsByTagName("input")[0]?.focus();
           } else {
             element.focus();
@@ -2137,7 +2220,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
           setTimeout(() => {
             const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow + 1}`);
             if (element2) {
-              if (element2.className.includes("react-select") || element2.className.includes("from-edit")) {
+              if (element2.className.includes("react-select") || element2.className.includes("form-edit")) {
                 element2.getElementsByTagName("input")[0]?.focus();
               } else {
                 element2.focus();
@@ -2187,7 +2270,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
         tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
         const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${dataSource?.length + 1}`);
         if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("select-100__control--menu-is-open").length > 0 || element.getElementsByClassName("select-200__control--menu-is-open").length > 0 || element.getElementsByClassName("select-300__control--menu-is-open").length > 0 || element.getElementsByClassName("select-400__control--menu-is-open").length > 0 || element.getElementsByClassName("select-500__control--menu-is-open").length > 0)) {
-          if (element.className.includes("react-select") || element.className.includes("from-edit")) {
+          if (element.className.includes("react-select") || element.className.includes("form-edit")) {
             element.getElementsByTagName("input")[0]?.focus();
           } else {
             element.focus();
@@ -2268,7 +2351,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
   const changeDataSource = (data, haveNew = false) => {
     if (!editDisable && !addDisable && setDataSource) {
       if (haveNew) {
-        data.push(defaultValue ? { ...defaultValue, "fieldKey": generateUUID() } : {});
+        data.push(defaultValue ? { ...defaultValue, [fieldKey]: generateUUID() } : {});
       }
     }
     setDataSource([...data]);
@@ -2320,7 +2403,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
       return col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "td",
         {
-          className: (0, import_classnames9.default)(
+          className: (0, import_classnames10.default)(
             `r-rowcell p-0 fix-${col.fixedType}`,
             { "cell-fixed": col.fixedType },
             { "r-active": isSelected && editDisable || indexFocus === indexRow }
@@ -2338,7 +2421,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
       return col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "td",
         {
-          className: (0, import_classnames9.default)(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
+          className: (0, import_classnames10.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,
@@ -2390,7 +2473,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
       return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "td",
         {
-          className: (0, import_classnames9.default)(
+          className: (0, import_classnames10.default)(
             `r-rowcell p-0 fix-${col.fixedType}`,
             { "cell-fixed": col.fixedType },
             { "r-active": isSelected && editDisable || indexFocus === indexRow }
@@ -2454,7 +2537,7 @@ 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)(
+          className: (0, import_classnames10.default)(
             `r-rowcell fix-${col.fixedType}`,
             { "cell-fixed": col.fixedType },
             { "r-active": isSelected && editDisable || indexFocus === indexRow }
@@ -2499,7 +2582,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
           children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "div",
             {
-              className: (0, import_classnames9.default)("r-rowcell-div"),
+              className: (0, import_classnames10.default)("r-rowcell-div"),
               style: {
                 width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : "auto"
               },
@@ -2507,7 +2590,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
                 "div",
                 {
                   id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
-                  className: (0, import_classnames9.default)("r-rowcell-content", { "r-is-invalid": errorMessage }),
+                  className: (0, import_classnames10.default)("r-rowcell-content", { "r-is-invalid": errorMessage }),
                   style: {
                     margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2
                   },
@@ -2524,7 +2607,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
                         children: typeDis === 2 ? col.template(row, indexRow) : value
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "icon-table", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_ej2_react_popups.TooltipComponent, { className: (0, import_classnames9.default)("cursor-pointer text-primary", { "d-none": !errorMessage }), content: errorMessage?.toString() ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_becoxy_icons4.AlertCircle, { fontSize: 15.5 }) }) })
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "icon-table", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_ej2_react_popups.TooltipComponent, { className: (0, import_classnames10.default)("cursor-pointer text-primary", { "d-none": !errorMessage }), content: errorMessage?.toString() ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_becoxy_icons4.AlertCircle, { fontSize: 15.5 }) }) })
                   ]
                 }
               )
@@ -2542,7 +2625,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
         {
           rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
           colSpan: col.columns?.length ?? 1,
-          className: (0, import_classnames9.default)(
+          className: (0, import_classnames10.default)(
             `r-headercell fix-${col.fixedType}`,
             { "cell-fixed": col.fixedType }
           ),
@@ -2561,13 +2644,13 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
                 height: `${(col.rowspan ?? 1) * 42}px`,
                 justifyContent: col.textAlign ?? "left"
               },
-              className: (0, import_classnames9.default)("r-headercell-div"),
+              className: (0, import_classnames10.default)("r-headercell-div"),
               children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 import_reactstrap8.Input,
                 {
                   checked: selectedRows?.length >= dataSource?.length && dataSource?.length > 0,
                   type: "checkbox",
-                  className: (0, import_classnames9.default)("cursor-pointer", { "d-none": !isMulti }),
+                  className: (0, import_classnames10.default)("cursor-pointer", { "d-none": !isMulti }),
                   style: { textAlign: col.textAlign ?? "left", marginTop: 6 },
                   onChange: (e) => {
                     if (selectEnable) {
@@ -2596,7 +2679,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
             {
               rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
               colSpan: col.columns?.length ?? 1,
-              className: (0, import_classnames9.default)(
+              className: (0, import_classnames10.default)(
                 `r-headercell fix-${col.fixedType}`,
                 { "cell-fixed": col.fixedType }
               ),
@@ -2634,7 +2717,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
             {
               rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
               colSpan: col.columns?.length ?? 1,
-              className: (0, import_classnames9.default)(
+              className: (0, import_classnames10.default)(
                 `r-headercell fix-${col.fixedType}`,
                 { "cell-fixed": col.fixedType }
               ),
@@ -2670,7 +2753,7 @@ 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)(
+        className: (0, import_classnames10.default)(
           `p-0 px-50 r-footer fix-${col.fixedType}`,
           { "cell-fixed": col.fixedType }
         ),
@@ -2704,15 +2787,15 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
   const renderToolbarBottom = () => {
     return /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.jsxs)("div", { className: "r-toolbar-items", children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "r-toolbar-left", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames10.default)("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
         (indexFocus ?? -1) > -1 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("r-toolbar-item", { "d-none": editDisable || addDisable || duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: () => {
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames10.default)("r-toolbar-item", { "d-none": editDisable || addDisable || duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: () => {
             handleDuplicate(dataSource[indexFocus ?? -1], indexFocus ?? -1);
           }, className: "d-flex", children: t("Duplicate") }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("r-toolbar-item", { "d-none": editDisable || addDisable || insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("r-toolbar-item", { "d-none": editDisable || addDisable || insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames10.default)("r-toolbar-item", { "d-none": editDisable || addDisable || insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames10.default)("r-toolbar-item", { "d-none": editDisable || addDisable || insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
         ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: " " }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("r-toolbar-item", { "d-none": editDisable || addDisable || deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames10.default)("r-toolbar-item", { "d-none": editDisable || addDisable || deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
         toolbarBottomOptions?.map((item, index) => {
           return item.align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : "";
         })
@@ -2724,8 +2807,8 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
         toolbarBottomOptions?.map((item, index) => {
           return item.align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : "";
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("r-toolbar-item me-25", { "d-none": headerColumns.length > 1 }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_becoxy_icons4.Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("r-toolbar-item me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_reactstrap8.UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames10.default)("r-toolbar-item me-25", { "d-none": headerColumns.length > 1 }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_becoxy_icons4.Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames10.default)("r-toolbar-item me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_reactstrap8.UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.DropdownToggle, { href: "/", tag: "a", color: "info", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_becoxy_icons4.Info, { className: "cursor-pointer" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.DropdownMenu, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "d-flex flex-column p-50 py-25", children: [
             /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\xE2n b\u1EA3n" }),
@@ -2752,7 +2835,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
             return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "tr",
               {
-                className: (0, import_classnames9.default)("r-row", { "last-row": indexRow === dataSource.length - 1 }, { "fisrt-row": indexRow === 0 }),
+                className: (0, import_classnames10.default)("r-row", { "last-row": indexRow === dataSource.length - 1 }, { "fisrt-row": indexRow === 0 }),
                 children: contentColumns.map((col, indexCol) => {
                   return renderContentCol(col, row, indexRow, indexCol, isSelected);
                 })
@@ -2767,7 +2850,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
         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,
+        import_ej2_react_grids.PagerComponent,
         {
           locale: lang,
           click: onChangePage,
@@ -2787,7 +2870,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
           setOpenPopupSetupColumn(!openPopupSetupColumn);
         },
         openSidebar: openPopupSetupColumn,
-        column: contentColumns,
+        column: [...contentColumns],
         setColumn: setContentColumns
       }
     )

package/dist/index.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 // 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 { Fragment as Fragment12, forwardRef as forwardRef2, useEffect as useEffect5, useImperativeHandle, useRef as useRef2, 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";
+import classnames6 from "classnames";
 import { useTranslation as useTranslation8 } from "react-i18next";
 import Select2 from "react-select";
 import { PagerComponent } from "@syncfusion/ej2-react-grids";
@@ -1020,18 +1020,9 @@ var EditForm = forwardRef((props, ref) => {
 var edit_form_default = EditForm;
 // 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 { Fragment as Fragment10, useEffect as useEffect4, useState as useState4 } from "react";
 import { Button as Button2, Input as Input5 } from "reactstrap";
 import { useTranslation as useTranslation7 } from "react-i18next";
-import {
-  GridComponent,
-  ColumnsDirective,
-  ColumnDirective,
-  Selection,
-  RowDD,
-  Inject,
-  CommandColumn
-} from "@syncfusion/ej2-react-grids";
 // test-app/src/component/modal-header/index.tsx
 import { Edit, Info, Plus, X as X2 } from "becoxy-icons";
@@ -1182,16 +1173,18 @@ var Sidebar = (props) => {
 var sidebar_default = Sidebar;
 // test-app/src/component/sidebar-setting-column/index.tsx
+import classnames5 from "classnames";
 import { Fragment as Fragment11, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var SidebarSetColumn = (props) => {
   const { column, setColumn, openSidebar, handleSidebar } = props;
   const { t } = useTranslation7();
   const [dataSource, setDataSource] = useState4([]);
+  const [indexFocus, setIndexFocus] = useState4();
   useEffect4(() => {
     if (openSidebar) {
-      setDataSource([...column]);
+      setDataSource(column.map((e) => ({ ...e })));
     }
-  }, [column, openSidebar]);
+  }, [openSidebar]);
   const handleCancel = () => {
     handleSidebar();
     setDataSource([]);
@@ -1204,7 +1197,6 @@ var SidebarSetColumn = (props) => {
     const { innerWidth, innerHeight } = window;
     return { innerWidth, innerHeight };
   };
-  const gird = useRef2(null);
   const [windowSize, setWindowSize] = useState4(getWindowSize());
   useEffect4(() => {
     const handleWindowResize = () => {
@@ -1221,7 +1213,7 @@ var SidebarSetColumn = (props) => {
       /* @__PURE__ */ jsx11(Button2, { color: "secondary", onClick: handleCancel, outline: true, children: t("Close") })
     ] });
   };
-  const visibleTemplate = (item) => {
+  const visibleTemplate = (item, index) => {
     return /* @__PURE__ */ jsx11(
       Input5,
       {
@@ -1232,14 +1224,14 @@ var SidebarSetColumn = (props) => {
         className: " cursor-pointer",
         onChange: (e) => {
           if (dataSource) {
-            item.column.dataSource[item.index].visible = e.target.checked;
-            setDataSource(item.column.dataSource);
+            dataSource[index].visible = e.target.checked;
+            setDataSource(dataSource);
           }
         }
       }
     );
   };
-  const fixColumnTemplate = (item) => {
+  const fixColumnTemplate = (item, index) => {
     return /* @__PURE__ */ jsx11(
       Input5,
       {
@@ -1250,15 +1242,15 @@ var SidebarSetColumn = (props) => {
         onChange: (e) => {
           if (dataSource) {
             if (e.target.checked) {
-              if (item.index * 2 <= item.column.dataSource.length) {
-                item.column.dataSource[item.index].fixedType = "left";
+              if (index * 2 <= dataSource.length) {
+                dataSource[index].fixedType = "left";
               } else {
-                item.column.dataSource[item.index].fixedType = "right";
+                dataSource[index].fixedType = "right";
               }
             } else {
-              item.column.dataSource[item.index].fixedType = "";
+              dataSource[index].fixedType = void 0;
             }
-            setDataSource(item.column.dataSource);
+            setDataSource(dataSource);
           }
         }
       }
@@ -1266,53 +1258,82 @@ var SidebarSetColumn = (props) => {
   };
   const columns = [
     {
-      isPrimaryKey: true,
       field: "headerText",
       headerText: "Column name",
       template: (e) => {
         return /* @__PURE__ */ jsx11(Fragment11, { children: t(e.headerText) });
       },
       visible: true,
-      width: 100,
-      maxWidth: 120,
-      minWidth: 80
+      width: 175,
+      maxWidth: 200,
+      minWidth: 150
     },
     {
-      isPrimaryKey: true,
+      field: "",
       template: visibleTemplate,
       headerText: "Display",
-      dataSource,
+      textAlign: "center",
       visible: true,
       width: 100,
       maxWidth: 120,
       minWidth: 80
     },
     {
-      isPrimaryKey: true,
+      field: "",
       template: fixColumnTemplate,
       headerText: "Fix the column",
-      dataSource,
+      textAlign: "center",
       visible: true,
       width: 100,
       maxWidth: 120,
       minWidth: 80
     },
     {
-      isPrimaryKey: true,
       field: "width",
       headerText: "Column width",
-      template: (item) => {
-        return item.width ? /* @__PURE__ */ jsxs10(Fragment11, { children: [
-          t(item.width),
-          "px"
-        ] }) : /* @__PURE__ */ jsx11(Fragment11, {});
-      },
+      textAlign: "right",
       visible: true,
       width: 100,
       maxWidth: 120,
       minWidth: 80
     }
   ];
+  const renderHeaderCol = (col, indexCol) => {
+    return /* @__PURE__ */ jsx11(
+      Fragment10,
+      {
+        children: col.visible !== false && /* @__PURE__ */ jsx11(
+          "th",
+          {
+            className: classnames5(
+              `r-headercell fix-${col.fixedType}`,
+              { "cell-fixed": col.fixedType }
+            ),
+            style: {
+              width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width,
+              minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
+              top: `${0 * 42}px`,
+              maxWidth: col.maxWidth
+            },
+            children: /* @__PURE__ */ jsx11(
+              "div",
+              {
+                role: "textbox",
+                title: t(col.headerText ?? ""),
+                style: {
+                  height: `${1 * 42}px`,
+                  justifyContent: col.textAlign ?? "left"
+                },
+                className: "r-headercell-div",
+                children: t(col.headerText ?? "")
+              }
+            )
+          }
+        )
+      },
+      `header-${indexCol}`
+    );
+  };
   return /* @__PURE__ */ jsxs10(
     sidebar_default,
     {
@@ -1321,20 +1342,74 @@ var SidebarSetColumn = (props) => {
       width: 700,
       children: [
         /* @__PURE__ */ jsx11(modal_header_default, { typeModal: "Edit", handleModal: handleCancel, title: "Column setup" }),
-        /* @__PURE__ */ jsxs10(
-          GridComponent,
-          {
-            className: "ms-2",
-            dataSource,
-            ref: gird,
-            height: windowSize.innerHeight - 160,
-            allowRowDragAndDrop: true,
-            children: [
-              /* @__PURE__ */ jsx11(ColumnsDirective, { children: columns.map((col, index) => /* @__PURE__ */ jsx11(ColumnDirective, { ...col, headerText: t(col.headerText) }, index)) }),
-              /* @__PURE__ */ jsx11(Inject, { services: [RowDD, Selection, CommandColumn] })
-            ]
-          }
-        ),
+        /* @__PURE__ */ jsx11("div", { className: "ms-2 react-table-edit", children: /* @__PURE__ */ jsx11("div", { className: "r-grid", children: /* @__PURE__ */ jsx11("div", { className: "r-gridtable", style: { height: windowSize.innerHeight - 120 }, children: /* @__PURE__ */ jsxs10("table", { style: { width: "100%" }, children: [
+          /* @__PURE__ */ jsx11("thead", { className: "r-gridheader", children: /* @__PURE__ */ jsx11("tr", { className: "r-row", role: "row", children: columns.map((col, index) => {
+            return renderHeaderCol(col, index);
+          }) }) }),
+          /* @__PURE__ */ jsx11("tbody", { className: "r-gridcontent", children: dataSource?.map((row, indexRow) => {
+            return /* @__PURE__ */ jsx11(
+              "tr",
+              {
+                className: classnames5("r-row", { "last-row": indexRow === dataSource.length - 1 }, { "fisrt-row": indexRow === 0 }),
+                children: columns.map((col, indexCol) => {
+                  let value = row[col.field];
+                  if (col.editType === "numeric" || col.editTypeCondition && col.editTypeCondition(row) === "numeric") {
+                    value = formartNumberic(row[col.field], ",", ".", col.numericSettings?.fraction, true) ?? 0;
+                  }
+                  return /* @__PURE__ */ jsx11(Fragment10, { children: col.visible !== false && /* @__PURE__ */ jsx11(
+                    "td",
+                    {
+                      className: classnames5(
+                        `r-rowcell fix-${col.fixedType}`,
+                        { "cell-fixed": col.fixedType },
+                        { "r-active": indexFocus === indexRow }
+                      ),
+                      style: {
+                        padding: 0,
+                        textAlign: col.textAlign ? col.textAlign : "left"
+                      },
+                      onFocus: (e) => {
+                        if (indexRow !== indexFocus) {
+                          setIndexFocus(indexRow);
+                        }
+                        e.stopPropagation();
+                      },
+                      onClick: (e) => {
+                        if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
+                          if (indexRow !== indexFocus) {
+                            setIndexFocus(indexRow);
+                          }
+                          e.stopPropagation();
+                        }
+                      },
+                      children: /* @__PURE__ */ jsx11(
+                        "div",
+                        {
+                          className: classnames5("r-rowcell-div"),
+                          style: {
+                            width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : "auto"
+                          },
+                          children: /* @__PURE__ */ jsx11(
+                            "div",
+                            {
+                              className: classnames5("r-rowcell-content"),
+                              style: {
+                                margin: "7px 9px"
+                              },
+                              children: /* @__PURE__ */ jsx11("div", { className: "r-cell-text", children: col.template ? col.template(row, indexRow) : value })
+                            }
+                          )
+                        }
+                      )
+                    },
+                    `col-${indexRow}-${indexCol}`
+                  ) }, indexCol);
+                })
+              },
+              `row-${indexRow}`
+            );
+          }) })
+        ] }) }) }) }),
         /* @__PURE__ */ jsx11(
           "div",
           {
@@ -1410,8 +1485,8 @@ var TableEdit = forwardRef2((props, ref) => {
   const [objWidthFix, setObjWidthFix] = useState5({});
   const [openPopupTree, setOpenPopupTree] = useState5(false);
   const [openPopupSetupColumn, setOpenPopupSetupColumn] = useState5(false);
-  const tableElement = useRef3(null);
-  const gridRef = useRef3();
+  const tableElement = useRef2(null);
+  const gridRef = useRef2();
   const lag = window.localStorage.getItem("i18nextLng");
   const lang = lag ? lag : "vi";
   const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? "id";
@@ -1586,7 +1661,7 @@ var TableEdit = forwardRef2((props, ref) => {
               }
               handleDataChange(row, col, indexRow);
             },
-            className: classnames5("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: classnames6("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             type: "date",
             max: "9999-12-31",
             onKeyDown: (e) => {
@@ -1609,7 +1684,7 @@ var TableEdit = forwardRef2((props, ref) => {
               }
               handleDataChange(row, col, indexRow);
             },
-            className: classnames5("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: classnames6("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             type: "datetime-local",
             max: "9999-12-31T23:59",
             onKeyDown: (e) => {
@@ -1629,7 +1704,7 @@ var TableEdit = forwardRef2((props, ref) => {
         if (!valueAsyncSelect && col.selectSettings?.defaultValue) {
           valueAsyncSelect = col.selectSettings?.defaultValue(row);
         }
-        return /* @__PURE__ */ jsxs11("div", { className: classnames5("d-flex select-group", { "is-invalid": col.validate && col.validate(row[col.field], row) }), children: [
+        return /* @__PURE__ */ jsxs11("div", { className: classnames6("d-flex select-group", { "is-invalid": col.validate && col.validate(row[col.field], row) }), children: [
           /* @__PURE__ */ jsx12(
             AsyncSelect,
             {
@@ -1649,7 +1724,7 @@ var TableEdit = forwardRef2((props, ref) => {
               placeholder: t("Select"),
               id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
               loadOptions: col.selectSettings?.loadOptions,
-              className: classnames5("react-select"),
+              className: classnames6("react-select"),
               onKeyDown: (e) => {
                 if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
                 }
@@ -1664,7 +1739,7 @@ var TableEdit = forwardRef2((props, ref) => {
                   col.selectSettings?.handIconGroupClick("right");
                 }
               },
-              className: classnames5("input-group-text", { "d-none": !col.selectSettings?.iconGroup }),
+              className: classnames6("input-group-text", { "d-none": !col.selectSettings?.iconGroup }),
               children: /* @__PURE__ */ jsx12(icon_default, { iconName: col.selectSettings?.iconGroup ?? "", size: 16 })
             }
           )
@@ -1701,7 +1776,7 @@ var TableEdit = forwardRef2((props, ref) => {
             isClearable: col.selectSettings?.isClearable ?? false,
             classNamePrefix: col.selectSettings?.widthPopup ? `select-${col.selectSettings?.widthPopup}` : "select",
             placeholder: t("Select"),
-            className: classnames5("react-select", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: classnames6("react-select", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             onKeyDown: (e) => {
               if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
               }
@@ -1741,7 +1816,7 @@ var TableEdit = forwardRef2((props, ref) => {
                   parentValue: "parentId",
                   child: "children"
                 },
-                className: classnames5("select-tree", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+                className: classnames6("select-tree", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
                 allowFiltering: false,
                 value: valueSelectTree,
                 popupHeight: 250,
@@ -1798,7 +1873,7 @@ var TableEdit = forwardRef2((props, ref) => {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
             defaultValue: formartNumberic(valueCurrency, decimalSeparator, thousandSeparator, col.numericSettings?.fraction),
-            className: classnames5("border-0 rounded-0 input-numeric", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: classnames6("border-0 rounded-0 input-numeric", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             onChange: (val) => {
               let newVal = "";
               const flag = val.target?.value.startsWith("-");
@@ -1933,7 +2008,7 @@ var TableEdit = forwardRef2((props, ref) => {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
             defaultValue: isNullOrUndefined(row[col.field]) ? "" : row[col.field],
-            className: classnames5("border-0 rounded-0 input-element", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: classnames6("border-0 rounded-0 input-element", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             onBlur: (val) => {
               if (row[col.field] != val.target?.value) {
                 row[col.field] = val.target?.value;
@@ -1977,7 +2052,7 @@ var TableEdit = forwardRef2((props, ref) => {
         {
           tabIndex: -1,
           style: { padding: "5px", minWidth: 45, height: "100%" },
-          className: classnames5("command-item", {
+          className: classnames6("command-item", {
             "btn-icon": item.tooltip === ""
           }),
           color: item.color ? item.color : "#000",
@@ -2006,7 +2081,7 @@ var TableEdit = forwardRef2((props, ref) => {
       if (newIndexCol > -1) {
         const element = document.getElementById(`${idTable}-col${newIndexCol}-row${indexRow}`);
         if (element) {
-          if (element.className.includes("react-select") || element.className.includes("from-edit")) {
+          if (element.className.includes("react-select") || element.className.includes("form-edit")) {
             element.getElementsByTagName("input")[0]?.focus();
           } else {
             element.focus();
@@ -2027,7 +2102,7 @@ var TableEdit = forwardRef2((props, ref) => {
       if (newIndexCol > -1) {
         const element = document.getElementById(`${idTable}-col${newIndexCol}-row${indexRow}`);
         if (element) {
-          if (element.className.includes("react-select") || element.className.includes("from-edit")) {
+          if (element.className.includes("react-select") || element.className.includes("form-edit")) {
             element.getElementsByTagName("input")[0]?.focus();
           } else {
             element.focus();
@@ -2045,7 +2120,7 @@ var TableEdit = forwardRef2((props, ref) => {
           setTimeout(() => {
             const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow - 1}`);
             if (element2) {
-              if (element2.className.includes("react-select") || element2.className.includes("from-edit")) {
+              if (element2.className.includes("react-select") || element2.className.includes("form-edit")) {
                 element2.getElementsByTagName("input")[0]?.focus();
               } else {
                 element2.focus();
@@ -2065,7 +2140,7 @@ var TableEdit = forwardRef2((props, ref) => {
           setTimeout(() => {
             const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow + 1}`);
             if (element2) {
-              if (element2.className.includes("react-select") || element2.className.includes("from-edit")) {
+              if (element2.className.includes("react-select") || element2.className.includes("form-edit")) {
                 element2.getElementsByTagName("input")[0]?.focus();
               } else {
                 element2.focus();
@@ -2093,7 +2168,7 @@ var TableEdit = forwardRef2((props, ref) => {
       setTimeout(() => {
         const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${indexRow + 1}`);
         if (element) {
-          if (element.className.includes("react-select") || element.className.includes("from-edit")) {
+          if (element.className.includes("react-select") || element.className.includes("form-edit")) {
             element.getElementsByTagName("input")[0]?.focus();
           } else {
             element.focus();
@@ -2111,7 +2186,7 @@ var TableEdit = forwardRef2((props, ref) => {
           setTimeout(() => {
             const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow + 1}`);
             if (element2) {
-              if (element2.className.includes("react-select") || element2.className.includes("from-edit")) {
+              if (element2.className.includes("react-select") || element2.className.includes("form-edit")) {
                 element2.getElementsByTagName("input")[0]?.focus();
               } else {
                 element2.focus();
@@ -2161,7 +2236,7 @@ var TableEdit = forwardRef2((props, ref) => {
         tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
         const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${dataSource?.length + 1}`);
         if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("select-100__control--menu-is-open").length > 0 || element.getElementsByClassName("select-200__control--menu-is-open").length > 0 || element.getElementsByClassName("select-300__control--menu-is-open").length > 0 || element.getElementsByClassName("select-400__control--menu-is-open").length > 0 || element.getElementsByClassName("select-500__control--menu-is-open").length > 0)) {
-          if (element.className.includes("react-select") || element.className.includes("from-edit")) {
+          if (element.className.includes("react-select") || element.className.includes("form-edit")) {
             element.getElementsByTagName("input")[0]?.focus();
           } else {
             element.focus();
@@ -2242,7 +2317,7 @@ var TableEdit = forwardRef2((props, ref) => {
   const changeDataSource = (data, haveNew = false) => {
     if (!editDisable && !addDisable && setDataSource) {
       if (haveNew) {
-        data.push(defaultValue ? { ...defaultValue, "fieldKey": generateUUID() } : {});
+        data.push(defaultValue ? { ...defaultValue, [fieldKey]: generateUUID() } : {});
       }
     }
     setDataSource([...data]);
@@ -2294,7 +2369,7 @@ var TableEdit = forwardRef2((props, ref) => {
       return col.visible !== false && /* @__PURE__ */ jsx12(
         "td",
         {
-          className: classnames5(
+          className: classnames6(
             `r-rowcell p-0 fix-${col.fixedType}`,
             { "cell-fixed": col.fixedType },
             { "r-active": isSelected && editDisable || indexFocus === indexRow }
@@ -2312,7 +2387,7 @@ var TableEdit = forwardRef2((props, ref) => {
       return col.visible !== false && /* @__PURE__ */ jsx12(
         "td",
         {
-          className: classnames5(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
+          className: classnames6(`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,
@@ -2364,7 +2439,7 @@ var TableEdit = forwardRef2((props, ref) => {
       return /* @__PURE__ */ jsx12(
         "td",
         {
-          className: classnames5(
+          className: classnames6(
             `r-rowcell p-0 fix-${col.fixedType}`,
             { "cell-fixed": col.fixedType },
             { "r-active": isSelected && editDisable || indexFocus === indexRow }
@@ -2428,7 +2503,7 @@ var TableEdit = forwardRef2((props, ref) => {
       return /* @__PURE__ */ jsx12(Fragment12, { children: col.visible !== false && /* @__PURE__ */ jsx12(
         "td",
         {
-          className: classnames5(
+          className: classnames6(
             `r-rowcell fix-${col.fixedType}`,
             { "cell-fixed": col.fixedType },
             { "r-active": isSelected && editDisable || indexFocus === indexRow }
@@ -2473,7 +2548,7 @@ var TableEdit = forwardRef2((props, ref) => {
           children: /* @__PURE__ */ jsx12(
             "div",
             {
-              className: classnames5("r-rowcell-div"),
+              className: classnames6("r-rowcell-div"),
               style: {
                 width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : "auto"
               },
@@ -2481,7 +2556,7 @@ var TableEdit = forwardRef2((props, ref) => {
                 "div",
                 {
                   id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
-                  className: classnames5("r-rowcell-content", { "r-is-invalid": errorMessage }),
+                  className: classnames6("r-rowcell-content", { "r-is-invalid": errorMessage }),
                   style: {
                     margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2
                   },
@@ -2498,7 +2573,7 @@ var TableEdit = forwardRef2((props, ref) => {
                         children: typeDis === 2 ? col.template(row, indexRow) : value
                       }
                     ),
-                    /* @__PURE__ */ jsx12("span", { className: "icon-table", children: /* @__PURE__ */ jsx12(TooltipComponent, { className: classnames5("cursor-pointer text-primary", { "d-none": !errorMessage }), content: errorMessage?.toString() ?? "", children: /* @__PURE__ */ jsx12(AlertCircle, { fontSize: 15.5 }) }) })
+                    /* @__PURE__ */ jsx12("span", { className: "icon-table", children: /* @__PURE__ */ jsx12(TooltipComponent, { className: classnames6("cursor-pointer text-primary", { "d-none": !errorMessage }), content: errorMessage?.toString() ?? "", children: /* @__PURE__ */ jsx12(AlertCircle, { fontSize: 15.5 }) }) })
                   ]
                 }
               )
@@ -2516,7 +2591,7 @@ var TableEdit = forwardRef2((props, ref) => {
         {
           rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
           colSpan: col.columns?.length ?? 1,
-          className: classnames5(
+          className: classnames6(
             `r-headercell fix-${col.fixedType}`,
             { "cell-fixed": col.fixedType }
           ),
@@ -2535,13 +2610,13 @@ var TableEdit = forwardRef2((props, ref) => {
                 height: `${(col.rowspan ?? 1) * 42}px`,
                 justifyContent: col.textAlign ?? "left"
               },
-              className: classnames5("r-headercell-div"),
+              className: classnames6("r-headercell-div"),
               children: /* @__PURE__ */ jsx12(
                 Input6,
                 {
                   checked: selectedRows?.length >= dataSource?.length && dataSource?.length > 0,
                   type: "checkbox",
-                  className: classnames5("cursor-pointer", { "d-none": !isMulti }),
+                  className: classnames6("cursor-pointer", { "d-none": !isMulti }),
                   style: { textAlign: col.textAlign ?? "left", marginTop: 6 },
                   onChange: (e) => {
                     if (selectEnable) {
@@ -2570,7 +2645,7 @@ var TableEdit = forwardRef2((props, ref) => {
             {
               rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
               colSpan: col.columns?.length ?? 1,
-              className: classnames5(
+              className: classnames6(
                 `r-headercell fix-${col.fixedType}`,
                 { "cell-fixed": col.fixedType }
               ),
@@ -2608,7 +2683,7 @@ var TableEdit = forwardRef2((props, ref) => {
             {
               rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
               colSpan: col.columns?.length ?? 1,
-              className: classnames5(
+              className: classnames6(
                 `r-headercell fix-${col.fixedType}`,
                 { "cell-fixed": col.fixedType }
               ),
@@ -2644,7 +2719,7 @@ var TableEdit = forwardRef2((props, ref) => {
     return /* @__PURE__ */ jsx12(Fragment12, { children: col.visible !== false && /* @__PURE__ */ jsx12(
       "td",
       {
-        className: classnames5(
+        className: classnames6(
           `p-0 px-50 r-footer fix-${col.fixedType}`,
           { "cell-fixed": col.fixedType }
         ),
@@ -2678,15 +2753,15 @@ var TableEdit = forwardRef2((props, ref) => {
   const renderToolbarBottom = () => {
     return /* @__PURE__ */ jsx12("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__ */ jsxs11("div", { className: "r-toolbar-items", children: [
       /* @__PURE__ */ jsxs11("div", { className: "r-toolbar-left", children: [
-        /* @__PURE__ */ jsx12("div", { className: classnames5("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
+        /* @__PURE__ */ jsx12("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
         (indexFocus ?? -1) > -1 ? /* @__PURE__ */ jsxs11(Fragment13, { children: [
-          /* @__PURE__ */ jsx12("div", { className: classnames5("r-toolbar-item", { "d-none": editDisable || addDisable || duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: () => {
+          /* @__PURE__ */ jsx12("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || addDisable || duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: () => {
             handleDuplicate(dataSource[indexFocus ?? -1], indexFocus ?? -1);
           }, className: "d-flex", children: t("Duplicate") }) }),
-          /* @__PURE__ */ jsx12("div", { className: classnames5("r-toolbar-item", { "d-none": editDisable || addDisable || insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
-          /* @__PURE__ */ jsx12("div", { className: classnames5("r-toolbar-item", { "d-none": editDisable || addDisable || insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
+          /* @__PURE__ */ jsx12("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || addDisable || insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
+          /* @__PURE__ */ jsx12("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || addDisable || insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
         ] }) : /* @__PURE__ */ jsx12(Fragment13, { children: " " }),
-        /* @__PURE__ */ jsx12("div", { className: classnames5("r-toolbar-item", { "d-none": editDisable || addDisable || deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
+        /* @__PURE__ */ jsx12("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || addDisable || deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
         toolbarBottomOptions?.map((item, index) => {
           return item.align === "left" ? /* @__PURE__ */ jsx12("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : "";
         })
@@ -2698,8 +2773,8 @@ var TableEdit = forwardRef2((props, ref) => {
         toolbarBottomOptions?.map((item, index) => {
           return item.align === "right" ? /* @__PURE__ */ jsx12("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : "";
         }),
-        /* @__PURE__ */ jsx12("div", { className: classnames5("r-toolbar-item me-25", { "d-none": headerColumns.length > 1 }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
-        /* @__PURE__ */ jsx12("div", { className: classnames5("r-toolbar-item me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsxs11(UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
+        /* @__PURE__ */ jsx12("div", { className: classnames6("r-toolbar-item me-25", { "d-none": headerColumns.length > 1 }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
+        /* @__PURE__ */ jsx12("div", { className: classnames6("r-toolbar-item me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsxs11(UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
           /* @__PURE__ */ jsx12(DropdownToggle2, { href: "/", tag: "a", color: "info", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx12(Info2, { className: "cursor-pointer" }) }),
           /* @__PURE__ */ jsx12(DropdownMenu2, { children: /* @__PURE__ */ jsxs11("div", { className: "d-flex flex-column p-50 py-25", children: [
             /* @__PURE__ */ jsx12("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\xE2n b\u1EA3n" }),
@@ -2726,7 +2801,7 @@ var TableEdit = forwardRef2((props, ref) => {
             return /* @__PURE__ */ jsx12(
               "tr",
               {
-                className: classnames5("r-row", { "last-row": indexRow === dataSource.length - 1 }, { "fisrt-row": indexRow === 0 }),
+                className: classnames6("r-row", { "last-row": indexRow === dataSource.length - 1 }, { "fisrt-row": indexRow === 0 }),
                 children: contentColumns.map((col, indexCol) => {
                   return renderContentCol(col, row, indexRow, indexCol, isSelected);
                 })
@@ -2761,7 +2836,7 @@ var TableEdit = forwardRef2((props, ref) => {
           setOpenPopupSetupColumn(!openPopupSetupColumn);
         },
         openSidebar: openPopupSetupColumn,
-        column: contentColumns,
+        column: [...contentColumns],
         setColumn: setContentColumns
       }
     )

package/package.json CHANGED Viewed

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