react-table-edit 0.5.2 → 0.5.4

package/dist/index.mjs

@@ -1,10 +1,9 @@
 // test-app/src/component/table/index.tsx
-import { Fragment as Fragment12, forwardRef as forwardRef2, useEffect as useEffect6, useImperativeHandle, useRef as useRef2, useState as useState5 } from "react";
-import { Button as Button3, DropdownMenu as DropdownMenu2, DropdownToggle as DropdownToggle2, Input as Input6, UncontrolledDropdown } from "reactstrap";
+import { Fragment as Fragment13, forwardRef as forwardRef2, useEffect as useEffect7, useImperativeHandle, useRef as useRef2, useState as useState6 } from "react";
+import { Button as Button3, DropdownMenu as DropdownMenu2, DropdownToggle as DropdownToggle2, Input as Input6, UncontrolledDropdown, UncontrolledTooltip } from "reactstrap";
 import classnames6 from "classnames";
-import { useTranslation as useTranslation8 } from "react-i18next";
-import Select2 from "react-select";
-import { PagerComponent } from "@syncfusion/ej2-react-grids";
+import { useTranslation as useTranslation9 } from "react-i18next";
+import Select3 from "react-select";
 import AsyncSelect from "react-select/async";
 import { AlertCircle, Info as Info2, Settings } from "becoxy-icons";
 
@@ -295,7 +294,6 @@ var icon_default = IconCustom;
 
 // test-app/src/component/table/index.tsx
 import moment from "moment";
-import { DropDownTreeComponent } from "@syncfusion/ej2-react-dropdowns";
 
 // test-app/src/component/edit-form/index.tsx
 import { forwardRef, useEffect as useEffect3, useRef, useState as useState2 } from "react";
@@ -1441,10 +1439,70 @@ var SidebarSetColumn = (props) => {
 var sidebar_setting_column_default = SidebarSetColumn;
 
 // test-app/src/component/table/index.tsx
-import { TooltipComponent } from "@syncfusion/ej2-react-popups";
-import { Fragment as Fragment13, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
-var TableEdit = forwardRef2((props, ref) => {
+import { DropDownTreeComponent } from "@syncfusion/ej2-react-dropdowns";
+
+// test-app/src/component/paging/index.tsx
+import { ChevronRight as ChevronRight2, ChevronLeft as ChevronLeft2, ChevronsLeft, ChevronsRight } from "becoxy-icons";
+import classNames5 from "classnames";
+import { Fragment as Fragment12, useEffect as useEffect6, useState as useState5 } from "react";
+import { useTranslation as useTranslation8 } from "react-i18next";
+import Select2 from "react-select";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOptions, onChangePageSize }) => {
   const { t } = useTranslation8();
+  const [countPage, setCountPage] = useState5(0);
+  useEffect6(() => {
+    const count = Math.floor(totalItem / pageSize) + (Math.floor(totalItem / pageSize) === totalItem / pageSize ? 0 : 1);
+    setCountPage(count);
+  }, [totalItem, pageSize]);
+  const renderPageNumber = () => {
+    const arr = [];
+    for (let index = 1; index <= Math.floor(totalItem / pageSize) + (Math.floor(totalItem / pageSize) === totalItem / pageSize ? 0 : 1); index++) {
+      arr.push(
+        /* @__PURE__ */ jsx12(
+          "div",
+          {
+            className: classNames5("r-number", { "r-active": index === currentPage }),
+            onClick: () => {
+              onChangePage({ totalItem, pageSize, currentPage: index, old: currentPage });
+            },
+            children: index
+          }
+        )
+      );
+    }
+    return arr;
+  };
+  return /* @__PURE__ */ jsx12(Fragment12, { children: /* @__PURE__ */ jsxs11("div", { className: "r-pager", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "r-pagercontainer", children: [
+      /* @__PURE__ */ jsx12("button", { className: "r-button", type: "button", disabled: countPage === 1 || currentPage === 1, onClick: () => onChangePage({ totalItem, pageSize, currentPage: 1, old: currentPage }), children: /* @__PURE__ */ jsx12(ChevronsLeft, { fontSize: 16 }) }),
+      /* @__PURE__ */ jsx12("button", { className: "r-button", type: "button", disabled: countPage === 1 || currentPage === 1, onClick: () => onChangePage({ totalItem, pageSize, currentPage: currentPage - 1, old: currentPage }), children: /* @__PURE__ */ jsx12(ChevronLeft2, { fontSize: 16 }) }),
+      renderPageNumber(),
+      /* @__PURE__ */ jsx12("button", { className: "r-button", type: "button", disabled: countPage === 1 || countPage === currentPage, onClick: () => onChangePage({ totalItem, pageSize, currentPage: currentPage + 1, old: currentPage }), children: /* @__PURE__ */ jsx12(ChevronRight2, { fontSize: 16 }) }),
+      /* @__PURE__ */ jsx12("button", { className: "r-button", type: "button", disabled: countPage === 1 || countPage === currentPage, onClick: () => onChangePage({ totalItem, pageSize, currentPage: Math.floor(totalItem / pageSize) + (Math.floor(totalItem / pageSize) === totalItem / pageSize ? 0 : 1), old: currentPage }), children: /* @__PURE__ */ jsx12(ChevronsRight, { fontSize: 16 }) }),
+      /* @__PURE__ */ jsx12("div", { className: "r-pagesize", children: /* @__PURE__ */ jsx12(
+        Select2,
+        {
+          value: { value: pageSize, label: pageSize },
+          options: pageOptions.map((item) => ({ value: item, label: item })),
+          onChange: (val) => {
+            onChangePageSize({ totalItem, pageSize: val?.value });
+          },
+          menuPosition: "fixed",
+          placeholder: t("Select"),
+          classNamePrefix: "select-pagesize"
+        }
+      ) }),
+      /* @__PURE__ */ jsx12("span", { style: { display: "inline", marginLeft: 10, fontSize: 13 }, children: t("pagerDropDown") })
+    ] }),
+    /* @__PURE__ */ jsx12("div", { className: "r-parentmsgbar", children: t("totalItemsInfo", { page: currentPage, countPage, totalItem }) })
+  ] }) });
+};
+
+// test-app/src/component/table/index.tsx
+import { Fragment as Fragment14, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+var TableEdit = forwardRef2((props, ref) => {
+  const { t } = useTranslation9();
   const {
     idTable,
     dataSource,
@@ -1477,33 +1535,31 @@ var TableEdit = forwardRef2((props, ref) => {
       refeshFocusRow: handleRefeshRow
     };
   });
-  const [refreshRow, setRefreshRow] = useState5(false);
-  const [indexFocus, setIndexFocus] = useState5();
-  const [selectedRows, setSelectedRows] = useState5([]);
-  const [headerColumns, setHeaderColumns] = useState5([[]]);
-  const [contentColumns, setContentColumns] = useState5([]);
-  const [levelCol, setLevelCol] = useState5(0);
-  const [columnFistEdit, setColumnFistEdit] = useState5(0);
-  const [columnLastEdit, setColumnlastEdit] = useState5(0);
-  const [objWidthFix, setObjWidthFix] = useState5({});
-  const [openPopupTree, setOpenPopupTree] = useState5(false);
-  const [openPopupSetupColumn, setOpenPopupSetupColumn] = useState5(false);
-  const [searchTerm, setSearchTerm] = useState5("");
+  const [refreshRow, setRefreshRow] = useState6(false);
+  const [indexFocus, setIndexFocus] = useState6();
+  const [selectedRows, setSelectedRows] = useState6([]);
+  const [headerColumns, setHeaderColumns] = useState6([[]]);
+  const [contentColumns, setContentColumns] = useState6([]);
+  const [levelCol, setLevelCol] = useState6(0);
+  const [columnFistEdit, setColumnFistEdit] = useState6(0);
+  const [columnLastEdit, setColumnlastEdit] = useState6(0);
+  const [objWidthFix, setObjWidthFix] = useState6({});
+  const [openPopupTree, setOpenPopupTree] = useState6(false);
+  const [openPopupSetupColumn, setOpenPopupSetupColumn] = useState6(false);
+  const [searchTerm, setSearchTerm] = useState6("");
   const tableElement = useRef2(null);
   const gridRef = useRef2();
-  const lag = window.localStorage.getItem("i18nextLng");
-  const lang = lag ? lag : "vi";
   let totalCount = dataSource.length;
   const pagingClient = pagingSetting?.allowPaging && (pagingSetting?.pagingClient || !(editDisable || addDisable));
   const searchClient = searchSetting?.searchEnable && (searchSetting?.searchClient || !(editDisable || addDisable));
   const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? "id";
   const fieldUniKey = columns.filter((item) => item.isUnikey === true)?.map((item) => item.field);
-  useEffect6(() => {
+  useEffect7(() => {
     if (pagingClient && pagingSetting.setCurrentPage && Math.ceil(totalCount / (pagingSetting?.pageSize ?? 1)) < (pagingSetting.currentPage ?? 1)) {
       pagingSetting.setCurrentPage(1);
     }
   }, [dataSource]);
-  useEffect6(() => {
+  useEffect7(() => {
     let indexFirst = -1;
     let indexlast = -1;
     let letfWidthFix = 0;
@@ -1536,7 +1592,7 @@ var TableEdit = forwardRef2((props, ref) => {
     setColumnFistEdit(indexFirst + 1);
     setColumnlastEdit(indexlast + 1);
   }, [contentColumns]);
-  useEffect6(() => {
+  useEffect7(() => {
     const arrHeaderColumns = [];
     const arrContentColumns = [];
     let headerLevelRow = 0;
@@ -1553,7 +1609,7 @@ var TableEdit = forwardRef2((props, ref) => {
     setHeaderColumns(arrHeaderColumns);
     setContentColumns(arrContentColumns);
   }, [columns]);
-  useEffect6(() => {
+  useEffect7(() => {
     const arrHeaderColumns = [];
     const arrContentColumns = [];
     let headerLevelRow = 0;
@@ -1664,7 +1720,7 @@ var TableEdit = forwardRef2((props, ref) => {
     }
   };
   const searchTemplate = () => {
-    return /* @__PURE__ */ jsx12(Fragment12, { children: /* @__PURE__ */ jsx12("div", { className: "me-50 r-search", children: /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(Fragment13, { children: /* @__PURE__ */ jsx13("div", { className: "me-50 r-search", children: /* @__PURE__ */ jsx13(
       react_input_default,
       {
         style: { width: "230px" },
@@ -1685,7 +1741,7 @@ var TableEdit = forwardRef2((props, ref) => {
   const renderEdit = (row, col, indexRow, indexCol) => {
     switch (col?.editTypeCondition ? col?.editTypeCondition(row) : col.editType) {
       case "date":
-        return /* @__PURE__ */ jsx12(
+        return /* @__PURE__ */ jsx13(
           Input6,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -1708,7 +1764,7 @@ var TableEdit = forwardRef2((props, ref) => {
           }
         );
       case "datetime":
-        return /* @__PURE__ */ jsx12(
+        return /* @__PURE__ */ jsx13(
           Input6,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -1741,8 +1797,8 @@ var TableEdit = forwardRef2((props, ref) => {
         if (!valueAsyncSelect && col.selectSettings?.defaultValue) {
           valueAsyncSelect = col.selectSettings?.defaultValue(row);
         }
-        return /* @__PURE__ */ jsxs11("div", { className: classnames6("d-flex select-group", { "is-invalid": col.validate && col.validate(row[col.field], row) }), children: [
-          /* @__PURE__ */ jsx12(
+        return /* @__PURE__ */ jsxs12("div", { className: classnames6("d-flex select-group", { "is-invalid": col.validate && col.validate(row[col.field], row) }), children: [
+          /* @__PURE__ */ jsx13(
             AsyncSelect,
             {
               menuPosition: "fixed",
@@ -1768,7 +1824,7 @@ var TableEdit = forwardRef2((props, ref) => {
               }
             }
           ),
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13(
             "span",
             {
               onClick: () => {
@@ -1777,7 +1833,7 @@ var TableEdit = forwardRef2((props, ref) => {
                 }
               },
               className: classnames6("input-group-text", { "d-none": !col.selectSettings?.iconGroup }),
-              children: /* @__PURE__ */ jsx12(icon_default, { iconName: col.selectSettings?.iconGroup ?? "", size: 16 })
+              children: /* @__PURE__ */ jsx13(icon_default, { iconName: col.selectSettings?.iconGroup ?? "", size: 16 })
             }
           )
         ] });
@@ -1794,8 +1850,8 @@ var TableEdit = forwardRef2((props, ref) => {
         } else {
           valueSelect = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? options?.find((val) => val[col.selectSettings?.fieldValue ?? "value"] === row[col.field]) : "";
         }
-        return /* @__PURE__ */ jsx12(
-          Select2,
+        return /* @__PURE__ */ jsx13(
+          Select3,
           {
             menuPosition: "fixed",
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -1835,14 +1891,14 @@ var TableEdit = forwardRef2((props, ref) => {
             }
           }
         };
-        return /* @__PURE__ */ jsx12(
+        return /* @__PURE__ */ jsx13(
           "div",
           {
             onKeyDown: (e) => {
               if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
               }
             },
-            children: /* @__PURE__ */ jsx12(
+            children: /* @__PURE__ */ jsx13(
               DropDownTreeComponent,
               {
                 id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -1881,7 +1937,7 @@ var TableEdit = forwardRef2((props, ref) => {
           }
         );
       case "checkbox":
-        return /* @__PURE__ */ jsx12(
+        return /* @__PURE__ */ jsx13(
           Input6,
           {
             checked: row[col.field],
@@ -1904,7 +1960,7 @@ var TableEdit = forwardRef2((props, ref) => {
         );
       case "numeric":
         let valueCurrency = row[col.field];
-        return /* @__PURE__ */ jsx12(
+        return /* @__PURE__ */ jsx13(
           Input6,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -1994,7 +2050,7 @@ var TableEdit = forwardRef2((props, ref) => {
           }
         );
       case "color":
-        return /* @__PURE__ */ jsx12("div", { style: { padding: "4px 8px" }, children: /* @__PURE__ */ jsx12(
+        return /* @__PURE__ */ jsx13("div", { style: { padding: "4px 8px" }, children: /* @__PURE__ */ jsx13(
           Input6,
           {
             type: "color",
@@ -2017,7 +2073,7 @@ var TableEdit = forwardRef2((props, ref) => {
           `col-${indexRow}-${indexCol}`
         ) });
       case "form":
-        return /* @__PURE__ */ jsx12(
+        return /* @__PURE__ */ jsx13(
           edit_form_default,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -2039,7 +2095,7 @@ var TableEdit = forwardRef2((props, ref) => {
           }
         );
       default:
-        return /* @__PURE__ */ jsx12(
+        return /* @__PURE__ */ jsx13(
           Input6,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -2083,10 +2139,11 @@ var TableEdit = forwardRef2((props, ref) => {
     }
   };
   const renderCommand = (commandItems, rowData, i) => {
-    return /* @__PURE__ */ jsx12(Fragment12, { children: /* @__PURE__ */ jsx12("div", { className: "d-flex align-items-center", style: { columnGap: 10 }, children: commandItems.map((item, index) => {
-      return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(Fragment13, { children: /* @__PURE__ */ jsx13("div", { className: "d-flex align-items-center", style: { columnGap: 10 }, children: commandItems.map((item, index) => {
+      return /* @__PURE__ */ jsxs12(
         Button3,
         {
+          id: `command-item-${i}`,
           tabIndex: -1,
           style: { padding: "5px", minWidth: 45, height: "100%" },
           className: classnames6("command-item", {
@@ -2100,7 +2157,10 @@ var TableEdit = forwardRef2((props, ref) => {
             }
             e.preventDefault();
           },
-          children: /* @__PURE__ */ jsx12(TooltipComponent, { content: t(item.tooltip ?? ""), children: item.icon && /* @__PURE__ */ jsx12(icon_default, { iconName: item.icon, size: 16 }) })
+          children: [
+            item.icon && /* @__PURE__ */ jsx13(icon_default, { iconName: item.icon, size: 16 }),
+            /* @__PURE__ */ jsx13(UncontrolledTooltip, { className: "r-tooltip", target: `command-item-${i}`, place: "top", children: t(item.tooltip ?? "") })
+          ]
         },
         `command-${index}`
       );
@@ -2224,13 +2284,14 @@ var TableEdit = forwardRef2((props, ref) => {
   };
   const onChangePage = (args) => {
     if (pagingSetting?.setCurrentPage) {
-      if (args.newProp.currentPage === args.oldProp.currentPage) {
+      if (args.currentPage === args.oldPage) {
         return;
       }
       pagingSetting.setCurrentPage(args.currentPage);
     }
   };
   const onChangePageSize = (args) => {
+    console.log(args.pageSize);
     if (pagingSetting?.allowPaging) {
       if (pagingSetting?.pageSize !== args.pageSize) {
         if (pagingSetting?.setPageSize) {
@@ -2355,7 +2416,7 @@ var TableEdit = forwardRef2((props, ref) => {
       }
     }
   };
-  useEffect6(() => {
+  useEffect7(() => {
     setIndexFocus(-1);
     if (setSelectedItem) {
       if (isMulti) {
@@ -2382,7 +2443,7 @@ var TableEdit = forwardRef2((props, ref) => {
       }
     }
   }, [selectedRows]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!isMulti) {
       if (dataSource && selectedItem && selectedItem[fieldKey]) {
         if (selectedRows?.length === 0 || selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
@@ -2399,7 +2460,7 @@ var TableEdit = forwardRef2((props, ref) => {
   }, [selectedItem]);
   const renderContentCol = (col, row, indexRow, indexCol, isSelected) => {
     if (col.field === "command") {
-      return col.visible !== false && /* @__PURE__ */ jsx12(
+      return col.visible !== false && /* @__PURE__ */ jsx13(
         "td",
         {
           className: classnames6(
@@ -2412,12 +2473,12 @@ var TableEdit = forwardRef2((props, ref) => {
             right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
             textAlign: col.textAlign ? col.textAlign : "left"
           },
-          children: /* @__PURE__ */ jsx12("div", { className: "r-rowcell-div ", children: renderCommand(col.commandItems, row, indexRow) })
+          children: /* @__PURE__ */ jsx13("div", { className: "r-rowcell-div ", children: renderCommand(col.commandItems, row, indexRow) })
         },
         `col-${indexRow}-${indexCol}`
       );
     } else if (col.field === "#") {
-      return col.visible !== false && /* @__PURE__ */ jsx12(
+      return col.visible !== false && /* @__PURE__ */ jsx13(
         "td",
         {
           className: classnames6(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
@@ -2464,12 +2525,12 @@ var TableEdit = forwardRef2((props, ref) => {
               e.stopPropagation();
             }
           },
-          children: /* @__PURE__ */ jsx12("div", { className: "r-rowcell-div pt-50", children: indexRow + 1 })
+          children: /* @__PURE__ */ jsx13("div", { className: "r-rowcell-div pt-50", children: indexRow + 1 })
         },
         `col-${indexRow}-${indexCol}`
       );
     } else if (col.field === "checkbox") {
-      return /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsx13(
         "td",
         {
           className: classnames6(
@@ -2482,7 +2543,7 @@ var TableEdit = forwardRef2((props, ref) => {
             right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
             textAlign: col.textAlign ? col.textAlign : "center"
           },
-          children: /* @__PURE__ */ jsx12(
+          children: /* @__PURE__ */ jsx13(
             "div",
             {
               className: "r-rowcell-div cursor-pointer",
@@ -2506,7 +2567,7 @@ var TableEdit = forwardRef2((props, ref) => {
                   e.stopPropagation();
                 }
               },
-              children: /* @__PURE__ */ jsx12(
+              children: /* @__PURE__ */ jsx13(
                 Input6,
                 {
                   checked: isSelected,
@@ -2533,7 +2594,7 @@ var TableEdit = forwardRef2((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__ */ jsx12(Fragment12, { children: col.visible !== false && /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsx13(Fragment13, { children: col.visible !== false && /* @__PURE__ */ jsx13(
         "td",
         {
           className: classnames6(
@@ -2578,14 +2639,14 @@ var TableEdit = forwardRef2((props, ref) => {
               e.stopPropagation();
             }
           },
-          children: /* @__PURE__ */ jsx12(
+          children: /* @__PURE__ */ jsx13(
             "div",
             {
               className: classnames6("r-rowcell-div"),
               style: {
                 width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width
               },
-              children: /* @__PURE__ */ jsxs11(
+              children: /* @__PURE__ */ jsxs12(
                 "div",
                 {
                   id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
@@ -2595,19 +2656,17 @@ var TableEdit = forwardRef2((props, ref) => {
                     color: col.editType === "numeric" && Number(row[col.field]) < 0 ? "red" : ""
                   },
                   children: [
-                    typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : !col.haveToolTip ? /* @__PURE__ */ jsx12("div", { className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }) : /* @__PURE__ */ jsx12(
-                      TooltipComponent,
+                    typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : /* @__PURE__ */ jsx13("div", { id: `content-${indexRow}-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }),
+                    /* @__PURE__ */ jsx13("span", { id: `error-${indexRow}-${indexCol}`, className: classnames6("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: /* @__PURE__ */ jsx13(AlertCircle, { fontSize: 15.5 }) }),
+                    !(typeDis === 1 && !refreshRow) && col.haveToolTip && /* @__PURE__ */ jsx13(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${indexRow}-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : value }),
+                    /* @__PURE__ */ jsx13(
+                      UncontrolledTooltip,
                       {
-                        content: typeDis === 2 ? col.template(row, indexRow)?.toString() : value,
-                        className: "r-cell-text",
-                        style: {
-                          display: "block",
-                          maxWidth: (col.editType ?? "text") === "text" ? col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto" : "auto"
-                        },
-                        children: typeDis === 2 ? col.template(row, indexRow) : value
+                        target: `error-${indexRow}-${indexCol}`,
+                        className: "r-tooltip tooltip-error",
+                        children: errorMessage?.toString() ?? ""
                       }
-                    ),
-                    /* @__PURE__ */ jsx12("span", { className: "icon-table", children: /* @__PURE__ */ jsx12(TooltipComponent, { className: classnames6("cursor-pointer text-primary", { "d-none": !errorMessage }), content: errorMessage?.toString() ?? "", children: /* @__PURE__ */ jsx12(AlertCircle, { fontSize: 15.5 }) }) })
+                    )
                   ]
                 }
               )
@@ -2620,7 +2679,7 @@ var TableEdit = forwardRef2((props, ref) => {
   };
   const renderHeaderCol = (col, indexCol, indexParent) => {
     if (col.field === "checkbox") {
-      return /* @__PURE__ */ jsx12(Fragment12, { children: col.visible !== false && /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsx13(Fragment13, { children: col.visible !== false && /* @__PURE__ */ jsx13(
         "th",
         {
           rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
@@ -2637,12 +2696,12 @@ var TableEdit = forwardRef2((props, ref) => {
             minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
             maxWidth: col.maxWidth
           },
-          children: /* @__PURE__ */ jsx12(
+          children: /* @__PURE__ */ jsx13(
             "div",
             {
               style: { justifyContent: col.textAlign ?? "left" },
               className: classnames6("r-headercell-div"),
-              children: /* @__PURE__ */ jsx12(
+              children: /* @__PURE__ */ jsx13(
                 Input6,
                 {
                   checked: totalCount > 0 && selectedRows?.length >= totalCount,
@@ -2667,10 +2726,10 @@ var TableEdit = forwardRef2((props, ref) => {
         }
       ) }, `header-${indexCol}`);
     } else if (col.field === "#") {
-      return /* @__PURE__ */ jsx12(
-        Fragment12,
+      return /* @__PURE__ */ jsx13(
+        Fragment13,
         {
-          children: col.visible !== false && /* @__PURE__ */ jsx12(
+          children: col.visible !== false && /* @__PURE__ */ jsx13(
             "th",
             {
               rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
@@ -2687,7 +2746,7 @@ var TableEdit = forwardRef2((props, ref) => {
                 left: col.fixedType === "left" ? objWidthFix[col.index ?? 0] : void 0,
                 right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0
               },
-              children: /* @__PURE__ */ jsx12(
+              children: /* @__PURE__ */ jsx13(
                 "div",
                 {
                   title: t(col.headerText ?? ""),
@@ -2702,10 +2761,10 @@ var TableEdit = forwardRef2((props, ref) => {
         `header-${indexCol}`
       );
     } else {
-      return /* @__PURE__ */ jsx12(
-        Fragment12,
+      return /* @__PURE__ */ jsx13(
+        Fragment13,
         {
-          children: col.visible !== false && /* @__PURE__ */ jsx12(
+          children: col.visible !== false && /* @__PURE__ */ jsx13(
             "th",
             {
               rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
@@ -2722,7 +2781,7 @@ var TableEdit = forwardRef2((props, ref) => {
                 right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0,
                 maxWidth: col.maxWidth
               },
-              children: /* @__PURE__ */ jsx12(
+              children: /* @__PURE__ */ jsx13(
                 "div",
                 {
                   role: "textbox",
@@ -2740,7 +2799,7 @@ var TableEdit = forwardRef2((props, ref) => {
     }
   };
   const renderFooterCol = (col, indexCol) => {
-    return /* @__PURE__ */ jsx12(Fragment12, { children: col.visible !== false && /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(Fragment13, { children: col.visible !== false && /* @__PURE__ */ jsx13(
       "td",
       {
         className: classnames6(
@@ -2755,56 +2814,56 @@ var TableEdit = forwardRef2((props, ref) => {
           maxWidth: col.maxWidth,
           textAlign: col.textAlign ? col.textAlign : "left"
         },
-        children: /* @__PURE__ */ jsx12("div", { className: "r-footer-div", children: col.haveSum === true && col.editType === "numeric" ? formartNumberic(dataSource.reduce(function(accumulator, currentValue) {
+        children: /* @__PURE__ */ jsx13("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__ */ jsx12("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: /* @__PURE__ */ jsxs11("div", { className: "r-toolbar-items", children: [
-      /* @__PURE__ */ jsx12("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
-        return item.align === "left" ? /* @__PURE__ */ jsx12("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) : "";
+    return /* @__PURE__ */ jsx13("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: /* @__PURE__ */ jsxs12("div", { className: "r-toolbar-items", children: [
+      /* @__PURE__ */ jsx13("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
+        return item.align === "left" ? /* @__PURE__ */ jsx13("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) : "";
       }) }),
-      /* @__PURE__ */ jsx12("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
-        return item.align === "center" ? /* @__PURE__ */ jsx12("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-center-${index}`) : "";
+      /* @__PURE__ */ jsx13("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
+        return item.align === "center" ? /* @__PURE__ */ jsx13("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-center-${index}`) : "";
       }) }),
-      /* @__PURE__ */ jsx12("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
-        return item.align === "right" ? /* @__PURE__ */ jsx12("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) : "";
+      /* @__PURE__ */ jsx13("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
+        return item.align === "right" ? /* @__PURE__ */ jsx13("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) : "";
       }) })
     ] }) });
   };
   const renderToolbarBottom = () => {
-    return /* @__PURE__ */ jsx12("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: /* @__PURE__ */ jsxs11("div", { className: "r-toolbar-items", children: [
-      /* @__PURE__ */ jsxs11("div", { className: "r-toolbar-left", children: [
-        /* @__PURE__ */ jsx12("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
-        (indexFocus ?? -1) > -1 ? /* @__PURE__ */ jsxs11(Fragment13, { children: [
-          /* @__PURE__ */ jsx12("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: () => {
+    return /* @__PURE__ */ jsx13("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__ */ jsxs12("div", { className: "r-toolbar-items", children: [
+      /* @__PURE__ */ jsxs12("div", { className: "r-toolbar-left", children: [
+        /* @__PURE__ */ jsx13("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx13(Button3, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
+        (indexFocus ?? -1) > -1 ? /* @__PURE__ */ jsxs12(Fragment14, { children: [
+          /* @__PURE__ */ jsx13("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx13(Button3, { color: "success", outline: true, onClick: () => {
             handleDuplicate(dataSource[indexFocus ?? -1], indexFocus ?? -1);
           }, className: "d-flex", children: t("Duplicate") }) }),
-          /* @__PURE__ */ jsx12("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
-          /* @__PURE__ */ jsx12("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
-        ] }) : /* @__PURE__ */ jsx12(Fragment13, { children: " " }),
-        /* @__PURE__ */ jsx12("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
+          /* @__PURE__ */ jsx13("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx13(Button3, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
+          /* @__PURE__ */ jsx13("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx13(Button3, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
+        ] }) : /* @__PURE__ */ jsx13(Fragment14, { children: " " }),
+        /* @__PURE__ */ jsx13("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx13(Button3, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
         toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
-          return item.align === "left" ? /* @__PURE__ */ jsx12("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : "";
+          return item.align === "left" ? /* @__PURE__ */ jsx13("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : "";
         })
       ] }),
-      /* @__PURE__ */ jsx12("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
-        return item.align === "center" ? /* @__PURE__ */ jsx12("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : "";
+      /* @__PURE__ */ jsx13("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
+        return item.align === "center" ? /* @__PURE__ */ jsx13("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : "";
       }) }),
-      /* @__PURE__ */ jsxs11("div", { className: "r-toolbar-right", children: [
+      /* @__PURE__ */ jsxs12("div", { className: "r-toolbar-right", children: [
         toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
-          return item.align === "right" ? /* @__PURE__ */ jsx12("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : "";
+          return item.align === "right" ? /* @__PURE__ */ jsx13("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : "";
         }),
-        /* @__PURE__ */ jsx12("div", { className: classnames6("r-toolbar-item me-25", { "d-none": headerColumns.length > 1 }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
-        /* @__PURE__ */ jsx12("div", { className: classnames6("r-toolbar-item me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsxs11(UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
-          /* @__PURE__ */ jsx12(DropdownToggle2, { href: "/", tag: "a", color: "info", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx12(Info2, { className: "cursor-pointer" }) }),
-          /* @__PURE__ */ jsx12(DropdownMenu2, { children: /* @__PURE__ */ jsxs11("div", { className: "d-flex flex-column p-50 py-25", children: [
-            /* @__PURE__ */ jsx12("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\xE2n b\u1EA3n" }),
-            /* @__PURE__ */ jsx12("div", { style: { fontSize: 13 }, children: "Ch\u1ECDn \xF4 v\xE0 Ctrl + V \u0111\u1EC3 d\xE1n th\xF4ng tin t\u1EEB excel" }),
-            /* @__PURE__ */ jsx12("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\xE9p h\xE0ng" }),
-            /* @__PURE__ */ jsx12("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + V \u0111\u1EC3  d\xE1n h\xE0ng" })
+        /* @__PURE__ */ jsx13("div", { className: classnames6("r-toolbar-item me-25", { "d-none": headerColumns.length > 1 }), "aria-disabled": "false", children: /* @__PURE__ */ jsx13(Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
+        /* @__PURE__ */ jsx13("div", { className: classnames6("r-toolbar-item me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsxs12(UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
+          /* @__PURE__ */ jsx13(DropdownToggle2, { href: "/", tag: "a", color: "info", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx13(Info2, { className: "cursor-pointer" }) }),
+          /* @__PURE__ */ jsx13(DropdownMenu2, { children: /* @__PURE__ */ jsxs12("div", { className: "d-flex flex-column p-50 py-25", children: [
+            /* @__PURE__ */ jsx13("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__ */ jsx13("div", { style: { fontSize: 13 }, children: "Ch\u1ECDn \xF4 v\xE0 Ctrl + V \u0111\u1EC3 d\xE1n th\xF4ng tin t\u1EEB excel" }),
+            /* @__PURE__ */ jsx13("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__ */ jsx13("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" })
           ] }) })
         ] }) })
       ] })
@@ -2833,7 +2892,7 @@ var TableEdit = forwardRef2((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__ */ jsx12(
+          return /* @__PURE__ */ jsx13(
             "tr",
             {
               className: classnames6("r-row", { "fisrt-row": countDisplay === 0 }),
@@ -2847,43 +2906,41 @@ var TableEdit = forwardRef2((props, ref) => {
       }
     });
   };
-  useEffect6(() => {
+  useEffect7(() => {
     if (pagingClient && pagingSetting?.setCurrentPage && (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm)) {
       pagingSetting?.setCurrentPage(1);
     }
   }, [searchTerm, searchSetting?.searchTerm]);
-  return /* @__PURE__ */ jsxs11(Fragment12, { children: [
-    /* @__PURE__ */ jsxs11("div", { className: "react-table-edit", children: [
-      /* @__PURE__ */ jsxs11("div", { className: "r-grid", ref: gridRef, children: [
-        toolbarSetting?.showTopToolbar ? /* @__PURE__ */ jsx12(Fragment13, { children: renderToolbarTop() }) : /* @__PURE__ */ jsx12(Fragment13, {}),
-        /* @__PURE__ */ jsx12("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ jsxs11("table", { style: { width: "100%" }, children: [
-          /* @__PURE__ */ jsx12("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
-            return /* @__PURE__ */ jsx12("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
+  return /* @__PURE__ */ jsxs12(Fragment13, { children: [
+    /* @__PURE__ */ jsxs12("div", { className: "react-table-edit", children: [
+      /* @__PURE__ */ jsxs12("div", { className: "r-grid", ref: gridRef, children: [
+        toolbarSetting?.showTopToolbar ? /* @__PURE__ */ jsx13(Fragment14, { children: renderToolbarTop() }) : /* @__PURE__ */ jsx13(Fragment14, {}),
+        /* @__PURE__ */ jsx13("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ jsxs12("table", { style: { width: "100%" }, children: [
+          /* @__PURE__ */ jsx13("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
+            return /* @__PURE__ */ jsx13("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
               return renderHeaderCol(col, index, indexParent);
             }) }, indexParent);
           }) }),
-          /* @__PURE__ */ jsx12("tbody", { className: "r-gridcontent", children: renderData() }),
-          /* @__PURE__ */ jsx12("tfoot", { className: "r-gridfoot", children: haveSum == true ? /* @__PURE__ */ jsx12("tr", { className: "r-row", children: contentColumns.map((col, index) => {
+          /* @__PURE__ */ jsx13("tbody", { className: "r-gridcontent", children: renderData() }),
+          /* @__PURE__ */ jsx13("tfoot", { className: "r-gridfoot", children: haveSum == true ? /* @__PURE__ */ jsx13("tr", { className: "r-row", children: contentColumns.map((col, index) => {
             return renderFooterCol(col, index);
-          }) }) : /* @__PURE__ */ jsx12(Fragment13, {}) })
+          }) }) : /* @__PURE__ */ jsx13(Fragment14, {}) })
         ] }) }),
-        toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ jsx12(Fragment13, { children: renderToolbarBottom() }) : /* @__PURE__ */ jsx12(Fragment13, {})
+        toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ jsx13(Fragment14, { children: renderToolbarBottom() }) : /* @__PURE__ */ jsx13(Fragment14, {})
       ] }),
-      pagingSetting?.allowPaging ? /* @__PURE__ */ jsx12(
-        PagerComponent,
+      pagingSetting?.allowPaging ? /* @__PURE__ */ jsx13(
+        PagingComponent,
         {
-          locale: lang,
-          click: onChangePage,
-          pageSize: pagingSetting?.pageSize,
-          currentPage: pagingSetting?.currentPage,
-          pageSizes: [20, 30, 50, 100],
-          totalRecordsCount: pagingClient ? totalCount : pagingSetting?.totalItem ?? 0,
-          pageCount: 5,
-          dropDownChanged: onChangePageSize
+          onChangePage,
+          pageSize: pagingSetting?.pageSize ?? 0,
+          currentPage: pagingSetting?.currentPage ?? 0,
+          pageOptions: [20, 30, 50, 100],
+          totalItem: pagingClient ? totalCount : pagingSetting?.totalItem ?? 0,
+          onChangePageSize
         }
-      ) : /* @__PURE__ */ jsx12(Fragment13, {})
+      ) : /* @__PURE__ */ jsx13(Fragment14, {})
     ] }),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       sidebar_setting_column_default,
       {
         handleSidebar: () => {
@@ -2899,12 +2956,12 @@ var TableEdit = forwardRef2((props, ref) => {
 var table_default = TableEdit;
 
 // test-app/src/component/tab-menu/index.tsx
-import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "becoxy-icons";
-import classNames5 from "classnames";
-import { Fragment as Fragment14, useEffect as useEffect7, useState as useState6 } from "react";
+import { ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight3 } from "becoxy-icons";
+import classNames6 from "classnames";
+import { Fragment as Fragment15, useEffect as useEffect8, useState as useState7 } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { DropdownItem as DropdownItem2, DropdownMenu as DropdownMenu3, DropdownToggle as DropdownToggle3, UncontrolledDropdown as UncontrolledDropdown2 } from "reactstrap";
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var TabsMenuComponent = ({
   buttonWidth,
   tabParent,
@@ -2916,14 +2973,14 @@ var TabsMenuComponent = ({
   renderModal
 }) => {
   const navigate = useNavigate();
-  const [dataMenu, setDataMenu] = useState6([]);
-  const [openMenu, setOpenMenu] = useState6(false);
-  const [url, setUrl] = useState6("");
-  const [contentWidth, setContentWidth] = useState6(0);
-  const [componentWidth, setComponentWidth] = useState6(0);
-  const [scrollPosition, setScrollPosition] = useState6(0);
-  const [dataItem, setDataItem] = useState6([]);
-  const [openModal, setOpenModal] = useState6({});
+  const [dataMenu, setDataMenu] = useState7([]);
+  const [openMenu, setOpenMenu] = useState7(false);
+  const [url, setUrl] = useState7("");
+  const [contentWidth, setContentWidth] = useState7(0);
+  const [componentWidth, setComponentWidth] = useState7(0);
+  const [scrollPosition, setScrollPosition] = useState7(0);
+  const [dataItem, setDataItem] = useState7([]);
+  const [openModal, setOpenModal] = useState7({});
   const handleWindowResize = () => {
     const tabEle = document.getElementById(`tab-component-${resourceCode}`);
     const tabContent = document.getElementById(`content-component-${resourceCode}`);
@@ -2932,7 +2989,7 @@ var TabsMenuComponent = ({
       setContentWidth(tabContent?.offsetWidth ?? 0);
     }
   };
-  useEffect7(() => {
+  useEffect8(() => {
     setUrl(window.location.pathname);
     window.addEventListener("resize", handleWindowResize);
     setTimeout(() => {
@@ -2948,7 +3005,7 @@ var TabsMenuComponent = ({
       window.removeEventListener("resize", handleWindowResize);
     };
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     const item = resources?.find((x) => x.code === (resourceCodeParent ? resourceCodeParent : resourceCode));
     if (item) {
       if (resourceCodeParent) {
@@ -2979,22 +3036,22 @@ var TabsMenuComponent = ({
   const handleModal = (name) => {
     setOpenModal((old) => ({ ...old, [name]: !(openModal[name] ?? false) }));
   };
-  return /* @__PURE__ */ jsxs12(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs13(Fragment15, { children: [
     renderModal ? renderModal({ handleModal, windowSize, openModal, setDataItem, dataItem }) : "",
-    /* @__PURE__ */ jsxs12("div", { className: classNames5("tab-custom", { "tab-parent": tabParent }, { "tab-child": tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [
-      /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsxs13("div", { className: classNames6("tab-custom", { "tab-parent": tabParent }, { "tab-child": tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [
+      /* @__PURE__ */ jsx14(
         "div",
         {
           onClick: () => handleScroll(-200),
-          className: classNames5("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
-          children: /* @__PURE__ */ jsx13(ChevronLeft2, {})
+          className: classNames6("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
+          children: /* @__PURE__ */ jsx14(ChevronLeft3, {})
         }
       ),
-      /* @__PURE__ */ jsx13("div", { id: `tab-component-${resourceCode}`, className: "tab-component", children: /* @__PURE__ */ jsx13("div", { id: `content-component-${resourceCode}`, children: dataMenu.map((item) => {
+      /* @__PURE__ */ jsx14("div", { id: `tab-component-${resourceCode}`, className: "tab-component", children: /* @__PURE__ */ jsx14("div", { id: `content-component-${resourceCode}`, children: dataMenu.map((item) => {
         if (item?.resAttributes?.IS_MENU === "1") {
-          return /* @__PURE__ */ jsxs12(UncontrolledDropdown2, { className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: "down", style: { backgroundColor: openMenu ? "#e0e0e0" : "" }, children: [
-            /* @__PURE__ */ jsx13(DropdownToggle3, { color: "#00000", style: { border: "none", boxShadow: "none", margin: 0, padding: 0 }, className: "background-none", children: /* @__PURE__ */ jsx13("div", { children: item.name }) }),
-            /* @__PURE__ */ jsx13(DropdownMenu3, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => /* @__PURE__ */ jsx13(
+          return /* @__PURE__ */ jsxs13(UncontrolledDropdown2, { className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: "down", style: { backgroundColor: openMenu ? "#e0e0e0" : "" }, children: [
+            /* @__PURE__ */ jsx14(DropdownToggle3, { color: "#00000", style: { border: "none", boxShadow: "none", margin: 0, padding: 0 }, className: "background-none", children: /* @__PURE__ */ jsx14("div", { children: item.name }) }),
+            /* @__PURE__ */ jsx14(DropdownMenu3, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => /* @__PURE__ */ jsx14(
               DropdownItem2,
               {
                 style: { borderRadius: "5px", margin: "0 0.5rem", width: "95%" },
@@ -3011,23 +3068,23 @@ var TabsMenuComponent = ({
             )) })
           ] }, item.code);
         } else {
-          return /* @__PURE__ */ jsx13(
+          return /* @__PURE__ */ jsx14(
             Link,
             {
               to: item.url,
-              className: classNames5("tab-custom-item", { active: item.url === url || tabParent && url?.split("/").length > 3 && item.url.startsWith(url.substring(0, url.lastIndexOf("/"))) }),
+              className: classNames6("tab-custom-item", { active: item.url === url || tabParent && url?.split("/").length > 3 && item.url.startsWith(url.substring(0, url.lastIndexOf("/"))) }),
               children: item.name
             },
             item.code
           );
         }
       }) }) }),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx14(
         "div",
         {
           onClick: () => handleScroll(200),
-          className: classNames5("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
-          children: /* @__PURE__ */ jsx13(ChevronRight2, {})
+          className: classNames6("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
+          children: /* @__PURE__ */ jsx14(ChevronRight3, {})
         }
       )
     ] })