react-table-edit 0.6.7 → 0.6.9

package/dist/index.mjs

@@ -1,8 +1,8 @@
 // test-app/src/component/table/index.tsx
-import { Fragment as Fragment15, forwardRef as forwardRef3, useEffect as useEffect8, useImperativeHandle, useRef as useRef3, useState as useState7 } from "react";
-import { Button as Button4, DropdownMenu as DropdownMenu3, DropdownToggle as DropdownToggle3, Input as Input7, UncontrolledDropdown, UncontrolledTooltip as UncontrolledTooltip2 } from "reactstrap";
-import classnames7 from "classnames";
-import { useTranslation as useTranslation10 } from "react-i18next";
+import { Fragment as Fragment17, forwardRef as forwardRef3, useEffect as useEffect8, useImperativeHandle, useRef as useRef3, useState as useState7 } from "react";
+import { Button as Button5, DropdownMenu as DropdownMenu3, DropdownToggle as DropdownToggle3, Input as Input8, UncontrolledDropdown, UncontrolledTooltip as UncontrolledTooltip3 } from "reactstrap";
+import classnames9 from "classnames";
+import { useTranslation as useTranslation12 } from "react-i18next";
 import Select3 from "react-select";
 import AsyncSelect from "react-select/async";
 import { AlertCircle, Info as Info2, Settings } from "becoxy-icons";
@@ -721,6 +721,7 @@ var EditForm = forwardRef((props, ref) => {
     onFormSubmit,
     footerTemplate,
     minWidth,
+    onPaste,
     openOnFocus,
     labelSize = "label-small"
   } = props;
@@ -756,6 +757,11 @@ var EditForm = forwardRef((props, ref) => {
       if (onFormOpen && itemsField.length === 0) {
         onFormOpen(rowData, itemsField, setItemsField);
       }
+      if (openOnFocus) {
+        setTimeout(() => {
+          focusElement(`form-element-${field}-0`, true);
+        }, 100);
+      }
     }
   }, [dropdownOpen]);
   useEffect3(() => {
@@ -767,9 +773,7 @@ var EditForm = forwardRef((props, ref) => {
   }, [dropdownOpen, itemsField]);
   const handleOnClick = () => {
     if (dropdownOpen) {
-      if (!openOnFocus) {
-        closeMenu();
-      }
+      closeMenu();
     } else {
       setDropdownOpen(true);
     }
@@ -828,16 +832,6 @@ var EditForm = forwardRef((props, ref) => {
       e.preventDefault();
     }
   };
-  const handleOnFocus = () => {
-    if (openOnFocus) {
-      setDropdownOpen(true);
-      if (field) {
-        setTimeout(() => {
-          focusElement(`form-element-${field}-0`, true);
-        }, 100);
-      }
-    }
-  };
   const formKeyDown = (e, handSubmit) => {
     if (e.code === "Enter") {
       handSubmit();
@@ -973,11 +967,12 @@ var EditForm = forwardRef((props, ref) => {
                 style: { backgroundColor: "#FFF", textAlign: textAlign ?? "left" },
                 placeholder,
                 innerRef: inputRef,
-                className: classNames2("input-display", { "is-invalid": invalid }),
+                className: classNames2("input-display input-numeric"),
+                invalid,
                 value: displayValue,
-                onFocus: handleOnFocus,
                 onClick: handleOnClick,
                 onKeyDown: (e) => handleOnKeyDown(e),
+                onPaste: (e) => onPaste && onPaste(e),
                 readOnly: true
               }
             ) }),
@@ -1569,7 +1564,8 @@ var SelectTable = forwardRef2((props, ref) => {
     formatOptionLabel,
     isMulti,
     isDisabled,
-    showFooter
+    showFooter,
+    onPaste
   } = props;
   const selectTableRef = useRef2();
   const selectMenuTableRef = useRef2();
@@ -2012,7 +2008,6 @@ var SelectTable = forwardRef2((props, ref) => {
                     handleOpenClose();
                   }
                 },
-                tabIndex: 0,
                 tag: "div",
                 className: classnames6("select-table-control", { "r-select-is-disabled": isDisabled }, { "r-select-is-open": dropdownOpen }, { "r-select-is-focus": isFocus }, { "r-select-is-invalid": invalid }),
                 children: [
@@ -2038,6 +2033,7 @@ var SelectTable = forwardRef2((props, ref) => {
                         className: classnames6("select-input"),
                         readOnly: isDisabled,
                         value: searchTerm,
+                        onPaste: (e) => onPaste && !dropdownOpen && onPaste(e),
                         onChange: (val) => {
                           if (!isMulti && loadOptions && val.target.value) {
                             setIsLoading(true);
@@ -2108,10 +2104,117 @@ var SelectTable = forwardRef2((props, ref) => {
   );
 });
 
+// test-app/src/component/table/header.tsx
+import { Fragment as Fragment15 } from "react";
+import classnames7 from "classnames";
+import { Input as Input7 } from "reactstrap";
+import { useTranslation as useTranslation10 } from "react-i18next";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+var HeaderTableCol = (props) => {
+  const {
+    selectEnable,
+    dataSource,
+    setSelectedRows,
+    col,
+    indexCol,
+    indexParent,
+    objWidthFix,
+    totalCount,
+    selectedRows,
+    isMulti
+  } = props;
+  const { t } = useTranslation10();
+  return /* @__PURE__ */ jsx14(Fragment15, { children: col.visible !== false && /* @__PURE__ */ jsx14(
+    "th",
+    {
+      rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
+      colSpan: col.columns?.length ?? 1,
+      className: classnames7(`r-headercell fix-${col.fixedType}`, { "cell-fixed": col.fixedType }),
+      style: {
+        top: `${indexParent * 42}px`,
+        left: col.fixedType === "left" ? objWidthFix[col.index ?? 0] : void 0,
+        right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0,
+        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,
+        maxWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width
+      },
+      children: /* @__PURE__ */ jsxs13(
+        "div",
+        {
+          style: { justifyContent: col.textAlign ?? "left" },
+          className: classnames7("r-headercell-div"),
+          children: [
+            col.field === "checkbox" && /* @__PURE__ */ jsx14(
+              Input7,
+              {
+                checked: totalCount > 0 && selectedRows?.length >= totalCount,
+                type: "checkbox",
+                className: classnames7("cursor-pointer", { "d-none": !isMulti }),
+                style: { textAlign: col.textAlign ?? "left", marginTop: 6 },
+                onChange: (e) => {
+                  if (selectEnable) {
+                    if (e.target.checked) {
+                      setSelectedRows(dataSource.map((item) => {
+                        return item;
+                      }));
+                    } else {
+                      setSelectedRows([]);
+                    }
+                  }
+                }
+              }
+            ),
+            col.field !== "checkbox" && t(col.headerText ?? "")
+          ]
+        }
+      )
+    }
+  ) }, `header-${indexCol}`);
+};
+var header_default = HeaderTableCol;
+
+// test-app/src/component/table/command.tsx
+import { Fragment as Fragment16 } from "react";
+import classnames8 from "classnames";
+import { Button as Button4, UncontrolledTooltip as UncontrolledTooltip2 } from "reactstrap";
+import { useTranslation as useTranslation11 } from "react-i18next";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+var CommandElement = (props) => {
+  const { commandItems, rowData, indexRow, handleCommandClick, indexFocus, setIndexFocus } = props;
+  const { t } = useTranslation11();
+  return /* @__PURE__ */ jsx15(Fragment16, { children: /* @__PURE__ */ jsx15("div", { className: "d-flex align-items-center", style: { columnGap: 10 }, children: commandItems.map((item, index) => {
+    return /* @__PURE__ */ jsxs14(
+      Button4,
+      {
+        id: `command-item-${indexRow}-${index}`,
+        tabIndex: -1,
+        style: { padding: "5px", minWidth: 45, height: "100%" },
+        className: classnames8("command-item", {
+          "btn-icon": item.tooltip === ""
+        }),
+        color: item.color ? item.color : "#000",
+        onClick: (e) => {
+          handleCommandClick(item.id, rowData, indexRow);
+          if (indexRow === indexFocus) {
+            setIndexFocus(void 0);
+          }
+          e.preventDefault();
+        },
+        children: [
+          item.icon && /* @__PURE__ */ jsx15(icon_default, { iconName: item.icon, size: 16 }),
+          /* @__PURE__ */ jsx15(UncontrolledTooltip2, { className: "r-tooltip", target: `command-item-${indexRow}-${index}`, place: "top", children: t(item.tooltip ?? "") })
+        ]
+      },
+      `command-${index}`
+    );
+  }) }) });
+};
+var command_default = CommandElement;
+
 // test-app/src/component/table/index.tsx
-import { Fragment as Fragment16, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 var TableEdit = forwardRef3((props, ref) => {
-  const { t } = useTranslation10();
+  const { t } = useTranslation12();
   const {
     idTable,
     dataSource,
@@ -2329,7 +2432,7 @@ var TableEdit = forwardRef3((props, ref) => {
     }
   };
   const searchTemplate = () => {
-    return /* @__PURE__ */ jsx14(Fragment15, { children: /* @__PURE__ */ jsx14("div", { className: "me-50 r-search", children: /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx16(Fragment17, { children: /* @__PURE__ */ jsx16("div", { className: "me-50 r-search", children: /* @__PURE__ */ jsx16(
       react_input_default,
       {
         style: { width: "230px" },
@@ -2350,8 +2453,8 @@ var TableEdit = forwardRef3((props, ref) => {
   const renderEdit = (row, col, indexRow, indexCol) => {
     switch (col?.editTypeCondition ? col?.editTypeCondition(row) : col.editType) {
       case "date":
-        return /* @__PURE__ */ jsx14(
-          Input7,
+        return /* @__PURE__ */ jsx16(
+          Input8,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
@@ -2363,7 +2466,7 @@ var TableEdit = forwardRef3((props, ref) => {
               }
               handleDataChange(row, col, indexRow);
             },
-            className: classnames7("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: classnames9("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             type: "date",
             max: "9999-12-31",
             onKeyDown: (e) => {
@@ -2373,8 +2476,8 @@ var TableEdit = forwardRef3((props, ref) => {
           }
         );
       case "datetime":
-        return /* @__PURE__ */ jsx14(
-          Input7,
+        return /* @__PURE__ */ jsx16(
+          Input8,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
@@ -2386,7 +2489,7 @@ var TableEdit = forwardRef3((props, ref) => {
               }
               handleDataChange(row, col, indexRow);
             },
-            className: classnames7("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: classnames9("border-0 rounded-0", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             type: "datetime-local",
             max: "9999-12-31T23:59",
             onKeyDown: (e) => {
@@ -2406,8 +2509,8 @@ var TableEdit = forwardRef3((props, ref) => {
         if (!valueAsyncSelect && col.selectSettings?.defaultValue) {
           valueAsyncSelect = col.selectSettings?.defaultValue(row);
         }
-        return /* @__PURE__ */ jsxs13("div", { className: classnames7("d-flex select-group", { "is-invalid": col.validate && col.validate(row[col.field], row) }), children: [
-          /* @__PURE__ */ jsx14(
+        return /* @__PURE__ */ jsxs15("div", { className: classnames9("d-flex select-group", { "is-invalid": col.validate && col.validate(row[col.field], row) }), children: [
+          /* @__PURE__ */ jsx16(
             AsyncSelect,
             {
               menuPosition: "fixed",
@@ -2426,14 +2529,14 @@ var TableEdit = forwardRef3((props, ref) => {
               placeholder: t("Select"),
               id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
               loadOptions: col.selectSettings?.loadOptions,
-              className: classnames7("react-select"),
+              className: classnames9("react-select"),
               onKeyDown: (e) => {
                 if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
                 }
               }
             }
           ),
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx16(
             "span",
             {
               onClick: () => {
@@ -2441,8 +2544,8 @@ var TableEdit = forwardRef3((props, ref) => {
                   col.selectSettings?.handAddNew("right");
                 }
               },
-              className: classnames7("input-group-text", { "d-none": !col.selectSettings?.iconGroup }),
-              children: /* @__PURE__ */ jsx14(icon_default, { iconName: col.selectSettings?.iconGroup ?? "", size: 16 })
+              className: classnames9("input-group-text", { "d-none": !col.selectSettings?.iconGroup }),
+              children: /* @__PURE__ */ jsx16(icon_default, { iconName: col.selectSettings?.iconGroup ?? "", size: 16 })
             }
           )
         ] });
@@ -2459,7 +2562,7 @@ var TableEdit = forwardRef3((props, ref) => {
         } else {
           valueSelect = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? options?.find((val) => val[col.selectSettings?.fieldValue ?? "value"] === row[col.field]) : "";
         }
-        return /* @__PURE__ */ jsx14(
+        return /* @__PURE__ */ jsx16(
           Select3,
           {
             menuPosition: "fixed",
@@ -2478,7 +2581,7 @@ var TableEdit = forwardRef3((props, ref) => {
             isClearable: col.selectSettings?.isClearable ?? false,
             classNamePrefix: col.selectSettings?.widthPopup ? `select-${col.selectSettings?.widthPopup}` : "select",
             placeholder: t("Select"),
-            className: classnames7("react-select", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: classnames9("react-select", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             onKeyDown: (e) => {
               if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
               }
@@ -2498,7 +2601,7 @@ var TableEdit = forwardRef3((props, ref) => {
         } else {
           valueSelectTable = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? optionsSelectTable?.find((val) => val[col.selectSettings?.fieldValue ?? "value"] === row[col.field]) : "";
         }
-        return /* @__PURE__ */ jsx14(
+        return /* @__PURE__ */ jsx16(
           SelectTable,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -2530,6 +2633,12 @@ var TableEdit = forwardRef3((props, ref) => {
             onKeyDown: (e) => {
               if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
               }
+            },
+            onPaste: (e) => {
+              if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable) {
+                pasteDataFromExcel(indexRow, indexCol, e);
+                e.preventDefault();
+              }
             }
           }
         );
@@ -2548,14 +2657,14 @@ var TableEdit = forwardRef3((props, ref) => {
             }
           }
         };
-        return /* @__PURE__ */ jsx14(
+        return /* @__PURE__ */ jsx16(
           "div",
           {
             onKeyDown: (e) => {
               if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
               }
             },
-            children: /* @__PURE__ */ jsx14(
+            children: /* @__PURE__ */ jsx16(
               DropDownTreeComponent,
               {
                 id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -2566,7 +2675,7 @@ var TableEdit = forwardRef3((props, ref) => {
                   parentValue: "parentId",
                   child: "children"
                 },
-                className: classnames7("select-tree", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+                className: classnames9("select-tree", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
                 allowFiltering: false,
                 value: valueSelectTree,
                 popupHeight: 250,
@@ -2594,8 +2703,8 @@ var TableEdit = forwardRef3((props, ref) => {
           }
         );
       case "checkbox":
-        return /* @__PURE__ */ jsx14(
-          Input7,
+        return /* @__PURE__ */ jsx16(
+          Input8,
           {
             checked: row[col.field],
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -2617,13 +2726,13 @@ var TableEdit = forwardRef3((props, ref) => {
         );
       case "numeric":
         let valueCurrency = row[col.field];
-        return /* @__PURE__ */ jsx14(
-          Input7,
+        return /* @__PURE__ */ jsx16(
+          Input8,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
             defaultValue: formartNumberic(valueCurrency, decimalSeparator, thousandSeparator, col.numericSettings?.fraction),
-            className: classnames7("border-0 rounded-0 input-numeric", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: classnames9("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("-");
@@ -2700,15 +2809,15 @@ var TableEdit = forwardRef3((props, ref) => {
             },
             onPaste: (e) => {
               if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable) {
-                pasteDataFromExcel(indexRow, indexCol);
+                pasteDataFromExcel(indexRow, indexCol, e);
                 e.preventDefault();
               }
             }
           }
         );
       case "color":
-        return /* @__PURE__ */ jsx14("div", { style: { padding: "4px 8px" }, children: /* @__PURE__ */ jsx14(
-          Input7,
+        return /* @__PURE__ */ jsx16("div", { style: { padding: "4px 8px" }, children: /* @__PURE__ */ jsx16(
+          Input8,
           {
             type: "color",
             value: row[col.field],
@@ -2730,7 +2839,7 @@ var TableEdit = forwardRef3((props, ref) => {
           `col-${indexRow}-${indexCol}`
         ) });
       case "form":
-        return /* @__PURE__ */ jsx14(
+        return /* @__PURE__ */ jsx16(
           edit_form_default,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -2748,17 +2857,23 @@ var TableEdit = forwardRef3((props, ref) => {
             textAlign: col.textAlign,
             onKeyDown: (e) => {
               return checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
+            },
+            onPaste: (e) => {
+              if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable) {
+                pasteDataFromExcel(indexRow, indexCol, e);
+                e.preventDefault();
+              }
             }
           }
         );
       default:
-        return /* @__PURE__ */ jsx14(
-          Input7,
+        return /* @__PURE__ */ jsx16(
+          Input8,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
             defaultValue: isNullOrUndefined(row[col.field]) ? "" : row[col.field],
-            className: classnames7("border-0 rounded-0 input-element", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: classnames9("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;
@@ -2782,7 +2897,7 @@ var TableEdit = forwardRef3((props, ref) => {
             },
             onPaste: (e) => {
               if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable) {
-                pasteDataFromExcel(indexRow, indexCol);
+                pasteDataFromExcel(indexRow, indexCol, e);
                 e.preventDefault();
               }
             }
@@ -2795,34 +2910,6 @@ var TableEdit = forwardRef3((props, ref) => {
       commandClick({ id, rowData, index });
     }
   };
-  const renderCommand = (commandItems, rowData, i) => {
-    return /* @__PURE__ */ jsx14(Fragment15, { children: /* @__PURE__ */ jsx14("div", { className: "d-flex align-items-center", style: { columnGap: 10 }, children: commandItems.map((item, index) => {
-      return /* @__PURE__ */ jsxs13(
-        Button4,
-        {
-          id: `command-item-${i}`,
-          tabIndex: -1,
-          style: { padding: "5px", minWidth: 45, height: "100%" },
-          className: classnames7("command-item", {
-            "btn-icon": item.tooltip === ""
-          }),
-          color: item.color ? item.color : "#000",
-          onClick: (e) => {
-            handleCommandClick(item.id, rowData, i);
-            if (i === indexFocus) {
-              setIndexFocus(void 0);
-            }
-            e.preventDefault();
-          },
-          children: [
-            item.icon && /* @__PURE__ */ jsx14(icon_default, { iconName: item.icon, size: 16 }),
-            /* @__PURE__ */ jsx14(UncontrolledTooltip2, { className: "r-tooltip", target: `command-item-${i}`, place: "top", children: t(item.tooltip ?? "") })
-          ]
-        },
-        `command-${index}`
-      );
-    }) }) });
-  };
   const focusNewElement = (col, row, onLoad = false) => {
     setTimeout(() => {
       const element = document.getElementById(`${idTable}-col${col}-row${row}`);
@@ -3035,25 +3122,82 @@ var TableEdit = forwardRef3((props, ref) => {
       changeDataSource([], false);
     }
   };
-  const pasteDataFromExcel = async (row, col) => {
-    const clipboard = await navigator.clipboard.readText();
+  const getColumn = (col, index) => {
+    const column = contentColumns[col + index];
+    if (column) {
+      if (column.visible !== false) {
+        return column;
+      } else {
+        return getColumn(col, index + 1);
+      }
+    }
+    return void 0;
+  };
+  const pasteDataFromExcel = async (row, col, e) => {
+    const clipboard = (e.clipboardData || window.Clipboard).getData("text");
     const arrayRow = clipboard.trimEnd().split("\n");
-    arrayRow.forEach((item, indexRow) => {
+    setIndexFocus(void 0);
+    for (let indexRow = 0; indexRow < arrayRow.length; indexRow++) {
+      const item = arrayRow[indexRow];
       const arrayCol = item.trimEnd().split("	");
       let dataRow = dataSource[row + indexRow];
       if (!dataRow) {
         dataRow = { ...defaultValue };
         dataSource.push(dataRow);
       }
-      arrayCol.forEach((element, index) => {
-        const column = contentColumns[col + index];
-        if ((!column.disabledCondition || !column.disabledCondition(row)) && column.editEnable) {
-          dataRow[column.field] = element;
+      for (let index = 0; index < arrayCol.length; index++) {
+        const stringData = arrayCol[index];
+        const column = getColumn(col, index);
+        if (column) {
+          if ((!column.disabledCondition || !column.disabledCondition(row)) && column.editEnable) {
+            if (column.onPaste) {
+              const rs = await column.onPaste(stringData, indexRow, row);
+              if (rs) {
+                dataRow = rs.dataRow;
+                dataRow[column.field] = stringData;
+                if (column.callback) {
+                  column.callback(rs.value, indexRow);
+                }
+              } else {
+                notificationError(t("PasteExcelNotExist", { index: row + indexRow + 1, field: t(column.headerText ?? ""), value: stringData }));
+              }
+            } else {
+              if (column.editType === "date") {
+                const date = new Date(stringData);
+                if (!isNaN(date.getTime())) {
+                  dataRow[column.field] = date;
+                } else {
+                  notificationError(t("PasteExcelIncorrectFormat", { index: row + indexRow + 1, field: t(column.headerText ?? ""), value: stringData }));
+                }
+              } else if (column.editType === "numeric") {
+                const number = Number(stringData);
+                if (!isNaN(number)) {
+                  dataRow[column.field] = number;
+                } else {
+                  notificationError(t("PasteExcelIncorrectFormat", { index: row + indexRow + 1, field: t(column.headerText ?? ""), value: stringData }));
+                }
+              } else if (column.editType?.includes("select") && !column.selectSettings?.loadOptions) {
+                let optionSelect = [];
+                if (column.selectSettings?.optionsField) {
+                  optionSelect = dataRow[column.selectSettings?.optionsField] ? dataRow[column.selectSettings?.optionsField] : [];
+                } else {
+                  optionSelect = column.selectSettings?.options ? column.selectSettings?.validateOption ? column.selectSettings?.options.filter((item2) => column.selectSettings?.validateOption(item2, row)) : column.selectSettings?.options : [];
+                }
+                let valueAsyncSelect = !isNullOrUndefined(dataRow[column.field]) && dataRow[column.field] !== "" ? optionSelect?.find((val) => val[column.selectSettings?.fieldValue ?? "value"] === dataRow[column.field]) : void 0;
+                if (valueAsyncSelect) {
+                  dataRow[column.field] = stringData;
+                } else {
+                  notificationError(t("PasteExcelNotExist", { index: row + indexRow + 1, field: t(column.headerText ?? ""), value: stringData }));
+                }
+              } else {
+                dataRow[column.field] = stringData;
+              }
+            }
+          }
         }
-      });
+      }
       rowChange(dataRow, row + indexRow, "");
-    });
-    handleRefeshRow();
+    }
     changeDataSource(dataSource);
   };
   const changeDataSource = (data, haveNew = false) => {
@@ -3117,10 +3261,10 @@ var TableEdit = forwardRef3((props, ref) => {
   }, [selectedItem]);
   const renderContentCol = (col, row, indexRow, indexCol, isSelected) => {
     if (col.field === "command") {
-      return col.visible !== false && /* @__PURE__ */ jsx14(
+      return col.visible !== false && /* @__PURE__ */ jsx16(
         "td",
         {
-          className: classnames7(
+          className: classnames9(
             `r-rowcell p-0 fix-${col.fixedType}`,
             { "cell-fixed": col.fixedType },
             { "r-active": isSelected && editDisable || indexFocus === indexRow }
@@ -3130,15 +3274,15 @@ var TableEdit = forwardRef3((props, ref) => {
             right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
             textAlign: col.textAlign ? col.textAlign : "left"
           },
-          children: /* @__PURE__ */ jsx14("div", { className: "r-rowcell-div ", children: renderCommand(col.commandItems, row, indexRow) })
+          children: /* @__PURE__ */ jsx16("div", { className: "r-rowcell-div ", children: /* @__PURE__ */ jsx16(command_default, { commandItems: col.commandItems ?? [], handleCommandClick, indexRow, rowData: row, setIndexFocus, indexFocus }) })
         },
         `col-${indexRow}-${indexCol}`
       );
     } else if (col.field === "#") {
-      return col.visible !== false && /* @__PURE__ */ jsx14(
+      return col.visible !== false && /* @__PURE__ */ jsx16(
         "td",
         {
-          className: classnames7(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
+          className: classnames9(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
           tabIndex: Number(`${indexRow}${indexCol}`),
           style: {
             left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
@@ -3182,15 +3326,15 @@ var TableEdit = forwardRef3((props, ref) => {
               e.stopPropagation();
             }
           },
-          children: /* @__PURE__ */ jsx14("div", { className: "r-rowcell-div pt-50", children: indexRow + 1 })
+          children: /* @__PURE__ */ jsx16("div", { className: "r-rowcell-div pt-50", children: indexRow + 1 })
         },
         `col-${indexRow}-${indexCol}`
       );
     } else if (col.field === "checkbox") {
-      return /* @__PURE__ */ jsx14(
+      return /* @__PURE__ */ jsx16(
         "td",
         {
-          className: classnames7(
+          className: classnames9(
             `r-rowcell p-0 fix-${col.fixedType}`,
             { "cell-fixed": col.fixedType },
             { "r-active": isSelected && editDisable || indexFocus === indexRow }
@@ -3200,7 +3344,7 @@ var TableEdit = forwardRef3((props, ref) => {
             right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
             textAlign: col.textAlign ? col.textAlign : "center"
           },
-          children: /* @__PURE__ */ jsx14(
+          children: /* @__PURE__ */ jsx16(
             "div",
             {
               className: "r-rowcell-div cursor-pointer",
@@ -3224,8 +3368,8 @@ var TableEdit = forwardRef3((props, ref) => {
                   e.stopPropagation();
                 }
               },
-              children: /* @__PURE__ */ jsx14(
-                Input7,
+              children: /* @__PURE__ */ jsx16(
+                Input8,
                 {
                   checked: isSelected,
                   type: "checkbox",
@@ -3251,10 +3395,10 @@ var TableEdit = forwardRef3((props, ref) => {
       }
       const typeDis = !editDisable && (indexFocus === indexRow || col.editType === "checkbox") && (!col.disabledCondition || !col.disabledCondition(row)) ? col.editEnable ? 1 : col.template ? 2 : 3 : col.template ? 2 : 3;
       const errorMessage = typeDis === 1 || col.field === "" || !col.validate ? "" : col.validate(row[col.field], row);
-      return /* @__PURE__ */ jsx14(Fragment15, { children: col.visible !== false && /* @__PURE__ */ jsx14(
+      return /* @__PURE__ */ jsx16(Fragment17, { children: col.visible !== false && /* @__PURE__ */ jsx16(
         "td",
         {
-          className: classnames7(
+          className: classnames9(
             `r-rowcell fix-${col.fixedType}`,
             { "cell-fixed": col.fixedType },
             { "r-active": isSelected && editDisable || indexFocus === indexRow }
@@ -3296,28 +3440,28 @@ var TableEdit = forwardRef3((props, ref) => {
               e.stopPropagation();
             }
           },
-          children: /* @__PURE__ */ jsx14(
+          children: /* @__PURE__ */ jsx16(
             "div",
             {
-              className: classnames7("r-rowcell-div"),
+              className: classnames9("r-rowcell-div"),
               style: {
                 width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width
               },
-              children: /* @__PURE__ */ jsxs13(
+              children: /* @__PURE__ */ jsxs15(
                 "div",
                 {
                   id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
-                  className: classnames7("r-rowcell-content", { "r-is-invalid": errorMessage }),
+                  className: classnames9("r-rowcell-content", { "r-is-invalid": errorMessage }),
                   style: {
                     margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2,
                     color: col.editType === "numeric" && Number(row[col.field]) < 0 ? "red" : ""
                   },
                   children: [
-                    typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : /* @__PURE__ */ jsx14("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }),
-                    /* @__PURE__ */ jsx14("span", { id: `error-${indexRow}-${indexCol}`, className: classnames7("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: /* @__PURE__ */ jsx14(AlertCircle, { fontSize: 15.5 }) }),
-                    !(typeDis === 1 && !refreshRow) && checkOverflow(indexRow, indexCol) && /* @__PURE__ */ jsx14(UncontrolledTooltip2, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : value }),
-                    /* @__PURE__ */ jsx14(
-                      UncontrolledTooltip2,
+                    typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : /* @__PURE__ */ jsx16("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }),
+                    /* @__PURE__ */ jsx16("span", { id: `error-${indexRow}-${indexCol}`, className: classnames9("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: /* @__PURE__ */ jsx16(AlertCircle, { fontSize: 15.5 }) }),
+                    !(typeDis === 1 && !refreshRow) && checkOverflow(indexRow, indexCol) && /* @__PURE__ */ jsx16(UncontrolledTooltip3, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : value }),
+                    /* @__PURE__ */ jsx16(
+                      UncontrolledTooltip3,
                       {
                         target: `error-${indexRow}-${indexCol}`,
                         className: "r-tooltip tooltip-error",
@@ -3338,132 +3482,11 @@ var TableEdit = forwardRef3((props, ref) => {
     const element = document.getElementById(`content-${idTable}-row${indexRow}col-${indexCol}`);
     return element && element.scrollWidth > element.clientWidth;
   };
-  const renderHeaderCol = (col, indexCol, indexParent) => {
-    if (col.field === "checkbox") {
-      return /* @__PURE__ */ jsx14(Fragment15, { children: col.visible !== false && /* @__PURE__ */ jsx14(
-        "th",
-        {
-          rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
-          colSpan: col.columns?.length ?? 1,
-          className: classnames7(
-            `r-headercell fix-${col.fixedType}`,
-            { "cell-fixed": col.fixedType }
-          ),
-          style: {
-            top: `${indexParent * 42}px`,
-            left: col.fixedType === "left" ? objWidthFix[col.index ?? 0] : void 0,
-            right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0,
-            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,
-            maxWidth: col.maxWidth
-          },
-          children: /* @__PURE__ */ jsx14(
-            "div",
-            {
-              style: { justifyContent: col.textAlign ?? "left" },
-              className: classnames7("r-headercell-div"),
-              children: /* @__PURE__ */ jsx14(
-                Input7,
-                {
-                  checked: totalCount > 0 && selectedRows?.length >= totalCount,
-                  type: "checkbox",
-                  className: classnames7("cursor-pointer", { "d-none": !isMulti }),
-                  style: { textAlign: col.textAlign ?? "left", marginTop: 6 },
-                  onChange: (e) => {
-                    if (selectEnable) {
-                      if (e.target.checked) {
-                        setSelectedRows(dataSource.map((item) => {
-                          return item;
-                        }));
-                      } else {
-                        setSelectedRows([]);
-                      }
-                    }
-                  }
-                }
-              )
-            }
-          )
-        }
-      ) }, `header-${indexCol}`);
-    } else if (col.field === "#") {
-      return /* @__PURE__ */ jsx14(
-        Fragment15,
-        {
-          children: col.visible !== false && /* @__PURE__ */ jsx14(
-            "th",
-            {
-              rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
-              colSpan: col.columns?.length ?? 1,
-              className: classnames7(
-                `r-headercell fix-${col.fixedType}`,
-                { "cell-fixed": col.fixedType }
-              ),
-              style: {
-                width: 40,
-                minWidth: 40,
-                maxWidth: 40,
-                top: `${indexParent * 42}px`,
-                left: col.fixedType === "left" ? objWidthFix[col.index ?? 0] : void 0,
-                right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0
-              },
-              children: /* @__PURE__ */ jsx14(
-                "div",
-                {
-                  title: t(col.headerText ?? ""),
-                  style: { justifyContent: col.textAlign ?? "left" },
-                  className: "r-headercell-div",
-                  children: t(col.headerText ?? "")
-                }
-              )
-            }
-          )
-        },
-        `header-${indexCol}`
-      );
-    } else {
-      return /* @__PURE__ */ jsx14(
-        Fragment15,
-        {
-          children: col.visible !== false && /* @__PURE__ */ jsx14(
-            "th",
-            {
-              rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
-              colSpan: col.columns?.length ?? 1,
-              className: classnames7(
-                `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: `${indexParent * 42}px`,
-                left: col.fixedType === "left" ? objWidthFix[col.index ?? 0] : void 0,
-                right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0,
-                maxWidth: col.maxWidth
-              },
-              children: /* @__PURE__ */ jsx14(
-                "div",
-                {
-                  role: "textbox",
-                  title: t(col.headerText ?? ""),
-                  style: { justifyContent: col.textAlign ?? "left" },
-                  className: "r-headercell-div",
-                  children: t(col.headerText ?? "")
-                }
-              )
-            }
-          )
-        },
-        `header-${indexCol}`
-      );
-    }
-  };
   const renderFooterCol = (col, indexCol) => {
-    return /* @__PURE__ */ jsx14(Fragment15, { children: col.visible !== false && /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx16(Fragment17, { children: col.visible !== false && /* @__PURE__ */ jsx16(
       "td",
       {
-        className: classnames7(
+        className: classnames9(
           `p-0 px-50 r-footer fix-${col.fixedType}`,
           { "cell-fixed": col.fixedType }
         ),
@@ -3475,56 +3498,56 @@ var TableEdit = forwardRef3((props, ref) => {
           maxWidth: col.maxWidth,
           textAlign: col.textAlign ? col.textAlign : "left"
         },
-        children: /* @__PURE__ */ jsx14("div", { className: "r-footer-div", children: col.haveSum === true && col.editType === "numeric" ? formartNumberic(dataSource.reduce(function(accumulator, currentValue) {
+        children: /* @__PURE__ */ jsx16("div", { className: "r-footer-div", children: col.haveSum === true && col.editType === "numeric" ? formartNumberic(dataSource.reduce(function(accumulator, currentValue) {
           return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
         }, 0), decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) : "" })
       }
     ) }, `summarycell-${indexCol}`);
   };
   const renderToolbarTop = () => {
-    return /* @__PURE__ */ jsx14("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: /* @__PURE__ */ jsxs13("div", { className: "r-toolbar-items", children: [
-      /* @__PURE__ */ jsx14("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
-        return item.align === "left" ? /* @__PURE__ */ jsx14("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) : "";
+    return /* @__PURE__ */ jsx16("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: /* @__PURE__ */ jsxs15("div", { className: "r-toolbar-items", children: [
+      /* @__PURE__ */ jsx16("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
+        return item.align === "left" ? /* @__PURE__ */ jsx16("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) : "";
       }) }),
-      /* @__PURE__ */ jsx14("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
-        return item.align === "center" ? /* @__PURE__ */ jsx14("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-center-${index}`) : "";
+      /* @__PURE__ */ jsx16("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
+        return item.align === "center" ? /* @__PURE__ */ jsx16("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-center-${index}`) : "";
       }) }),
-      /* @__PURE__ */ jsx14("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
-        return item.align === "right" ? /* @__PURE__ */ jsx14("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) : "";
+      /* @__PURE__ */ jsx16("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
+        return item.align === "right" ? /* @__PURE__ */ jsx16("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) : "";
       }) })
     ] }) });
   };
   const renderToolbarBottom = () => {
-    return /* @__PURE__ */ jsx14("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__ */ jsxs13("div", { className: "r-toolbar-items", children: [
-      /* @__PURE__ */ jsxs13("div", { className: "r-toolbar-left", children: [
-        /* @__PURE__ */ jsx14("div", { className: classnames7("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx14(Button4, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
-        (indexFocus ?? -1) > -1 ? /* @__PURE__ */ jsxs13(Fragment16, { children: [
-          /* @__PURE__ */ jsx14("div", { className: classnames7("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx14(Button4, { color: "success", outline: true, onClick: () => {
+    return /* @__PURE__ */ jsx16("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: /* @__PURE__ */ jsxs15("div", { className: "r-toolbar-items", children: [
+      /* @__PURE__ */ jsxs15("div", { className: "r-toolbar-left", children: [
+        /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx16(Button5, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
+        (indexFocus ?? -1) > -1 ? /* @__PURE__ */ jsxs15(Fragment18, { children: [
+          /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx16(Button5, { color: "success", outline: true, onClick: () => {
             handleDuplicate(dataSource[indexFocus ?? -1], indexFocus ?? -1);
           }, className: "d-flex", children: t("Duplicate") }) }),
-          /* @__PURE__ */ jsx14("div", { className: classnames7("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx14(Button4, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
-          /* @__PURE__ */ jsx14("div", { className: classnames7("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx14(Button4, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
-        ] }) : /* @__PURE__ */ jsx14(Fragment16, { children: " " }),
-        /* @__PURE__ */ jsx14("div", { className: classnames7("r-toolbar-item", { "d-none": editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx14(Button4, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
+          /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx16(Button5, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
+          /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx16(Button5, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
+        ] }) : /* @__PURE__ */ jsx16(Fragment18, { children: " " }),
+        /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item", { "d-none": editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx16(Button5, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
         toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
-          return item.align === "left" ? /* @__PURE__ */ jsx14("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : "";
+          return item.align === "left" ? /* @__PURE__ */ jsx16("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : "";
         })
       ] }),
-      /* @__PURE__ */ jsx14("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
-        return item.align === "center" ? /* @__PURE__ */ jsx14("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : "";
+      /* @__PURE__ */ jsx16("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
+        return item.align === "center" ? /* @__PURE__ */ jsx16("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : "";
       }) }),
-      /* @__PURE__ */ jsxs13("div", { className: "r-toolbar-right", children: [
+      /* @__PURE__ */ jsxs15("div", { className: "r-toolbar-right", children: [
         toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
-          return item.align === "right" ? /* @__PURE__ */ jsx14("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : "";
+          return item.align === "right" ? /* @__PURE__ */ jsx16("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : "";
         }),
-        /* @__PURE__ */ jsx14("div", { className: classnames7("r-toolbar-item me-25", { "d-none": headerColumns.length > 1 }), "aria-disabled": "false", children: /* @__PURE__ */ jsx14(Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
-        /* @__PURE__ */ jsx14("div", { className: classnames7("r-toolbar-item me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsxs13(UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
-          /* @__PURE__ */ jsx14(DropdownToggle3, { href: "/", tag: "a", color: "info", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx14(Info2, { className: "cursor-pointer" }) }),
-          /* @__PURE__ */ jsx14(DropdownMenu3, { children: /* @__PURE__ */ jsxs13("div", { className: "d-flex flex-column p-50 py-25", children: [
-            /* @__PURE__ */ jsx14("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" }),
-            /* @__PURE__ */ jsx14("div", { style: { fontSize: 13 }, children: "Ch\u1ECDn \xF4 v\xE0 Ctrl + V \u0111\u1EC3 d\xE1n th\xF4ng tin t\u1EEB excel" }),
-            /* @__PURE__ */ jsx14("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\xE9p h\xE0ng" }),
-            /* @__PURE__ */ jsx14("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + V \u0111\u1EC3  d\xE1n h\xE0ng" })
+        /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item me-25", { "d-none": headerColumns.length > 1 }), "aria-disabled": "false", children: /* @__PURE__ */ jsx16(Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
+        /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsxs15(UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
+          /* @__PURE__ */ jsx16(DropdownToggle3, { href: "/", tag: "a", color: "info", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx16(Info2, { className: "cursor-pointer" }) }),
+          /* @__PURE__ */ jsx16(DropdownMenu3, { children: /* @__PURE__ */ jsxs15("div", { className: "d-flex flex-column p-50 py-25", children: [
+            /* @__PURE__ */ jsx16("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" }),
+            /* @__PURE__ */ jsx16("div", { style: { fontSize: 13 }, children: "Ch\u1ECDn \xF4 v\xE0 Ctrl + V \u0111\u1EC3 d\xE1n th\xF4ng tin t\u1EEB excel" }),
+            /* @__PURE__ */ jsx16("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\xE9p h\xE0ng" }),
+            /* @__PURE__ */ jsx16("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + V \u0111\u1EC3  d\xE1n h\xE0ng" })
           ] }) })
         ] }) })
       ] })
@@ -3553,10 +3576,10 @@ var TableEdit = forwardRef3((props, ref) => {
         const flagDisplay = !pagingClient || totalCount > (pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1) && totalCount <= (pagingSetting.pageSize ?? 0) * (pagingSetting.currentPage ?? 0);
         if (flagDisplay) {
           countDisplay++;
-          return /* @__PURE__ */ jsx14(
+          return /* @__PURE__ */ jsx16(
             "tr",
             {
-              className: classnames7("r-row", { "fisrt-row": countDisplay === 0 }),
+              className: classnames9("r-row", { "fisrt-row": countDisplay === 0 }),
               children: contentColumns.map((col, indexCol) => {
                 return renderContentCol(col, row, indexRow, indexCol, isSelected);
               })
@@ -3572,24 +3595,38 @@ var TableEdit = forwardRef3((props, ref) => {
       pagingSetting?.setCurrentPage(1);
     }
   }, [searchTerm, searchSetting?.searchTerm]);
-  return /* @__PURE__ */ jsxs13(Fragment15, { children: [
-    /* @__PURE__ */ jsxs13("div", { className: "react-table-edit", children: [
-      /* @__PURE__ */ jsxs13("div", { className: "r-grid", ref: gridRef, children: [
-        toolbarSetting?.showTopToolbar ? /* @__PURE__ */ jsx14(Fragment16, { children: renderToolbarTop() }) : /* @__PURE__ */ jsx14(Fragment16, {}),
-        /* @__PURE__ */ jsx14("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ jsxs13("table", { style: { width: "100%" }, children: [
-          /* @__PURE__ */ jsx14("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
-            return /* @__PURE__ */ jsx14("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
-              return renderHeaderCol(col, index, indexParent);
+  return /* @__PURE__ */ jsxs15(Fragment17, { children: [
+    /* @__PURE__ */ jsxs15("div", { className: "react-table-edit", children: [
+      /* @__PURE__ */ jsxs15("div", { className: "r-grid", ref: gridRef, children: [
+        toolbarSetting?.showTopToolbar ? /* @__PURE__ */ jsx16(Fragment18, { children: renderToolbarTop() }) : /* @__PURE__ */ jsx16(Fragment18, {}),
+        /* @__PURE__ */ jsx16("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ jsxs15("table", { style: { width: "100%" }, children: [
+          /* @__PURE__ */ jsx16("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
+            return /* @__PURE__ */ jsx16("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
+              return /* @__PURE__ */ jsx16(
+                header_default,
+                {
+                  col,
+                  dataSource,
+                  indexCol: index,
+                  indexParent,
+                  isMulti: isMulti ?? false,
+                  objWidthFix,
+                  selectEnable: selectEnable ?? false,
+                  selectedRows,
+                  setSelectedRows,
+                  totalCount
+                }
+              );
             }) }, indexParent);
           }) }),
-          /* @__PURE__ */ jsx14("tbody", { className: "r-gridcontent", children: renderData() }),
-          /* @__PURE__ */ jsx14("tfoot", { className: "r-gridfoot", children: haveSum == true ? /* @__PURE__ */ jsx14("tr", { className: "r-row", children: contentColumns.map((col, index) => {
+          /* @__PURE__ */ jsx16("tbody", { className: "r-gridcontent", children: renderData() }),
+          /* @__PURE__ */ jsx16("tfoot", { className: "r-gridfoot", children: haveSum == true ? /* @__PURE__ */ jsx16("tr", { className: "r-row", children: contentColumns.map((col, index) => {
             return renderFooterCol(col, index);
-          }) }) : /* @__PURE__ */ jsx14(Fragment16, {}) })
+          }) }) : /* @__PURE__ */ jsx16(Fragment18, {}) })
         ] }) }),
-        toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ jsx14(Fragment16, { children: renderToolbarBottom() }) : /* @__PURE__ */ jsx14(Fragment16, {})
+        toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ jsx16(Fragment18, { children: renderToolbarBottom() }) : /* @__PURE__ */ jsx16(Fragment18, {})
       ] }),
-      pagingSetting?.allowPaging ? /* @__PURE__ */ jsx14(
+      pagingSetting?.allowPaging ? /* @__PURE__ */ jsx16(
         PagingComponent,
         {
           onChangePage,
@@ -3599,9 +3636,9 @@ var TableEdit = forwardRef3((props, ref) => {
           totalItem: pagingClient ? totalCount : pagingSetting?.totalItem ?? 0,
           onChangePageSize
         }
-      ) : /* @__PURE__ */ jsx14(Fragment16, {})
+      ) : /* @__PURE__ */ jsx16(Fragment18, {})
     ] }),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx16(
       sidebar_setting_column_default,
       {
         handleSidebar: () => {
@@ -3619,10 +3656,10 @@ var table_default = TableEdit;
 // test-app/src/component/tab-menu/index.tsx
 import { ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight3 } from "becoxy-icons";
 import classNames6 from "classnames";
-import { Fragment as Fragment17, useEffect as useEffect9, useState as useState8 } from "react";
+import { Fragment as Fragment19, useEffect as useEffect9, useState as useState8 } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { DropdownItem as DropdownItem3, DropdownMenu as DropdownMenu4, DropdownToggle as DropdownToggle4, UncontrolledDropdown as UncontrolledDropdown2 } from "reactstrap";
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 var TabsMenuComponent = ({
   buttonWidth,
   tabParent,
@@ -3697,22 +3734,22 @@ var TabsMenuComponent = ({
   const handleModal = (name) => {
     setOpenModal((old) => ({ ...old, [name]: !(openModal[name] ?? false) }));
   };
-  return /* @__PURE__ */ jsxs14(Fragment17, { children: [
+  return /* @__PURE__ */ jsxs16(Fragment19, { children: [
     renderModal ? renderModal({ handleModal, windowSize, openModal, setDataItem, dataItem }) : "",
-    /* @__PURE__ */ jsxs14("div", { className: classNames6("tab-custom", { "tab-parent": tabParent }, { "tab-child": tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [
-      /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsxs16("div", { className: classNames6("tab-custom", { "tab-parent": tabParent }, { "tab-child": tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [
+      /* @__PURE__ */ jsx17(
         "div",
         {
           onClick: () => handleScroll(-200),
           className: classNames6("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
-          children: /* @__PURE__ */ jsx15(ChevronLeft3, {})
+          children: /* @__PURE__ */ jsx17(ChevronLeft3, {})
         }
       ),
-      /* @__PURE__ */ jsx15("div", { id: `tab-component-${resourceCode}`, className: "tab-component", children: /* @__PURE__ */ jsx15("div", { id: `content-component-${resourceCode}`, children: dataMenu.map((item) => {
+      /* @__PURE__ */ jsx17("div", { id: `tab-component-${resourceCode}`, className: "tab-component", children: /* @__PURE__ */ jsx17("div", { id: `content-component-${resourceCode}`, children: dataMenu.map((item) => {
         if (item?.resAttributes?.IS_MENU === "1") {
-          return /* @__PURE__ */ jsxs14(UncontrolledDropdown2, { className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: "down", style: { backgroundColor: openMenu ? "#e0e0e0" : "" }, children: [
-            /* @__PURE__ */ jsx15(DropdownToggle4, { color: "#00000", style: { border: "none", boxShadow: "none", margin: 0, padding: 0 }, className: "background-none", children: /* @__PURE__ */ jsx15("div", { children: item.name }) }),
-            /* @__PURE__ */ jsx15(DropdownMenu4, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => /* @__PURE__ */ jsx15(
+          return /* @__PURE__ */ jsxs16(UncontrolledDropdown2, { className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: "down", style: { backgroundColor: openMenu ? "#e0e0e0" : "" }, children: [
+            /* @__PURE__ */ jsx17(DropdownToggle4, { color: "#00000", style: { border: "none", boxShadow: "none", margin: 0, padding: 0 }, className: "background-none", children: /* @__PURE__ */ jsx17("div", { children: item.name }) }),
+            /* @__PURE__ */ jsx17(DropdownMenu4, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => /* @__PURE__ */ jsx17(
               DropdownItem3,
               {
                 style: { borderRadius: "5px", margin: "0 0.5rem", width: "95%" },
@@ -3729,7 +3766,7 @@ var TabsMenuComponent = ({
             )) })
           ] }, item.code);
         } else {
-          return /* @__PURE__ */ jsx15(
+          return /* @__PURE__ */ jsx17(
             Link,
             {
               to: item.url,
@@ -3740,12 +3777,12 @@ var TabsMenuComponent = ({
           );
         }
       }) }) }),
-      /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsx17(
         "div",
         {
           onClick: () => handleScroll(200),
           className: classNames6("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
-          children: /* @__PURE__ */ jsx15(ChevronRight3, {})
+          children: /* @__PURE__ */ jsx17(ChevronRight3, {})
         }
       )
     ] })
@@ -3753,11 +3790,11 @@ var TabsMenuComponent = ({
 };
 
 // index.ts
-var Table_edit_default = table_default;
+var Table_Edit_default = table_default;
 export {
   SelectTable,
   TabsMenuComponent,
-  Table_edit_default as default,
+  Table_Edit_default as default,
   formartNumberic,
   generateUUID,
   isNullOrUndefined,