react-table-edit 1.5.44 → 1.5.45

package/dist/index.js

@@ -19836,20 +19836,17 @@ const isNullOrUndefined$1 = (d) => {
 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
+    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
-            r = ((d + r) % 16) | 0;
+            r = (d + r) % 16 | 0;
             d = Math.floor(d / 16);
         }
         else {
             //Use microseconds since page-load if supported
-            r = ((d2 + r) % 16) | 0;
+            r = (d2 + r) % 16 | 0;
             d2 = Math.floor(d2 / 16);
         }
         return (c === 'x' ? r : 0x3).toString(16);
@@ -19871,16 +19868,12 @@ const formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 2,
     // eslint-disable-next-line
     if (str || str == '0') {
         str = str.toString();
-        const value = decimalSeparator !== '.'
-            ? str.toString().replaceAll('.', decimalSeparator ?? '')
-            : str;
+        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) {
             const intergerArr = haveNegative ? arr[0] : arr[0].replace('-', '');
-            return flag
-                ? `${intergerArr}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ''}`
-                : intergerArr;
+            return flag ? `${intergerArr}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ''}` : intergerArr;
         }
         else {
             let flagNegative = false;
@@ -19904,9 +19897,7 @@ const formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 2,
             if (flagNegative && haveNegative) {
                 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 {
@@ -19929,7 +19920,7 @@ const formatDateTime = (data, format = 'dd/MM/yyyy') => {
         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'),
+        mm: String(date.getMinutes()).padStart(2, '0')
     };
     return format.replace(/dd|DD|MM|yyyy|HH|mm/g, (match) => map[match]);
 };
@@ -19950,7 +19941,7 @@ const FindNodeByPath = (tree, path) => {
         parent: current,
         lastIndex: levels.at(-1),
         firstIndex: levels.length === 1 ? levels[0] : -1,
-        node,
+        node
     };
 };
 /**
@@ -19978,7 +19969,7 @@ const calculateTableStructure = (columns, settingColumns, groupColumns) => {
     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;
@@ -20016,8 +20007,7 @@ const calculateTableStructure = (columns, settingColumns, groupColumns) => {
                         newCell.numericSettings = { fraction: setting.fraction };
                     }
                 }
-                newCell.headerDisplay =
-                    setting.headerText || (newCell.headerDisplay ?? newCell.headerText);
+                newCell.headerDisplay = setting.headerText || (newCell.headerDisplay ?? newCell.headerText);
             }
             else {
                 if (newCell.columns?.length) {
@@ -20053,13 +20043,11 @@ const calculateTableStructure = (columns, settingColumns, groupColumns) => {
                 ...col,
                 columns: col.columns ?? [],
                 colspan,
-                rowspan: hasChildren ? 1 : maxDepth - level,
+                rowspan: hasChildren ? 1 : maxDepth - level
             };
             levels[level].push(cell);
             const headerKey = `${level}-${indexCol}`;
-            if (cell.fixedType === 'left' &&
-                cell.visible !== false &&
-                cell.isGroup !== true) {
+            if (cell.fixedType === 'left' && cell.visible !== false && cell.isGroup !== true) {
                 objHeaderWidthFixLeft[headerKey] = leftTotal;
             }
             if (!hasChildren) {
@@ -20067,48 +20055,33 @@ const calculateTableStructure = (columns, settingColumns, groupColumns) => {
                 const width = cell.width ?? 40;
                 cell.index = index;
                 flat.push(cell);
-                if (cell.fixedType === 'left' &&
-                    cell.visible !== false &&
-                    cell.isGroup !== true) {
+                if (cell.fixedType === 'left' && cell.visible !== false && cell.isGroup !== true) {
                     objWidthFixLeft[index] = leftTotal;
                     leftTotal += width;
                 }
-                if (cell.fixedType === 'right' &&
-                    cell.visible !== false &&
-                    cell.isGroup !== true) {
+                if (cell.fixedType === 'right' && cell.visible !== false && cell.isGroup !== true) {
                     rightTotal -= width;
                     objWidthFixRight[index] = rightTotal;
                 }
             }
-            if (cell.fixedType === 'right' &&
-                cell.visible !== false &&
-                cell.isGroup !== true) {
+            if (cell.fixedType === 'right' && cell.visible !== false && cell.isGroup !== true) {
                 objHeaderWidthFixRight[headerKey] = rightTotal;
             }
             return colspanSum + colspan;
         }, 0);
     };
     calcTotalRightWidth(columns);
-    if ((settingColumns?.length ?? 0) > 0) {
-        applySetting(columns);
-    }
-    traverse(columns);
+    const newColumns = (settingColumns?.length ?? 0) > 0 ? applySetting(columns) : columns;
+    traverse(newColumns);
     // Danh sách các cột được hiển thị
     // const flatVisble = flat.filter((e) => e.visible !== false)
-    const flatVisbleContent = flat.filter((x) => x.visible !== false &&
-        x.field !== 'command' &&
-        x.field !== '#' &&
-        x.field !== 'checkbox');
+    const flatVisbleContent = flat.filter((x) => x.visible !== false && x.field !== 'command' && x.field !== '#' && x.field !== 'checkbox');
     // Tính toán vị trí đầu tiên và cuối cùng của các cột cố định
     const lastObjWidthFixLeft = Math.max(...Object.keys(objWidthFixLeft).map(Number), 0);
     const fisrtObjWidthFixRight = Math.min(...Object.keys(objWidthFixRight).map(Number), flat.length);
     // Tính toán vị trí đầu tiên và cuối cùng của các cột có thể sửa
     const indexFirstEdit = flat.findIndex((item) => item.editEnable && item.visible !== false && !item.disabledCondition);
-    const indexLastEdit = flat
-        .map((item, idx) => item.editEnable && item.visible !== false && !item.disabledCondition
-        ? idx
-        : -1)
-        .reduce((acc, val) => (val > acc ? val : acc), -1);
+    const indexLastEdit = flat.map((item, idx) => (item.editEnable && item.visible !== false && !item.disabledCondition ? idx : -1)).reduce((acc, val) => (val > acc ? val : acc), -1);
     return {
         levels,
         flat,
@@ -20121,7 +20094,7 @@ const calculateTableStructure = (columns, settingColumns, groupColumns) => {
         objHeaderWidthFixRight,
         objHeaderWidthFixLeft,
         indexFirstEdit,
-        indexLastEdit,
+        indexLastEdit
     };
 };
 /**
@@ -20131,10 +20104,7 @@ const CheckRowMatch = (row, filters, keyword, searchKeys) => {
     const isFilterMatch = filters.every((filter) => {
         const { key, value, ope } = filter;
         const rowValue = row[key];
-        if (rowValue === undefined ||
-            rowValue === null ||
-            value === undefined ||
-            value === null) {
+        if (rowValue === undefined || rowValue === null || value === undefined || value === null) {
             return false;
         }
         const valStr = String(rowValue).toLowerCase();
@@ -20167,10 +20137,7 @@ const CheckRowMatch = (row, filters, keyword, searchKeys) => {
     const isSearchMatch = !keyword ||
         searchKeys.some((key) => {
             const val = row[key];
-            return val
-                ?.toString()
-                .toLowerCase()
-                .includes(keyword.trim().toLowerCase());
+            return val?.toString().toLowerCase().includes(keyword.trim().toLowerCase());
         });
     return isFilterMatch && isSearchMatch;
 };
@@ -20330,7 +20297,7 @@ const TableElement$1 = React__default["default"].memo((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, compareFunction, } = 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);
@@ -20347,8 +20314,8 @@ const SelectTable = React$5.forwardRef((props, ref) => {
         {
             headerText: 'Name',
             field: fieldLabel ?? 'label',
-            width: menuWidth,
-        },
+            width: menuWidth
+        }
     ];
     const closeMenu = () => {
         setDropdownOpen(false);
@@ -20362,7 +20329,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                 ...val,
                 [fieldLabel ?? 'label']: val.valueCreate,
                 isCreated: undefined,
-                isCreatedItem: true,
+                isCreatedItem: true
             };
             options.unshift(newVal);
             onChange(newVal);
@@ -20372,9 +20339,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
     };
     React$5.useEffect(() => {
         if (dropdownOpen && value && !isMulti && selectMenuTableRef) {
-            const index = currentOptions?.findIndex((row) => compareFunction
-                ? compareFunction(row)
-                : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value']);
+            const index = currentOptions?.findIndex((row) => (compareFunction ? compareFunction(row) : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value']));
             if (index >= 0) {
                 selectMenuTableRef.current.scrollTo({ top: (index - 1) * 30 });
             }
@@ -20421,28 +20386,14 @@ const SelectTable = React$5.forwardRef((props, ref) => {
             }
         }
     };
-    const listKeyUse = [
-        'Escape',
-        'Space',
-        'Enter',
-        'Tab',
-        'NumpadEnter',
-        'ArrowDown',
-        'ArrowUp',
-        'F9',
-    ];
+    const listKeyUse = ['Escape', 'Space', 'Enter', 'Tab', 'NumpadEnter', 'ArrowDown', 'ArrowUp', 'F9'];
     const handleOnKeyDown = (e) => {
         let key = '';
         if (onKeyDown &&
             (!dropdownOpen ||
                 !listKeyUse.includes(e.code) ||
-                ((e.code === 'Enter' ||
-                    e.code === 'Tab' ||
-                    e.code === 'NumpadEnter' ||
-                    e.code === 'Space') &&
-                    !(currentOptions[indexFocus] || haveCreateNew)) ||
-                ((e.code === 'ArrowDown' || e.code === 'ArrowUp') &&
-                    currentOptions.length === 0) ||
+                ((e.code === 'Enter' || e.code === 'Tab' || e.code === 'NumpadEnter' || e.code === 'Space') && !(currentOptions[indexFocus] || haveCreateNew)) ||
+                ((e.code === 'ArrowDown' || e.code === 'ArrowUp') && currentOptions.length === 0) ||
                 (e.code === 'Escape' && !(isClearable && value && !isDisabled)))) {
             key = onKeyDown(e);
         }
@@ -20459,7 +20410,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                         valueCreate: searchTerm,
                         [fieldValue ?? 'value']: searchTerm,
                         [fieldLabel ?? 'label']: `${t('Create')} '${searchTerm}'`,
-                        isCreated: true,
+                        isCreated: true
                     };
                 }
                 else {
@@ -20481,16 +20432,14 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                     flag = true;
                 }
             }
-            else if (e.code === 'Enter' ||
-                e.code === 'Tab' ||
-                e.code === 'NumpadEnter') {
+            else if (e.code === 'Enter' || e.code === 'Tab' || e.code === 'NumpadEnter') {
                 let newItem;
                 if (haveCreateNew && indexFocus === 0) {
                     newItem = {
                         valueCreate: searchTerm,
                         [fieldValue ?? 'value']: searchTerm,
                         [fieldLabel ?? 'label']: `${t('Create')} '${searchTerm}'`,
-                        isCreated: true,
+                        isCreated: true
                     };
                 }
                 else {
@@ -20509,10 +20458,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                         newIndex = indexFocus + 1;
                     }
                     else if (value) {
-                        newIndex =
-                            currentOptions?.findIndex((row) => compareFunction
-                                ? compareFunction(row)
-                                : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value']) + 1;
+                        newIndex = currentOptions?.findIndex((row) => (compareFunction ? compareFunction(row) : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value'])) + 1;
                     }
                     if (newIndex < currentOptions.length) {
                         setIndexFocus(newIndex);
@@ -20536,10 +20482,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                         newIndex = indexFocus - 1;
                     }
                     else if (value) {
-                        newIndex =
-                            currentOptions?.findIndex((row) => compareFunction
-                                ? compareFunction(row)
-                                : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value']) - 1;
+                        newIndex = currentOptions?.findIndex((row) => (compareFunction ? compareFunction(row) : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value'])) - 1;
                     }
                     if (newIndex >= 0) {
                         setIndexFocus(newIndex);
@@ -20572,11 +20515,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                     scrollToElement(selectMenuTableRef.current, selectMenuTableRef.current.scrollHeight);
                 }
                 else if (flag === 0 && rect.bottom + 30 > parentRect.bottom) {
-                    scrollToElement(selectMenuTableRef.current, elementFocus.offsetTop -
-                        selectMenuTableRef.current.offsetTop -
-                        parentRect.height +
-                        rect.height +
-                        50);
+                    scrollToElement(selectMenuTableRef.current, elementFocus.offsetTop - selectMenuTableRef.current.offsetTop - parentRect.height + rect.height + 50);
                 }
                 else if (flag === 2 && rect.top < parentRect.top + 50) {
                     scrollToElement(selectMenuTableRef.current, elementFocus.offsetTop - 65);
@@ -20590,7 +20529,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
         timeOutElement = setTimeout(() => {
             elemment.scrollTo({
                 top,
-                behavior: 'smooth',
+                behavior: 'smooth'
             });
         }, 100);
     };
@@ -20600,12 +20539,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
         }
         for (let index = 0; index < columnsSearch.length; index++) {
             const key = columnsSearch[index].field.trim();
-            if (data[key] &&
-                data[key]
-                    .toString()
-                    .trim()
-                    .toLowerCase()
-                    .includes(keyword.trim().toLowerCase())) {
+            if (data[key] && data[key].toString().trim().toLowerCase().includes(keyword.trim().toLowerCase())) {
                 return true;
             }
         }
@@ -20621,8 +20555,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
         if (!searchTerm) {
             setOptionsLoad(undefined);
         }
-        else if (allowCreate &&
-            !currentOptions?.find((x) => x[fieldLabel ?? 'label'] === searchTerm)) {
+        else if (allowCreate && !currentOptions?.find((x) => x[fieldLabel ?? 'label'] === searchTerm)) {
             setHaveCreateNew(true);
             return;
         }
@@ -20636,22 +20569,15 @@ const SelectTable = React$5.forwardRef((props, ref) => {
         const { indexRow, row, isSelected, level = 0 } = props;
         return (jsxRuntime.jsxs("tr", { id: `row-select-table-${indexRow}`, style: { paddingLeft: 10 * level }, className: classNames$1('r-select-row', { 'last-row': indexRow === currentOptions.length - 1 }, { 'fisrt-row': indexRow === 0 }), children: [isMulti && (jsxRuntime.jsx("td", { className: classNames$1(`r-select-rowcell`, {
                         'r-select-move': indexFocus === indexRow,
-                        'r-select-active': !isMulti &&
-                            value &&
-                            (compareFunction
-                                ? compareFunction(row)
-                                : value[fieldValue ?? 'value'] ===
-                                    row[fieldValue ?? 'value']),
+                        'r-select-active': !isMulti && value && (compareFunction ? compareFunction(row) : value[fieldValue ?? 'value'] === row[fieldValue ?? 'value'])
                     }), style: {
                         width: 40,
                         textAlign: 'center',
                         padding: 0,
-                        paddingBottom: 6,
+                        paddingBottom: 6
                     }, onClick: (e) => {
                         if (isMulti) {
-                            const index = value?.findIndex((x) => compareFunction
-                                ? compareFunction(row)
-                                : 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]);
@@ -20669,42 +20595,28 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                         }
                     }, children: jsxRuntime.jsx(Input$1, { checked: isSelected, type: "checkbox", className: "cursor-pointer", onChange: () => { }, style: { textAlign: 'center', marginTop: 6 } }) })), (columns ? columns : defaultColumns).map((col, indexCol) => {
                     let valueDisplay = row[col.field];
-                    if (col.type === 'numeric' ||
-                        (col.typeCondition && col.typeCondition(row) === 'numeric')) {
-                        valueDisplay =
-                            formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? '.', formatSetting?.thousandSeparator ?? ',', col.fraction ?? 0, true, false) ?? 0;
+                    if (col.type === 'numeric' || (col.typeCondition && col.typeCondition(row) === 'numeric')) {
+                        valueDisplay = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? '.', formatSetting?.thousandSeparator ?? ',', col.fraction ?? 0, true, false) ?? 0;
                     }
                     else if (col.type === 'date') {
-                        valueDisplay = valueDisplay
-                            ? formatDateTime(valueDisplay, formatSetting?.dateFormat)
-                            : '';
+                        valueDisplay = valueDisplay ? formatDateTime(valueDisplay, formatSetting?.dateFormat) : '';
                     }
                     else if (col.type === 'datetime') {
-                        valueDisplay = valueDisplay
-                            ? formatDateTime(valueDisplay, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm')
-                            : '';
+                        valueDisplay = valueDisplay ? formatDateTime(valueDisplay, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
                     }
                     return (jsxRuntime.jsxs(React$5.Fragment, { children: [col.visible !== false && (jsxRuntime.jsx("td", { id: `select-${id}-${indexRow}-${indexCol}`, 
                                 // ref={refRow}
                                 className: classNames$1(`r-select-rowcell`, {
                                     'r-select-move': indexFocus === indexRow,
-                                    'r-select-active': !isMulti &&
-                                        value &&
-                                        (compareFunction
-                                            ? compareFunction(row)
-                                            : value[fieldValue ?? 'value'] ===
-                                                row[fieldValue ?? 'value']),
+                                    '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',
+                                    textAlign: col.textAlign ? col.textAlign : 'left'
                                 }, onClick: (e) => {
                                     if (isMulti) {
-                                        const index = value?.findIndex((x) => compareFunction
-                                            ? compareFunction(row)
-                                            : 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]);
@@ -20731,7 +20643,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                                         setIndexFocus(indexRow);
                                     }
                                     e.stopPropagation();
-                                }, children: col.template ? (col.template(row, indexRow)) : col.type === 'numeric' && Number(row[col.field]) < 0 ? (jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] })) : (valueDisplay) }, `col-${indexRow}-${indexCol}`)), checkOverflow(indexRow, indexCol) && (jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay }))] }, indexCol));
+                                }, children: col.template ? col.template(row, indexRow) : col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : valueDisplay }, `col-${indexRow}-${indexCol}`)), checkOverflow(indexRow, indexCol) && (jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay }))] }, indexCol));
                 })] }, `row-${indexRow}`));
     });
     return (jsxRuntime.jsx("div", { className: classNames$1('react-select-table', { 'is-invalid': invalid }), ref: ref, id: id, children: jsxRuntime.jsx("div", { ref: selectTableRef, children: jsxRuntime.jsxs(Dropdown$1$1, { isOpen: dropdownOpen, toggle: () => { }, onMouseDown: (e) => e.preventDefault(), children: [jsxRuntime.jsxs(DropdownToggle$1, { onClick: (e) => {
@@ -20741,26 +20653,14 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                             }
                             e.preventDefault();
                         }, tag: "div", style: {
-                            width: width
-                                ? width
-                                : selectTableRef?.current?.clientWidth
-                                    ? selectTableRef?.current?.clientWidth
-                                    : 'auto',
+                            width: width ? width : selectTableRef?.current?.clientWidth ? selectTableRef?.current?.clientWidth : 'auto'
                         }, className: classNames$1('select-table-control', { 'r-select-is-disabled': isDisabled }, { 'r-select-is-open': dropdownOpen }, { 'r-select-is-focus': isFocus }, { 'r-select-is-invalid': invalid }), children: [jsxRuntime.jsxs("div", { className: "select-table-container", children: [isMulti ? (jsxRuntime.jsx("div", { className: classNames$1('select-value is-mutil', {
-                                            'd-none': searchTerm,
+                                            'd-none': searchTerm
                                         }), children: value?.map((ele, index) => {
-                                            return (jsxRuntime.jsxs("span", { children: [index === 0 ? '' : ', ', formatOptionLabel
-                                                        ? formatOptionLabel(ele)
-                                                        : ele[fieldLabel ?? 'label']] }, index));
+                                            return (jsxRuntime.jsxs("span", { children: [index === 0 ? '' : ', ', formatOptionLabel ? formatOptionLabel(ele) : ele[fieldLabel ?? 'label']] }, index));
                                         }) })) : (jsxRuntime.jsxs("div", { className: classNames$1('select-value', {
-                                            'd-none': searchTerm,
-                                        }), children: [value
-                                                ? formatOptionLabel
-                                                    ? formatOptionLabel(value)
-                                                    : value[fieldLabel ?? 'label']
-                                                : '', ' '] })), !((isMulti ? value?.length > 0 : value) ||
-                                        isDisabled ||
-                                        searchTerm) && (jsxRuntime.jsx("div", { className: classNames$1('select-placeholder'), children: placeholder })), jsxRuntime.jsx("div", { className: "input-container", children: jsxRuntime.jsx("input", { style: { textAlign: textAlign ?? 'left' }, ref: inputRef, className: classNames$1('select-input'), readOnly: isDisabled, value: searchTerm, onPaste: (e) => onPaste && !dropdownOpen && onPaste(e), onChange: (val) => {
+                                            'd-none': searchTerm
+                                        }), children: [value ? (formatOptionLabel ? formatOptionLabel(value) : value[fieldLabel ?? 'label']) : '', ' '] })), !((isMulti ? value?.length > 0 : value) || isDisabled || searchTerm) && jsxRuntime.jsx("div", { className: classNames$1('select-placeholder'), children: placeholder }), jsxRuntime.jsx("div", { className: "input-container", children: jsxRuntime.jsx("input", { style: { textAlign: textAlign ?? 'left' }, ref: inputRef, className: classNames$1('select-input'), readOnly: isDisabled, value: searchTerm, onPaste: (e) => onPaste && !dropdownOpen && onPaste(e), onChange: (val) => {
                                                 if (val.target.value) {
                                                     if (loadOptions && val.target.value) {
                                                         setIsLoading(true);
@@ -20782,23 +20682,21 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                             width: width ? width + 2 : 'min-content',
                             position: 'fixed',
                             borderRadius: 4,
-                            zIndex: 9999,
+                            zIndex: 9999
                         }, children: jsxRuntime.jsx(DropdownItem$1, { className: classNames$1('p-0 menu-select-table'), tag: "div", header: true, children: dropdownOpen && (jsxRuntime.jsx("div", { style: { backgroundColor: 'none' }, onMouseDown: (e) => {
                                     if (!isDisabled) {
                                         inputRef?.current.focus();
                                         e.preventDefault();
                                     }
                                 }, children: jsxRuntime.jsxs("div", { className: "r-select-grid", children: [jsxRuntime.jsx("div", { className: classNames$1('r-select-gridtable', {
-                                                'no-header': noHeader || (columns?.length ?? 0) === 0,
+                                                'no-header': noHeader || (columns?.length ?? 0) === 0
                                             }), ref: selectMenuTableRef, style: {
                                                 width: menuWidth,
                                                 minWidth: selectTableRef?.current?.clientWidth,
-                                                maxHeight: maxHeight ?? defaultMaxHeight$1,
+                                                maxHeight: maxHeight ?? defaultMaxHeight$1
                                             }, children: jsxRuntime.jsx(TableElement$1, { haveCreateNew: haveCreateNew, isLoading: isLoading, searchTerm: searchTerm, fieldLabel: fieldLabel, noHeader: noHeader, closeMenu: closeMenu, value: value, isMulti: isMulti, currentOptions: currentOptions, fieldValue: fieldValue, columns: columns, defaultColumns: defaultColumns, indexFocus: indexFocus, formatSetting: formatSetting, handChange: handChange, compareFunction: compareFunction, setIndexFocus: setIndexFocus, setSearchTerm: setSearchTerm }) }), jsxRuntime.jsxs("div", { className: classNames$1('r-select-footer', {
-                                                'd-none': !(showFooter === true ||
-                                                    handleAdd ||
-                                                    isMulti),
-                                            }), children: [jsxRuntime.jsxs(Button$1$1, { outline: true, color: "primary", onClick: () => handleAdd?.(), className: classNames$1('r-btn d-flex align-items-center', { 'd-none': !handleAdd }), children: [jsxRuntime.jsx(SvgPlus, { className: "me-50", fontSize: 16 }), t('AddNew'), " (F9)"] }), isMulti && (jsxRuntime.jsx("div", { className: "ms-50 text-primary h-100 d-flex align-items-center", children: t('countSelected', { item: value?.length ?? 0 }) })), footerComponent ? footerComponent() : null] })] }) })) }) })] }) }) }));
+                                                'd-none': !(showFooter === true || handleAdd || isMulti)
+                                            }), children: [jsxRuntime.jsxs(Button$1$1, { outline: true, color: "primary", onClick: () => handleAdd?.(), className: classNames$1('r-btn d-flex align-items-center', { 'd-none': !handleAdd }), children: [jsxRuntime.jsx(SvgPlus, { className: "me-50", fontSize: 16 }), t('AddNew'), " (F9)"] }), isMulti && jsxRuntime.jsx("div", { className: "ms-50 text-primary h-100 d-flex align-items-center", children: t('countSelected', { item: value?.length ?? 0 }) }), footerComponent ? footerComponent() : null] })] }) })) }) })] }) }) }));
 });
 
 const PagingComponent = ({ totalItem, gridRef, pageSize, currentPage, onChangePage, pageOptions, onChangePageSize }) => {
@@ -39797,6 +39695,8 @@ const NumberFilterComponent = ({ column, filterBy, fieldFilter, handleSave, form
         allowNegative: column.numericSettings?.allowNegative ?? false,
         decimalScale: column.numericSettings?.fraction ?? 0
     };
+    console.log(column.numericSettings?.fraction);
+    console.log(column.field);
     let floatValue = parseFloat(valueFilter ?? '0');
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-filter-popup", onKeyDown: (e) => {
                 if (e.code === 'Enter' || e.code === 'NumpadEnter') {
@@ -69644,7 +69544,7 @@ const UnExpandAllIcon = ({ className, color = '#7F7F7F', size = 24, onClick, sty
 };
 
 const RenderContentCol = React__default["default"].memo((props) => {
-    const { col, indexCol, indexRow, isSelected, row, zeroVisiable, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, setSelectedRows, handleCloseContext, handleDoubleClick, handleCellClick, fieldKey, isMulti, } = props;
+    const { col, indexCol, indexRow, isSelected, row, zeroVisiable, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, setSelectedRows, handleCloseContext, handleDoubleClick, handleCellClick, fieldKey, isMulti } = props;
     const cellId = `content-${idTable}-row${indexRow}col-${indexCol}`;
     const checkOverflow = () => {
         const element = document.getElementById(cellId);
@@ -69666,12 +69566,10 @@ const RenderContentCol = React__default["default"].memo((props) => {
     const RenderElement = () => {
         if (col.field === '#' || col.type === '#') {
             return (jsxRuntime.jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer text-center', {
-                    'r-active-cell': isSelected,
+                    'r-active-cell': isSelected
                 }), style: {
-                    fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType
-                        ? 600
-                        : 400,
-                    fontStyle: row.haveItalicType ? 'italic' : 'normal',
+                    fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType ? 600 : 400,
+                    fontStyle: row.haveItalicType ? 'italic' : 'normal'
                 }, onDoubleClick: (e) => {
                     e.preventDefault();
                     handleCloseContext();
@@ -69680,15 +69578,11 @@ const RenderContentCol = React__default["default"].memo((props) => {
         }
         else if (col.type === 'checkbox' || col.field === 'checkbox') {
             return (jsxRuntime.jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer', {
-                    'r-active-cell': isSelected,
+                    'r-active-cell': isSelected
                 }), style: {
                     display: 'flex',
-                    justifyContent: col.textAlign === 'center'
-                        ? 'center'
-                        : col.textAlign === 'right'
-                            ? 'flex-end'
-                            : 'flex-start',
-                    alignItems: 'center',
+                    justifyContent: col.textAlign === 'center' ? 'center' : col.textAlign === 'right' ? 'flex-end' : 'flex-start',
+                    alignItems: 'center'
                 }, onClick: (e) => {
                     setSelectedRows(toggleSelect());
                     e.stopPropagation();
@@ -69698,12 +69592,8 @@ const RenderContentCol = React__default["default"].memo((props) => {
             let value = row[col.field];
             // ✅ Format dữ liệu theo loại cột
             if (col.type === 'numeric') {
-                value =
-                    formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
-                if (!zeroVisiable &&
-                    !col.zeroVisiable &&
-                    !(row?.sortOrder < 0 || row?.sortOrder > 100000) &&
-                    (value === '0' || value === 0)) {
+                value = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
+                if (!zeroVisiable && !col.zeroVisiable && !(row?.sortOrder < 0 || row?.sortOrder > 100000) && (value === '0' || value === 0)) {
                     value = '';
                 }
             }
@@ -69711,43 +69601,31 @@ const RenderContentCol = React__default["default"].memo((props) => {
                 value = value ? formatDateTime(value, formatSetting?.dateFormat) : '';
             }
             else if (col.type === 'datetime') {
-                value = value
-                    ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm')
-                    : '';
+                value = value ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
             }
             if (col.template) {
                 value = col.template(row, indexRow) ?? '';
             }
             const isNegative = col.type === 'numeric' && Number(row[col.field]) < 0;
-            const textColor = isNegative
-                ? (formatSetting?.colorNegative ?? 'red')
-                : undefined;
-            const prefix = isNegative ? (formatSetting?.prefixNegative ?? '-') : '';
-            const suffix = isNegative ? (formatSetting?.suffixNegative ?? '') : '';
-            const displayText = isNegative
-                ? `${prefix}${value}${suffix}`
-                : (value ?? '');
+            const textColor = isNegative ? formatSetting?.colorNegative ?? 'red' : undefined;
+            const prefix = isNegative ? formatSetting?.prefixNegative ?? '-' : '';
+            const suffix = isNegative ? formatSetting?.suffixNegative ?? '' : '';
+            const displayText = isNegative ? `${prefix}${value}${suffix}` : value ?? '';
             return (jsxRuntime.jsxs("div", { className: classNames$1('r-rowcell-div cursor-pointer', {
-                    'r-active-cell': isSelected,
+                    'r-active-cell': isSelected
                 }), style: {
-                    fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType
-                        ? 600
-                        : 400,
-                    fontStyle: row.haveItalicType ? 'italic' : 'normal',
+                    fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType ? 600 : 400,
+                    fontStyle: row.haveItalicType ? 'italic' : 'normal'
                 }, children: [jsxRuntime.jsx("div", { className: "r-cell-text", style: {
                             display: 'flex',
-                            justifyContent: col.textAlign === 'center'
-                                ? 'center'
-                                : col.textAlign === 'right'
-                                    ? 'flex-end'
-                                    : 'flex-start',
-                            alignItems: 'center',
+                            justifyContent: col.textAlign === 'center' ? 'center' : col.textAlign === 'right' ? 'flex-end' : 'flex-start',
+                            alignItems: 'center'
                         }, children: jsxRuntime.jsx("div", { id: cellId, style: {
                                 color: textColor,
                                 overflow: 'hidden',
                                 textOverflow: 'ellipsis',
                                 whiteSpace: 'pre',
-                                maxWidth: '100%',
+                                maxWidth: '100%'
                             }, children: displayText }) }), checkOverflow() && (jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: cellId, placement: "top", children: jsxRuntime.jsx("div", { style: { color: textColor }, onClick: (e) => {
                                 e.stopPropagation();
                                 e.preventDefault();
@@ -69756,15 +69634,10 @@ const RenderContentCol = React__default["default"].memo((props) => {
     };
     const clickTimerRef = React$5.useRef(null);
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: col.visible !== false && col.isGroup !== true && (jsxRuntime.jsx("td", { className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, {
-                'fixed-last': (col.fixedType === 'left' &&
-                    indexCol === lastObjWidthFixLeft) ||
-                    (col.fixedType === 'right' &&
-                        indexCol === fisrtObjWidthFixRight),
+                'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight)
             }, { 'r-active': isSelected }), style: {
                 left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
-                right: col.fixedType === 'right'
-                    ? objWidthFixRight[indexCol]
-                    : undefined,
+                right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined
             }, onClick: (e) => {
                 const tag = e.target?.nodeName;
                 if (tag !== 'DIV' && tag !== 'TD') {
@@ -69798,7 +69671,7 @@ const RenderContentCol = React__default["default"].memo((props) => {
 });
 
 const TableElement = React__default["default"].memo((props) => {
-    const { contentColumns, dataSource, fieldKey, filterBy, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, orderBy, selectedRows, setContentColumns, setSelectedRows, formatSetting, gridRef, idTable, headerColumns, objHeaderWidthFixLeft, objHeaderWidthFixRight, isMulti, querySetting, searchSetting, searchTerm, columnsAggregate, haveSum, expandsAll, zeroVisiable, setFilterBy, setOrderBy, setExpandsAll, handleDoubleClick, handleCellClick, contextMenuItems, handleContextMenuClick, isLoading, } = props;
+    const { contentColumns, dataSource, fieldKey, filterBy, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, orderBy, selectedRows, setContentColumns, setSelectedRows, formatSetting, gridRef, idTable, headerColumns, objHeaderWidthFixLeft, objHeaderWidthFixRight, isMulti, querySetting, searchSetting, searchTerm, columnsAggregate, haveSum, expandsAll, zeroVisiable, setFilterBy, setOrderBy, setExpandsAll, handleDoubleClick, handleCellClick, contextMenuItems, handleContextMenuClick, isLoading } = props;
     const { t } = reactI18next.useTranslation();
     const [context, setContext] = React$5.useState(null);
     const virtualDivRef = React$5.useRef(null);
@@ -69844,10 +69717,7 @@ const TableElement = React__default["default"].memo((props) => {
         if (searchTerm) {
             datas = datas.filter((row) => {
                 return searchSetting?.keyField?.some((key) => {
-                    return row[key]
-                        ?.toString()
-                        .toLowerCase()
-                        .includes(searchTerm.trim().toLowerCase());
+                    return row[key]?.toString().toLowerCase().includes(searchTerm.trim().toLowerCase());
                 });
             });
         }
@@ -69856,10 +69726,7 @@ const TableElement = React__default["default"].memo((props) => {
                 return filterBy.every((filter) => {
                     const { key, value, ope } = filter;
                     const rowValue = row[key];
-                    if (rowValue === undefined ||
-                        rowValue === null ||
-                        value === undefined ||
-                        value === null) {
+                    if (rowValue === undefined || rowValue === null || value === undefined || value === null) {
                         return false;
                     }
                     const valStr = String(rowValue).toLowerCase();
@@ -69925,68 +69792,52 @@ const TableElement = React__default["default"].memo((props) => {
                     }
                     let value = row[col.field];
                     if (col.type === 'numeric') {
-                        value =
-                            formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
+                        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)
-                            : '';
+                        value = value ? formatDateTime(value, formatSetting?.dateFormat) : '';
                     }
                     else if (col.type === 'datetime') {
-                        value = value
-                            ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm')
-                            : '';
+                        value = value ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
                     }
                     if (col.template) {
                         value = col.template(row, indexRow) ?? '';
                     }
                     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("tr", { "aria-rowindex": indexRow + 1, role: "row", className: "r-row", children: [jsxRuntime.jsx("td", { className: "r-rowcell r-cell-group", colSpan: 3, children: jsxRuntime.jsxs("div", { className: "r-rowcell-div", children: [jsxRuntime.jsx(SvgChevronRight, { style: {
                                                         marginLeft: level * 20,
-                                                        transform: expand ? 'rotate(90deg)' : 'rotate(0deg)',
+                                                        transform: expand ? 'rotate(90deg)' : 'rotate(0deg)'
                                                     }, fontSize: 15, onClick: () => {
                                                         setExpand(!expand);
                                                         setExpandsAll(undefined);
                                                         row.expand = !expand;
                                                     } }), t(col.headerDisplay ?? col.headerText ?? ''), ": ", value, " (", row.children.length, ")"] }) }), contentColumns.map((colSum, indexCol) => {
-                                        if (indexCol <= firstColSpan ||
-                                            colSum.visible === false ||
-                                            colSum.isGroup === true) {
+                                        if (indexCol <= firstColSpan || colSum.visible === false || colSum.isGroup === true) {
                                             return;
                                         }
                                         let sumValue = row[colSum.field];
-                                        const haveSum = row[colSum.field] !== undefined &&
-                                            row[colSum.field] !== null;
-                                        if (!haveSum &&
-                                            colSum.haveSum === true &&
-                                            colSum.type === 'numeric') {
+                                        const haveSum = row[colSum.field] !== undefined && row[colSum.field] !== null;
+                                        if (!haveSum && colSum.haveSum === true && colSum.type === 'numeric') {
                                             sumValue = row.children.reduce(function (accumulator, currentValue) {
-                                                return (Number(accumulator ?? 0) +
-                                                    Number(currentValue[colSum.field] ?? 0));
+                                                return Number(accumulator ?? 0) + Number(currentValue[colSum.field] ?? 0);
                                             }, 0);
                                         }
                                         if (colSum.type === 'numeric') {
                                             sumValue = formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', colSum.numericSettings?.fraction, true, false);
-                                            if (!zeroVisiable &&
-                                                !col.zeroVisiable &&
-                                                (sumValue === '0' || sumValue === 0)) {
+                                            if (!zeroVisiable && !col.zeroVisiable && (sumValue === '0' || sumValue === 0)) {
                                                 sumValue = '';
                                             }
                                         }
                                         return (jsxRuntime.jsx("td", { className: "r-rowcell r-cell-sum-group", children: jsxRuntime.jsx("div", { className: "r-rowcell-div", style: {
-                                                    justifyContent: colSum.textAlign
-                                                        ? colSum.textAlign
-                                                        : 'left',
-                                                }, children: (haveSum || colSum.haveSum === true) &&
-                                                    Number(row[colSum.field] ?? '0') < 0 ? (jsxRuntime.jsxs("div", { style: {
-                                                        color: formatSetting?.colorNegative ?? 'red',
+                                                    justifyContent: colSum.textAlign ? colSum.textAlign : 'left'
+                                                }, children: (haveSum || colSum.haveSum === true) && Number(row[colSum.field] ?? '0') < 0 ? (jsxRuntime.jsxs("div", { style: {
+                                                        color: formatSetting?.colorNegative ?? 'red'
                                                     }, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `group-sum-cell-${level}-${indexRow}-${indexCol}`));
-                                    })] }), expand && (jsxRuntime.jsx(RenderContent, { datas: row.children, level: level + 1 }))] }, `row-${level}-${indexRow}`));
+                                    })] }), expand && jsxRuntime.jsx(RenderContent, { datas: row.children, level: level + 1 })] }, `row-${level}-${indexRow}`));
                 }
                 else {
                     const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
                     return (jsxRuntime.jsx("tr", { id: `row-content-${indexRow}`, "aria-rowindex": indexRow + 1, role: "row", className: classNames$1('r-row', {
-                            'r-last-row': level === 0 && indexRow === viewData.length - 1,
+                            'r-last-row': level === 0 && indexRow === viewData.length - 1
                         }), onContextMenu: (e) => {
                             e.preventDefault();
                             handleContextMenu(e, row);
@@ -70002,7 +69853,7 @@ const TableElement = React__default["default"].memo((props) => {
                 x: e.clientX,
                 y: e.clientY,
                 row,
-                show: true,
+                show: true
             });
         }, 100);
     };
@@ -70026,28 +69877,20 @@ const TableElement = React__default["default"].memo((props) => {
                                 let sumValue = item?.value;
                                 if (!item && col.haveSum === true && col.type === 'numeric') {
                                     sumValue = viewData.reduce(function (accumulator, currentValue) {
-                                        return (Number(accumulator ?? 0) +
-                                            Number(currentValue[col.field] ?? 0));
+                                        return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
                                     }, 0);
                                 }
                                 if (col.type === 'numeric') {
                                     sumValue = formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false);
                                 }
                                 return (jsxRuntime.jsx("td", { className: classNames$1(`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.jsx("div", { className: "r-footer-div", children: (item || col.haveSum === true) &&
-                                            Number(item?.value ?? '0') < 0 ? (jsxRuntime.jsxs("div", { style: {
-                                                color: formatSetting?.colorNegative ?? 'red',
+                                        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-footer-div", children: (item || col.haveSum === true) && Number(item?.value ?? '0') < 0 ? (jsxRuntime.jsxs("div", { style: {
+                                                color: formatSetting?.colorNegative ?? 'red'
                                             }, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `summarycell-${indexCol}`));
-                            }) })) })] }), jsxRuntime.jsx("div", { ref: virtualDivRef }), context &&
-                (contextMenuItems?.length ?? 0) > 0 &&
-                handleContextMenuClick && (jsxRuntime.jsx(Popover$1, { className: "r-context-popover", placement: "right-start", isOpen: context.show, target: virtualDivRef.current, toggle: handleCloseContext, fade: false, children: jsxRuntime.jsx(PopoverBody$1, { children: contextMenuItems?.map((item, index) => {
+                            }) })) })] }), jsxRuntime.jsx("div", { ref: virtualDivRef }), context && (contextMenuItems?.length ?? 0) > 0 && handleContextMenuClick && (jsxRuntime.jsx(Popover$1, { className: "r-context-popover", placement: "right-start", isOpen: context.show, target: virtualDivRef.current, toggle: handleCloseContext, fade: false, children: jsxRuntime.jsx(PopoverBody$1, { children: contextMenuItems?.map((item, index) => {
                         return (jsxRuntime.jsxs("div", { className: "r-context-item", onClick: () => {
                                 handleCloseContext();
                                 handleContextMenuClick?.(item, context.row);
@@ -70055,7 +69898,7 @@ const TableElement = React__default["default"].memo((props) => {
                     }) }) })), (viewData.length ?? 0) === 0 && !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.')] }))] }));
 });
 
-const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoading, formatSetting, querySetting, pagingSetting, searchSetting, columnsAggregate, toolbarSetting, selectedItem, setSelectedItem, handleSelect, saveSettingColumn, resetDefaultColumns, settingColumns, headerComponent, groupSetting, zeroVisiable, isMulti, handleDoubleClick, handleCellClick, contextMenuItems, headerHeight, handleContextMenuClick, }) => {
+const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoading, formatSetting, querySetting, pagingSetting, searchSetting, columnsAggregate, toolbarSetting, selectedItem, setSelectedItem, handleSelect, saveSettingColumn, resetDefaultColumns, settingColumns, headerComponent, groupSetting, zeroVisiable, isMulti, handleDoubleClick, handleCellClick, contextMenuItems, headerHeight, handleContextMenuClick }) => {
     const { t } = reactI18next.useTranslation();
     const gridRef = React$5.useRef(null);
     const [openPopupSetupColumn, setOpenPopupSetupColumn] = React$5.useState(false);
@@ -70068,8 +69911,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
     const [expandsAll, setExpandsAll] = React$5.useState(true);
     const [maximize, setMaximize] = React$5.useState(false);
     const [windowHeight, setWindowHeight] = React$5.useState(window.innerHeight);
-    const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ??
-        'id';
+    const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? 'id';
     React$5.useEffect(() => {
         const handleResize = () => {
             setWindowHeight(window.innerHeight);
@@ -70079,19 +69921,14 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
     }, []);
     const heightTable = React$5.useMemo(() => {
         if (maximize) {
-            return (windowHeight -
-                (pagingSetting?.allowPaging ? 50 : 0) -
-                (haveSum ? 30 : 0) -
-                (headerHeight ?? 59) -
-                (toolbarSetting?.showBottomToolbar ? 42 : 0) -
-                (toolbarSetting?.showTopToolbar ? 42 : 0));
+            return windowHeight - (pagingSetting?.allowPaging ? 50 : 0) - (haveSum ? 30 : 0) - (headerHeight ?? 59) - (toolbarSetting?.showBottomToolbar ? 42 : 0) - (toolbarSetting?.showTopToolbar ? 42 : 0);
         }
         return height;
     }, [height, maximize, windowHeight]);
     const optionsGroupColumn = React$5.useMemo(() => {
         return contentColumns.map((col) => ({
             ...col,
-            headerText: t(col.headerText),
+            headerText: t(col.headerText)
         }));
     }, [contentColumns]);
     React$5.useEffect(() => {
@@ -70100,7 +69937,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
         }
         setExpandsAll(true);
     }, [groupSetting?.groupColumns]);
-    const { levels: headerColumns, objHeaderWidthFixLeft, objHeaderWidthFixRight, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, } = React$5.useMemo(() => {
+    const { levels: headerColumns, objHeaderWidthFixLeft, objHeaderWidthFixRight, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight } = React$5.useMemo(() => {
         const rs = calculateTableStructure(columns, settingColumns?.value, groupSetting?.groupColumns);
         setContentColumns(rs.flat);
         return rs;
@@ -70118,17 +69955,12 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
         }
     };
     const searchTemplate = () => {
-        return (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("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 groupbtnTemplate = () => {
         return (jsxRuntime.jsxs(UncontrolledDropdown, { children: [jsxRuntime.jsx(DropdownToggle$1, { tag: "div", id: "group-dropdown-toggle", style: { position: 'relative' }, onClick: (e) => e.preventDefault(), children: jsxRuntime.jsx(GroupIcon, { color: "#7F7F7F", size: 24 }) }), jsxRuntime.jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-1", children: [jsxRuntime.jsx("div", { className: "mb-1", style: { fontSize: 16, fontWeight: 500 }, children: "Nh\u00F3m d\u1EEF li\u1EC7u theo c\u1ED9t" }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-1`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 1" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: optionsGroupColumn, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[0]
                                             ? {
-                                                headerText: t(contentColumns.find((x) => x.field === groupColumns[0])?.headerText ??
-                                                    contentColumns.find((x) => x.field === groupColumns[0])?.headerText),
+                                                headerText: t(contentColumns.find((x) => x.field === groupColumns[0])?.headerText ?? contentColumns.find((x) => x.field === groupColumns[0])?.headerText)
                                             }
                                             : undefined, onChange: (val) => {
                                             if (val) {
@@ -70140,8 +69972,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                                             setGroupColumns([...groupColumns]);
                                         }, isClearable: groupColumns?.length === 1 }) })] }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-2`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 2" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: optionsGroupColumn, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[1]
                                             ? {
-                                                headerText: t(contentColumns.find((x) => x.field === groupColumns[1])?.headerText ??
-                                                    contentColumns.find((x) => x.field === groupColumns[1])?.headerText),
+                                                headerText: t(contentColumns.find((x) => x.field === groupColumns[1])?.headerText ?? contentColumns.find((x) => x.field === groupColumns[1])?.headerText)
                                             }
                                             : undefined, onChange: (val) => {
                                             if (val) {
@@ -70153,8 +69984,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                                             setGroupColumns([...groupColumns]);
                                         }, isClearable: groupColumns?.length === 2 }) })] }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-3`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 3" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: optionsGroupColumn, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[2]
                                             ? {
-                                                headerText: t(contentColumns.find((x) => x.field === groupColumns[2])?.headerText ??
-                                                    contentColumns.find((x) => x.field === groupColumns[2])?.headerText),
+                                                headerText: t(contentColumns.find((x) => x.field === groupColumns[2])?.headerText ?? contentColumns.find((x) => x.field === groupColumns[2])?.headerText)
                                             }
                                             : undefined, onChange: (val) => {
                                             if (groupSetting) {
@@ -70168,7 +69998,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                                             }
                                         }, isClearable: groupColumns?.length === 3 }) })] }), jsxRuntime.jsxs("div", { className: "border-top d-flex justify-content-end mt-1", children: [jsxRuntime.jsx(Button$1$1, { color: "primary", className: "mt-1 me-50 rounded", size: "sm", onClick: () => {
                                         groupSetting?.onGroup({
-                                            columnGrouped: groupColumns.filter((x) => x),
+                                            columnGrouped: groupColumns.filter((x) => x)
                                         });
                                         document.getElementById('group-dropdown-toggle')?.click();
                                     }, children: `${t('Apply')}` }), jsxRuntime.jsx(Button$1$1, { color: "secondary", outline: true, className: "mt-1 rounded", size: "sm", onClick: () => {
@@ -70177,16 +70007,14 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                                     }, children: `${t('Delete')}` })] })] })] }));
     };
     const chooseColumnsTemplate = () => {
-        return (jsxRuntime.jsx(SvgSettings, { className: "r-toolbar-icon", fontSize: 20, color: "#7F7F7F", onClick: () => setOpenPopupSetupColumn(true) }));
+        return jsxRuntime.jsx(SvgSettings, { className: "r-toolbar-icon", fontSize: 20, color: "#7F7F7F", onClick: () => setOpenPopupSetupColumn(true) });
     };
     const expandTemplate = () => {
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!expandsAll && (jsxRuntime.jsx(ExpandAllIcon, { onClick: () => {
                         setExpandsAll(true);
-                    }, color: "#7F7F7F", size: 24 })), expandsAll && (jsxRuntime.jsx(UnExpandAllIcon, { onClick: () => setExpandsAll(false), color: "#7F7F7F", size: 24 }))] }));
+                    }, color: "#7F7F7F", size: 24 })), expandsAll && jsxRuntime.jsx(UnExpandAllIcon, { onClick: () => setExpandsAll(false), color: "#7F7F7F", size: 24 })] }));
     };
-    const defaultToolbarOption = searchSetting?.searchEnable
-        ? [{ template: searchTemplate, align: 'left' }]
-        : [];
+    const defaultToolbarOption = searchSetting?.searchEnable ? [{ template: searchTemplate, align: 'left' }] : [];
     if (groupSetting) {
         defaultToolbarOption.push({ template: groupbtnTemplate, align: 'left' });
     }
@@ -70195,10 +70023,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
     }
     let toolbarTopOption = [];
     if (toolbarSetting?.toolbarOptions) {
-        toolbarTopOption = [
-            ...defaultToolbarOption,
-            ...toolbarSetting?.toolbarOptions,
-        ];
+        toolbarTopOption = [...defaultToolbarOption, ...toolbarSetting?.toolbarOptions];
     }
     else {
         toolbarTopOption = [...defaultToolbarOption];
@@ -70229,9 +70054,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
     React$5.useEffect(() => {
         if (setSelectedItem) {
             if (isMulti) {
-                if (dataSource &&
-                    selectedRows &&
-                    selectedRows?.length !== selectedItem?.length) {
+                if (dataSource && selectedRows && selectedRows?.length !== selectedItem?.length) {
                     setSelectedItem([...selectedRows]);
                     if (handleSelect) {
                         handleSelect([...selectedRows]);
@@ -70240,8 +70063,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
             }
             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] });
@@ -70260,8 +70082,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
     React$5.useEffect(() => {
         if (!isMulti) {
             if (dataSource && selectedItem && selectedItem[fieldKey]) {
-                if (selectedRows?.length === 0 ||
-                    selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
+                if (selectedRows?.length === 0 || selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
                     setSelectedRows([selectedItem]);
                 }
             }
@@ -70270,18 +70091,16 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
             }
         }
         else {
-            if (dataSource &&
-                selectedItem &&
-                selectedRows?.length !== selectedItem.length) {
+            if (dataSource && selectedItem && selectedRows?.length !== selectedItem.length) {
                 setSelectedRows(selectedItem ? [...selectedItem] : []);
             }
         }
     }, [selectedItem]);
     return (jsxRuntime.jsxs("div", { className: classNames$1('r-table-edit r-virtualized-table', {
-            'is-maximized': maximize,
-        }), children: [jsxRuntime.jsxs("div", { className: "r-grid", children: [toolbarSetting?.showTopToolbar && (jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption, maximize: maximize, setMaximize: setMaximize })), headerComponent && headerComponent(), jsxRuntime.jsxs("div", { ref: gridRef, className: "r-gridtable", style: {
+            'is-maximized': maximize
+        }), children: [jsxRuntime.jsxs("div", { className: "r-grid", children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption, maximize: maximize, setMaximize: setMaximize }), headerComponent && headerComponent(), jsxRuntime.jsxs("div", { ref: gridRef, className: "r-gridtable", style: {
                             height: `${heightTable ? `${heightTable}px` : 'auto'}`,
-                            position: 'relative',
+                            position: 'relative'
                         }, children: [jsxRuntime.jsx(TableElement, { idTable: idTable, gridRef: gridRef, isLoading: isLoading, dataSource: dataSource, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, fieldKey: fieldKey, lastObjWidthFixLeft: lastObjWidthFixLeft, fisrtObjWidthFixRight: fisrtObjWidthFixRight, selectedRows: selectedRows, isMulti: isMulti, filterBy: filterBy, orderBy: orderBy, formatSetting: formatSetting, contentColumns: contentColumns, headerColumns: headerColumns, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, searchTerm: searchTerm, searchSetting: searchSetting, columnsAggregate: columnsAggregate, haveSum: haveSum, expandsAll: expandsAll, zeroVisiable: zeroVisiable, contextMenuItems: contextMenuItems, handleContextMenuClick: handleContextMenuClick, setFilterBy: setFilterBy, setSelectedRows: setSelectedRows, setOrderBy: setOrderBy, handleDoubleClick: handleDoubleClick, handleCellClick: handleCellClick, querySetting: querySetting, setContentColumns: setContentColumns, setExpandsAll: setExpandsAll }), isLoading && (jsxRuntime.jsx("div", { className: "r-loading-overlay", children: jsxRuntime.jsxs("div", { className: "r-loading", children: [jsxRuntime.jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) }))] })] }), pagingSetting?.allowPaging && (jsxRuntime.jsx(PagingComponent, { gridRef: gridRef, onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: pagingSetting?.totalItem ?? 0, onChangePageSize: onChangePageSize })), jsxRuntime.jsx(SettingColumn, { gridRef: gridRef, handleSidebar: () => {
                     setOpenPopupSetupColumn(!openPopupSetupColumn);
                 }, settingColumns: settingColumns, openSidebar: openPopupSetupColumn, column: [...contentColumns], resetDefaultColumns: resetDefaultColumns, setColumn: (newColumns) => {
@@ -70292,7 +70111,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                             visible: x.visible,
                             fixedType: x.fixedType,
                             width: x.width,
-                            sortOrder: index + 1,
+                            sortOrder: index + 1
                         })));
                     }
                 } })] }));