react-table-edit 1.2.44 → 1.2.46

package/dist/index.mjs

@@ -1,6 +1,6 @@
 // src/component/table/index.tsx
-import { Fragment as Fragment20, forwardRef as forwardRef4, useEffect as useEffect9, useImperativeHandle, useRef as useRef4, useState as useState8 } from "react";
-import { Button as Button6, DropdownMenu as DropdownMenu4, DropdownToggle as DropdownToggle4, Input as Input9, UncontrolledDropdown, UncontrolledTooltip as UncontrolledTooltip5 } from "reactstrap";
+import { Fragment as Fragment21, forwardRef as forwardRef4, useEffect as useEffect9, useImperativeHandle, useRef as useRef4, useState as useState9 } from "react";
+import { Button as Button6, DropdownMenu as DropdownMenu4, DropdownToggle as DropdownToggle4, Input as Input8, UncontrolledDropdown, UncontrolledTooltip as UncontrolledTooltip5 } from "reactstrap";
 import classnames9 from "classnames";
 import { useTranslation as useTranslation12 } from "react-i18next";
 import { AlertCircle, Info as Info2, Settings } from "becoxy-icons";
@@ -323,7 +323,7 @@ import {
   DropdownMenu as DropdownMenu2,
   DropdownToggle as DropdownToggle2,
   Dropdown as Dropdown2,
-  Input as Input5,
+  Input as Input4,
   Row,
   Button as Button2,
   Col
@@ -426,39 +426,37 @@ var input_text_default = TextInput;
 
 // src/component/input-number/index.tsx
 import { Controller as Controller2 } from "react-hook-form";
-import { Input as Input3, Label as Label2, FormFeedback as FormFeedback2 } from "reactstrap";
+import { Label as Label2, FormFeedback as FormFeedback2 } from "reactstrap";
 import classnames2 from "classnames";
 import { Fragment as Fragment4 } from "react";
+import { NumericFormat } from "react-number-format";
 import { useTranslation as useTranslation2 } from "react-i18next";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var NumberInput = (props) => {
-  const { t } = useTranslation2();
   const {
-    control,
     id,
-    fractionCurrency = 10,
+    control,
+    fractionCurrency,
     name,
     min,
     max,
-    type,
     label,
     labelSize,
     required,
     errors,
-    height,
     disabled,
-    row,
     isLabel,
+    fixedDecimalScale,
     placeholder,
-    autoFocus,
     inLine,
     callback,
-    readOnly,
     decimalSeparator = ",",
     thousandSeparator = ".",
     classes,
-    ...rest
+    width,
+    allowNegative
   } = props;
+  const { t } = useTranslation2();
   const renderLabel = () => {
     return /* @__PURE__ */ jsx4(Fragment4, { children: isLabel === false ? "" : /* @__PURE__ */ jsxs4(Label2, { className: "form-label", for: name, children: [
       t(label ? label : ""),
@@ -474,64 +472,50 @@ var NumberInput = (props) => {
         {
           name,
           control,
-          render: ({ field: { value, onChange } }) => /* @__PURE__ */ jsx4(
-            Input3,
-            {
-              id,
-              value: formartNumberic(value, decimalSeparator, thousandSeparator, fractionCurrency),
-              onChange: (val) => {
-                let newVal = "";
-                const flag = val.target?.value.startsWith("-");
-                if (val.target?.value.endsWith(decimalSeparator)) {
-                  if ((val.target?.value.match(new RegExp(decimalSeparator === "," ? "," : "\\.", "g")) || []).length > 1 || fractionCurrency === 0) {
-                    newVal = val.target?.value.slice(0, -1).replaceAll(thousandSeparator, "");
+          render: ({ field: { value, onChange } }) => {
+            let floatValue = parseFloat(value);
+            const numericFormatProps = {
+              value: !isNullOrUndefined(value) ? value : "",
+              thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
+              decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
+              allowNegative: allowNegative ?? false,
+              decimalScale: fractionCurrency ?? 0,
+              fixedDecimalScale
+            };
+            return /* @__PURE__ */ jsx4(
+              NumericFormat,
+              {
+                ...numericFormatProps,
+                className: classnames2("form-control text-right", {
+                  "is-invalid": errors
+                }),
+                onValueChange: (values) => {
+                  floatValue = values?.floatValue;
+                  const textBeforeDot = values?.value.split(".")[1];
+                  onChange(textBeforeDot ? parseFloat(values?.value).toFixed(textBeforeDot.length) : values?.floatValue);
+                },
+                onFocus: (e) => {
+                  e.target.setSelectionRange(0, e.target.innerText.length - 1);
+                },
+                onChange: () => {
+                  if (callback) {
+                    callback(floatValue);
+                  }
+                },
+                onBlur: () => {
+                  if (max && floatValue > max) {
+                    onChange(max);
+                  } else if (min && floatValue < min) {
+                    onChange(min);
                   } else {
-                    newVal = val.target?.value.replaceAll(thousandSeparator, "");
+                    onChange(floatValue);
                   }
-                } else {
-                  newVal = val.target.value.replaceAll(new RegExp(`[^0-9${decimalSeparator}]`, "g"), "");
-                }
-                if (decimalSeparator !== ".") {
-                  newVal = newVal.replaceAll(decimalSeparator, ".");
-                }
-                onChange(flag ? `-${newVal}` : newVal);
-              },
-              onBlur: (val) => {
-                let newVal = "";
-                const flag = val.target?.value.startsWith("-");
-                if (val.target?.value.endsWith(decimalSeparator)) {
-                  newVal = val.target?.value.slice(0, -1).replaceAll(new RegExp(`[^0-9${decimalSeparator}]`, "g"), "");
-                } else {
-                  newVal = val.target.value.replaceAll(new RegExp(`[^0-9${decimalSeparator}]`, "g"), "");
-                }
-                if (decimalSeparator !== ".") {
-                  newVal = newVal.replaceAll(decimalSeparator, ".");
-                }
-                let value2 = flag ? 0 - Number(newVal) : Number(newVal);
-                if (max !== void 0 && value2 > max) {
-                  value2 = max;
-                } else if (min !== void 0 && value2 < min) {
-                  value2 = min;
-                }
-                onChange(value2);
-                if (callback) {
-                  callback(value2);
-                }
-              },
-              style: { height: `${height}px` },
-              autoFocus,
-              disabled,
-              placeholder,
-              type: type ? type : "text",
-              invalid: errors && true,
-              className: "h-100",
-              rows: row,
-              min,
-              max,
-              readOnly,
-              ...rest
-            }
-          )
+                },
+                placeholder,
+                disabled
+              }
+            );
+          }
         }
       ),
       errors && /* @__PURE__ */ jsx4(FormFeedback2, { children: errors?.message })
@@ -551,7 +535,7 @@ var NumberInput = (props) => {
       ),
       children: [
         renderLabel(),
-        /* @__PURE__ */ jsx4("div", { className: classnames2("form-input-content", { "hidden-label": isLabel === false }), children: renderInput() })
+        /* @__PURE__ */ jsx4("div", { style: { width: width ? width : void 0 }, className: classnames2("form-input-content", { "hidden-label": isLabel === false }), children: renderInput() })
       ]
     }
   ) });
@@ -572,7 +556,7 @@ import {
   DropdownToggle,
   Dropdown,
   Button,
-  Input as Input4,
+  Input as Input3,
   Spinner,
   UncontrolledTooltip
 } from "reactstrap";
@@ -675,9 +659,11 @@ var SelectTable = forwardRef((props, ref) => {
     }
   }, [inputRef]);
   useEffect3(() => {
-    if (searchTerm && !dropdownOpen) {
-      setDropdownOpen(true);
-      setIndexFocus(0);
+    if (searchTerm) {
+      if (!dropdownOpen) {
+        setDropdownOpen(true);
+      }
+      setIndexFocus(-1);
     }
   }, [searchTerm]);
   useEffect3(() => {
@@ -716,10 +702,9 @@ var SelectTable = forwardRef((props, ref) => {
         if (dropdownOpen && newItem) {
           handChange(newItem);
           handleOpenClose();
-          flag = true;
         }
-        if (!searchTerm) {
-          handleOpenClose();
+        if (!dropdownOpen) {
+          setDropdownOpen(true);
           flag = true;
         }
       } else if (e.code === "Escape") {
@@ -909,7 +894,7 @@ var SelectTable = forwardRef((props, ref) => {
                 }
               },
               children: /* @__PURE__ */ jsx5(
-                Input4,
+                Input3,
                 {
                   checked: isSelected,
                   type: "checkbox",
@@ -996,7 +981,7 @@ var SelectTable = forwardRef((props, ref) => {
               style: { justifyContent: "center" },
               className: classnames3("r-select-headercell-div"),
               children: /* @__PURE__ */ jsx5(
-                Input4,
+                Input3,
                 {
                   checked: isSelectedAll,
                   type: "checkbox",
@@ -1537,7 +1522,7 @@ var EditForm = forwardRef2((props, ref) => {
           },
           children: [
             /* @__PURE__ */ jsx7(DropdownToggle2, { tag: "div", children: /* @__PURE__ */ jsx7(
-              Input5,
+              Input4,
               {
                 style: { backgroundColor: "#FFF", textAlign: textAlign ?? "left" },
                 placeholder,
@@ -1630,7 +1615,7 @@ var edit_form_default = EditForm;
 
 // src/component/sidebar-setting-column/index.tsx
 import { Fragment as Fragment11, useEffect as useEffect6, useState as useState5 } from "react";
-import { Button as Button3, Input as Input6 } from "reactstrap";
+import { Button as Button3, Input as Input5 } from "reactstrap";
 import { useTranslation as useTranslation7 } from "react-i18next";
 
 // src/component/modal-header/index.tsx
@@ -1824,7 +1809,7 @@ var SidebarSetColumn = (props) => {
   };
   const visibleTemplate = (item, index) => {
     return /* @__PURE__ */ jsx10(
-      Input6,
+      Input5,
       {
         defaultChecked: item.visible ?? true,
         disabled: item.invisibleDisable,
@@ -1842,7 +1827,7 @@ var SidebarSetColumn = (props) => {
   };
   const fixColumnTemplate = (item, index) => {
     return /* @__PURE__ */ jsx10(
-      Input6,
+      Input5,
       {
         defaultChecked: item.fixedType === "left" || item.fixedType === "right",
         type: "checkbox",
@@ -2122,7 +2107,7 @@ var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOpt
 // src/component/table/header.tsx
 import { Fragment as Fragment14 } from "react";
 import classnames6 from "classnames";
-import { Input as Input7 } from "reactstrap";
+import { Input as Input6 } from "reactstrap";
 import { useTranslation as useTranslation9 } from "react-i18next";
 import { Resizable } from "react-resizable";
 import "react-resizable/css/styles.css";
@@ -2179,7 +2164,7 @@ var HeaderTableCol = (props) => {
               className: classnames6("r-headercell-div"),
               children: [
                 col.field === "checkbox" && /* @__PURE__ */ jsx12(
-                  Input7,
+                  Input6,
                   {
                     checked: totalCount > 0 && selectedRows?.length >= totalCount,
                     type: "checkbox",
@@ -2272,7 +2257,7 @@ import {
   DropdownToggle as DropdownToggle3,
   Dropdown as Dropdown3,
   Button as Button5,
-  Input as Input8,
+  Input as Input7,
   UncontrolledTooltip as UncontrolledTooltip4
 } from "reactstrap";
 import { useTranslation as useTranslation11 } from "react-i18next";
@@ -2540,7 +2525,7 @@ var SelectTableTree = forwardRef3((props, ref) => {
                     }
                   ),
                   /* @__PURE__ */ jsx15(
-                    Input8,
+                    Input7,
                     {
                       checked: isSelected,
                       type: "checkbox",
@@ -2668,7 +2653,7 @@ var SelectTableTree = forwardRef3((props, ref) => {
                   style: { justifyContent: "center" },
                   className: classnames8("r-select-headercell-div"),
                   children: /* @__PURE__ */ jsx15(
-                    Input8,
+                    Input7,
                     {
                       checked: isSelectedAll,
                       type: "checkbox",
@@ -2844,8 +2829,78 @@ var SelectTableTree = forwardRef3((props, ref) => {
 });
 
 // src/component/table/index.tsx
-import { NumericFormat } from "react-number-format";
-import { Fragment as Fragment21, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { NumericFormat as NumericFormat2 } from "react-number-format";
+
+// src/component/table/toolbar-top.tsx
+import { Fragment as Fragment20, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+var renderToolbarTop = (toolbarTopOption) => {
+  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(Fragment20, { children: /* @__PURE__ */ jsx16("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) }) : "";
+    }) }),
+    /* @__PURE__ */ jsx16("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
+      return item.align === "center" ? /* @__PURE__ */ jsx16(Fragment20, { children: /* @__PURE__ */ jsx16("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-center-${index}`) }) : "";
+    }) }),
+    /* @__PURE__ */ jsx16("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
+      return item.align === "right" ? /* @__PURE__ */ jsx16(Fragment20, { children: /* @__PURE__ */ jsx16("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) }) : "";
+    }) })
+  ] }) });
+};
+var toolbar_top_default = renderToolbarTop;
+
+// src/component/input-date/index.tsx
+import { useState as useState8 } from "react";
+import DatePicker from "react-datepicker";
+import InputMask from "react-input-mask";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var DateInput = (props) => {
+  const { id, onKeyDown, dateFormat, className, onChange, value } = props;
+  const [open, setOpen] = useState8(false);
+  return /* @__PURE__ */ jsx17(
+    DatePicker,
+    {
+      id,
+      open,
+      className,
+      selected: value,
+      onChange: (date) => {
+        if (onChange) {
+          onChange(date);
+        }
+      },
+      dateFormat,
+      locale: "vi",
+      showMonthDropdown: true,
+      showYearDropdown: true,
+      dropdownMode: "select",
+      onCalendarClose: () => setOpen(false),
+      onCalendarOpen: () => setOpen(true),
+      customInput: /* @__PURE__ */ jsx17(InputMask, { mask: "99/99/9999", placeholder: dateFormat }),
+      onKeyDown: (e) => {
+        if (e.code === "Space") {
+          setOpen(!open);
+          setTimeout(() => {
+            const element = document.getElementById(id ?? "");
+            if (element) {
+              element.focus();
+            }
+          }, 100);
+        } else {
+          if (onKeyDown && !open) {
+            const rs = onKeyDown(e);
+            if (rs) {
+              setOpen(false);
+            }
+          }
+        }
+      }
+    }
+  );
+};
+var input_date_default = DateInput;
+
+// src/component/table/index.tsx
+import { Fragment as Fragment22, jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 var TableEdit = forwardRef4((props, ref) => {
   const { t } = useTranslation12();
   const {
@@ -2880,17 +2935,17 @@ var TableEdit = forwardRef4((props, ref) => {
       refeshFocusRow: handleRefeshRow
     };
   });
-  const [refreshRow, setRefreshRow] = useState8(false);
-  const [indexFocus, setIndexFocus] = useState8();
-  const [selectedRows, setSelectedRows] = useState8([]);
-  const [headerColumns, setHeaderColumns] = useState8([[]]);
-  const [contentColumns, setContentColumns] = useState8([]);
-  const [levelCol, setLevelCol] = useState8(0);
-  const [columnFistEdit, setColumnFistEdit] = useState8(0);
-  const [columnLastEdit, setColumnlastEdit] = useState8(0);
-  const [objWidthFix, setObjWidthFix] = useState8({});
-  const [openPopupSetupColumn, setOpenPopupSetupColumn] = useState8(false);
-  const [searchTerm, setSearchTerm] = useState8("");
+  const [refreshRow, setRefreshRow] = useState9(false);
+  const [indexFocus, setIndexFocus] = useState9();
+  const [selectedRows, setSelectedRows] = useState9([]);
+  const [headerColumns, setHeaderColumns] = useState9([[]]);
+  const [contentColumns, setContentColumns] = useState9([]);
+  const [levelCol, setLevelCol] = useState9(0);
+  const [columnFistEdit, setColumnFistEdit] = useState9(0);
+  const [columnLastEdit, setColumnlastEdit] = useState9(0);
+  const [objWidthFix, setObjWidthFix] = useState9({});
+  const [openPopupSetupColumn, setOpenPopupSetupColumn] = useState9(false);
+  const [searchTerm, setSearchTerm] = useState9("");
   const tableElement = useRef4(null);
   const gridRef = useRef4();
   let totalCount = dataSource.length;
@@ -3033,7 +3088,7 @@ var TableEdit = forwardRef4((props, ref) => {
     }
   };
   const searchTemplate = () => {
-    return /* @__PURE__ */ jsx16(Fragment20, { children: /* @__PURE__ */ jsx16("div", { className: "me-50 r-search", children: /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx18(Fragment21, { children: /* @__PURE__ */ jsx18("div", { className: "me-50 r-search", children: /* @__PURE__ */ jsx18(
       react_input_default,
       {
         style: { width: "230px" },
@@ -3054,59 +3109,45 @@ var TableEdit = forwardRef4((props, ref) => {
   const RenderEdit = (row, col, indexCol, indexRow) => {
     switch (col?.editTypeCondition ? col?.editTypeCondition(row) : col.editType) {
       case "date":
-        return /* @__PURE__ */ jsx16(
-          Input9,
+        return /* @__PURE__ */ jsx18(
+          input_date_default,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
-            style: { textAlign: col.textAlign, height: 29 },
-            value: row[col.field] ? formatDateTime(row[col.field], "yyyy-MM-dd") : row[col.field],
-            onChange: (val) => {
-              row[col.field] = val.target.value;
+            className: classnames9("form-control border-0 rounded-0 input-numeric", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            value: row[col.field],
+            onChange: (date) => {
+              row[col.field] = date;
               if (col.callback) {
-                col.callback(row, val.target.value, indexRow);
+                col.callback(date, indexRow);
               }
               handleDataChange(row, col, indexRow);
             },
-            className: classnames9("border-0 rounded-0 r-date-input", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
-            type: "date",
-            max: "9999-12-31",
+            dateFormat: "dd/MM/yyyy",
             onKeyDown: (e) => {
               if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
-              }
-            },
-            onPaste: (e) => {
-              if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable) {
-                pasteDataFromExcel(indexRow, indexCol, e);
-                e.preventDefault();
+                return true;
               }
             }
           }
         );
       case "datetime":
-        return /* @__PURE__ */ jsx16(
-          Input9,
+        return /* @__PURE__ */ jsx18(
+          input_date_default,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
-            style: { textAlign: col.textAlign, height: 29 },
-            value: row[col.field] ? formatDateTime(row[col.field], "yyyy-MM-dd HH:mm") : row[col.field],
-            onChange: (val) => {
-              row[col.field] = val.target.value;
+            className: classnames9("form-control border-0 rounded-0 input-numeric", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            value: row[col.field],
+            onChange: (date) => {
+              row[col.field] = date;
               if (col.callback) {
-                col.callback(val.target.value, indexRow);
+                col.callback(date, indexRow);
               }
               handleDataChange(row, col, indexRow);
             },
-            className: classnames9("border-0 rounded-0 r-date-input", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
-            type: "datetime-local",
-            max: "9999-12-31T23:59",
+            dateFormat: "dd/MM/yyyy HH:mm",
             onKeyDown: (e) => {
               if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
-              }
-            },
-            onPaste: (e) => {
-              if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable) {
-                pasteDataFromExcel(indexRow, indexCol, e);
-                e.preventDefault();
+                return true;
               }
             }
           }
@@ -3127,7 +3168,7 @@ var TableEdit = forwardRef4((props, ref) => {
             valueSelect = col.selectSettings?.defaultValue(row);
           }
         }
-        return /* @__PURE__ */ jsx16(
+        return /* @__PURE__ */ jsx18(
           SelectTable,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -3220,14 +3261,14 @@ var TableEdit = forwardRef4((props, ref) => {
         } else {
           valueSelectTree = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? findItemInTree(optionsSelectTree, row[col.field]) : "";
         }
-        return /* @__PURE__ */ jsx16(
+        return /* @__PURE__ */ jsx18(
           "div",
           {
             onKeyDown: (e) => {
               if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
               }
             },
-            children: /* @__PURE__ */ jsx16(
+            children: /* @__PURE__ */ jsx18(
               SelectTableTree,
               {
                 id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -3286,8 +3327,8 @@ var TableEdit = forwardRef4((props, ref) => {
           }
         );
       case "checkbox":
-        return /* @__PURE__ */ jsx16(
-          Input9,
+        return /* @__PURE__ */ jsx18(
+          Input8,
           {
             checked: row[col.field],
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -3316,8 +3357,8 @@ var TableEdit = forwardRef4((props, ref) => {
           decimalScale: col.numericSettings?.fraction ?? 0
         };
         let floatValue = parseFloat(row[col.field]);
-        return /* @__PURE__ */ jsx16(
-          NumericFormat,
+        return /* @__PURE__ */ jsx18(
+          NumericFormat2,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
@@ -3360,8 +3401,8 @@ var TableEdit = forwardRef4((props, ref) => {
           }
         );
       case "color":
-        return /* @__PURE__ */ jsx16("div", { style: { padding: "4px 8px" }, children: /* @__PURE__ */ jsx16(
-          Input9,
+        return /* @__PURE__ */ jsx18("div", { style: { padding: "4px 8px" }, children: /* @__PURE__ */ jsx18(
+          Input8,
           {
             type: "color",
             value: row[col.field],
@@ -3383,7 +3424,7 @@ var TableEdit = forwardRef4((props, ref) => {
           `col-${indexRow}-${indexCol}`
         ) });
       case "form":
-        return /* @__PURE__ */ jsx16(
+        return /* @__PURE__ */ jsx18(
           edit_form_default,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -3411,8 +3452,8 @@ var TableEdit = forwardRef4((props, ref) => {
           }
         );
       default:
-        return /* @__PURE__ */ jsx16(
-          Input9,
+        return /* @__PURE__ */ jsx18(
+          Input8,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
@@ -3832,7 +3873,7 @@ var TableEdit = forwardRef4((props, ref) => {
   }, [selectedItem]);
   const renderContentCol = (col, row, indexRow, indexCol, isSelected) => {
     if (col.field === "command") {
-      return col.visible !== false && /* @__PURE__ */ jsx16(
+      return col.visible !== false && /* @__PURE__ */ jsx18(
         "td",
         {
           className: classnames9(
@@ -3845,12 +3886,12 @@ var TableEdit = forwardRef4((props, ref) => {
             right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
             textAlign: col.textAlign ? col.textAlign : "left"
           },
-          children: /* @__PURE__ */ jsx16("div", { className: "r-rowcell-div command", children: /* @__PURE__ */ jsx16(command_default, { commandItems: col.commandItems ?? [], handleCommandClick, indexRow, rowData: row, setIndexFocus, indexFocus }) })
+          children: /* @__PURE__ */ jsx18("div", { className: "r-rowcell-div command", children: /* @__PURE__ */ jsx18(command_default, { commandItems: col.commandItems ?? [], handleCommandClick, indexRow, rowData: row, setIndexFocus, indexFocus }) })
         },
         `col-${indexRow}-${indexCol}`
       );
     } else if (col.field === "#") {
-      return col.visible !== false && /* @__PURE__ */ jsx16(
+      return col.visible !== false && /* @__PURE__ */ jsx18(
         "td",
         {
           className: classnames9(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
@@ -3897,12 +3938,12 @@ var TableEdit = forwardRef4((props, ref) => {
               e.stopPropagation();
             }
           },
-          children: /* @__PURE__ */ jsx16("div", { className: "r-rowcell-div", children: indexRow + 1 })
+          children: /* @__PURE__ */ jsx18("div", { className: "r-rowcell-div", children: indexRow + 1 })
         },
         `col-${indexRow}-${indexCol}`
       );
     } else if (col.field === "checkbox") {
-      return /* @__PURE__ */ jsx16(
+      return /* @__PURE__ */ jsx18(
         "td",
         {
           className: classnames9(
@@ -3915,7 +3956,7 @@ var TableEdit = forwardRef4((props, ref) => {
             right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
             textAlign: col.textAlign ? col.textAlign : "center"
           },
-          children: /* @__PURE__ */ jsx16(
+          children: /* @__PURE__ */ jsx18(
             "div",
             {
               className: "r-rowcell-div cursor-pointer",
@@ -3939,8 +3980,8 @@ var TableEdit = forwardRef4((props, ref) => {
                   e.stopPropagation();
                 }
               },
-              children: /* @__PURE__ */ jsx16(
-                Input9,
+              children: /* @__PURE__ */ jsx18(
+                Input8,
                 {
                   checked: isSelected,
                   type: "checkbox",
@@ -3966,7 +4007,7 @@ var TableEdit = forwardRef4((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__ */ jsx16(Fragment20, { children: col.visible !== false && /* @__PURE__ */ jsx16(
+      return /* @__PURE__ */ jsx18(Fragment21, { children: col.visible !== false && /* @__PURE__ */ jsx18(
         "td",
         {
           className: classnames9(
@@ -4006,11 +4047,11 @@ var TableEdit = forwardRef4((props, ref) => {
               e.stopPropagation();
             }
           },
-          children: /* @__PURE__ */ jsx16(
+          children: /* @__PURE__ */ jsx18(
             "div",
             {
               className: classnames9("r-rowcell-div"),
-              children: /* @__PURE__ */ jsxs15(
+              children: /* @__PURE__ */ jsxs16(
                 "div",
                 {
                   id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
@@ -4019,16 +4060,16 @@ var TableEdit = forwardRef4((props, ref) => {
                     margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2
                   },
                   children: [
-                    typeDis === 1 && !refreshRow ? RenderEdit(row, col, indexCol, indexRow) : /* @__PURE__ */ jsx16("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : col.editType === "numeric" && Number(row[col.field]) < 0 ? /* @__PURE__ */ jsxs15("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
+                    typeDis === 1 && !refreshRow ? RenderEdit(row, col, indexCol, indexRow) : /* @__PURE__ */ jsx18("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : col.editType === "numeric" && Number(row[col.field]) < 0 ? /* @__PURE__ */ jsxs16("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
                       " ",
                       `${formatSetting?.prefixNegative ?? "-"}${value}${formatSetting?.suffixNegative ?? ""}`
                     ] }) : 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) && /* @__PURE__ */ jsx16(UncontrolledTooltip5, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : col.editType === "numeric" && Number(row[col.field]) < 0 ? /* @__PURE__ */ jsxs15("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
+                    /* @__PURE__ */ jsx18("span", { id: `error-${indexRow}-${indexCol}`, className: classnames9("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: /* @__PURE__ */ jsx18(AlertCircle, { fontSize: 15.5 }) }),
+                    !(typeDis === 1 && !refreshRow) && /* @__PURE__ */ jsx18(UncontrolledTooltip5, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : col.editType === "numeric" && Number(row[col.field]) < 0 ? /* @__PURE__ */ jsxs16("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
                       " ",
                       `${formatSetting?.prefixNegative ?? "-"}${value}${formatSetting?.suffixNegative ?? ""}`
                     ] }) : value }),
-                    /* @__PURE__ */ jsx16(
+                    /* @__PURE__ */ jsx18(
                       UncontrolledTooltip5,
                       {
                         target: `error-${indexRow}-${indexCol}`,
@@ -4047,7 +4088,10 @@ var TableEdit = forwardRef4((props, ref) => {
     }
   };
   const renderFooterCol = (col, indexCol) => {
-    return /* @__PURE__ */ jsx16(Fragment20, { children: col.visible !== false && /* @__PURE__ */ jsx16(
+    const sumValue = col.haveSum === true && col.editType === "numeric" ? formartNumberic(dataSource.reduce(function(accumulator, currentValue) {
+      return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
+    }, 0), formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", col.numericSettings?.fraction, true) : 0;
+    return /* @__PURE__ */ jsx18(Fragment21, { children: col.visible !== false && /* @__PURE__ */ jsx18(
       "td",
       {
         className: classnames9(
@@ -4059,60 +4103,51 @@ var TableEdit = forwardRef4((props, ref) => {
           right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
           textAlign: col.textAlign ? col.textAlign : "left"
         },
-        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), formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", col.numericSettings?.fraction, true) : "" })
+        children: /* @__PURE__ */ jsxs16("div", { className: "r-footer-div", children: [
+          col.haveSum === true && col.editType === "numeric" && Number(sumValue) >= 0 && /* @__PURE__ */ jsx18(Fragment22, { children: sumValue }),
+          col.haveSum === true && col.editType === "numeric" && Number(sumValue) < 0 && /* @__PURE__ */ jsxs16("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
+            " ",
+            `${formatSetting?.prefixNegative ?? "-"}${sumValue}${formatSetting?.suffixNegative ?? ""}`
+          ] })
+        ] })
       }
     ) }, `summarycell-${indexCol}`);
   };
-  const renderToolbarTop = () => {
-    return /* @__PURE__ */ jsx16("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: /* @__PURE__ */ jsxs15("div", { className: "r-toolbar-items", children: [
-      /* @__PURE__ */ jsx16("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
-        return item.align === "left" ? /* @__PURE__ */ jsx16("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) : "";
-      }) }),
-      /* @__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__ */ 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__ */ jsx16("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: /* @__PURE__ */ jsxs15("div", { className: "r-toolbar-items", children: [
-      /* @__PURE__ */ jsxs15("div", { className: "r-toolbar-left", children: [
-        /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx16(Button6, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
-        (indexFocus ?? -1) > -1 ? /* @__PURE__ */ jsxs15(Fragment21, { children: [
-          /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx16(Button6, { color: "success", outline: true, onClick: () => {
+    return /* @__PURE__ */ jsx18("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__ */ jsxs16("div", { className: "r-toolbar-items", children: [
+      /* @__PURE__ */ jsxs16("div", { className: "r-toolbar-left", children: [
+        /* @__PURE__ */ jsx18("div", { className: classnames9("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx18(Button6, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
+        (indexFocus ?? -1) > -1 ? /* @__PURE__ */ jsxs16(Fragment22, { children: [
+          /* @__PURE__ */ jsx18("div", { className: classnames9("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx18(Button6, { color: "success", outline: true, onClick: () => {
             handleDuplicate(dataSource[indexFocus ?? -1], indexFocus ?? -1);
           }, className: "d-flex", children: t("Duplicate") }) }),
-          /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx16(Button6, { 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(Button6, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
-        ] }) : /* @__PURE__ */ jsx16(Fragment21, { children: " " }),
-        /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item", { "d-none": editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx16(Button6, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
+          /* @__PURE__ */ jsx18("div", { className: classnames9("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx18(Button6, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
+          /* @__PURE__ */ jsx18("div", { className: classnames9("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx18(Button6, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
+        ] }) : /* @__PURE__ */ jsx18(Fragment22, { children: " " }),
+        /* @__PURE__ */ jsx18("div", { className: classnames9("r-toolbar-item", { "d-none": editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx18(Button6, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
         toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
-          return item.align === "left" ? /* @__PURE__ */ jsx16("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : "";
+          return item.align === "left" ? /* @__PURE__ */ jsx18("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${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__ */ jsx18("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
+        return item.align === "center" ? /* @__PURE__ */ jsx18("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : "";
       }) }),
-      /* @__PURE__ */ jsxs15("div", { className: "r-toolbar-right", children: [
+      /* @__PURE__ */ jsxs16("div", { className: "r-toolbar-right", children: [
         toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
-          return item.align === "right" ? /* @__PURE__ */ jsx16("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : "";
+          return item.align === "right" ? /* @__PURE__ */ jsx18("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : "";
         }),
-        /* @__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(DropdownToggle4, { tag: "div", color: "primary", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx16(Info2, { className: "cursor-pointer text-primary" }) }),
-          /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx18("div", { className: classnames9("r-toolbar-item me-25", { "d-none": headerColumns.length > 1 }), "aria-disabled": "false", children: /* @__PURE__ */ jsx18(Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
+        /* @__PURE__ */ jsx18("div", { className: classnames9("r-toolbar-item me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsxs16(UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
+          /* @__PURE__ */ jsx18(DropdownToggle4, { tag: "div", color: "primary", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx18(Info2, { className: "cursor-pointer text-primary" }) }),
+          /* @__PURE__ */ jsx18(
             DropdownMenu4,
             {
               className: "formula-dropdown icon-dropdown",
-              children: /* @__PURE__ */ jsxs15("ul", { className: "mb-0 pe-50", children: [
-                /* @__PURE__ */ jsx16("li", { 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("li", { style: { fontSize: 13 }, children: "Ch\u1ECDn \xF4 v\xE0 Ctrl + V \u0111\u1EC3 d\xE1n th\xF4ng tin t\u1EEB excel" }),
-                /* @__PURE__ */ jsx16("li", { 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("li", { 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" })
+              children: /* @__PURE__ */ jsxs16("ul", { className: "mb-0 pe-50", children: [
+                /* @__PURE__ */ jsx18("li", { 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__ */ jsx18("li", { style: { fontSize: 13 }, children: "Ch\u1ECDn \xF4 v\xE0 Ctrl + V \u0111\u1EC3 d\xE1n th\xF4ng tin t\u1EEB excel" }),
+                /* @__PURE__ */ jsx18("li", { 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__ */ jsx18("li", { 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" })
               ] })
             }
           )
@@ -4143,7 +4178,7 @@ var TableEdit = forwardRef4((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__ */ jsx16(
+          return /* @__PURE__ */ jsx18(
             "tr",
             {
               className: classnames9("r-row", { "fisrt-row": countDisplay === 0 }),
@@ -4162,14 +4197,14 @@ var TableEdit = forwardRef4((props, ref) => {
       pagingSetting?.setCurrentPage(1);
     }
   }, [searchTerm, searchSetting?.searchTerm]);
-  return /* @__PURE__ */ jsxs15(Fragment20, { children: [
-    /* @__PURE__ */ jsxs15("div", { className: "react-table-edit", children: [
-      /* @__PURE__ */ jsxs15("div", { className: "r-grid", ref: gridRef, children: [
-        toolbarSetting?.showTopToolbar ? /* @__PURE__ */ jsx16(Fragment21, { children: renderToolbarTop() }) : /* @__PURE__ */ jsx16(Fragment21, {}),
-        /* @__PURE__ */ jsx16("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ jsxs15("table", { style: { width: "100%" }, children: [
-          /* @__PURE__ */ jsx16("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
-            return /* @__PURE__ */ jsx16("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
-              return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs16(Fragment21, { children: [
+    /* @__PURE__ */ jsxs16("div", { className: "react-table-edit", children: [
+      /* @__PURE__ */ jsxs16("div", { className: "r-grid", ref: gridRef, children: [
+        toolbarSetting?.showTopToolbar ? /* @__PURE__ */ jsx18(Fragment22, { children: toolbar_top_default(toolbarTopOption) }) : /* @__PURE__ */ jsx18(Fragment22, {}),
+        /* @__PURE__ */ jsx18("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ jsxs16("table", { style: { width: "100%" }, children: [
+          /* @__PURE__ */ jsx18("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
+            return /* @__PURE__ */ jsx18("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
+              return /* @__PURE__ */ jsx18(
                 header_default,
                 {
                   col,
@@ -4189,14 +4224,14 @@ var TableEdit = forwardRef4((props, ref) => {
               );
             }) }, `header-${-indexParent}`);
           }) }),
-          /* @__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) => {
+          /* @__PURE__ */ jsx18("tbody", { className: "r-gridcontent", children: renderData() }),
+          /* @__PURE__ */ jsx18("tfoot", { className: "r-gridfoot", children: haveSum == true ? /* @__PURE__ */ jsx18("tr", { className: "r-row", children: contentColumns.map((col, index) => {
             return renderFooterCol(col, index);
-          }) }) : /* @__PURE__ */ jsx16(Fragment21, {}) })
+          }) }) : /* @__PURE__ */ jsx18(Fragment22, {}) })
         ] }) }),
-        toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ jsx16(Fragment21, { children: renderToolbarBottom() }) : /* @__PURE__ */ jsx16(Fragment21, {})
+        toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ jsx18(Fragment22, { children: renderToolbarBottom() }) : /* @__PURE__ */ jsx18(Fragment22, {})
       ] }),
-      pagingSetting?.allowPaging ? /* @__PURE__ */ jsx16(
+      pagingSetting?.allowPaging ? /* @__PURE__ */ jsx18(
         PagingComponent,
         {
           onChangePage,
@@ -4206,9 +4241,9 @@ var TableEdit = forwardRef4((props, ref) => {
           totalItem: pagingClient ? totalCount : pagingSetting?.totalItem ?? 0,
           onChangePageSize
         }
-      ) : /* @__PURE__ */ jsx16(Fragment21, {})
+      ) : /* @__PURE__ */ jsx18(Fragment22, {})
     ] }),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx18(
       sidebar_setting_column_default,
       {
         handleSidebar: () => {
@@ -4226,10 +4261,10 @@ var table_default = TableEdit;
 // src/component/tab-menu/index.tsx
 import { ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight4 } from "becoxy-icons";
 import classNames6 from "classnames";
-import { Fragment as Fragment22, useEffect as useEffect10, useState as useState9 } from "react";
+import { Fragment as Fragment23, useEffect as useEffect10, useState as useState10 } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { DropdownItem as DropdownItem4, DropdownMenu as DropdownMenu5, DropdownToggle as DropdownToggle5, UncontrolledDropdown as UncontrolledDropdown2 } from "reactstrap";
-import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 var TabsMenuComponent = ({
   buttonWidth,
   tabParent,
@@ -4241,14 +4276,14 @@ var TabsMenuComponent = ({
   renderModal
 }) => {
   const navigate = useNavigate();
-  const [dataMenu, setDataMenu] = useState9([]);
-  const [openMenu, setOpenMenu] = useState9(false);
-  const [url, setUrl] = useState9("");
-  const [contentWidth, setContentWidth] = useState9(0);
-  const [componentWidth, setComponentWidth] = useState9(0);
-  const [scrollPosition, setScrollPosition] = useState9(0);
-  const [dataItem, setDataItem] = useState9([]);
-  const [openModal, setOpenModal] = useState9({});
+  const [dataMenu, setDataMenu] = useState10([]);
+  const [openMenu, setOpenMenu] = useState10(false);
+  const [url, setUrl] = useState10("");
+  const [contentWidth, setContentWidth] = useState10(0);
+  const [componentWidth, setComponentWidth] = useState10(0);
+  const [scrollPosition, setScrollPosition] = useState10(0);
+  const [dataItem, setDataItem] = useState10([]);
+  const [openModal, setOpenModal] = useState10({});
   const handleWindowResize = () => {
     const tabEle = document.getElementById(`tab-component-${resourceCode}`);
     const tabContent = document.getElementById(`content-component-${resourceCode}`);
@@ -4304,22 +4339,22 @@ var TabsMenuComponent = ({
   const handleModal = (name) => {
     setOpenModal((old) => ({ ...old, [name]: !(openModal[name] ?? false) }));
   };
-  return /* @__PURE__ */ jsxs16(Fragment22, { children: [
+  return /* @__PURE__ */ jsxs17(Fragment23, { children: [
     renderModal ? renderModal({ handleModal, windowSize, openModal, setDataItem, dataItem }) : "",
-    /* @__PURE__ */ jsxs16("div", { className: classNames6("tab-custom", { "tab-parent": tabParent }, { "tab-child": tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [
-      /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsxs17("div", { className: classNames6("tab-custom", { "tab-parent": tabParent }, { "tab-child": tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [
+      /* @__PURE__ */ jsx19(
         "div",
         {
           onClick: () => handleScroll(-200),
           className: classNames6("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
-          children: /* @__PURE__ */ jsx17(ChevronLeft3, {})
+          children: /* @__PURE__ */ jsx19(ChevronLeft3, {})
         }
       ),
-      /* @__PURE__ */ jsx17("div", { id: `tab-component-${resourceCode}`, className: "tab-component", children: /* @__PURE__ */ jsx17("div", { id: `content-component-${resourceCode}`, children: dataMenu.map((item) => {
+      /* @__PURE__ */ jsx19("div", { id: `tab-component-${resourceCode}`, className: "tab-component", children: /* @__PURE__ */ jsx19("div", { id: `content-component-${resourceCode}`, children: dataMenu.map((item) => {
         if (item?.resAttributes?.IS_MENU === "1") {
-          return /* @__PURE__ */ jsxs16(UncontrolledDropdown2, { className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: "down", style: { backgroundColor: openMenu ? "#e0e0e0" : "" }, children: [
-            /* @__PURE__ */ jsx17(DropdownToggle5, { color: "#00000", style: { border: "none", boxShadow: "none", margin: 0, padding: 0 }, className: "background-none", children: /* @__PURE__ */ jsx17("div", { children: item.name }) }),
-            /* @__PURE__ */ jsx17(DropdownMenu5, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => /* @__PURE__ */ jsx17(
+          return /* @__PURE__ */ jsxs17(UncontrolledDropdown2, { className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: "down", style: { backgroundColor: openMenu ? "#e0e0e0" : "" }, children: [
+            /* @__PURE__ */ jsx19(DropdownToggle5, { color: "#00000", style: { border: "none", boxShadow: "none", margin: 0, padding: 0 }, className: "background-none", children: /* @__PURE__ */ jsx19("div", { children: item.name }) }),
+            /* @__PURE__ */ jsx19(DropdownMenu5, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => /* @__PURE__ */ jsx19(
               DropdownItem4,
               {
                 style: { borderRadius: "5px", margin: "0 0.5rem", width: "95%" },
@@ -4336,7 +4371,7 @@ var TabsMenuComponent = ({
             )) })
           ] }, item.code);
         } else {
-          return /* @__PURE__ */ jsx17(
+          return /* @__PURE__ */ jsx19(
             Link,
             {
               to: item.url,
@@ -4347,12 +4382,12 @@ var TabsMenuComponent = ({
           );
         }
       }) }) }),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx19(
         "div",
         {
           onClick: () => handleScroll(200),
           className: classNames6("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
-          children: /* @__PURE__ */ jsx17(ChevronRight4, {})
+          children: /* @__PURE__ */ jsx19(ChevronRight4, {})
         }
       )
     ] })
@@ -4361,9 +4396,9 @@ var TabsMenuComponent = ({
 
 // src/component/input-style/index.tsx
 import { Bold, Droplet, Italic, Type, Underline } from "becoxy-icons";
-import { Button as Button7, Input as Input10 } from "reactstrap";
+import { Button as Button7, Input as Input9 } from "reactstrap";
 import classnames10 from "classnames";
-import { Fragment as Fragment23 } from "react";
+import { Fragment as Fragment24 } from "react";
 
 // src/component/input-style/fonts.ts
 var OptionFont = [
@@ -5222,7 +5257,7 @@ var OptionFont = [
 ];
 
 // src/component/input-style/index.tsx
-import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 var InputStyleComponent = (props) => {
   const {
     value,
@@ -5236,8 +5271,8 @@ var InputStyleComponent = (props) => {
     disabledItalic,
     disabledUnderline
   } = props;
-  return /* @__PURE__ */ jsx18(Fragment23, { children: /* @__PURE__ */ jsxs17("div", { className: "d-flex align-items-center", children: [
-    /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx20(Fragment24, { children: /* @__PURE__ */ jsxs18("div", { className: "d-flex align-items-center", children: [
+    /* @__PURE__ */ jsx20(
       SelectTable,
       {
         options: OptionFont,
@@ -5253,12 +5288,12 @@ var InputStyleComponent = (props) => {
             field: "label",
             headerText: "",
             template: (row) => {
-              return /* @__PURE__ */ jsx18("div", { style: { fontFamily: row.label }, children: row.label });
+              return /* @__PURE__ */ jsx20("div", { style: { fontFamily: row.label }, children: row.label });
             }
           }
         ],
         formatOptionLabel: (props2) => {
-          return /* @__PURE__ */ jsx18("p", { style: {
+          return /* @__PURE__ */ jsx20("p", { style: {
             paddingLeft: 3,
             borderRadius: 2,
             fontFamily: value.fontFamily,
@@ -5271,7 +5306,7 @@ var InputStyleComponent = (props) => {
         }
       }
     ),
-    /* @__PURE__ */ jsx18("div", { className: classnames10("ms-25", { "d-none": disabledFontSize }), style: { width: 60 }, children: /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx20("div", { className: classnames10("ms-25", { "d-none": disabledFontSize }), style: { width: 60 }, children: /* @__PURE__ */ jsx20(
       SelectTable,
       {
         options: Array.from({ length: 100 }, (_, i) => ({ value: i + 1, label: i + 1 })),
@@ -5283,7 +5318,7 @@ var InputStyleComponent = (props) => {
         }
       }
     ) }),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx20(
       "div",
       {
         className: classnames10("btn-input-style", { "active-custom": value.bold }, { "d-none": disabledBold }),
@@ -5292,10 +5327,10 @@ var InputStyleComponent = (props) => {
             onChange({ ...value, bold: !value.bold });
           }
         },
-        children: /* @__PURE__ */ jsx18(Bold, { fontSize: 18 })
+        children: /* @__PURE__ */ jsx20(Bold, { fontSize: 18 })
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx20(
       "div",
       {
         className: classnames10("btn-input-style", { "active-custom": value.italic }, { "d-none": disabledItalic }),
@@ -5304,10 +5339,10 @@ var InputStyleComponent = (props) => {
             onChange({ ...value, italic: !value.italic });
           }
         },
-        children: /* @__PURE__ */ jsx18(Italic, { fontSize: 18 })
+        children: /* @__PURE__ */ jsx20(Italic, { fontSize: 18 })
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx20(
       "div",
       {
         className: classnames10("btn-input-style", { "active-custom": value.underline }, { "d-none": disabledUnderline }),
@@ -5316,12 +5351,12 @@ var InputStyleComponent = (props) => {
             onChange({ ...value, underline: !value.underline });
           }
         },
-        children: /* @__PURE__ */ jsx18(Underline, { fontSize: 18 })
+        children: /* @__PURE__ */ jsx20(Underline, { fontSize: 18 })
       }
     ),
-    /* @__PURE__ */ jsxs17(Button7, { tag: "label", color: "none", className: classnames10("btn-input-style", { "d-none": disabledColor }), children: [
-      /* @__PURE__ */ jsx18(Type, { stroke: value.color ?? "#000000", fontSize: 18 }),
-      /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsxs18(Button7, { tag: "label", color: "none", className: classnames10("btn-input-style", { "d-none": disabledColor }), children: [
+      /* @__PURE__ */ jsx20(Type, { stroke: value.color ?? "#000000", fontSize: 18 }),
+      /* @__PURE__ */ jsx20(
         "input",
         {
           type: "color",
@@ -5335,10 +5370,10 @@ var InputStyleComponent = (props) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs17(Button7, { tag: "label", color: "none", className: classnames10("btn-input-style", { "d-none": disabledBackgroundColor }), children: [
-      /* @__PURE__ */ jsx18(Droplet, { fill: value.backgroundColor ?? "#ffffff", fontSize: 18 }),
-      /* @__PURE__ */ jsx18(
-        Input10,
+    /* @__PURE__ */ jsxs18(Button7, { tag: "label", color: "none", className: classnames10("btn-input-style", { "d-none": disabledBackgroundColor }), children: [
+      /* @__PURE__ */ jsx20(Droplet, { fill: value.backgroundColor ?? "#ffffff", fontSize: 18 }),
+      /* @__PURE__ */ jsx20(
+        Input9,
         {
           id: "backgroundColor",
           type: "color",