react-table-edit 1.5.37 → 1.5.39

package/dist/index.js

@@ -68391,7 +68391,7 @@ const TabValidateImportExcel = (props) => {
 
 const ModalImportComponent = (props) => {
     const { t } = reactI18next.useTranslation();
-    const { windowSize, openModal, handleModal, handleValidate, importExcelApi, validateExcelApi, getGeneralSettingApi, updateGeneralSettingApi, headerErrorExcelColumns, templateUrl, defaultHeaderRow, formatNumber, mapColumn, headerValidateExcelColumns } = props;
+    const { windowSize, openModal, handleModal, handleValidate, importExcelApi, validateExcelApi, getGeneralSettingApi, updateGeneralSettingApi, headerErrorExcelColumns, templateUrl, defaultHeaderRow, formatNumber, mapColumn, headerValidateExcelColumns, style, } = props;
     const [optionField, setOptionField] = React$5.useState([]);
     const [dataMerge, setDataMerge] = React$5.useState([]);
     const [dataValidate, setDataValidate] = React$5.useState([]);
@@ -68406,22 +68406,22 @@ const ModalImportComponent = (props) => {
         step: create$1(),
         sheetId: create$2().when('step', {
             is: 1,
-            then: create$2().required(`${t('Sheet name')} ${t('is required')}`)
+            then: create$2().required(`${t('Sheet name')} ${t('is required')}`),
         }),
         headerRow: create$1().when('step', {
             is: 1,
-            then: create$1().required(`${t('Header row')} ${t('is required')}`)
-        })
+            then: create$1().required(`${t('Header row')} ${t('is required')}`),
+        }),
     });
     const defaultValues = {
         step: 1,
         headerRow: defaultHeaderRow ?? 1,
-        dataMap: []
+        dataMap: [],
     };
-    const { control, clearErrors, reset, handleSubmit, getValues, setValue, watch, setError, formState: { errors } } = useForm({
+    const { control, clearErrors, reset, handleSubmit, getValues, setValue, watch, setError, formState: { errors }, } = useForm({
         defaultValues,
         mode: 'onChange',
-        resolver: o(formSchema)
+        resolver: o(formSchema),
     });
     const handleSetColumns = (headerColumns, dataS) => {
         if (headerColumns.length === 0) {
@@ -68459,7 +68459,10 @@ const ModalImportComponent = (props) => {
                 validateExcelApi(arr)
                     .then((rs) => {
                     setCheckInitValidate(false);
-                    const list = rs.map((item) => ({ ...item, errors: item.errors.map((x) => connectString(t, x)) }));
+                    const list = rs.map((item) => ({
+                        ...item,
+                        errors: item.errors.map((x) => connectString(t, x)),
+                    }));
                     setDataValidate(list);
                     setDataInvalid(list.filter((x) => x.errors?.length > 0));
                     setDataValid(list.filter((x) => x.error || x.errors?.length === 0));
@@ -68501,7 +68504,13 @@ const ModalImportComponent = (props) => {
         });
     };
     const getDataType = (e) => {
-        return e.dataType === 'numeric' || e.dataType === 'datetime' || e.dataType === 'date' ? e.dataType : e.dataType === 'boolean' ? 'checkbox' : 'text';
+        return e.dataType === 'numeric' ||
+            e.dataType === 'datetime' ||
+            e.dataType === 'date'
+            ? e.dataType
+            : e.dataType === 'boolean'
+                ? 'checkbox'
+                : 'text';
     };
     const defaultValidateExcelColumns = [
         {
@@ -68509,7 +68518,7 @@ const ModalImportComponent = (props) => {
             headerText: 'Row',
             fixedType: 'left',
             textAlign: 'center',
-            width: 80
+            width: 80,
         },
         {
             field: 'result',
@@ -68517,8 +68526,8 @@ const ModalImportComponent = (props) => {
             fixedType: 'left',
             width: 140,
             template: (props) => {
-                return props.errors?.length === 0 ? jsxRuntime.jsx("span", { className: "text-success", children: t('Valid') }) : jsxRuntime.jsx("span", { className: "text-danger", children: t('Invalid') });
-            }
+                return props.errors?.length === 0 ? (jsxRuntime.jsx("span", { className: "text-success", children: t('Valid') })) : (jsxRuntime.jsx("span", { className: "text-danger", children: t('Invalid') }));
+            },
         },
         {
             field: 'errorDetail',
@@ -68529,8 +68538,8 @@ const ModalImportComponent = (props) => {
                 return (jsxRuntime.jsx("div", { children: props.errors?.map((item, index) => {
                         return (jsxRuntime.jsxs("div", { className: "d-flex text-danger align-items-center", children: [jsxRuntime.jsx(SvgCircle, { fontSize: 6, className: "me-50 " }), jsxRuntime.jsx("div", { style: { fontSize: '12px' }, children: t(item) })] }, index));
                     }) }));
-            }
-        }
+            },
+        },
     ];
     const handleFormOpened = () => {
         if (getGeneralSettingApi) {
@@ -68563,8 +68572,8 @@ const ModalImportComponent = (props) => {
                     headerText: e.header,
                     width: e.width ?? 150,
                     type: getDataType(e),
-                    template: e.template
-                }))
+                    template: e.template,
+                })),
             ]);
         }
     };
@@ -68580,29 +68589,31 @@ const ModalImportComponent = (props) => {
             setValue('step', 2);
         }
     };
-    return (jsxRuntime.jsx(Modal$1, { isOpen: openModal, toggle: handleModal, backdrop: "static", className: "modal-dialog-centered modal-xl", contentClassName: "p-0", onOpened: handleFormOpened, onClosed: handleModalClosed, children: jsxRuntime.jsxs(Form$1, { id: "form-modal-globalzone", className: "todo-modal modal-form-content", children: [jsxRuntime.jsx(ModalHeader, { typeModal: 'Import', handleModal: handleModal, title: "Import Excel" }), jsxRuntime.jsx(Scrollbars, { autoHide: true, autoHeight: true, autoHeightMax: windowSize.innerHeight - 120, children: jsxRuntime.jsx(ModalBody$1, { children: jsxRuntime.jsx("div", { style: { marginTop: '-25px' }, className: "modern-horizontal-wizard", children: jsxRuntime.jsx(Wizard, { activeStep: watch('step'), type: "modern-horizontal", steps: [
+    return (jsxRuntime.jsx(Modal$1, { isOpen: openModal, style: style, toggle: handleModal, backdrop: "static", className: "modal-dialog-centered modal-xl", contentClassName: "p-0", onOpened: handleFormOpened, onClosed: handleModalClosed, children: jsxRuntime.jsxs(Form$1, { id: "form-modal-globalzone", className: "todo-modal modal-form-content", children: [jsxRuntime.jsx(ModalHeader, { typeModal: 'Import', handleModal: handleModal, title: "Import Excel" }), jsxRuntime.jsx(Scrollbars, { autoHide: true, autoHeight: true, autoHeightMax: windowSize.innerHeight - 120, children: jsxRuntime.jsx(ModalBody$1, { children: jsxRuntime.jsx("div", { style: { marginTop: '-25px' }, className: "modern-horizontal-wizard", children: jsxRuntime.jsx(Wizard, { activeStep: watch('step'), type: "modern-horizontal", steps: [
                                     {
                                         id: 'upload-file',
                                         title: t('Upload file'),
-                                        content: jsxRuntime.jsx(TabSelectFileImportExcel, { control: control, errors: errors, getValues: getValues, setValue: setValue, watch: watch, templateUrl: templateUrl })
+                                        content: (jsxRuntime.jsx(TabSelectFileImportExcel, { control: control, errors: errors, getValues: getValues, setValue: setValue, watch: watch, templateUrl: templateUrl })),
                                     },
                                     {
                                         id: 'merge-data',
                                         title: t('Merge data fields'),
-                                        content: jsxRuntime.jsx(TabMergeImportExcel, { control: control, errors: errors, getValues: getValues, setValue: setValue, formatNumber: formatNumber, watch: watch, optionField: optionField, windowSize: windowSize })
+                                        content: (jsxRuntime.jsx(TabMergeImportExcel, { control: control, errors: errors, getValues: getValues, setValue: setValue, formatNumber: formatNumber, watch: watch, optionField: optionField, windowSize: windowSize })),
                                     },
                                     {
                                         id: 'validate-data',
                                         title: t('Validate data'),
-                                        content: jsxRuntime.jsx(TabValidateImportExcel, { formatNumber: formatNumber, dataInvalid: dataInvalid, dataValid: dataValid, dataValidate: dataValidate, headerValidateExcelColumns: validateExcelColumns, windowSize: windowSize })
+                                        content: (jsxRuntime.jsx(TabValidateImportExcel, { formatNumber: formatNumber, dataInvalid: dataInvalid, dataValid: dataValid, dataValidate: dataValidate, headerValidateExcelColumns: validateExcelColumns, windowSize: windowSize })),
                                     },
                                     {
                                         id: 'handle-error',
                                         title: t('Error result'),
                                         visible: !!headerErrorExcelColumns,
-                                        content: jsxRuntime.jsx(TabHandleErrorImportExcel, { formatNumber: formatNumber, dataError: dataError, headerHandleErrorExcelColumns: headerErrorExcelColumns ?? [], windowSize: windowSize })
-                                    }
-                                ] }) }) }) }), jsxRuntime.jsxs("div", { className: "d-flex justify-content-between align-items-center p-1", style: { boxShadow: '0 4px 24px 0 rgb(34 41 47 / 10%)' }, children: [jsxRuntime.jsx("div", { className: "d-flex align-items-center", children: watch('step') === 2 && getGeneralSettingApi && updateGeneralSettingApi && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Input$1, { checked: isSaveSetting, type: "checkbox", className: "me-50", onChange: (val) => {
+                                        content: (jsxRuntime.jsx(TabHandleErrorImportExcel, { formatNumber: formatNumber, dataError: dataError, headerHandleErrorExcelColumns: headerErrorExcelColumns ?? [], windowSize: windowSize })),
+                                    },
+                                ] }) }) }) }), jsxRuntime.jsxs("div", { className: "d-flex justify-content-between align-items-center p-1", style: { boxShadow: '0 4px 24px 0 rgb(34 41 47 / 10%)' }, children: [jsxRuntime.jsx("div", { className: "d-flex align-items-center", children: watch('step') === 2 &&
+                                getGeneralSettingApi &&
+                                updateGeneralSettingApi && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Input$1, { checked: isSaveSetting, type: "checkbox", className: "me-50", onChange: (val) => {
                                             setIsSaveSetting(val.target.checked);
                                         } }), jsxRuntime.jsx("span", { children: "L\u01B0u th\u00F4ng tin gh\u00E9p tr\u01B0\u1EDDng d\u1EEF li\u1EC7u" })] })) }), jsxRuntime.jsxs("div", { className: "d-flex align-items-center", children: [jsxRuntime.jsx(Button$1$1, { disabled: !getValues('file'), color: "primary", outline: true, className: `update-btn update-todo-item me-1 ${watch('step') !== 1 ? '' : 'd-none'}`, onClick: handleBackStep, children: t('Back') }), jsxRuntime.jsx(Button$1$1, { className: `update-btn update-todo-item me-1 ${watch('step') !== 3 ? '' : 'd-none'}`, disabled: !watch('file') || checkInitValidate, color: "primary", onClick: handleSubmit(onSubmit), children: t('Next') }), jsxRuntime.jsx(Button$1$1, { className: `update-btn update-todo-item me-1 ${watch('step') === 3 ? '' : 'd-none'}`, disabled: dataValid.length === 0 || !getValues('file') || checkInit, color: "primary", onClick: handleSubmit(onSubmit), children: t('Import') }), jsxRuntime.jsx(Button$1$1, { color: "secondary", onClick: handleModal, outline: true, children: t('Close') })] })] })] }) }));
 };
@@ -68737,21 +68748,32 @@ const UnExpandAllIcon = ({ className, color = '#7F7F7F', size = 24, onClick, sty
 };
 
 const RenderContentCol = (props) => {
-    const { col, indexCol, indexRow, isSelected, row, zeroVisiable, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, setSelectedRows, handleCloseContext, handleDoubleClick, fieldKey, isMulti, } = props;
+    const { col, indexCol, indexRow, isSelected, row, zeroVisiable, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, setSelectedRows, handleCloseContext, handleDoubleClick, fieldKey, isMulti } = props;
     const cellId = `content-${idTable}-row${indexRow}col-${indexCol}`;
     const checkOverflow = () => {
         const element = document.getElementById(cellId);
         return element && element.scrollWidth > element.clientWidth;
     };
+    const toggleSelect = () => {
+        const idx = selectedRows?.findIndex((x) => x?.[fieldKey] === row?.[fieldKey]);
+        if (idx > -1) {
+            if (isMulti) {
+                return selectedRows?.filter((_, i) => i !== idx);
+            }
+            return [];
+        }
+        if (isMulti) {
+            return [...selectedRows, row];
+        }
+        return [row];
+    };
     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();
@@ -68760,34 +68782,13 @@ const RenderContentCol = (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) => {
-                    const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
-                    if (index > -1) {
-                        if (isMulti) {
-                            selectedRows?.splice(index, 1);
-                            setSelectedRows([...selectedRows]);
-                        }
-                        else {
-                            setSelectedRows([]);
-                        }
-                    }
-                    else {
-                        if (isMulti) {
-                            setSelectedRows([...selectedRows, row]);
-                        }
-                        else {
-                            setSelectedRows([row]);
-                        }
-                    }
+                    setSelectedRows(toggleSelect());
                     e.stopPropagation();
                 }, children: jsxRuntime.jsx(Input$1, { defaultChecked: isSelected, type: "checkbox", className: "cursor-pointer", style: { textAlign: col.textAlign ?? 'center' } }) }));
         }
@@ -68795,11 +68796,8 @@ const RenderContentCol = (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 &&
-                    !(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 && !(row?.sortOrder < 0 || row?.sortOrder > 100000) && (value === '0' || value === 0)) {
                     value = '';
                 }
             }
@@ -68807,88 +68805,75 @@ const RenderContentCol = (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',
-                }, onDoubleClick: (e) => {
-                    e.preventDefault();
-                    handleCloseContext();
-                    handleDoubleClick?.(row, col);
+                    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();
                             }, children: displayText }) }))] }));
         }
     };
+    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) => {
-                if (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD') {
-                    const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
-                    if (index > -1) {
-                        if (isMulti) {
-                            selectedRows?.splice(index, 1);
-                            setSelectedRows([...selectedRows]);
-                        }
-                        else {
-                            setSelectedRows([]);
-                        }
-                    }
-                    else {
-                        if (isMulti) {
-                            setSelectedRows([...selectedRows, row]);
-                        }
-                        else {
-                            setSelectedRows([row]);
-                        }
-                    }
+                const tag = e.target?.nodeName;
+                if (tag !== 'DIV' && tag !== 'TD') {
+                    return;
+                }
+                if (clickTimerRef.current) {
+                    window.clearTimeout(clickTimerRef.current);
                 }
+                if (handleDoubleClick) {
+                    clickTimerRef.current = window.setTimeout(() => {
+                        setSelectedRows(toggleSelect());
+                        clickTimerRef.current = null;
+                    }, 200);
+                }
+                else {
+                    setSelectedRows(toggleSelect());
+                    clickTimerRef.current = null;
+                }
+            }, onDoubleClick: (e) => {
+                // hủy single click pending để không đổi style trước
+                if (clickTimerRef.current) {
+                    window.clearTimeout(clickTimerRef.current);
+                }
+                clickTimerRef.current = null;
+                handleCloseContext();
+                handleDoubleClick?.(row, col);
+                e.preventDefault();
+                e.stopPropagation();
             }, children: RenderElement() }, `col-${indexRow}-${indexCol}`)) }));
 };
 
-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, contextMenuItems, 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, contextMenuItems, handleContextMenuClick }) => {
     const { t } = reactI18next.useTranslation();
     const gridRef = React$5.useRef(null);
     const [openPopupSetupColumn, setOpenPopupSetupColumn] = React$5.useState(false);
@@ -68896,8 +68881,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
     const [orderBy, setOrderBy] = React$5.useState([]);
     const [filterBy, setFilterBy] = React$5.useState([]);
     const [searchTerm, setSearchTerm] = React$5.useState('');
-    const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ??
-        'id';
+    const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? 'id';
     const [contentColumns, setContentColumns] = React$5.useState([]);
     const [groupColumns, setGroupColumns] = React$5.useState([]);
     const [expandsAll, setExpandsAll] = React$5.useState(true);
@@ -68916,7 +68900,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;
@@ -68945,10 +68929,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
         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());
                 });
             });
         }
@@ -68957,10 +68938,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                 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();
@@ -69023,17 +69001,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: contentColumns, 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) {
@@ -69045,8 +69018,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: contentColumns, 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) {
@@ -69058,8 +69030,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: contentColumns, 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) {
@@ -69073,7 +69044,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: () => {
@@ -69082,16 +69053,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' });
     }
@@ -69100,10 +69069,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];
@@ -69134,9 +69100,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]);
@@ -69145,8 +69109,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] });
@@ -69165,8 +69128,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]);
                 }
             }
@@ -69175,9 +69137,7 @@ 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] : []);
             }
         }
@@ -69195,67 +69155,52 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                     const col = contentColumns.find((x) => x.field === row.field);
                     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 &&
-                                                (sumValue === '0' || sumValue === 0)) {
+                                            if (!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);
@@ -69271,7 +69216,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                 x: e.clientX,
                 y: e.clientY,
                 row,
-                show: true,
+                show: true
             });
         }, 100);
     };
@@ -69286,9 +69231,9 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
             virtualDivRef.current.style.height = '0px';
         }
     }, [context]);
-    return (jsxRuntime.jsxs("div", { className: "r-table-edit r-virtualized-table", children: [jsxRuntime.jsxs("div", { className: "r-grid", children: [toolbarSetting?.showTopToolbar && (jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption })), headerComponent && headerComponent(), jsxRuntime.jsxs("div", { ref: gridRef, className: "r-gridtable", style: {
+    return (jsxRuntime.jsxs("div", { className: "r-table-edit r-virtualized-table", children: [jsxRuntime.jsxs("div", { className: "r-grid", children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), headerComponent && headerComponent(), jsxRuntime.jsxs("div", { ref: gridRef, className: "r-gridtable", style: {
                             height: `${height ? `${height}px` : 'auto'}`,
-                            position: 'relative',
+                            position: 'relative'
                         }, children: [jsxRuntime.jsxs("table", { role: "presentation", style: { width: '100%' }, children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: contentColumns }), jsxRuntime.jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((rowColumn, indexParent) => {
                                             return (jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: rowColumn.map((col, index) => (jsxRuntime.jsx(HeaderTableCol, { col: col, idTable: idTable ?? '', dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: true, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: gridRef, filterBy: filterBy, orderBy: orderBy, optionsFilter: querySetting?.optionsFilter, allowFiltering: querySetting?.allowFiltering, allowSorting: querySetting?.allowSorting, formatSetting: formatSetting, changeFilter: (val) => {
                                                         setFilterBy([...val]);
@@ -69307,32 +69252,22 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                                                 }
                                                 const item = columnsAggregate?.find((x) => x.field === col.field);
                                                 let sumValue = item?.value;
-                                                if (!item &&
-                                                    col.haveSum === true &&
-                                                    col.type === 'numeric') {
+                                                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);
@@ -69347,7 +69282,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
                         })));
                     }
                 } })] }));