react-table-edit 1.4.35 → 1.4.37

package/dist/index.js

@@ -17505,11 +17505,11 @@ const useOnClickOutside = (ref, handler) => {
             // ** Call passed function on click outside
             handler(event);
         };
-        document.addEventListener('mousedown', listener);
-        document.addEventListener('touchstart', listener);
+        document.addEventListener("mousedown", listener);
+        document.addEventListener("touchstart", listener);
         return () => {
-            document.removeEventListener('mousedown', listener);
-            document.removeEventListener('touchstart', listener);
+            document.removeEventListener("mousedown", listener);
+            document.removeEventListener("touchstart", listener);
         };
     }, 
     // ** Add ref and handler to effect dependencies
@@ -17524,7 +17524,7 @@ const checkThousandSeparator = (thousandSeparator, decimalSeparator) => {
     if (thousandSeparator) {
         if (decimalSeparator) {
             if (thousandSeparator === decimalSeparator) {
-                return ',';
+                return ",";
             }
             else {
                 return thousandSeparator;
@@ -17535,14 +17535,14 @@ const checkThousandSeparator = (thousandSeparator, decimalSeparator) => {
         }
     }
     else {
-        return ',';
+        return ",";
     }
 };
 const checkDecimalSeparator = (thousandSeparator, decimalSeparator) => {
     if (decimalSeparator) {
         if (thousandSeparator) {
             if (thousandSeparator === decimalSeparator) {
-                return '.';
+                return ".";
             }
             else {
                 return decimalSeparator;
@@ -17553,29 +17553,32 @@ const checkDecimalSeparator = (thousandSeparator, decimalSeparator) => {
         }
     }
     else {
-        return '.';
+        return ".";
     }
 };
 const isNullOrUndefined = (d) => {
-    if (d === null || d === undefined || d === '') {
+    if (d === null || d === undefined || d === "") {
         return true;
     }
     return false;
 };
 const generateUUID = () => {
+    // Public Domain/MIT
     let d = new Date().getTime(); //Timestamp
-    let d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now() * 1000)) || 0; //Time in microseconds since page-load or 0 if unsupported
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    let d2 = (typeof performance !== "undefined" && performance.now && performance.now() * 1000) || 0; //Time in microseconds since page-load or 0 if unsupported
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
         let r = Math.random() * 16; //random number between 0 and 16
-        if (d > 0) { //Use timestamp until depleted
+        if (d > 0) {
+            //Use timestamp until depleted
             r = (d + r) % 16 | 0;
             d = Math.floor(d / 16);
         }
-        else { //Use microseconds since page-load if supported
+        else {
+            //Use microseconds since page-load if supported
             r = (d2 + r) % 16 | 0;
             d2 = Math.floor(d2 / 16);
         }
-        return (c === 'x' ? r : 0x3).toString(16);
+        return (c === "x" ? r : 0x3).toString(16);
     });
 };
 /**
@@ -17592,17 +17595,17 @@ const formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 10
         str = roundNumber(Number(str), fraction);
     }
     // eslint-disable-next-line
-    if (str || str == '0') {
+    if (str || str == "0") {
         str = str.toString();
-        const value = decimalSeparator !== '.' ? str.toString().replaceAll(".", decimalSeparator ?? '') : str;
-        const arr = value.toString().split(decimalSeparator ?? '', 2);
-        let flag = value.toString().includes(decimalSeparator ?? '');
+        const value = decimalSeparator !== "." ? str.toString().replaceAll(".", decimalSeparator ?? "") : str;
+        const arr = value.toString().split(decimalSeparator ?? "", 2);
+        let flag = value.toString().includes(decimalSeparator ?? "");
         if (arr[0].length < 3) {
-            return flag ? `${arr[0]}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ''}` : arr[0];
+            return flag ? `${arr[0]}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ""}` : arr[0];
         }
         else {
             let flagNegative = false;
-            if (arr[0][0] === '-') {
+            if (arr[0][0] === "-") {
                 flagNegative = true;
                 arr[0] = arr[0].substring(1, arr[0].length);
             }
@@ -17613,20 +17616,20 @@ const formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 10
                     count++;
                 }
             }
-            if (arr[0].lastIndexOf(thousandSeparator ?? '') === arr[0].length - 1) {
+            if (arr[0].lastIndexOf(thousandSeparator ?? "") === arr[0].length - 1) {
                 arr[0] = arr[0].slice(0, arr[0].length - 1);
             }
             if (isDone) {
-                flag = (arr[1]?.substring(0, fraction) ?? '') !== '';
+                flag = (arr[1]?.substring(0, fraction) ?? "") !== "";
             }
             if (flagNegative && haveNegative) {
-                arr[0] = ('-').concat(arr[0]);
+                arr[0] = "-".concat(arr[0]);
             }
-            return flag ? `${arr[0]}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ''}` : arr[0];
+            return flag ? `${arr[0]}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ""}` : arr[0];
         }
     }
     else {
-        return '';
+        return "";
     }
 };
 const roundNumber = (num, fraction) => {
@@ -17634,23 +17637,23 @@ const roundNumber = (num, fraction) => {
     const result = Math.round(num * base) / base;
     return result;
 };
-const formatDateTime = (data, format = 'dd/MM/yyyy') => {
+const formatDateTime = (data, format = "dd/MM/yyyy") => {
     if (!data) {
-        return '';
+        return "";
     }
     const date = new Date(data);
     const map = {
-        dd: String(date.getDate()).padStart(2, '0'),
-        MM: String(date.getMonth() + 1).padStart(2, '0'),
+        dd: String(date.getDate()).padStart(2, "0"),
+        MM: String(date.getMonth() + 1).padStart(2, "0"),
         yyyy: date.getFullYear(),
-        HH: String(date.getHours()).padStart(2, '0'),
-        mm: String(date.getMinutes()).padStart(2, '0')
+        HH: String(date.getHours()).padStart(2, "0"),
+        mm: String(date.getMinutes()).padStart(2, "0")
     };
     return format.replace(/dd|MM|yyyy|HH|mm/g, (match) => map[match]);
 };
 // Hàm tìm vị trí theo chuỗi index
 const FindNodeByPath = (tree, path) => {
-    const levels = path.split('-').map(num => parseInt(num, 10));
+    const levels = path.split("-").map((num) => parseInt(num, 10));
     let current = tree;
     let node = null;
     for (let index = 0; index < levels.length - 1; index++) {
@@ -17688,18 +17691,18 @@ const calculateTableStructure = (columns) => {
     const objHeaderWidthFixLeft = {};
     let maxDepth = 0;
     // Tính depth tối đa
-    const calculateDepth = (cols, depth = 1) => (Math.max(...cols.map(col => (col.columns?.length ? calculateDepth(col.columns, depth + 1) : depth))));
+    const calculateDepth = (cols, depth = 1) => Math.max(...cols.map((col) => (col.columns?.length ? calculateDepth(col.columns, depth + 1) : depth)));
     maxDepth = calculateDepth(columns);
     let leftTotal = 0;
     let rightTotal = 0;
     // Tính tổng width của các cột cố định phải
     const calcTotalRightWidth = (cols) => {
-        cols.forEach(col => {
+        cols.forEach((col) => {
             if (col.columns?.length) {
                 calcTotalRightWidth(col.columns);
             }
             else {
-                if (col.fixedType === 'right' && col.visible !== false) {
+                if (col.fixedType === "right" && col.visible !== false) {
                     rightTotal += col.width ?? 40;
                 }
             }
@@ -17719,7 +17722,7 @@ const calculateTableStructure = (columns) => {
             };
             levels[level].push(cell);
             const headerKey = `${level}-${indexCol}`;
-            if (col.fixedType === 'left' && col.visible !== false) {
+            if (col.fixedType === "left" && col.visible !== false) {
                 objHeaderWidthFixLeft[headerKey] = leftTotal;
             }
             if (!hasChildren) {
@@ -17727,16 +17730,16 @@ const calculateTableStructure = (columns) => {
                 const width = col.width ?? 40;
                 cell.index = index;
                 flat.push(cell);
-                if (col.fixedType === 'left' && col.visible !== false) {
+                if (col.fixedType === "left" && col.visible !== false) {
                     objWidthFixLeft[index] = leftTotal;
                     leftTotal += width;
                 }
-                if (col.fixedType === 'right' && col.visible !== false) {
+                if (col.fixedType === "right" && col.in !== false) {
                     rightTotal -= width;
                     objWidthFixRight[index] = rightTotal;
                 }
             }
-            if (col.fixedType === 'right' && col.visible !== false) {
+            if (col.fixedType === "right" && col.visible !== false) {
                 objHeaderWidthFixRight[headerKey] = rightTotal;
             }
             return colspanSum + colspan;
@@ -17849,7 +17852,7 @@ const TextInput = (props) => {
 
 const defaultMaxHeight$1 = 250;
 const SelectTable = React$5.forwardRef((props, ref) => {
-    const { id, menuWidth, width, invalid, placeholder, textAlign, options, columns, value, fieldValue, fieldLabel, maxHeight, isClearable, component, isMulti, noHeader, isDisabled, showFooter, formatSetting, allowCreate, onPaste, onChange, handleAdd, onKeyDown, onOpenMenu, loadOptions, onCloseMenu, footerComponent, formatOptionLabel } = props;
+    const { id, menuWidth, width, invalid, placeholder, textAlign, options, columns, value, fieldValue, fieldLabel, maxHeight, isClearable, component, isMulti, noHeader, isDisabled, showFooter, formatSetting, allowCreate, onPaste, onChange, handleAdd, onKeyDown, onOpenMenu, loadOptions, onCloseMenu, footerComponent, formatOptionLabel, compareFunction } = props;
     const selectTableRef = React$5.useRef(null);
     const selectMenuTableRef = React$5.useRef(null);
     const inputRef = React$5.useRef(null);
@@ -17888,7 +17891,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
     };
     React$5.useEffect(() => {
         if (dropdownOpen && value && !isMulti && selectMenuTableRef) {
-            const index = (optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? 'value'] === value[fieldValue ?? 'value']);
+            const index = (optionsLoad ? optionsLoad : options)?.findIndex((row) => (compareFunction ? compareFunction(row) : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value']));
             if (index >= 0) {
                 selectMenuTableRef.current.scrollTo({ top: (index - 1) * 30 });
             }
@@ -17995,7 +17998,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                         newIndex = indexFocus + 1;
                     }
                     else if (value) {
-                        newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? 'value'] === value[fieldValue ?? 'value']) + 1;
+                        newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((row) => (compareFunction ? compareFunction(row) : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value'])) + 1;
                     }
                     if (newIndex < (optionsLoad ? optionsLoad : options).length) {
                         setIndexFocus(newIndex);
@@ -18019,7 +18022,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                         newIndex = indexFocus - 1;
                     }
                     else if (value) {
-                        newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((e) => e[fieldValue ?? 'value'] === value[fieldValue ?? 'value']) - 1;
+                        newIndex = (optionsLoad ? optionsLoad : options)?.findIndex((row) => (compareFunction ? compareFunction(row) : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value'])) - 1;
                     }
                     if (newIndex >= 0) {
                         setIndexFocus(newIndex);
@@ -18115,9 +18118,9 @@ const SelectTable = React$5.forwardRef((props, ref) => {
     };
     const RenderElement = React__default["default"].memo((props) => {
         const { indexRow, row, isSelected, level = 0 } = props;
-        return (jsxRuntime.jsxs("tr", { id: `row-select-table-${indexRow}`, style: { paddingLeft: 10 * level }, className: classNames$2('r-select-row', { 'last-row': indexRow === (optionsLoad ? optionsLoad : options).length - 1 }, { 'fisrt-row': indexRow === 0 }), children: [isMulti && jsxRuntime.jsx("td", { className: classNames$2(`r-select-rowcell`, { 'r-select-move': indexFocus === indexRow, 'r-select-active': !isMulti && value && value[fieldValue ?? 'value'] === row[fieldValue ?? 'value'] }), style: { width: 40, textAlign: 'center', padding: 0, paddingBottom: 6 }, onClick: (e) => {
+        return (jsxRuntime.jsxs("tr", { id: `row-select-table-${indexRow}`, style: { paddingLeft: 10 * level }, className: classNames$2('r-select-row', { 'last-row': indexRow === (optionsLoad ? optionsLoad : options).length - 1 }, { 'fisrt-row': indexRow === 0 }), children: [isMulti && jsxRuntime.jsx("td", { className: classNames$2(`r-select-rowcell`, { 'r-select-move': indexFocus === indexRow, 'r-select-active': !isMulti && value && (compareFunction ? compareFunction(row) : value[fieldValue ?? 'value'] === row[fieldValue ?? 'value']) }), style: { width: 40, textAlign: 'center', padding: 0, paddingBottom: 6 }, onClick: (e) => {
                         if (isMulti) {
-                            const index = value?.findIndex((x) => x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']);
+                            const index = value?.findIndex((x) => (compareFunction ? compareFunction(row) : x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']));
                             if (index > -1) {
                                 value?.splice(index, 1);
                                 handChange([...value]);
@@ -18146,14 +18149,14 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                     }
                     return (jsxRuntime.jsxs(React$5.Fragment, { children: [col.visible !== false && jsxRuntime.jsx("td", { id: `select-${id}-${indexRow}-${indexCol}`, 
                                 // ref={refRow}
-                                className: classNames$2(`r-select-rowcell`, { 'r-select-move': indexFocus === indexRow, 'r-select-active': !isMulti && value && value[fieldValue ?? 'value'] === row[fieldValue ?? 'value'] }), style: {
+                                className: classNames$2(`r-select-rowcell`, { 'r-select-move': indexFocus === indexRow, 'r-select-active': !isMulti && value && (compareFunction ? compareFunction(row) : value[fieldValue ?? 'value'] === row[fieldValue ?? 'value']) }), style: {
                                     minWidth: col.minWidth,
                                     width: col.width,
                                     maxWidth: col.maxWidth,
                                     textAlign: col.textAlign ? col.textAlign : 'left'
                                 }, onClick: (e) => {
                                     if (isMulti) {
-                                        const index = value?.findIndex((x) => x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']);
+                                        const index = value?.findIndex((x) => (compareFunction ? compareFunction(row) : x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']));
                                         if (index > -1) {
                                             value?.splice(index, 1);
                                             handChange([...value]);
@@ -18198,7 +18201,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                                                     }, readOnly: true, className: classNames$2('cursor-pointer', { 'd-none': !isMulti }), style: { textAlign: 'center', marginTop: 6 } }) }) }), (columns ? columns : defaultColumns).map((col, index) => {
                                             return (renderHeaderCol(col, index));
                                         })] }) }), ((optionsLoad ? optionsLoad : options) && !isLoading) && jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("tbody", { className: 'r-select-gridcontent', children: [haveCreateNew && jsxRuntime.jsx(RenderElement, { isSelected: false, indexRow: 0, row: { valueCreate: searchTerm, [fieldValue ?? "value"]: searchTerm, [fieldLabel ?? "label"]: `${t('Create')} '${searchTerm}'`, isCreated: true } }), (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
-                                        const isSelected = isMulti && value?.some((x) => x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']);
+                                        const isSelected = isMulti && value?.some((x) => (compareFunction ? compareFunction(row) : x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']));
                                         return (jsxRuntime.jsx(RenderElement, { isSelected: isSelected ?? false, indexRow: indexRow + (haveCreateNew ? 1 : 0), row: row }, `select-table-${indexRow}`));
                                     })] }) })] }), ((((optionsLoad ? optionsLoad : options)?.length ?? 0) === 0) && !haveCreateNew && !isLoading) && jsxRuntime.jsxs("div", { className: "r-no-data", children: [jsxRuntime.jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsxRuntime.jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxRuntime.jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsxRuntime.jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), jsxRuntime.jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })] })] }) }), t('No data available.')] }), isLoading && jsxRuntime.jsxs("div", { className: "r-no-data", children: [jsxRuntime.jsx(Spinner$1, { className: "me-1", children: " " }), t('Loading...')] })] }));
     };
@@ -40383,7 +40386,7 @@ const SidebarSetColumn = (props) => {
         };
     }, []);
     const renderFooterButtons = () => {
-        return (jsxRuntime.jsxs(React$5.Fragment, { children: [jsxRuntime.jsx(Button$1, { color: "primary", onClick: handleSubmit, className: "me-1", children: t("Confirm") }), jsxRuntime.jsx(Button$1, { color: "secondary", onClick: handleCancel, outline: true, children: t('Close') })] }));
+        return (jsxRuntime.jsxs(React$5.Fragment, { children: [jsxRuntime.jsx(Button$1, { color: "primary", onClick: handleSubmit, className: "me-1", children: t("Confirm") }), jsxRuntime.jsx(Button$1, { color: "secondary", onClick: handleCancel, outline: true, children: t("Close") })] }));
     };
     const visibleTemplate = (item, index) => {
         return (jsxRuntime.jsx(Input$1, { defaultChecked: item.visible ?? true, disabled: item.invisibleDisable, type: "checkbox", style: { height: 18 }, className: " cursor-pointer", onChange: (e) => {
@@ -40394,14 +40397,14 @@ const SidebarSetColumn = (props) => {
             } }));
     };
     const fixColumnTemplate = (item, index) => {
-        return (jsxRuntime.jsx(Input$1, { defaultChecked: item.fixedType === 'left' || item.fixedType === 'right', type: "checkbox", style: { height: 18 }, className: " cursor-pointer", onChange: (e) => {
+        return (jsxRuntime.jsx(Input$1, { defaultChecked: item.fixedType === "left" || item.fixedType === "right", type: "checkbox", style: { height: 18 }, className: " cursor-pointer", onChange: (e) => {
                 if (dataSource) {
                     if (e.target.checked) {
-                        if ((index * 2) <= dataSource.length) {
-                            dataSource[index].fixedType = 'left';
+                        if (index * 2 <= dataSource.length) {
+                            dataSource[index].fixedType = "left";
                         }
                         else {
-                            dataSource[index].fixedType = 'right';
+                            dataSource[index].fixedType = "right";
                         }
                     }
                     else {
@@ -40413,7 +40416,7 @@ const SidebarSetColumn = (props) => {
     };
     const columns = [
         {
-            field: 'headerText',
+            field: "headerText",
             headerText: "Column name",
             template: (e) => {
                 return jsxRuntime.jsx(jsxRuntime.Fragment, { children: t(e.headerText) });
@@ -40424,29 +40427,29 @@ const SidebarSetColumn = (props) => {
             minWidth: 150
         },
         {
-            field: '',
+            field: "",
             template: visibleTemplate,
             headerText: "Display",
-            textAlign: 'center',
+            textAlign: "center",
             visible: true,
             width: 100,
             maxWidth: 120,
             minWidth: 80
         },
         {
-            field: '',
+            field: "",
             template: fixColumnTemplate,
             headerText: "Fix the column",
-            textAlign: 'center',
+            textAlign: "center",
             visible: true,
             width: 100,
             maxWidth: 120,
             minWidth: 80
         },
         {
-            field: 'width',
+            field: "width",
             headerText: "Column width",
-            textAlign: 'right',
+            textAlign: "right",
             visible: true,
             width: 100,
             maxWidth: 120,
@@ -40454,44 +40457,42 @@ const SidebarSetColumn = (props) => {
         }
     ];
     const renderHeaderCol = (col, indexCol) => {
-        return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && jsxRuntime.jsx("th", { className: classNames$2(`r-headercell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
-                    width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : (col.width ? col.width : (col.minWidth ?? 'auto'))) : col.width,
-                    minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : (col.width ? col.width : (col.minWidth ?? 'auto'))) : col.minWidth,
+        return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && (jsxRuntime.jsx("th", { className: classNames$2(`r-headercell fix-${col.fixedType}`, { "cell-fixed": col.fixedType }), style: {
+                    width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width,
+                    minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
                     top: `${0 * 42}px`,
                     maxWidth: col.maxWidth
-                }, children: jsxRuntime.jsx("div", { role: "textbox", title: t(col.headerText ?? ''), style: {
+                }, children: jsxRuntime.jsx("div", { role: "textbox", title: t(col.headerText ?? ""), style: {
                         height: `${1 * 42}px`,
-                        justifyContent: col.textAlign ?? 'left'
-                    }, className: "r-headercell-div", children: t(col.headerText ?? '') }) }) }, `header-${indexCol}`));
+                        justifyContent: col.textAlign ?? "left"
+                    }, className: "r-headercell-div", children: t(col.headerText ?? "") }) })) }, `header-${indexCol}`));
     };
-    return (jsxRuntime.jsxs(Sidebar, { open: openSidebar, toggleSidebar: handleCancel, width: 700, children: [jsxRuntime.jsx(ModalHeader, { typeModal: 'Edit', handleModal: handleCancel, title: 'Column setup' }), jsxRuntime.jsx("div", { className: "ms-2 r-table-edit", children: jsxRuntime.jsx("div", { className: 'r-grid', children: jsxRuntime.jsx("div", { className: "r-gridtable", style: { height: windowSize.innerHeight - 120 }, children: jsxRuntime.jsxs("table", { style: { width: '100%' }, children: [jsxRuntime.jsx("thead", { className: 'r-gridheader', children: jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: columns.map((col, index) => {
-                                            return (renderHeaderCol(col, index));
-                                        }) }) }), jsxRuntime.jsx("tbody", { className: 'r-gridcontent', children: dataSource?.map((row, indexRow) => {
-                                        return (jsxRuntime.jsx("tr", { className: classNames$2('r-row', { 'last-row': indexRow === dataSource.length - 1 }, { 'fisrt-row': indexRow === 0 }), children: columns.map((col, indexCol) => {
+    return (jsxRuntime.jsxs(Sidebar, { open: openSidebar, toggleSidebar: handleCancel, width: 700, children: [jsxRuntime.jsx(ModalHeader, { typeModal: "Edit", handleModal: handleCancel, title: "Column setup" }), jsxRuntime.jsx("div", { className: "ms-2 r-table-edit", children: jsxRuntime.jsx("div", { className: "r-grid", children: jsxRuntime.jsx("div", { className: "r-gridtable", style: { height: windowSize.innerHeight - 120 }, children: jsxRuntime.jsxs("table", { style: { width: "100%" }, children: [jsxRuntime.jsx("thead", { className: "r-gridheader", children: jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: columns.map((col, index) => {
+                                            return renderHeaderCol(col, index);
+                                        }) }) }), jsxRuntime.jsx("tbody", { className: "r-gridcontent", children: dataSource?.map((row, indexRow) => {
+                                        return (jsxRuntime.jsx("tr", { className: classNames$2("r-row", { "last-row": indexRow === dataSource.length - 1 }, { "fisrt-row": indexRow === 0 }), children: columns.map((col, indexCol) => {
                                                 let value = row[col.field];
-                                                if (col.type === 'numeric' || (col.typeCondition && col.typeCondition(row) === 'numeric')) {
-                                                    value = formartNumberic(row[col.field], ',', '.', col.numericSettings?.fraction, true) ?? 0;
+                                                if (col.type === "numeric" || (col.typeCondition && col.typeCondition(row) === "numeric")) {
+                                                    value = formartNumberic(row[col.field], ",", ".", col.numericSettings?.fraction, true) ?? 0;
                                                 }
-                                                return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && jsxRuntime.jsx("td", { className: classNames$2(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': indexFocus === indexRow }), style: {
+                                                return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && (jsxRuntime.jsx("td", { className: classNames$2(`r-rowcell fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": indexFocus === indexRow }), style: {
                                                             padding: 0,
-                                                            textAlign: col.textAlign ? col.textAlign : 'left'
+                                                            textAlign: col.textAlign ? col.textAlign : "left"
                                                         }, onFocus: (e) => {
                                                             if (indexRow !== indexFocus) {
                                                                 setIndexFocus(indexRow);
                                                             }
                                                             e.stopPropagation();
                                                         }, onClick: (e) => {
-                                                            if (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD') {
+                                                            if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
                                                                 if (indexRow !== indexFocus) {
                                                                     setIndexFocus(indexRow);
                                                                 }
                                                                 e.stopPropagation();
                                                             }
-                                                        }, children: jsxRuntime.jsx("div", { className: classNames$2('r-rowcell-div'), style: {
-                                                                width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : (col.width ? col.width : (col.minWidth ?? 'auto'))) : 'auto'
-                                                            }, children: jsxRuntime.jsx("div", { className: classNames$2('r-rowcell-content'), style: {
-                                                                    margin: '7px 9px'
-                                                                }, children: jsxRuntime.jsx("div", { className: "r-cell-text", children: col.template ? col.template(row, indexRow) : value }) }) }) }, `col-${indexRow}-${indexCol}`) }, indexCol));
+                                                        }, children: jsxRuntime.jsx("div", { className: classNames$2("r-rowcell-div"), style: {
+                                                                width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : "auto"
+                                                            }, children: jsxRuntime.jsx("div", { className: classNames$2("r-rowcell-content"), children: jsxRuntime.jsx("div", { className: "r-cell-text", children: col.template ? col.template(row, indexRow) : value }) }) }) }, `col-${indexRow}-${indexCol}`)) }, indexCol));
                                             }) }, `row-${indexRow}`));
                                     }) })] }) }) }) }), jsxRuntime.jsx("div", { className: "d-flex justify-content-end p-1 ", style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }, children: renderFooterButtons() })] }));
 };
@@ -42823,7 +42824,7 @@ const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleI
 
 const TableEdit = React$5.forwardRef((props, ref) => {
     const { t } = reactI18next.useTranslation();
-    const { idTable, dataSource, columns, commandClick, dataSourceChange, rowChange, pagingSetting, setDataSource, height, maxHeight, minHeight, defaultValue, toolbarSetting, searchSetting, setSelectedItem, selectedItem, selectEnable, editDisable, addDisable, buttonSetting, formatSetting, handleSelect, haveSum, isMulti, disableAutoKey, onDuplicate, allowFilter = true, allowOrder, optionsFilter } = props;
+    const { idTable, dataSource, columns, pagingSetting, setDataSource, height, maxHeight, minHeight, defaultValue, toolbarSetting, searchSetting, selectedItem, selectEnable, editDisable, addDisable, buttonSetting, formatSetting, haveSum, isMulti, disableAutoKey, commandClick, dataSourceChange, rowChange, setSelectedItem, handleSelect, onDuplicate, saveSettingColumn, allowFilter = true, allowOrder, optionsFilter } = props;
     React$5.useImperativeHandle(ref, () => {
         return {
             refeshFocusRow: handleRefeshRow
@@ -42832,28 +42833,26 @@ const TableEdit = React$5.forwardRef((props, ref) => {
     const [refreshRow, setRefreshRow] = React$5.useState(false);
     const [indexFocus, setIndexFocus] = React$5.useState(-1);
     const [selectedRows, setSelectedRows] = React$5.useState([]);
-    const [contentColumns, setContentColumns] = React$5.useState([]);
     const [openPopupSetupColumn, setOpenPopupSetupColumn] = React$5.useState(false);
-    const [searchTerm, setSearchTerm] = React$5.useState('');
+    const [searchTerm, setSearchTerm] = React$5.useState("");
     const [orderBy, setOrderBy] = React$5.useState([]);
     const [filterBy, setFilterBy] = React$5.useState([]);
+    const [refreshColumns, setRefreshColumns] = React$5.useState(false);
     const tableElement = React$5.useRef(null);
     const gridRef = React$5.useRef(null);
     const 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 fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? "id";
     const fieldUniKey = columns.filter((item) => item.isUnikey === true)?.map((item) => item.field);
     React$5.useEffect(() => {
         if (pagingClient && pagingSetting.setCurrentPage && Math.ceil(totalCount / (pagingSetting?.pageSize ?? 1)) < (pagingSetting.currentPage ?? 1)) {
             pagingSetting.setCurrentPage(1);
         }
     }, [dataSource]);
-    const { levels: headerColumns, flatVisble, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, objHeaderWidthFixLeft, objHeaderWidthFixRight, indexFirstEdit: indexFirstEdit, indexLastEdit: indexLastEdit } = React$5.useMemo(() => {
-        const obj = calculateTableStructure(columns);
-        setContentColumns(obj.flat);
-        return obj;
-    }, [columns]);
+    const { levels: headerColumns, flat: contentColumns, flatVisble, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, objHeaderWidthFixLeft, objHeaderWidthFixRight, indexFirstEdit: indexFirstEdit, indexLastEdit: indexLastEdit } = React$5.useMemo(() => {
+        return calculateTableStructure(columns);
+    }, [columns, refreshColumns]);
     const handleRefeshRow = () => {
         setRefreshRow(true);
         setTimeout(() => {
@@ -42873,7 +42872,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
         }
     };
     const handleKeyPress = (e) => {
-        if ((e.code === 'Enter' || e.code === 'NumpadEnter')) {
+        if (e.code === "Enter" || e.code === "NumpadEnter") {
             if (searchSetting?.setSearchTerm) {
                 searchSetting?.setSearchTerm(e.target.value);
             }
@@ -42885,9 +42884,9 @@ const TableEdit = React$5.forwardRef((props, ref) => {
         }
     };
     const searchTemplate = () => {
-        return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsx("div", { className: "me-50 r-search", children: jsxRuntime.jsx(ReactInput, { style: { width: '230px' }, value: searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm, setSearchTerm: searchSetting?.setSearchTerm ? searchSetting?.setSearchTerm : setSearchTerm, placeholder: t('Search'), onKeyPress: handleKeyPress }) }) }));
+        return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsx("div", { className: "me-50 r-search", children: jsxRuntime.jsx(ReactInput, { style: { width: "230px" }, value: searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm, setSearchTerm: searchSetting?.setSearchTerm ? searchSetting?.setSearchTerm : setSearchTerm, placeholder: t("Search"), onKeyPress: handleKeyPress }) }) }));
     };
-    const defaultToolbarOption = searchSetting?.searchEnable ? [{ template: searchTemplate, align: 'left' }] : [];
+    const defaultToolbarOption = searchSetting?.searchEnable ? [{ template: searchTemplate, align: "left" }] : [];
     let toolbarTopOption = [];
     if (toolbarSetting?.toolbarOptions) {
         toolbarTopOption = [...defaultToolbarOption, ...toolbarSetting?.toolbarOptions];
@@ -42898,8 +42897,8 @@ const TableEdit = React$5.forwardRef((props, ref) => {
     const RenderEditCell = (row, col, indexCol, indexRow) => {
         /*eslint-disable */
         switch (col?.typeCondition ? col?.typeCondition(row) : col.type) {
-            case 'date':
-                return (jsxRuntime.jsx(DateInput, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, className: classNames$2('form-control border-0 rounded-0 input-numeric', { 'is-invalid': col.validate && col.validate(row[col.field], row) }), value: row[col.field], onChange: (date) => {
+            case "date":
+                return (jsxRuntime.jsx(DateInput, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, className: classNames$2("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 ? new Date(date.getTime() + 7 * 60 * 60 * 1000) : undefined;
                         if (col.callback) {
                             col.callback(row[col.field], indexRow, row);
@@ -42915,8 +42914,8 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                             e.preventDefault();
                         }
                     } }));
-            case 'datetime':
-                return (jsxRuntime.jsx(DateInput, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, className: classNames$2('form-control border-0 rounded-0 input-numeric', { 'is-invalid': col.validate && col.validate(row[col.field], row) }), value: row[col.field], onChange: (date) => {
+            case "datetime":
+                return (jsxRuntime.jsx(DateInput, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, className: classNames$2("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[col.field], indexRow, row);
@@ -42930,41 +42929,49 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                             e.preventDefault();
                         }
                     } }));
-            case 'select':
+            case "select":
                 let valueSelect;
                 let optionsSelect = [];
                 if (col.selectSettings?.optionsField) {
                     optionsSelect = row[col.selectSettings?.optionsField] ? row[col.selectSettings?.optionsField] : [];
                 }
                 else {
-                    optionsSelect = col.selectSettings?.options ? (col.selectSettings?.validateOption ? col.selectSettings?.options.filter((item) => col.selectSettings?.validateOption(item, row)) : col.selectSettings?.options) : [];
+                    optionsSelect = col.selectSettings?.options
+                        ? col.selectSettings?.validateOption
+                            ? col.selectSettings?.options.filter((item) => col.selectSettings?.validateOption(item, row))
+                            : col.selectSettings?.options
+                        : [];
                 }
                 if (col.selectSettings?.isMulti) {
-                    valueSelect = optionsSelect.filter((x) => row[col.field].some((y) => x[col.selectSettings?.fieldValue ?? 'value'] === y));
+                    valueSelect = optionsSelect.filter((x) => row[col.field].some((y) => (col.selectSettings?.compareFunction ? col.selectSettings.compareFunction(x, row) : x[col.selectSettings?.fieldValue ?? "value"] === y)));
                 }
                 else {
-                    valueSelect = (!isNullOrUndefined(row[col.field]) && row[col.field] !== '') ? optionsSelect?.find((val) => val[col.selectSettings?.fieldValue ?? 'value'] === row[col.field]) : '';
+                    valueSelect =
+                        !isNullOrUndefined(row[col.field]) && row[col.field] !== ""
+                            ? optionsSelect?.find((val) => col.selectSettings?.compareFunction ? col.selectSettings.compareFunction(val, row) : val[col.selectSettings?.fieldValue ?? "value"] === row[col.field])
+                            : "";
                     if (!valueSelect && col.selectSettings?.defaultValue) {
                         valueSelect = col.selectSettings?.defaultValue(row);
                     }
                 }
                 return (jsxRuntime.jsx(SelectTable, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, value: valueSelect, options: optionsSelect, onChange: (val) => {
                         if (col.selectSettings?.isMulti) {
-                            row[col.field] = (val?.length ?? 0) > 0 ? val.map((item) => item[col.selectSettings?.fieldValue ?? 'value']) : [];
+                            row[col.field] = (val?.length ?? 0) > 0 ? val.map((item) => item[col.selectSettings?.fieldValue ?? "value"]) : [];
                         }
                         else {
-                            row[col.field] = !isNullOrUndefined(val) ? val[col.selectSettings?.fieldValue ?? 'value'] : undefined;
+                            row[col.field] = !isNullOrUndefined(val) ? val[col.selectSettings?.fieldValue ?? "value"] : undefined;
                         }
                         if (val && col.selectSettings?.loadOptions && isMulti) {
-                            if (isMulti) { //push giá trị vào option khi loadoption
+                            if (isMulti) {
+                                //push giá trị vào option khi loadoption
                                 val.forEach((e) => {
-                                    if (!optionsSelect.some((a) => a[col.selectSettings?.fieldValue ?? 'value'] === e[col.selectSettings?.fieldValue ?? 'value'])) {
+                                    if (!optionsSelect.some((a) => a[col.selectSettings?.fieldValue ?? "value"] === e[col.selectSettings?.fieldValue ?? "value"])) {
                                         optionsSelect.unshift(e);
                                     }
                                 });
                             }
                             else if (!col.selectSettings?.defaultValue) {
-                                if (!optionsSelect.some((a) => a[col.selectSettings?.fieldValue ?? 'value'] === val[col.selectSettings?.fieldValue ?? 'value'])) {
+                                if (!optionsSelect.some((a) => a[col.selectSettings?.fieldValue ?? "value"] === val[col.selectSettings?.fieldValue ?? "value"])) {
                                     optionsSelect.unshift(val);
                                 }
                             }
@@ -42973,27 +42980,21 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                             col.callback(val, indexRow, row);
                         }
                         handleDataChange(row, col, indexRow);
-                    }, fieldValue: col.selectSettings?.fieldValue, fieldLabel: col.selectSettings?.fieldLabel, component: gridRef, columns: col.selectSettings?.columns, isClearable: col.selectSettings?.isClearable ?? false, formatSetting: formatSetting, placeholder: t('Select'), loadOptions: col.selectSettings?.loadOptions, handleAdd: col.selectSettings?.handAddNew ? (e) => col.selectSettings?.handAddNew(e, indexRow, row) : undefined, isMulti: col.selectSettings?.isMulti, noHeader: col.selectSettings?.noHeader, showFooter: col.selectSettings?.showFooter, formatOptionLabel: col.selectSettings?.formatOptionLabel, footerComponent: col.selectSettings?.footerComponent, invalid: (col.validate && !isNullOrUndefined(col.validate(row[col.field], row))), maxHeight: col.selectSettings?.heightPopup ? Number(col.selectSettings?.heightPopup) : undefined, menuWidth: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : undefined, textAlign: col.textAlign ?? 'left', allowCreate: col.selectSettings?.allowCreate, onKeyDown: (e) => {
-                        return checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
-                    }, onOpenMenu: () => {
-                        if (col.selectSettings?.onOpenMenu) {
-                            col.selectSettings?.onOpenMenu(row, col, indexRow);
-                        }
-                    }, onPaste: (e) => {
+                    }, fieldValue: col.selectSettings?.fieldValue, fieldLabel: col.selectSettings?.fieldLabel, component: gridRef, columns: col.selectSettings?.columns, isClearable: col.selectSettings?.isClearable ?? false, formatSetting: formatSetting, placeholder: t("Select"), loadOptions: col.selectSettings?.loadOptions, handleAdd: col.selectSettings?.handAddNew ? (e) => col.selectSettings?.handAddNew(e, indexRow, row) : undefined, isMulti: col.selectSettings?.isMulti, noHeader: col.selectSettings?.noHeader, showFooter: col.selectSettings?.showFooter, formatOptionLabel: col.selectSettings?.formatOptionLabel, footerComponent: col.selectSettings?.footerComponent, invalid: col.validate && !isNullOrUndefined(col.validate(row[col.field], row)), maxHeight: col.selectSettings?.heightPopup ? Number(col.selectSettings?.heightPopup) : undefined, menuWidth: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : undefined, textAlign: col.textAlign ?? "left", allowCreate: col.selectSettings?.allowCreate, compareFunction: col.selectSettings?.compareFunction ? (e) => col.selectSettings?.compareFunction?.(e, row) : undefined, onKeyDown: (e) => checkKeyDown(e, row, col, indexRow + 1, indexCol + 1), onOpenMenu: col.selectSettings?.onOpenMenu ? () => col.selectSettings?.onOpenMenu?.(row, col, indexRow) : undefined, onPaste: (e) => {
                         if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable && !col.disablePaste) {
                             pasteDataFromExcel(indexRow, indexCol, e);
                             e.preventDefault();
                         }
                     } }));
-            case 'selectTree':
+            case "selectTree":
                 const findItemInTree = (items, value) => {
                     for (let index = 0; index < items.length; index++) {
                         const item = items[index];
-                        if (item[col.selectSettings?.fieldValue ? col.selectSettings?.fieldValue : 'value'] === value) {
+                        if (item[col.selectSettings?.fieldValue ? col.selectSettings?.fieldValue : "value"] === value) {
                             return { ...item };
                         }
-                        else if (item[col.selectSettings?.fieldChild ?? 'children']?.length > 0) {
-                            const itemFilter = findItemInTree(item[col.selectSettings?.fieldChild ?? 'children'], value);
+                        else if (item[col.selectSettings?.fieldChild ?? "children"]?.length > 0) {
+                            const itemFilter = findItemInTree(item[col.selectSettings?.fieldChild ?? "children"], value);
                             if (itemFilter) {
                                 return itemFilter;
                             }
@@ -43006,39 +43007,37 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                     optionsSelectTree = row[col.selectSettings?.optionsField] ? row[col.selectSettings?.optionsField] : [];
                 }
                 else {
-                    optionsSelectTree = col.selectSettings?.options ? (col.selectSettings?.validateOption ? col.selectSettings?.options.filter((item) => col.selectSettings?.validateOption(item, row)) : col.selectSettings?.options) : [];
+                    optionsSelectTree = col.selectSettings?.options
+                        ? col.selectSettings?.validateOption
+                            ? col.selectSettings?.options.filter((item) => col.selectSettings?.validateOption(item, row))
+                            : col.selectSettings?.options
+                        : [];
                 }
                 if (col.selectSettings?.isMulti) {
                     valueSelectTree = row[col.field];
                 }
                 else {
-                    valueSelectTree = (!isNullOrUndefined(row[col.field]) && row[col.field] !== '') ? findItemInTree(optionsSelectTree, row[col.field]) : '';
+                    valueSelectTree = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? findItemInTree(optionsSelectTree, row[col.field]) : "";
                 }
                 return (jsxRuntime.jsx(SelectTableTree, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, value: valueSelectTree, options: optionsSelectTree, onChange: (val) => {
                         if (col.selectSettings?.isMulti) {
                             row[col.field] = !isNullOrUndefined(val) ? val : [];
                         }
                         else {
-                            row[col.field] = !isNullOrUndefined(val) ? val[col.selectSettings?.fieldValue ?? 'value'] : undefined;
+                            row[col.field] = !isNullOrUndefined(val) ? val[col.selectSettings?.fieldValue ?? "value"] : undefined;
                         }
                         if (col.callback) {
                             col.callback(val, indexRow, row);
                         }
                         handleDataChange(row, col, indexRow);
-                    }, fieldValue: col.selectSettings?.fieldValue, fieldLabel: col.selectSettings?.fieldLabel, component: gridRef, columns: col.selectSettings?.columns, isClearable: col.selectSettings?.isClearable ?? false, formatSetting: formatSetting, placeholder: t('Select'), onOpenMenu: () => {
-                        if (col.selectSettings?.onOpenMenu) {
-                            col.selectSettings?.onOpenMenu(row, col, indexRow);
-                        }
-                    }, loadOptions: col.selectSettings?.loadOptions, handleAdd: col.selectSettings?.handAddNew ? (e) => col.selectSettings?.handAddNew(e, indexRow, row) : undefined, fieldChildren: col.selectSettings?.fieldChild ?? 'children', selectChilds: col.selectSettings?.selectChilds, showFooter: col.selectSettings?.showFooter, formatOptionLabel: col.selectSettings?.formatOptionLabel, footerComponent: col.selectSettings?.footerComponent, width: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : undefined, isMulti: col.selectSettings?.isMulti, noHeader: col.selectSettings?.noHeader, invalid: col.validate && col.validate(row[col.field], row), maxHeight: col.selectSettings?.heightPopup ? Number(col.selectSettings?.heightPopup) : undefined, menuWidth: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : undefined, textAlign: col.textAlign ?? 'left', onKeyDown: (e) => {
-                        checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
-                    }, onPaste: (e) => {
+                    }, fieldValue: col.selectSettings?.fieldValue, fieldLabel: col.selectSettings?.fieldLabel, component: gridRef, columns: col.selectSettings?.columns, isClearable: col.selectSettings?.isClearable ?? false, formatSetting: formatSetting, placeholder: t("Select"), loadOptions: col.selectSettings?.loadOptions, handleAdd: col.selectSettings?.handAddNew ? (e) => col.selectSettings?.handAddNew(e, indexRow, row) : undefined, fieldChildren: col.selectSettings?.fieldChild ?? "children", selectChilds: col.selectSettings?.selectChilds, showFooter: col.selectSettings?.showFooter, formatOptionLabel: col.selectSettings?.formatOptionLabel, footerComponent: col.selectSettings?.footerComponent, width: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : undefined, isMulti: col.selectSettings?.isMulti, noHeader: col.selectSettings?.noHeader, invalid: col.validate && col.validate(row[col.field], row), maxHeight: col.selectSettings?.heightPopup ? Number(col.selectSettings?.heightPopup) : undefined, menuWidth: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : undefined, textAlign: col.textAlign ?? "left", onKeyDown: (e) => checkKeyDown(e, row, col, indexRow + 1, indexCol + 1), onOpenMenu: col.selectSettings?.onOpenMenu ? () => col.selectSettings?.onOpenMenu?.(row, col, indexRow) : undefined, onPaste: (e) => {
                         if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable && !col.disablePaste) {
                             pasteDataFromExcel(indexRow, indexCol, e);
                             e.preventDefault();
                         }
                     } }));
-            case 'checkbox':
-                return (jsxRuntime.jsx(Input$1, { checked: !!row[col.field], id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, type: "checkbox", className: "input-checkbox cursor-pointer", style: { textAlign: col.textAlign ?? 'left', marginTop: 6 }, onChange: (val) => {
+            case "checkbox":
+                return (jsxRuntime.jsx(Input$1, { checked: !!row[col.field], id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, type: "checkbox", className: "input-checkbox cursor-pointer", style: { textAlign: col.textAlign ?? "left", marginTop: 6 }, onChange: (val) => {
                         row[col.field] = val.currentTarget.checked;
                         if (col.callback) {
                             col.callback(val.target.value, indexRow, row);
@@ -43047,16 +43046,16 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                     }, onKeyDown: (e) => {
                         checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
                     } }));
-            case 'numeric':
+            case "numeric":
                 const numericFormatProps = {
-                    value: !isNullOrUndefined(row[col.field]) ? row[col.field].toString() : '',
+                    value: !isNullOrUndefined(row[col.field]) ? row[col.field].toString() : "",
                     thousandSeparator: checkThousandSeparator(formatSetting?.thousandSeparator, formatSetting?.decimalSeparator),
                     decimalSeparator: checkDecimalSeparator(formatSetting?.thousandSeparator, formatSetting?.decimalSeparator),
                     allowNegative: col.numericSettings?.allowNegative ?? false,
                     decimalScale: col.numericSettings?.fraction ?? 0
                 };
-                let floatValue = parseFloat(row[col.field] ?? '0');
-                return (jsxRuntime.jsx(NumericFormat, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, style: { textAlign: col.textAlign, height: 29 }, ...numericFormatProps, defaultValue: formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction), className: classNames$2('form-control border-0 rounded-0 input-numeric', { 'is-invalid': col.validate && col.validate(row[col.field], row) }), onValueChange: (values) => {
+                let floatValue = parseFloat(row[col.field] ?? "0");
+                return (jsxRuntime.jsx(NumericFormat, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, style: { textAlign: col.textAlign, height: 29 }, ...numericFormatProps, defaultValue: formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", col.numericSettings?.fraction), className: classNames$2("form-control border-0 rounded-0 input-numeric", { "is-invalid": col.validate && col.validate(row[col.field], row) }), onValueChange: (values) => {
                         floatValue = values?.floatValue;
                     }, onFocus: (e) => {
                         e.target.setSelectionRange(0, e.target.innerText.length - 1);
@@ -43069,7 +43068,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                             handleDataChange(row, col, indexRow);
                         }
                     }, onKeyDown: (e) => {
-                        if (e.key === 'ArrowDown' || e.key === 'NumpadEnter' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === 'Tab') {
+                        if (e.key === "ArrowDown" || e.key === "NumpadEnter" || e.key === "ArrowUp" || e.key === "Enter" || e.key === "Tab") {
                             if (floatValue !== row[col.field]) {
                                 row[col.field] = !isNaN(floatValue) ? floatValue : 0;
                                 if (col.callback) {
@@ -43085,8 +43084,8 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                             e.preventDefault();
                         }
                     } }));
-            case 'color':
-                return (jsxRuntime.jsx("div", { style: { padding: '4px 8px' }, children: jsxRuntime.jsx(Input$1, { type: "color", value: row[col.field], style: { textAlign: col.textAlign ?? 'center', padding: 0, height: 23, border: "none" }, disabled: editDisable, onChange: (val) => {
+            case "color":
+                return (jsxRuntime.jsx("div", { style: { padding: "4px 8px" }, children: jsxRuntime.jsx(Input$1, { type: "color", value: row[col.field], style: { textAlign: col.textAlign ?? "center", padding: 0, height: 23, border: "none" }, disabled: editDisable, onChange: (val) => {
                             if (row[col.field] != val.target?.value) {
                                 row[col.field] = val.target?.value;
                                 if (col.callback) {
@@ -43097,8 +43096,8 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                         }, onKeyDown: (val) => {
                             checkKeyDown(val, row, col, indexRow + 1, indexCol + 1);
                         } }, `col-${indexRow}-${indexCol}`) }));
-            case 'form':
-                return (jsxRuntime.jsx(EditForm, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, ...col.formSettings, field: col.field, displayValue: col.formSettings?.displayValue ? col.formSettings?.displayValue(row) : '', placeholder: col.placeholder ? t(col.placeholder) : '', rowData: row, indexRow: indexRow, onChange: (val) => {
+            case "form":
+                return (jsxRuntime.jsx(EditForm, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, ...col.formSettings, field: col.field, displayValue: col.formSettings?.displayValue ? col.formSettings?.displayValue(row) : "", placeholder: col.placeholder ? t(col.placeholder) : "", rowData: row, indexRow: indexRow, onChange: (val) => {
                         Object.assign(row, val);
                         handleDataChange(row, col, indexRow);
                     }, invalid: col.validate && col.validate(row[col.field], row), textAlign: col.textAlign, template: col.template, onKeyDown: (e) => {
@@ -43109,8 +43108,8 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                             e.preventDefault();
                         }
                     } }));
-            case 'formInline':
-                return (jsxRuntime.jsx(EditFormInline, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, ...col.formSettings, field: col.field, displayValue: col.formSettings?.displayValue ? col.formSettings?.displayValue(row) : '', placeholder: col.placeholder ? t(col.placeholder) : '', rowData: row, indexRow: indexRow, onChange: (val) => {
+            case "formInline":
+                return (jsxRuntime.jsx(EditFormInline, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, ...col.formSettings, field: col.field, displayValue: col.formSettings?.displayValue ? col.formSettings?.displayValue(row) : "", placeholder: col.placeholder ? t(col.placeholder) : "", rowData: row, indexRow: indexRow, onChange: (val) => {
                         Object.assign(row, val);
                         handleDataChange(row, col, indexRow);
                     }, invalid: col.validate && col.validate(row[col.field], row), textAlign: col.textAlign, template: col.template, onKeyDown: (e) => {
@@ -43122,7 +43121,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                         }
                     } }));
             default:
-                return (jsxRuntime.jsx(Input$1, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, style: { textAlign: col.textAlign, height: 29 }, value: isNullOrUndefined(row[col.field]) ? '' : row[col.field], className: classNames$2('border-0 rounded-0 input-element', { 'is-invalid': col.validate && col.validate(row[col.field], row) }), onChange: (val) => {
+                return (jsxRuntime.jsx(Input$1, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, style: { textAlign: col.textAlign, height: 29 }, value: isNullOrUndefined(row[col.field]) ? "" : row[col.field], className: classNames$2("border-0 rounded-0 input-element", { "is-invalid": col.validate && col.validate(row[col.field], row) }), onChange: (val) => {
                         if (row[col.field] != val.target?.value) {
                             row[col.field] = val.target?.value;
                             if (col.callback) {
@@ -43150,8 +43149,8 @@ const TableEdit = React$5.forwardRef((props, ref) => {
         setTimeout(() => {
             const element = document.getElementById(`${idTable}-col${col}-row${row}`);
             if (element) {
-                if (element.className.includes('react-select') || element.className.includes('form-edit')) {
-                    element.getElementsByTagName('input')[0]?.focus();
+                if (element.className.includes("react-select") || element.className.includes("form-edit")) {
+                    element.getElementsByTagName("input")[0]?.focus();
                 }
                 else {
                     element.focus();
@@ -43160,16 +43159,17 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                     if (tableElement.current) {
                         const parentRect = tableElement.current.getBoundingClientRect();
                         const childRect = element.getBoundingClientRect();
-                        const offset = childRect.left - parentRect.left + tableElement.current.scrollLeft - (parentRect.width / 2) + (childRect.width / 2);
-                        tableElement.current.scrollTo({ left: offset, behavior: 'smooth' });
+                        const offset = childRect.left - parentRect.left + tableElement.current.scrollLeft - parentRect.width / 2 + childRect.width / 2;
+                        tableElement.current.scrollTo({ left: offset, behavior: "smooth" });
                     }
                 }
                 if ((tableElement.current?.scrollHeight ?? 0) > 0) {
                     if ((tableElement.current?.scrollTop ?? 0) > ((row - 1) % (pagingSetting?.pageSize ?? 10000)) * 34) {
-                        tableElement.current?.scrollTo({ behavior: 'smooth', top: ((row - 1) % (pagingSetting?.pageSize ?? 10000)) * 34 });
+                        tableElement.current?.scrollTo({ behavior: "smooth", top: ((row - 1) % (pagingSetting?.pageSize ?? 10000)) * 34 });
                     }
-                    else if (((tableElement.current?.clientHeight ?? 0) - (haveSum ? 30 : 0) - (headerColumns.length * 42)) < (((row % (pagingSetting?.pageSize ?? 10000)) * 34) - (tableElement.current?.scrollTop ?? 0))) {
-                        tableElement.current?.scrollTo({ behavior: 'smooth', top: (tableElement.current?.scrollTop ?? 0) + 34 });
+                    else if ((tableElement.current?.clientHeight ?? 0) - (haveSum ? 30 : 0) - headerColumns.length * 42 <
+                        (row % (pagingSetting?.pageSize ?? 10000)) * 34 - (tableElement.current?.scrollTop ?? 0)) {
+                        tableElement.current?.scrollTo({ behavior: "smooth", top: (tableElement.current?.scrollTop ?? 0) + 34 });
                     }
                 }
             }
@@ -43178,7 +43178,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
     //Thêm dòng mới
     const moveIndexRowToNewPage = () => {
         changeDataSource(dataSource, 1);
-        if (pagingClient && pagingSetting?.setCurrentPage && (totalCount % (pagingSetting?.pageSize ?? 0)) === 0) {
+        if (pagingClient && pagingSetting?.setCurrentPage && totalCount % (pagingSetting?.pageSize ?? 0) === 0) {
             pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 0) + 1);
         }
         if (tableElement) {
@@ -43253,25 +43253,25 @@ const TableEdit = React$5.forwardRef((props, ref) => {
         return undefined;
     };
     const pasteDataFromExcel = async (currenRowIndex, indexCol, e) => {
-        const clipboard = (e.clipboardData || window.Clipboard).getData('text');
-        const rowsClipboard = clipboard.trimEnd().split('\n');
+        const clipboard = (e.clipboardData || window.Clipboard).getData("text");
+        const rowsClipboard = clipboard.trimEnd().split("\n");
         setIndexFocus(-1);
         if (rowsClipboard.length > 200) {
-            messageBoxError(t, 'You can only paste up to 200 rows.');
+            messageBoxError(t, "You can only paste up to 200 rows.");
         }
         if (rowsClipboard.length > 0) {
             const columnsDataChange = [];
-            for (let index = 0; index < rowsClipboard[0].trimEnd().split('\t').length; index++) {
+            for (let index = 0; index < rowsClipboard[0].trimEnd().split("\t").length; index++) {
                 const stringData = [];
                 rowsClipboard.forEach((element) => {
-                    if (element.trimEnd().split('\t')[index] && !stringData.includes(element.trimEnd().split('\t')[index].toString().trim())) {
-                        stringData.push(element.trimEnd().split('\t')[index].toString().trim());
+                    if (element.trimEnd().split("\t")[index] && !stringData.includes(element.trimEnd().split("\t")[index].toString().trim())) {
+                        stringData.push(element.trimEnd().split("\t")[index].toString().trim());
                     }
                 });
                 const column = getColumn(indexCol, index);
                 if (column) {
                     if ((!column.disabledCondition || !column.disabledCondition(dataSource[currenRowIndex + 0])) && column.editEnable && column.onPasteValidate) {
-                        const rs = await column.onPasteValidate(stringData.join(','), currenRowIndex + 0, dataSource[currenRowIndex + 0]);
+                        const rs = await column.onPasteValidate(stringData.join(","), currenRowIndex + 0, dataSource[currenRowIndex + 0]);
                         if (rs) {
                             column.resultValidate = rs;
                         }
@@ -43281,7 +43281,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
             }
             for (let indexRow = 0; indexRow < rowsClipboard.length; indexRow++) {
                 const item = rowsClipboard[indexRow];
-                const colsClipboard = item.trimEnd().split('\t');
+                const colsClipboard = item.trimEnd().split("\t");
                 let dataRow = dataSource[currenRowIndex + indexRow];
                 if (!dataRow) {
                     dataRow = { ...defaultValue };
@@ -43293,7 +43293,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                     if (column) {
                         if (((!column.disabledCondition || !column.disabledCondition(dataSource[currenRowIndex + indexRow])) && column.editEnable) || column.onPaste) {
                             if (column.onPasteValidate && column.resultValidate) {
-                                const rs = column.resultValidate.find((item) => item[column.selectSettings?.fieldValue ?? 'value'] === stringData);
+                                const rs = column.resultValidate.find((item) => item[column.selectSettings?.fieldValue ?? "value"] === stringData);
                                 if (rs) {
                                     if (column.onPaste) {
                                         dataRow[column.field] = column.onPaste(dataRow, stringData);
@@ -43306,12 +43306,12 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                                     }
                                 }
                                 else {
-                                    notificationError(t('PasteExcelNotExist', { index: (currenRowIndex + indexRow + 1), field: t(column.headerText ?? ''), value: stringData }));
+                                    notificationError(t("PasteExcelNotExist", { index: currenRowIndex + indexRow + 1, field: t(column.headerText ?? ""), value: stringData }));
                                 }
                             }
                             else {
-                                if (column.type === 'date') {
-                                    const [day, month, year] = stringData.split('/');
+                                if (column.type === "date") {
+                                    const [day, month, year] = stringData.split("/");
                                     const date = new Date(`${year}-${month}-${day}`);
                                     if (!isNaN(date.getTime())) {
                                         if (column.onPaste) {
@@ -43325,13 +43325,13 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                                         }
                                     }
                                     else {
-                                        notificationError(t('PasteExcelIncorrectFormat', { index: (currenRowIndex + indexRow + 1), field: t(column.headerText ?? ''), value: stringData }));
+                                        notificationError(t("PasteExcelIncorrectFormat", { index: currenRowIndex + indexRow + 1, field: t(column.headerText ?? ""), value: stringData }));
                                     }
                                 }
-                                else if (column.type === 'datetime') {
-                                    const [datePart, timePart] = stringData.split(' ');
-                                    const [day, month, year] = datePart.split('/');
-                                    const [hour, minute] = timePart.split(':');
+                                else if (column.type === "datetime") {
+                                    const [datePart, timePart] = stringData.split(" ");
+                                    const [day, month, year] = datePart.split("/");
+                                    const [hour, minute] = timePart.split(":");
                                     const date = new Date(Number(year), Number(month) - 1, Number(day), Number(hour), Number(minute));
                                     if (!isNaN(date.getTime())) {
                                         if (column.onPaste) {
@@ -43345,11 +43345,11 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                                         }
                                     }
                                     else {
-                                        notificationError(t('PasteExcelIncorrectFormat', { index: (currenRowIndex + indexRow + 1), field: t(column.headerText ?? ''), value: stringData }));
+                                        notificationError(t("PasteExcelIncorrectFormat", { index: currenRowIndex + indexRow + 1, field: t(column.headerText ?? ""), value: stringData }));
                                     }
                                 }
-                                else if (column.type === 'numeric') {
-                                    const number = Number(stringData.replaceAll(formatSetting?.thousandSeparator ?? '.', '').replaceAll(formatSetting?.decimalSeparator ?? ',', '.'));
+                                else if (column.type === "numeric") {
+                                    const number = Number(stringData.replaceAll(formatSetting?.thousandSeparator ?? ".", "").replaceAll(formatSetting?.decimalSeparator ?? ",", "."));
                                     if (!isNaN(number)) {
                                         if (column.onPaste) {
                                             dataRow[column.field] = column.onPaste(dataRow, number);
@@ -43362,10 +43362,10 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                                         }
                                     }
                                     else {
-                                        notificationError(t('PasteExcelIncorrectFormat', { index: (currenRowIndex + indexRow + 1), field: t(column.headerText ?? ''), value: stringData }));
+                                        notificationError(t("PasteExcelIncorrectFormat", { index: currenRowIndex + indexRow + 1, field: t(column.headerText ?? ""), value: stringData }));
                                     }
                                 }
-                                else if (column.type === 'select') {
+                                else if (column.type === "select") {
                                     if (column.selectSettings?.allowCreate) {
                                         if (column.onPaste) {
                                             dataRow[column.field] = column.onPaste(dataRow, stringData);
@@ -43378,7 +43378,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                                         }
                                     }
                                     else {
-                                        const rs = ((column.selectSettings?.optionsField ? item[column.selectSettings?.optionsField] : column.selectSettings?.options) ?? []).find((item) => item[column.selectSettings?.fieldValue ?? 'value'] === stringData);
+                                        const rs = ((column.selectSettings?.optionsField ? item[column.selectSettings?.optionsField] : column.selectSettings?.options) ?? []).find((item) => item[column.selectSettings?.fieldValue ?? "value"] === stringData);
                                         if (rs) {
                                             if (column.onPaste) {
                                                 dataRow[column.field] = column.onPaste(dataRow, stringData);
@@ -43391,7 +43391,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                                             }
                                         }
                                         else {
-                                            notificationError(t('PasteExcelNotExist', { index: (currenRowIndex + indexRow + 1), field: t(column.headerText ?? ''), value: stringData }));
+                                            notificationError(t("PasteExcelNotExist", { index: currenRowIndex + indexRow + 1, field: t(column.headerText ?? ""), value: stringData }));
                                         }
                                     }
                                 }
@@ -43411,7 +43411,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                     }
                 }
                 if (rowChange) {
-                    rowChange(dataRow, currenRowIndex + indexRow, '');
+                    rowChange(dataRow, currenRowIndex + indexRow, "");
                 }
             }
         }
@@ -43443,7 +43443,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
             }
             else {
                 if (dataSource && selectedRows?.length > 0) {
-                    if ((!selectedItem || (selectedItem[fieldKey] !== selectedRows[0][fieldKey]))) {
+                    if (!selectedItem || selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
                         setSelectedItem({ ...selectedRows[0] });
                         if (handleSelect) {
                             handleSelect({ ...selectedRows[0] });
@@ -43477,56 +43477,61 @@ const TableEdit = React$5.forwardRef((props, ref) => {
         }
     }, [selectedItem]);
     const renderContentCol = (col, row, indexRow, indexCol, isSelected) => {
-        if (col.field === 'command') {
-            return (col.visible !== false && jsxRuntime.jsx("td", { role: "gridcell", "aria-colindex": indexCol, className: classNames$2(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
-                    left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
-                    right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
-                    textAlign: col.textAlign ? col.textAlign : 'left',
-                }, children: jsxRuntime.jsx("div", { className: "r-rowcell-div command", children: jsxRuntime.jsx(CommandElement, { commandItems: col.commandItems ?? [], handleCommandClick: handleCommandClick, indexRow: indexRow, rowData: row, setIndexFocus: setIndexFocus, indexFocus: indexFocus }) }) }, `col-${indexRow}-${indexCol}`));
+        if (col.field === "command") {
+            return (col.visible !== false && (jsxRuntime.jsx("td", { role: "gridcell", "aria-colindex": indexCol, className: classNames$2(`r-rowcell p-0 fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "fixed-last": (col.fixedType === "left" && indexCol === lastObjWidthFixLeft) || (col.fixedType === "right" && indexCol === fisrtObjWidthFixRight) }, { "r-active": (isSelected && editDisable) || indexFocus === indexRow }), style: {
+                    left: col.fixedType === "left" ? objWidthFixLeft[indexCol] : undefined,
+                    right: col.fixedType === "right" ? objWidthFixRight[indexCol] : undefined,
+                    textAlign: col.textAlign ? col.textAlign : "left"
+                }, children: jsxRuntime.jsx("div", { className: "r-rowcell-div command", children: jsxRuntime.jsx(CommandElement, { commandItems: col.commandItems ?? [], handleCommandClick: handleCommandClick, indexRow: indexRow, rowData: row, setIndexFocus: setIndexFocus, indexFocus: indexFocus }) }) }, `col-${indexRow}-${indexCol}`)));
         }
-        else if (col.field === '#') {
-            return (col.visible !== false && jsxRuntime.jsx("td", { role: "gridcell", "aria-colindex": indexCol, className: classNames$2(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), tabIndex: Number(`${indexRow}${indexCol}`), style: {
-                    left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
-                    right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
-                    textAlign: 'center',
+        else if (col.field === "#") {
+            return (col.visible !== false && (jsxRuntime.jsx("td", { role: "gridcell", "aria-colindex": indexCol, className: classNames$2(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "fixed-last": (col.fixedType === "left" && indexCol === lastObjWidthFixLeft) || (col.fixedType === "right" && indexCol === fisrtObjWidthFixRight) }, { "r-active": (isSelected && editDisable) || indexFocus === indexRow }), tabIndex: Number(`${indexRow}${indexCol}`), style: {
+                    left: col.fixedType === "left" ? objWidthFixLeft[indexCol] : undefined,
+                    right: col.fixedType === "right" ? objWidthFixRight[indexCol] : undefined,
+                    textAlign: "center"
                 }, onCopy: (e) => {
-                    if (!editDisable && (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD')) {
+                    if (!editDisable && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
                         navigator.clipboard.writeText(JSON.stringify(row));
-                        notificationSuccess(t('CopySuccessful'));
+                        notificationSuccess(t("CopySuccessful"));
                         e.stopPropagation();
                     }
                 }, onPaste: (e) => {
-                    if (!editDisable && (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD')) {
-                        navigator.clipboard.readText().then((rs) => {
+                    if (!editDisable && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
+                        navigator.clipboard
+                            .readText()
+                            .then((rs) => {
                             dataSource[indexRow] = JSON.parse(rs);
                             if (fieldKey) {
                                 dataSource[indexRow][fieldKey] = defaultValue[fieldKey];
                             }
                             changeDataSource(dataSource);
-                            notificationSuccess(t('PasteSuccessful'));
-                        }).catch((ex) => { alert(ex); });
+                            notificationSuccess(t("PasteSuccessful"));
+                        })
+                            .catch((ex) => {
+                            alert(ex);
+                        });
                         e.stopPropagation();
                     }
                 }, onClick: (e) => {
-                    if (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD') {
+                    if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
                         if (!editDisable && indexRow != indexFocus) {
                             setIndexFocus(indexRow);
                         }
                         e.stopPropagation();
                     }
                 }, onKeyDown: (e) => {
-                    if (e.code === 'KeyD' && e.ctrlKey == true && (!editDisable && !addDisable) && (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD')) {
+                    if (e.code === "KeyD" && e.ctrlKey == true && !editDisable && !addDisable && (e.target.nodeName === "DIV" || e.target.nodeName === "TD")) {
                         handleDuplicate(dataSource, indexFocus, fieldKey, defaultValue, fieldUniKey, changeDataSource, tableElement, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate);
                         e.preventDefault();
                         e.stopPropagation();
                     }
-                }, children: jsxRuntime.jsx("div", { className: "r-rowcell-div", children: indexRow + 1 }) }, `col-${indexRow}-${indexCol}`));
+                }, children: jsxRuntime.jsx("div", { className: "r-rowcell-div", children: indexRow + 1 }) }, `col-${indexRow}-${indexCol}`)));
         }
-        else if (col.field === 'checkbox') {
-            return (jsxRuntime.jsx("td", { role: "gridcell", "aria-colindex": indexCol, className: classNames$2(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
-                    left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
-                    right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
-                }, children: jsxRuntime.jsx("div", { className: "r-rowcell-div cursor-pointer", style: { alignItems: 'center' }, onClick: (e) => {
+        else if (col.field === "checkbox") {
+            return (jsxRuntime.jsx("td", { role: "gridcell", "aria-colindex": indexCol, className: classNames$2(`r-rowcell p-0 fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "fixed-last": (col.fixedType === "left" && indexCol === lastObjWidthFixLeft) || (col.fixedType === "right" && indexCol === fisrtObjWidthFixRight) }, { "r-active": (isSelected && editDisable) || indexFocus === indexRow }), style: {
+                    left: col.fixedType === "left" ? objWidthFixLeft[indexCol] : undefined,
+                    right: col.fixedType === "right" ? objWidthFixRight[indexCol] : undefined
+                }, children: jsxRuntime.jsx("div", { className: "r-rowcell-div cursor-pointer", style: { alignItems: "center" }, onClick: (e) => {
                         if (selectEnable) {
                             const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
                             if (index > -1) {
@@ -43548,26 +43553,34 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                             }
                             e.stopPropagation();
                         }
-                    }, children: jsxRuntime.jsx(Input$1, { checked: isSelected, type: "checkbox", className: "cursor-pointer", style: { textAlign: col.textAlign ?? 'center' } }) }) }, `col-${indexRow}-${indexCol}`));
+                    }, children: jsxRuntime.jsx(Input$1, { checked: isSelected, type: "checkbox", className: "cursor-pointer", style: { textAlign: col.textAlign ?? "center" } }) }) }, `col-${indexRow}-${indexCol}`));
         }
         else {
             let value = row[col.field];
-            if (col.type === 'numeric' || (col.typeCondition && col.typeCondition(row) === 'numeric')) {
-                value = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
+            if (col.type === "numeric" || (col.typeCondition && col.typeCondition(row) === "numeric")) {
+                value = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", col.numericSettings?.fraction, true, false) ?? 0;
             }
-            else if (col.type === 'date') {
-                value = value ? formatDateTime(value, formatSetting?.dateFormat) : '';
+            else if (col.type === "date") {
+                value = value ? formatDateTime(value, formatSetting?.dateFormat) : "";
             }
-            else if (col.type === 'datetime') {
-                value = value ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
+            else if (col.type === "datetime") {
+                value = value ? formatDateTime(value, formatSetting?.dateFormat ?? "DD/MM/yyyy HH:mm") : "";
             }
-            const typeDis = !editDisable && (indexFocus === indexRow || col.type === '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 (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && jsxRuntime.jsx("td", { role: "gridcell", "aria-colindex": indexCol, className: classNames$2(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
-                        left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
-                        right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
+            const typeDis = !editDisable && (indexFocus === indexRow || col.type === "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 (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && (jsxRuntime.jsx("td", { role: "gridcell", "aria-colindex": indexCol, className: classNames$2(`r-rowcell fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "fixed-last": (col.fixedType === "left" && indexCol === lastObjWidthFixLeft) || (col.fixedType === "right" && indexCol === fisrtObjWidthFixRight) }, { "r-active": (isSelected && editDisable) || indexFocus === indexRow }), style: {
+                        left: col.fixedType === "left" ? objWidthFixLeft[indexCol] : undefined,
+                        right: col.fixedType === "right" ? objWidthFixRight[indexCol] : undefined
                     }, onClick: (e) => {
-                        if (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD') {
+                        if (e.target.nodeName === "DIV" || e.target.nodeName === "TD") {
                             if (!editDisable && indexRow != indexFocus) {
                                 setIndexFocus(indexRow);
                                 focusNewElement(indexCol + 1, indexRow + 1, true);
@@ -43594,30 +43607,34 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                             }
                             e.stopPropagation();
                         }
-                    }, children: jsxRuntime.jsx("div", { className: classNames$2('r-rowcell-div'), children: jsxRuntime.jsxs("div", { id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : '', className: classNames$2('r-rowcell-content', { 'r-is-invalid': errorMessage }), style: {
-                                textAlign: col.textAlign ? col.textAlign : 'left'
-                            }, children: [typeDis === 1 && !refreshRow && jsxRuntime.jsx(jsxRuntime.Fragment, { children: RenderEditCell(row, col, indexCol, indexRow) }), (typeDis !== 1 || refreshRow) && RenderContentCell(row, col, indexCol, indexRow, typeDis, value), jsxRuntime.jsx("span", { id: `error-${indexRow}-${indexCol}`, className: classNames$2('cursor-pointer text-primary icon-table', { 'd-none': !errorMessage }), children: jsxRuntime.jsx(SvgAlertCircle, { fontSize: 15.5 }) }), jsxRuntime.jsx(UncontrolledTooltip, { target: `error-${indexRow}-${indexCol}`, className: "r-tooltip tooltip-error", children: errorMessage?.toString() ?? '' })] }) }) }, `col-${indexRow}-${indexCol}`) }, indexCol));
+                    }, children: jsxRuntime.jsx("div", { className: classNames$2("r-rowcell-div"), children: jsxRuntime.jsxs("div", { id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "", className: classNames$2("r-rowcell-content", { "r-is-invalid": errorMessage }), style: {
+                                textAlign: col.textAlign ? col.textAlign : "left"
+                            }, children: [typeDis === 1 && !refreshRow && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: RenderEditCell(row, col, indexCol, indexRow) })), (typeDis !== 1 || refreshRow) && RenderContentCell(row, col, indexCol, indexRow, typeDis, value), jsxRuntime.jsx("span", { id: `error-${indexRow}-${indexCol}`, className: classNames$2("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: jsxRuntime.jsx(SvgAlertCircle, { fontSize: 15.5 }) }), jsxRuntime.jsx(UncontrolledTooltip, { target: `error-${indexRow}-${indexCol}`, className: "r-tooltip tooltip-error", children: errorMessage?.toString() ?? "" })] }) }) }, `col-${indexRow}-${indexCol}`)) }, indexCol));
         }
     };
     const RenderContentCell = (row, col, indexCol, indexRow, typeDis, value) => {
         if (typeDis === 2) {
-            const value = col.template?.(row, indexRow) ?? '';
-            if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: value }), (!refreshRow && typeDis !== 2) && jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: (col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) })] }));
+            const value = col.template?.(row, indexRow) ?? "";
+            if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: value }), !refreshRow && typeDis !== 2 && (jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: col.type === "numeric" && Number(row[col.field]) < 0 ? (jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [" ", `${formatSetting?.prefixNegative ?? "-"}${value}${formatSetting?.suffixNegative ?? ""}`] })) : (value) }))] }));
             }
             else {
                 return value;
             }
         }
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: (col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), (!(typeDis === 1 && !refreshRow) && typeDis !== 2) && jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: (col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) })] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: col.type === "numeric" && Number(row[col.field]) < 0 ? (jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [" ", `${formatSetting?.prefixNegative ?? "-"}${value}${formatSetting?.suffixNegative ?? ""}`] })) : (value) }), !(typeDis === 1 && !refreshRow) && typeDis !== 2 && (jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: col.type === "numeric" && Number(row[col.field]) < 0 ? (jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [" ", `${formatSetting?.prefixNegative ?? "-"}${value}${formatSetting?.suffixNegative ?? ""}`] })) : (value) }))] }));
     };
     const renderFooterCol = (col, indexCol) => {
-        const sumValue = (col.haveSum === true && col.type === "numeric") ? dataSource.reduce(function (accumulator, currentValue) { return (Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0)); }, 0) : 0;
-        return (jsxRuntime.jsx(React$5.Fragment, { children: (col.visible !== false) && jsxRuntime.jsx("td", { className: classNames$2(`p-0 px-50 r-footer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
-                    left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
-                    right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
-                    textAlign: col.textAlign ? col.textAlign : 'left'
-                }, children: jsxRuntime.jsxs("div", { className: "r-footer-div", children: [col.haveSum === true && col.type === "numeric" && (Number(sumValue) >= 0) && jsxRuntime.jsx(jsxRuntime.Fragment, { children: formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) }), col.haveSum === true && col.type === "numeric" && (Number(sumValue) < 0) && jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false)}${formatSetting?.suffixNegative ?? ''}`] })] }) }) }, `summarycell-${indexCol}`));
+        const sumValue = col.haveSum === true && col.type === "numeric"
+            ? dataSource.reduce(function (accumulator, currentValue) {
+                return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
+            }, 0)
+            : 0;
+        return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && (jsxRuntime.jsx("td", { className: classNames$2(`p-0 px-50 r-footer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }), style: {
+                    left: col.fixedType === "left" ? objWidthFixLeft[indexCol] : undefined,
+                    right: col.fixedType === "right" ? objWidthFixRight[indexCol] : undefined,
+                    textAlign: col.textAlign ? col.textAlign : "left"
+                }, children: jsxRuntime.jsxs("div", { className: "r-footer-div", children: [col.haveSum === true && col.type === "numeric" && Number(sumValue) >= 0 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", col.numericSettings?.fraction, true, false) })), col.haveSum === true && col.type === "numeric" && Number(sumValue) < 0 && (jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [" ", `${formatSetting?.prefixNegative ?? "-"}${formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", col.numericSettings?.fraction, true, false)}${formatSetting?.suffixNegative ?? ""}`] }))] }) })) }, `summarycell-${indexCol}`));
     };
     /**
      * Kiểm tra row có thỏa mãn tất cả filter và chứa từ khóa tìm kiếm hay không
@@ -43625,7 +43642,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
     function checkRowMatch(row, filters, keyword, searchKeys) {
         if ((!filters || filters.length === 0) && (!keyword || !searchClient))
             return true; // Không có filter thì mặc định là match
-        const isFilterMatch = filters.every(filter => {
+        const isFilterMatch = filters.every((filter) => {
             const { key, value, ope } = filter;
             const rowValue = row[key];
             if (rowValue === undefined || rowValue === null || value === undefined || value === null)
@@ -43633,32 +43650,33 @@ const TableEdit = React$5.forwardRef((props, ref) => {
             const valStr = String(rowValue).toLowerCase();
             const filterStr = String(value).toLowerCase();
             switch (ope) {
-                case 'startswith':
+                case "startswith":
                     return valStr.startsWith(filterStr);
-                case 'endswith':
+                case "endswith":
                     return valStr.endsWith(filterStr);
-                case 'contains':
+                case "contains":
                     return valStr.includes(filterStr);
-                case 'equal':
+                case "equal":
                     return rowValue == value;
-                case 'notequal':
+                case "notequal":
                     return rowValue != value;
-                case 'greaterthan':
+                case "greaterthan":
                     return rowValue > value;
-                case 'greaterthanorequal':
+                case "greaterthanorequal":
                     return rowValue >= value;
-                case 'lessthan':
+                case "lessthan":
                     return rowValue < value;
-                case 'lessthanorequal':
+                case "lessthanorequal":
                     return rowValue <= value;
                 default:
                     return false;
             }
         });
-        const isSearchMatch = !keyword || searchKeys.some(key => {
-            const val = row[key];
-            return val?.toString().toLowerCase().includes(keyword.trim().toLowerCase());
-        });
+        const isSearchMatch = !keyword ||
+            searchKeys.some((key) => {
+                const val = row[key];
+                return val?.toString().toLowerCase().includes(keyword.trim().toLowerCase());
+            });
         return isFilterMatch && isSearchMatch;
     }
     React$5.useEffect(() => {
@@ -43666,24 +43684,35 @@ const TableEdit = React$5.forwardRef((props, ref) => {
             pagingSetting?.setCurrentPage(1);
         }
     }, [searchTerm, searchSetting?.searchTerm]);
-    return (jsxRuntime.jsxs(React$5.Fragment, { children: [jsxRuntime.jsxs("div", { className: "r-table-edit", children: [jsxRuntime.jsxs("div", { className: 'r-grid', ref: gridRef, children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsxRuntime.jsx("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : 'auto'}`, minHeight: `${minHeight ? `${minHeight}px` : ''}`, maxHeight: `${maxHeight ? `${maxHeight}px` : '400px'}` }, children: jsxRuntime.jsxs("table", { style: { width: '100%' }, role: "presentation", children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: flatVisble }), jsxRuntime.jsx("thead", { className: 'r-gridheader', role: "rowgroup", children: headerColumns.map((element, indexParent) => {
+    return (jsxRuntime.jsxs(React$5.Fragment, { children: [jsxRuntime.jsxs("div", { className: "r-table-edit", children: [jsxRuntime.jsxs("div", { className: "r-grid", ref: gridRef, children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsxRuntime.jsx("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: jsxRuntime.jsxs("table", { style: { width: "100%" }, role: "presentation", children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: flatVisble }), jsxRuntime.jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((element, indexParent) => {
                                                 return (jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
-                                                        return (jsxRuntime.jsx(HeaderTableCol$1, { col: col, idTable: idTable ?? '', dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: tableElement, filterBy: filterBy, orderBy: orderBy, optionsFilter: optionsFilter, allowFilter: allowFilter, allowOrder: allowOrder, formatSetting: formatSetting, changeFilter: (val) => {
+                                                        return (jsxRuntime.jsx(HeaderTableCol$1, { col: col, idTable: idTable ?? "", dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: tableElement, filterBy: filterBy, orderBy: orderBy, optionsFilter: optionsFilter, allowFilter: allowFilter, allowOrder: allowOrder, formatSetting: formatSetting, changeFilter: (val) => {
                                                                 setFilterBy([...val]);
                                                             }, changeOrder: (val) => {
                                                                 setOrderBy([...val]);
-                                                            }, columns: contentColumns, setColumns: setContentColumns, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, totalCount: totalCount }, `header-${indexParent}-${index}`));
+                                                            }, columns: contentColumns, setColumns: (newColumns) => {
+                                                                newColumns.forEach((x) => {
+                                                                    const column = columns.find((y) => y.field === x.field);
+                                                                    if (column) {
+                                                                        column.visible = x.visible;
+                                                                        column.fixedType = x.fixedType;
+                                                                        column.width = x.width;
+                                                                    }
+                                                                });
+                                                                setRefreshColumns(!refreshColumns);
+                                                            }, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, totalCount: totalCount }, `header-${indexParent}-${index}`));
                                                     }) }, `header-${-indexParent}`));
-                                            }) }), jsxRuntime.jsx("tbody", { className: 'r-gridcontent', role: "rowgroup", children: dataSource.map((row, indexRow) => {
+                                            }) }), jsxRuntime.jsx("tbody", { className: "r-gridcontent", role: "rowgroup", children: dataSource.map((row, indexRow) => {
                                                 const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
                                                 const flagSearch = checkRowMatch(row, filterBy, searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm, searchSetting?.keyField ?? []);
                                                 if (flagSearch) {
-                                                    const flagDisplay = !pagingClient || ((indexRow + 1) > ((pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1)) && (indexRow + 1) <= ((pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0))));
-                                                    return (flagDisplay && jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", className: classNames$2('r-row'), children: contentColumns.map((col, indexCol) => renderContentCol(col, row, indexRow, indexCol, isSelected)) }, `row-${indexRow}`) }));
+                                                    const flagDisplay = !pagingClient ||
+                                                        (indexRow + 1 > (pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1) && indexRow + 1 <= (pagingSetting.pageSize ?? 0) * (pagingSetting.currentPage ?? 0));
+                                                    return (flagDisplay && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", className: classNames$2("r-row"), children: contentColumns.map((col, indexCol) => renderContentCol(col, row, indexRow, indexCol, isSelected)) }, `row-${indexRow}`) })));
                                                 }
-                                            }) }), jsxRuntime.jsx("tfoot", { className: "r-gridfoot", children: haveSum == true ? jsxRuntime.jsx("tr", { className: 'r-row', children: contentColumns.map((col, index) => {
-                                                    return (renderFooterCol(col, index));
-                                                }) }) : jsxRuntime.jsx(jsxRuntime.Fragment, {}) })] }) }), toolbarSetting?.showBottomToolbar && jsxRuntime.jsx(ToolbarBottom, { handleAdd: (numberOfRows) => {
+                                            }) }), jsxRuntime.jsx("tfoot", { className: "r-gridfoot", children: haveSum == true ? (jsxRuntime.jsx("tr", { className: "r-row", children: contentColumns.map((col, index) => {
+                                                    return renderFooterCol(col, index);
+                                                }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, {})) })] }) }), toolbarSetting?.showBottomToolbar && (jsxRuntime.jsx(ToolbarBottom, { handleAdd: (numberOfRows) => {
                                     handleAdd(dataSource, tableElement.current, indexFirstEdit, changeDataSource, pagingSetting, setIndexFocus, focusNewElement, numberOfRows);
                                 }, handleDuplicate: () => {
                                     handleDuplicate(dataSource, indexFocus, fieldKey, defaultValue, fieldUniKey, changeDataSource, tableElement, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate);
@@ -43693,7 +43722,23 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                                     handleInsertBefore(dataSource, indexFocus, defaultValue, changeDataSource, pagingClient, pagingSetting, toolbarSetting, buttonSetting, editDisable, addDisable);
                                 }, handleDeleteAll: () => {
                                     handleDeleteAll(t, messageBoxConfirmDelete, setIndexFocus, changeDataSource, editDisable, addDisable, toolbarSetting, buttonSetting);
-                                }, setOpenPopupSetupColumn: setOpenPopupSetupColumn, indexFocus: indexFocus, editDisable: editDisable, addDisable: addDisable, buttonSetting: buttonSetting, toolbarSetting: toolbarSetting, headerColumns: headerColumns, t: t })] }), pagingSetting?.allowPaging ? jsxRuntime.jsx(PagingComponent, { onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: pagingClient ? totalCount : (pagingSetting?.totalItem ?? 0), onChangePageSize: onChangePageSize }) : jsxRuntime.jsx(jsxRuntime.Fragment, {})] }), jsxRuntime.jsx(SidebarSetColumn, { handleSidebar: () => { setOpenPopupSetupColumn(!openPopupSetupColumn); }, openSidebar: openPopupSetupColumn, column: [...contentColumns], setColumn: setContentColumns })] }));
+                                }, setOpenPopupSetupColumn: setOpenPopupSetupColumn, indexFocus: indexFocus, editDisable: editDisable, addDisable: addDisable, buttonSetting: buttonSetting, toolbarSetting: toolbarSetting, headerColumns: headerColumns, t: t }))] }), pagingSetting?.allowPaging ? (jsxRuntime.jsx(PagingComponent, { onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: pagingClient ? totalCount : pagingSetting?.totalItem ?? 0, onChangePageSize: onChangePageSize })) : (jsxRuntime.jsx(jsxRuntime.Fragment, {}))] }), jsxRuntime.jsx(SidebarSetColumn, { handleSidebar: () => {
+                    setOpenPopupSetupColumn(!openPopupSetupColumn);
+                }, openSidebar: openPopupSetupColumn, column: [...contentColumns], setColumn: (newColumns) => {
+                    if (saveSettingColumn) {
+                        console.log(newColumns);
+                        saveSettingColumn(newColumns.map((x) => ({ field: x.field, headerText: x.headerText, visible: x.visible, fixedType: x.fixedType, width: x.width })));
+                    }
+                    newColumns.forEach((x) => {
+                        const column = columns.find((y) => y.field === x.field);
+                        if (column) {
+                            column.visible = x.visible;
+                            column.fixedType = x.fixedType;
+                            column.width = x.width;
+                        }
+                    });
+                    setRefreshColumns(!refreshColumns);
+                } })] }));
 });
 
 const TabsMenuComponent = ({ buttonWidth, tabParent, tabChild, resourceCodeParent, resources, resourceCode, windowSize, renderModal }) => {
@@ -46168,6 +46213,20 @@ const CheckboxInput = (props) => {
             }), children: [renderLabel({ isLabel, name, label: label ?? '' }), jsxRuntime.jsxs("div", { className: classNames$2('form-input-content', { 'hidden-label': isLabel === false }), children: [renderInput(), renderText()] })] }) }));
 };
 
+const StyleInput = (props) => {
+    const { control, name, label, labelSize, required, errors, height, disabled, isLabel, inLine, classes, disabledBackgroundColor, disabledFontFamily, disabledFontSize, disabledBold, disabledItalic, disabledUnderline } = props;
+    const renderInput = () => {
+        return (jsxRuntime.jsxs(React$5.Fragment, { children: [jsxRuntime.jsx(Controller, { name: name, control: control, render: ({ field: { value, onChange } }) => {
+                        return (jsxRuntime.jsx(InputStyleComponent, { disabledBackgroundColor: disabledBackgroundColor, disabledFontFamily: disabledFontFamily, disabledFontSize: disabledFontSize, disabledBold: disabledBold, disabledItalic: disabledItalic, disabledUnderline: disabledUnderline, disabled: disabled, value: value, onChange: onChange }));
+                    } }), errors && jsxRuntime.jsx(FormFeedback$1, { children: errors?.message })] }));
+    };
+    return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: classNames$2(' align', {
+                [labelSize ? labelSize : '']: labelSize,
+                [classes ? classes : '']: classes,
+                'form-row-inline-error': errors
+            }, inLine === false ? 'form-group ' : 'form-row-inline d-flex'), children: [renderLabel({ isLabel, name, label, required }), jsxRuntime.jsx("div", { style: { height: `${height}px` }, className: classNames$2('form-input-content', { 'hidden-label': isLabel === false }), children: renderInput() })] }) }));
+};
+
 const defaultStyleExportSetting = {
     title: {
         color: '$black',
@@ -46246,38 +46305,24 @@ const defaultStyleExportSetting = {
     }
 };
 
-const StyleInput = (props) => {
-    const { control, name, label, labelSize, required, errors, height, disabled, isLabel, inLine, classes, disabledBackgroundColor, disabledFontFamily, disabledFontSize, disabledBold, disabledItalic, disabledUnderline } = props;
-    const renderInput = () => {
-        return (jsxRuntime.jsxs(React$5.Fragment, { children: [jsxRuntime.jsx(Controller, { name: name, control: control, render: ({ field: { value, onChange } }) => {
-                        return (jsxRuntime.jsx(InputStyleComponent, { disabledBackgroundColor: disabledBackgroundColor, disabledFontFamily: disabledFontFamily, disabledFontSize: disabledFontSize, disabledBold: disabledBold, disabledItalic: disabledItalic, disabledUnderline: disabledUnderline, disabled: disabled, value: value, onChange: onChange }));
-                    } }), errors && jsxRuntime.jsx(FormFeedback$1, { children: errors?.message })] }));
-    };
-    return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: classNames$2(' align', {
-                [labelSize ? labelSize : '']: labelSize,
-                [classes ? classes : '']: classes,
-                'form-row-inline-error': errors
-            }, inLine === false ? 'form-group ' : 'form-row-inline d-flex'), children: [renderLabel({ isLabel, name, label, required }), jsxRuntime.jsx("div", { style: { height: `${height}px` }, className: classNames$2('form-input-content', { 'hidden-label': isLabel === false }), children: renderInput() })] }) }));
-};
-
 const ExportExcelComponent = ({ openModal, typeModal, handleModal, windowSize, dataItem, columns, columnGroups }) => {
     const { t } = reactI18next.useTranslation();
     const [dataSelected, setDataSelected] = React$5.useState([]);
     const [selectedGroups, setSelectedGroups] = React$5.useState([]);
     const { control, reset, handleSubmit, clearErrors, getValues, setValue } = useForm({
-        mode: 'onChange',
+        mode: "onChange",
         defaultValues: defaultStyleExportSetting
     });
     const handleCancel = () => {
-        handleModal('ExportExcelComponent');
+        handleModal("ExportExcelComponent");
         clearErrors();
         setDataSelected([]);
         reset();
         setSelectedGroups([]);
     };
     React$5.useEffect(() => {
-        if (openModal && typeModal === 'ExportExcel') {
-            setValue('textTitle', dataItem.title);
+        if (openModal && typeModal === "ExportExcel") {
+            setValue("textTitle", dataItem.title);
         }
     }, [openModal]);
     const handleToggleGroup = (groupName) => {
@@ -46302,9 +46347,10 @@ const ExportExcelComponent = ({ openModal, typeModal, handleModal, windowSize, d
         submit(data);
     };
     const submit = (data) => {
-        dataItem.ExportExcelApi({
+        dataItem
+            .ExportExcelApi({
             id: dataItem.id,
-            columns: dataSelected.map(item => ({ ...item, headerText: t(item.headerText) })),
+            columns: dataSelected.map((item) => ({ ...item, headerText: t(item.headerText) })),
             countRowHeader: dataItem.countRowHeader,
             groupby: dataItem.groupby,
             fieldSums: dataItem.fieldSums,
@@ -46312,55 +46358,57 @@ const ExportExcelComponent = ({ openModal, typeModal, handleModal, windowSize, d
             order: dataItem.order,
             organizationId: dataItem.organizationId,
             style: data,
-            title: getValues('textTitle'),
-            subtitle: getValues('textSubtitle')
-        }).unwrap()
+            title: getValues("textTitle"),
+            subtitle: getValues("textSubtitle")
+        })
+            .unwrap()
             .then((rs) => {
             const url = window.URL.createObjectURL(new Blob([rs]));
-            const link = document.createElement('a');
+            const link = document.createElement("a");
             link.href = url;
-            link.setAttribute('download', `${dataItem.title}.xlsx`);
+            link.setAttribute("download", `${dataItem.title}.xlsx`);
             document.body.appendChild(link);
             link.click();
             handleModal();
-        }).catch(() => notificationError('Fail'));
+        })
+            .catch(() => notificationError("Fail"));
     };
     const renderFooterButtons = () => {
-        return (jsxRuntime.jsxs(React$5.Fragment, { children: [jsxRuntime.jsx(Button$1, { color: "primary", className: "me-1", onClick: handleSubmit(onSubmit), children: t('Export') }), jsxRuntime.jsx(Button$1, { color: "secondary", onClick: handleCancel, outline: true, className: "me-1", children: t('Close') })] }));
+        return (jsxRuntime.jsxs(React$5.Fragment, { children: [jsxRuntime.jsx(Button$1, { color: "primary", className: "me-1", onClick: handleSubmit(onSubmit), children: t("Export") }), jsxRuntime.jsx(Button$1, { color: "secondary", onClick: handleCancel, outline: true, className: "me-1", children: t("Close") })] }));
     };
     const rightToolbarTemplate = () => {
-        return (jsxRuntime.jsx("div", { className: 'd-flex', children: columnGroups?.map((ele, idx) => (jsxRuntime.jsx("div", { style: { width: ele.width ?? 150 }, children: jsxRuntime.jsx(CheckboxInput, { control: control, name: `group_${ele.label}`, label: t(ele.label), reverse: true, labelSize: 'align-items-center', checked: selectedGroups.includes(ele.label), callback: () => handleToggleGroup(ele.label) }) }, idx))) }));
+        return (jsxRuntime.jsx("div", { className: "d-flex", children: columnGroups?.map((ele, idx) => (jsxRuntime.jsx("div", { style: { width: ele.width ?? 150 }, children: jsxRuntime.jsx(CheckboxInput, { control: control, name: `group_${ele.label}`, label: t(ele.label), reverse: true, labelSize: "align-items-center", checked: selectedGroups.includes(ele.label), callback: () => handleToggleGroup(ele.label) }) }, idx))) }));
     };
     const toolbarTopOptions = [
         {
             template: rightToolbarTemplate,
-            align: 'left'
+            align: "left"
         }
     ];
-    return (jsxRuntime.jsxs(Sidebar, { open: openModal && typeModal === 'ExportExcel', toggleSidebar: handleCancel, width: 900, children: [jsxRuntime.jsx(ModalHeader, { typeModal: typeModal, handleModal: () => handleCancel(), title: t('Export Excel Setting') }), jsxRuntime.jsx(lib.Scrollbars, { autoHeight: true, autoHeightMax: windowSize.innerHeight - 120, autoHeightMin: windowSize.innerHeight - 120, children: jsxRuntime.jsxs(ModalBody$1, { children: [jsxRuntime.jsxs("div", { className: 'box form-box__border mb-2', children: [jsxRuntime.jsx("h5", { className: 'm-0 form-box__border--title', children: t('Tùy chỉnh cột') }), jsxRuntime.jsx(Row$1, { className: "gy-1", children: jsxRuntime.jsx(Col$1, { lg: 12, md: 12, xs: 12, children: jsxRuntime.jsx(TableEdit, { dataSource: getCombinedColumns(), toolbarSetting: {
+    return (jsxRuntime.jsxs(Sidebar, { open: openModal && typeModal === "ExportExcel", toggleSidebar: handleCancel, width: 900, children: [jsxRuntime.jsx(ModalHeader, { typeModal: typeModal, handleModal: () => handleCancel(), title: t("Export Excel Setting") }), jsxRuntime.jsx(lib.Scrollbars, { autoHeight: true, autoHeightMax: windowSize.innerHeight - 120, autoHeightMin: windowSize.innerHeight - 120, children: jsxRuntime.jsxs(ModalBody$1, { children: [jsxRuntime.jsxs("div", { className: "box form-box__border mb-2", children: [jsxRuntime.jsx("h5", { className: "m-0 form-box__border--title", children: t("Tùy chỉnh cột") }), jsxRuntime.jsx(Row$1, { className: "gy-1", children: jsxRuntime.jsx(Col$1, { lg: 12, md: 12, xs: 12, children: jsxRuntime.jsx(TableEdit, { dataSource: getCombinedColumns(), toolbarSetting: {
                                                 showTopToolbar: true,
                                                 showBottomToolbar: true,
                                                 toolbarBottomOptions: toolbarTopOptions
                                             }, maxHeight: windowSize.innerHeight - 525, minHeight: 150, columns: [
                                                 {
-                                                    field: 'checkbox',
-                                                    headerText: '',
-                                                    textAlign: 'center',
-                                                    invisibleDisable: true,
+                                                    field: "checkbox",
+                                                    headerText: "",
+                                                    textAlign: "center",
                                                     width: 20
                                                 },
                                                 {
-                                                    field: 'field',
-                                                    invisibleDisable: true,
-                                                    headerText: '',
+                                                    field: "field",
+                                                    headerText: "",
                                                     visible: false,
                                                     isPrimarykey: true
                                                 },
                                                 {
-                                                    type: 'text',
+                                                    type: "text",
                                                     field: "headerText",
-                                                    headerText: 'Column name',
-                                                    template: (value) => { return t(value.headerText); },
+                                                    headerText: "Column name",
+                                                    template: (value) => {
+                                                        return t(value.headerText);
+                                                    },
                                                     width: 360,
                                                     minWidth: 320,
                                                     maxWidth: 400
@@ -46368,7 +46416,7 @@ const ExportExcelComponent = ({ openModal, typeModal, handleModal, windowSize, d
                                             ], isMulti: true, searchSetting: {
                                                 searchEnable: true,
                                                 searchClient: true
-                                            }, selectedItem: dataSelected, setSelectedItem: setDataSelected, selectEnable: true, addDisable: true, editDisable: true }, 'TableFile') }) })] }), jsxRuntime.jsxs("div", { className: 'box form-box__border', children: [jsxRuntime.jsx("h5", { className: 'm-0 form-box__border--title', children: t('Title report') }), jsxRuntime.jsxs(Row$1, { className: "gy-1", children: [jsxRuntime.jsx(Col$1, { lg: 8, md: 12, xs: 12, children: jsxRuntime.jsx(TextInput, { control: control, name: "textTitle", label: t("Title report"), labelSize: 'label-small', placeholder: t("Đặt tên cho tiêu đề báo cáo"), inLine: true }) }), jsxRuntime.jsx(Col$1, { lg: 8, md: 12, xs: 12, children: jsxRuntime.jsx(TextInput, { control: control, name: "textSubtitle", label: t("Subtitle"), labelSize: 'label-small', placeholder: t("Đặt tên cho tiêu đề phụ"), inLine: true }) }), jsxRuntime.jsx(Col$1, { lg: 8, md: 12, xs: 12, children: jsxRuntime.jsx(StyleInput, { control: control, name: "title", disabledBackgroundColor: true, label: 'Title report', labelSize: "label-small" }) }), jsxRuntime.jsx(Col$1, { lg: 4, md: 6, xs: 6, children: jsxRuntime.jsx(NumberInput, { control: control, name: "title.row", label: 'Row', labelSize: "label-small", min: 0 }) }), jsxRuntime.jsx(Col$1, { lg: 8, md: 12, xs: 12, children: jsxRuntime.jsx(StyleInput, { control: control, name: "subtitle", disabledBackgroundColor: true, label: 'Subtitle', labelSize: "label-small" }) }), jsxRuntime.jsx(Col$1, { lg: 4, md: 6, xs: 6, children: jsxRuntime.jsx(NumberInput, { control: control, name: "subtitle.row", label: 'Row', labelSize: "label-small", min: 0 }) }), jsxRuntime.jsx(Col$1, { lg: 8, md: 12, xs: 12, children: jsxRuntime.jsx(StyleInput, { control: control, name: "header", label: 'Title table', labelSize: "label-small" }) }), jsxRuntime.jsx(Col$1, { lg: 4, md: 6, xs: 6, children: jsxRuntime.jsx(NumberInput, { control: control, name: "header.row", label: 'Row', labelSize: "label-small", min: 0 }) }), jsxRuntime.jsx(Col$1, { lg: 8, md: 12, xs: 12, children: jsxRuntime.jsx(StyleInput, { control: control, name: "content", label: 'Content table', labelSize: "label-small" }) })] })] })] }) }), jsxRuntime.jsx("div", { className: "d-flex justify-content-end p-1", style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }, children: renderFooterButtons() })] }));
+                                            }, selectedItem: dataSelected, setSelectedItem: setDataSelected, selectEnable: true, addDisable: true, editDisable: true }, "TableFile") }) })] }), jsxRuntime.jsxs("div", { className: "box form-box__border", children: [jsxRuntime.jsx("h5", { className: "m-0 form-box__border--title", children: t("Title report") }), jsxRuntime.jsxs(Row$1, { className: "gy-1", children: [jsxRuntime.jsx(Col$1, { lg: 8, md: 12, xs: 12, children: jsxRuntime.jsx(TextInput, { control: control, name: "textTitle", label: t("Title report"), labelSize: "label-small", placeholder: t("Đặt tên cho tiêu đề báo cáo"), inLine: true }) }), jsxRuntime.jsx(Col$1, { lg: 8, md: 12, xs: 12, children: jsxRuntime.jsx(TextInput, { control: control, name: "textSubtitle", label: t("Subtitle"), labelSize: "label-small", placeholder: t("Đặt tên cho tiêu đề phụ"), inLine: true }) }), jsxRuntime.jsx(Col$1, { lg: 8, md: 12, xs: 12, children: jsxRuntime.jsx(StyleInput, { control: control, name: "title", disabledBackgroundColor: true, label: "Title report", labelSize: "label-small" }) }), jsxRuntime.jsx(Col$1, { lg: 4, md: 6, xs: 6, children: jsxRuntime.jsx(NumberInput, { control: control, name: "title.row", label: "Row", labelSize: "label-small", min: 0 }) }), jsxRuntime.jsx(Col$1, { lg: 8, md: 12, xs: 12, children: jsxRuntime.jsx(StyleInput, { control: control, name: "subtitle", disabledBackgroundColor: true, label: "Subtitle", labelSize: "label-small" }) }), jsxRuntime.jsx(Col$1, { lg: 4, md: 6, xs: 6, children: jsxRuntime.jsx(NumberInput, { control: control, name: "subtitle.row", label: "Row", labelSize: "label-small", min: 0 }) }), jsxRuntime.jsx(Col$1, { lg: 8, md: 12, xs: 12, children: jsxRuntime.jsx(StyleInput, { control: control, name: "header", label: "Title table", labelSize: "label-small" }) }), jsxRuntime.jsx(Col$1, { lg: 4, md: 6, xs: 6, children: jsxRuntime.jsx(NumberInput, { control: control, name: "header.row", label: "Row", labelSize: "label-small", min: 0 }) }), jsxRuntime.jsx(Col$1, { lg: 8, md: 12, xs: 12, children: jsxRuntime.jsx(StyleInput, { control: control, name: "content", label: "Content table", labelSize: "label-small" }) })] })] })] }) }), jsxRuntime.jsx("div", { className: "d-flex justify-content-end p-1", style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }, children: renderFooterButtons() })] }));
 };
 
 const TabValidateImportExcel = (props) => {