react-table-edit 1.5.21 → 1.5.23

package/dist/index.js

@@ -19986,8 +19986,8 @@ const calculateTableStructure = (columns, settingColumns) => {
     }
     traverse(columns);
     // Danh sách các cột được hiển thị
-    const flatVisble = flat.filter((e) => e.visible !== false);
-    const flatVisbleContent = flatVisble.filter((x) => x.field !== 'command' && x.field !== '#' && x.field !== 'checkbox');
+    // const flatVisble = flat.filter((e) => e.visible !== false)
+    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);
@@ -19997,7 +19997,7 @@ const calculateTableStructure = (columns, settingColumns) => {
     return {
         levels,
         flat,
-        flatVisble,
+        // flatVisble,
         flatVisbleContent,
         objWidthFixLeft,
         objWidthFixRight,
@@ -20585,12 +20585,6 @@ editDisable, addDisable, toolbarSetting, buttonSetting) => {
     }
 };
 
-const RenderColGroup = ({ contentColumns }) => (jsxRuntime.jsx("colgroup", { children: contentColumns.map((col, index) => (jsxRuntime.jsx("col", { style: {
-            width: typeof col.width === 'number' ? `${col.width}px` : col.width || undefined,
-            minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth || undefined,
-            maxWidth: typeof col.maxWidth === 'number' ? `${col.maxWidth}px` : col.maxWidth || undefined
-        } }, index))) }));
-
 const IconCustom = (props) => {
     const { iconName, size } = props;
     if (iconName === '') {
@@ -36812,6 +36806,15 @@ const FooterCol = ({ col, indexCol, dataSource, objWidthFix, formatSetting }) =>
             }, children: jsxRuntime.jsx("div", { className: "r-footer-div", children: col.haveSum === true && col.type === "numeric" && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: Number(sumValue) >= 0 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", col.numericSettings?.fraction, true, false) })) : (jsxRuntime.jsx("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: `${formatSetting?.prefixNegative ?? "-"}${formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", col.numericSettings?.fraction, true, false)}${formatSetting?.suffixNegative ?? ""}` })) })) }) })) }, `summarycell-${indexCol}`));
 };
 
+const RenderColGroup = ({ contentColumns, groupColumns, visibleGroupColumn }) => (jsxRuntime.jsx("colgroup", { children: contentColumns.map((col, index) => {
+        return (col.visible !== false &&
+            (visibleGroupColumn || !groupColumns?.includes(col.field)) && (jsxRuntime.jsx("col", { style: {
+                width: typeof col.width === 'number' ? `${col.width}px` : col.width || undefined,
+                minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth || undefined,
+                maxWidth: typeof col.maxWidth === 'number' ? `${col.maxWidth}px` : col.maxWidth || undefined
+            } }, index)));
+    }) }));
+
 var reactResizable = {exports: {}};
 
 var Resizable$2 = {};
@@ -38984,7 +38987,7 @@ const DateRangeFilterComponent = ({ fieldFilter, filterBy, handleSave }) => {
 };
 
 const HeaderTableCol = (props) => {
-    const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objHeaderWidthFixLeft, objHeaderWidthFixRight, totalCount, selectedRows, columns, orderBy, changeFilter, filterBy, changeOrder, allowFiltering, allowSorting, container, fisrtObjWidthFixRight, lastObjWidthFixLeft, setContentColumns, formatSetting, optionsFilter, idTable, isMulti } = props;
+    const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objHeaderWidthFixLeft, objHeaderWidthFixRight, totalCount, selectedRows, columns, orderBy, changeFilter, filterBy, changeOrder, allowFiltering, allowSorting, container, fisrtObjWidthFixRight, lastObjWidthFixLeft, setContentColumns, formatSetting, optionsFilter, idTable, isMulti, groupColumns, visibleGroupColumn } = props;
     const { t } = reactI18next.useTranslation();
     const headerRef = React$5.useRef(null);
     const order = orderBy.find((item) => item.key === col.field);
@@ -39003,7 +39006,7 @@ const HeaderTableCol = (props) => {
     const checkOverflow = () => {
         return headerRef.current && headerRef.current.scrollHeight > headerRef.current.clientHeight;
     };
-    return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && (jsxRuntime.jsx(Resizable, { className: "r-resize", width: typeof col.width === 'number' ? col.width : Number((col.width ?? '').replaceAll(new RegExp(`[^0-9]`, 'g'), '')), height: 0, onResize: handleResize, draggableOpts: { enableUserSelectHack: true }, children: jsxRuntime.jsx("th", { rowSpan: col.rowspan !== 1 ? col.rowspan : 1, colSpan: col.columns?.filter((x) => x.visible !== false)?.length ?? 1, className: classNames$1(`r-headercell fix-${col.fixedType}`, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'cell-fixed': col.fixedType }), style: {
+    return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && (visibleGroupColumn || !groupColumns?.includes(col.field)) && (jsxRuntime.jsx(Resizable, { className: "r-resize", width: typeof col.width === 'number' ? col.width : Number((col.width ?? '').replaceAll(new RegExp(`[^0-9]`, 'g'), '')), height: 0, onResize: handleResize, draggableOpts: { enableUserSelectHack: true }, children: jsxRuntime.jsx("th", { rowSpan: col.rowspan !== 1 ? col.rowspan : 1, colSpan: col.columns?.filter((x) => x.visible !== false)?.length ?? 1, className: classNames$1(`r-headercell fix-${col.fixedType}`, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'cell-fixed': col.fixedType }), style: {
                     top: `${indexParent * 42}px`,
                     left: col.fixedType === 'left' ? objHeaderWidthFixLeft[`${indexParent}-${indexCol ?? 0}`] : undefined,
                     right: col.fixedType === 'right' ? objHeaderWidthFixRight[`${indexParent}-${indexCol ?? 0}`] : undefined
@@ -39046,7 +39049,7 @@ const HeaderTableCol = (props) => {
                                                     }, children: jsxRuntime.jsx(DropdownItem$1, { className: "p-1", style: { borderRadius: '6px' }, tag: "div", header: true, children: jsxRuntime.jsx(FilterComponent, { setOpenFilter: setOpenFilter, filterBy: filterBy, optionsFilter: optionsFilter, formatSetting: formatSetting, changeFilter: changeFilter, column: col }) }) })] }))] }))] }))] }) }) })) }, `header-${indexCol}`));
 };
 
-const TableComponent = ({ idTable, dataSource, contentColumns, headerColumns, visibleColumns, selectedRows, setSelectedRows, selectedCell, startCell, editCell, gridRef, objHeaderWidthFixLeft, objHeaderWidthFixRight, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, totalCount, isMulti, selectEnable, editDisable, addDisable, defaultValue, fieldKey, fieldUniKey, formatSetting, toolbarSetting, buttonSetting, containerRef, handleDataChange, changeDataSource, handleCommandClick, handleDuplicate, handleKeyDown, onDuplicate, setSelectedCell, setStartCell, focusEditElementCell, setContentColumns, handeCopyCell, isCopying, typeDragging, rowChange, visibleContentColumns, filterBy, setFilterBy, orderBy, setOrderBy, optionsFilter, allowFiltering, allowSorting, searchSetting, searchTerm, searchClient, height, rowHeight, haveSum }) => {
+const TableComponent = ({ idTable, dataSource, contentColumns, headerColumns, selectedRows, setSelectedRows, selectedCell, startCell, editCell, gridRef, objHeaderWidthFixLeft, objHeaderWidthFixRight, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, totalCount, isMulti, selectEnable, editDisable, addDisable, defaultValue, fieldKey, fieldUniKey, formatSetting, toolbarSetting, buttonSetting, containerRef, handleDataChange, changeDataSource, handleCommandClick, handleDuplicate, handleKeyDown, onDuplicate, setSelectedCell, setStartCell, focusEditElementCell, setContentColumns, handeCopyCell, isCopying, typeDragging, rowChange, visibleContentColumns, filterBy, setFilterBy, orderBy, setOrderBy, optionsFilter, allowFiltering, allowSorting, searchSetting, searchTerm, searchClient, height, rowHeight, haveSum }) => {
     const filteredData = React$5.useMemo(() => {
         const arr = dataSource.map((row, index) => ({ data: row, indexRow: index }));
         if (((filterBy && filterBy.length > 0) || (searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm)) && searchClient) {
@@ -39082,7 +39085,7 @@ const TableComponent = ({ idTable, dataSource, contentColumns, headerColumns, vi
             }
         };
     }, []);
-    return (jsxRuntime.jsx("div", { ref: containerRef, className: "r-gridtable", style: { maxHeight: `${height ? `${height}px` : 'auto'}` }, children: jsxRuntime.jsxs("table", { style: { width: '100%' }, role: "presentation", children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: visibleColumns }), jsxRuntime.jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((element, indexParent) => {
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: "r-gridtable", style: { maxHeight: `${height ? `${height}px` : 'auto'}` }, children: jsxRuntime.jsxs("table", { style: { width: '100%' }, role: "presentation", children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: contentColumns }), jsxRuntime.jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((element, indexParent) => {
                         return (jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
                                 return (jsxRuntime.jsx(HeaderTableCol, { col: col, idTable: idTable ?? '', dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: containerRef, filterBy: filterBy, orderBy: orderBy, optionsFilter: optionsFilter, allowFiltering: allowFiltering, allowSorting: allowSorting, formatSetting: formatSetting, changeFilter: (val) => {
                                         setFilterBy([...val]);
@@ -39711,7 +39714,7 @@ const SettingColumn = (props) => {
     // const [indexFocus, setIndexFocus] = useState<number>()
     React$5.useEffect(() => {
         if (openSidebar) {
-            setDataSource([...column.map(x => ({ ...x }))]);
+            setDataSource([...column.map((x) => ({ ...x }))]);
         }
     }, [openSidebar]);
     const handleCancel = () => {
@@ -39731,9 +39734,9 @@ const SettingColumn = (props) => {
         const handleWindowResize = () => {
             setWindowSize(getWindowSize());
         };
-        window.addEventListener("resize", handleWindowResize);
+        window.addEventListener('resize', handleWindowResize);
         return () => {
-            window.removeEventListener("resize", handleWindowResize);
+            window.removeEventListener('resize', handleWindowResize);
         };
     }, []);
     const handleResetColumns = () => {
@@ -39743,7 +39746,7 @@ const SettingColumn = (props) => {
         handleSidebar();
         setDataSource([]);
     };
-    const visibleTemplate = (item, index) => {
+    const VisibleTemplate = ({ index, item }) => {
         return (jsxRuntime.jsx(Input$1, { defaultChecked: item.visible ?? true, disabled: item.field === 'command' || item.field === '#' || item.field === 'checkbox' || item.visibleLocked, type: "checkbox", style: { height: 18 }, className: " cursor-pointer", onChange: (e) => {
                 if (dataSource) {
                     dataSource[index].visible = e.target.checked;
@@ -39751,9 +39754,9 @@ const SettingColumn = (props) => {
                 }
             } }));
     };
-    const headerDisplayTemplate = (item, index) => {
-        let textValue = t(item.headerDisplay ?? (item.headerText ?? ''));
-        return (jsxRuntime.jsx(Input$1, { defaultValue: textValue, className: classNames$1(""), onChange: (e) => {
+    const HeaderDisplayTemplate = ({ index, item }) => {
+        let textValue = t(item.headerDisplay ?? item.headerText ?? '');
+        return (jsxRuntime.jsx(Input$1, { defaultValue: textValue, className: classNames$1(''), onChange: (e) => {
                 textValue = e.target?.value;
             }, onBlur: () => {
                 if (dataSource) {
@@ -39762,25 +39765,28 @@ const SettingColumn = (props) => {
                 }
             } }));
     };
-    const fixColumnTemplate = (item, index) => {
-        const optionsFix = [{ label: 'Trái', value: 'left' }, { label: 'Phải', value: 'right' }];
-        return (jsxRuntime.jsx(SelectTable, { component: gridRef, options: optionsFix, textAlign: "left", isClearable: true, onChange: (val) => {
+    const FixColumnTemplate = ({ index, item }) => {
+        const optionsFix = [
+            { label: 'Trái', value: 'left' },
+            { label: 'Phải', value: 'right' }
+        ];
+        return (jsxRuntime.jsx(SelectTable, { component: gridRef, options: optionsFix, textAlign: 'left', isClearable: true, onChange: (val) => {
                 if (dataSource) {
                     dataSource[index].fixedType = val?.value;
                     setDataSource([...dataSource]);
                 }
-            }, value: item.fixedType ? optionsFix.find(x => x.value === item.fixedType) : undefined }));
+            }, value: item.fixedType ? optionsFix.find((x) => x.value === item.fixedType) : undefined }));
     };
-    const widthColumnTemplate = (item, index) => {
+    const WidthColumnTemplate = ({ index, item }) => {
         const numericFormatProps = {
-            value: !isNullOrUndefined$1(item.width) ? item.width?.toString() : "",
+            value: !isNullOrUndefined$1(item.width) ? item.width?.toString() : '',
             thousandSeparator: checkThousandSeparator(formatSetting?.thousandSeparator, formatSetting?.decimalSeparator),
             decimalSeparator: checkDecimalSeparator(formatSetting?.thousandSeparator, formatSetting?.decimalSeparator),
             allowNegative: false,
             decimalScale: 0
         };
-        let floatValue = parseFloat(item.width?.toString() ?? "0");
-        return (jsxRuntime.jsx(NumericFormat, { style: { textAlign: 'right', height: 29, width: '100%' }, ...numericFormatProps, defaultValue: formartNumberic(item.width?.toString() ?? '0', formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", 0), className: classNames$1("form-control"), onValueChange: (values) => {
+        let floatValue = parseFloat(item.width?.toString() ?? '0');
+        return (jsxRuntime.jsx(NumericFormat, { style: { textAlign: 'right', height: 29, width: '100%' }, ...numericFormatProps, defaultValue: formartNumberic(item.width?.toString() ?? '0', formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', 0), className: classNames$1('form-control'), onValueChange: (values) => {
                 floatValue = values?.floatValue;
             }, onFocus: (e) => {
                 e.target.setSelectionRange(0, e.target.innerText.length - 1);
@@ -39793,9 +39799,9 @@ const SettingColumn = (props) => {
                 }
             } }));
     };
-    return (jsxRuntime.jsxs(Sidebar, { open: openSidebar, toggleSidebar: handleCancel, width: 900, children: [jsxRuntime.jsx(ModalHeader, { typeModal: "Edit", handleModal: handleCancel, title: "Column setup" }), jsxRuntime.jsxs("div", { className: "r-setting-container", children: [jsxRuntime.jsxs("div", { style: { fontWeight: 700, color: "#000" }, className: 'r-setting-row r-setting-header me-75', children: [jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 30 } }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 200 }, children: t('Column name') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { flex: 1 }, children: t('Column name display') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 80, textAlign: 'center' }, children: t('Display') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 100 }, children: t('Fix the column') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 110 }, children: t('Column width(px)') })] }), jsxRuntime.jsx("div", { className: 'r-setting-content', style: { height: windowSize.innerHeight - 140 }, children: jsxRuntime.jsx(dist.exports.ReactSortable, { tag: 'div', list: dataSource, handle: '.drag-icon', setList: newState => setDataSource(newState), children: dataSource.map((item, index) => {
-                                return jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: 'r-setting-row', children: [jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 30 }, children: jsxRuntime.jsx(SvgDragDrop, { fontSize: 12, className: 'drag-icon cursor-move' }) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 200 }, children: t(item.headerText ?? '') }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { flex: 1 }, children: headerDisplayTemplate(item, index) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 80, textAlign: 'center' }, children: visibleTemplate(item, index) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 100 }, children: fixColumnTemplate(item, index) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 110 }, children: widthColumnTemplate(item, index) })] }) });
-                            }) }) })] }), jsxRuntime.jsxs("div", { style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }, className: "d-flex justify-content-between align-items-center w-100 py-75 px-1", children: [jsxRuntime.jsx("div", { children: settingColumns?.updatedDate && jsxRuntime.jsxs("p", { children: [jsxRuntime.jsxs("strong", { children: [t("Update date"), ": "] }), " ", jsxRuntime.jsx("span", { children: settingColumns.updatedDate ? formatDateTime(settingColumns.updatedDate, "DD/MM/yyyy HH:mm") : "" }), jsxRuntime.jsxs("strong", { className: "ms-2", children: [t("Editor"), ": "] }), " ", jsxRuntime.jsx("span", { children: settingColumns.updatedByName })] }) }), jsxRuntime.jsxs("div", { children: [resetDefaultColumns && jsxRuntime.jsx(Button$1$1, { color: "primary", onClick: () => messageBoxConfirm(t, handleResetColumns, {}, 'Do you want to reset the default settings?'), className: "me-1", children: t("Reset") }), jsxRuntime.jsx(Button$1$1, { color: "primary", onClick: handleSubmit, className: "me-1", children: t("Confirm") }), jsxRuntime.jsx(Button$1$1, { color: "secondary", onClick: handleCancel, outline: true, children: t("Close") })] })] })] }));
+    return (jsxRuntime.jsxs(Sidebar, { open: openSidebar, toggleSidebar: handleCancel, width: 900, children: [jsxRuntime.jsx(ModalHeader, { typeModal: 'Edit', handleModal: handleCancel, title: 'Column setup' }), jsxRuntime.jsxs("div", { className: "r-setting-container", children: [jsxRuntime.jsxs("div", { style: { fontWeight: 700, color: '#000' }, className: "r-setting-row r-setting-header me-75", children: [jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 30 } }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 200 }, children: t('Column name') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { flex: 1 }, children: t('Column name display') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 80, textAlign: 'center' }, children: t('Display') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 100 }, children: t('Fix the column') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 110 }, children: t('Column width(px)') })] }), jsxRuntime.jsx("div", { className: "r-setting-content", style: { height: windowSize.innerHeight - 140 }, children: jsxRuntime.jsx(dist.exports.ReactSortable, { tag: "div", list: dataSource, handle: ".drag-icon", setList: (newState) => setDataSource(newState), children: dataSource.map((item, index) => {
+                                return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-setting-row", children: [jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 30 }, children: jsxRuntime.jsx(SvgDragDrop, { fontSize: 12, className: "drag-icon cursor-move" }) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 200 }, children: t(item.headerText ?? '') }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { flex: 1 }, children: jsxRuntime.jsx(HeaderDisplayTemplate, { item: item, index: index }) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 80, textAlign: 'center' }, children: jsxRuntime.jsx(VisibleTemplate, { item: item, index: index }) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 100 }, children: jsxRuntime.jsx(FixColumnTemplate, { item: item, index: index }) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 110 }, children: jsxRuntime.jsx(WidthColumnTemplate, { item: item, index: index }) })] }) }));
+                            }) }) })] }), jsxRuntime.jsxs("div", { style: { boxShadow: '0 4px 24px 0 rgb(34 41 47 / 10%)' }, className: "d-flex justify-content-between align-items-center w-100 py-75 px-1", children: [jsxRuntime.jsx("div", { children: settingColumns?.updatedDate && (jsxRuntime.jsxs("p", { children: [jsxRuntime.jsxs("strong", { children: [t('Update date'), ": "] }), " ", jsxRuntime.jsx("span", { children: settingColumns.updatedDate ? formatDateTime(settingColumns.updatedDate, 'DD/MM/yyyy HH:mm') : '' }), jsxRuntime.jsxs("strong", { className: "ms-2", children: [t('Editor'), ": "] }), " ", jsxRuntime.jsx("span", { children: settingColumns.updatedByName })] })) }), jsxRuntime.jsxs("div", { children: [resetDefaultColumns && (jsxRuntime.jsx(Button$1$1, { color: "primary", onClick: () => messageBoxConfirm(t, handleResetColumns, {}, 'Do you want to reset the default settings?'), className: "me-1", children: t('Reset') })), jsxRuntime.jsx(Button$1$1, { color: "primary", onClick: handleSubmit, className: "me-1", children: t('Confirm') }), jsxRuntime.jsx(Button$1$1, { color: "secondary", onClick: handleCancel, outline: true, children: t('Close') })] })] })] }));
 };
 
 const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleInsertAfter, handleDeleteAll, setOpenPopupSetupColumn, focusRow, editDisable, addDisable, buttonSetting, toolbarSetting, headerColumns }) => {
@@ -39839,7 +39845,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
     const searchClient = searchSetting?.searchEnable && (searchSetting?.searchClient || !(editDisable || addDisable));
     const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? 'id';
     const fieldUniKey = columns.filter((item) => item.isUnikey === true)?.map((item) => item.field);
-    const { levels: headerColumns, flatVisble: visibleColumns, flatVisbleContent: visibleContentColumns, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, objHeaderWidthFixLeft, objHeaderWidthFixRight, indexFirstEdit, indexLastEdit } = React$5.useMemo(() => {
+    const { levels: headerColumns, flatVisbleContent: visibleContentColumns, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, objHeaderWidthFixLeft, objHeaderWidthFixRight, indexFirstEdit, indexLastEdit } = React$5.useMemo(() => {
         const rs = calculateTableStructure(columns, settingColumns?.value);
         setContentColumns(rs.flat);
         return rs;
@@ -40213,7 +40219,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
             }
         }
     };
-    return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-table-edit", children: [jsxRuntime.jsxs("div", { className: "r-grid", ref: gridRef, children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsxRuntime.jsx(TableComponent, { idTable: idTable, height: height, dataSource: dataSource, contentColumns: contentColumns, headerColumns: headerColumns, visibleColumns: visibleColumns, selectedRows: selectedRows, setSelectedRows: setSelectedRows, selectedCell: selectedCell, startCell: startCell, editCell: editCell, gridRef: gridRef, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, fisrtObjWidthFixRight: fisrtObjWidthFixRight, totalCount: totalCount, isMulti: isMulti, selectEnable: selectEnable, editDisable: editDisable, addDisable: addDisable, defaultValue: defaultValue, fieldKey: fieldKey, fieldUniKey: fieldUniKey, formatSetting: formatSetting, toolbarSetting: toolbarSetting, buttonSetting: buttonSetting, containerRef: containerRef, optionsFilter: optionsFilter, allowFiltering: allowFiltering, allowSorting: allowSorting, searchSetting: searchSetting, searchTerm: searchTerm, haveSum: haveSum, isCopying: isCopying, typeDragging: typeDragging, visibleContentColumns: visibleContentColumns, rowHeight: rowHeight, changeDataSource: changeDataSource, handleCommandClick: handleCommandClick, handleKeyDown: handleKeyDown, handeCopyCell: handeCopyCell, onDuplicate: onDuplicate, setSelectedCell: setSelectedCell, setStartCell: setStartCell, focusEditElementCell: focusEditElementCell, rowChange: rowChange, filterBy: filterBy, setFilterBy: setFilterBy, orderBy: orderBy, setOrderBy: setOrderBy, searchClient: searchClient, handleDataChange: handleDataChange, handleDuplicate: () => {
+    return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-table-edit", children: [jsxRuntime.jsxs("div", { className: "r-grid", ref: gridRef, children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsxRuntime.jsx(TableComponent, { idTable: idTable, height: height, dataSource: dataSource, contentColumns: contentColumns, headerColumns: headerColumns, selectedRows: selectedRows, setSelectedRows: setSelectedRows, selectedCell: selectedCell, startCell: startCell, editCell: editCell, gridRef: gridRef, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, fisrtObjWidthFixRight: fisrtObjWidthFixRight, totalCount: totalCount, isMulti: isMulti, selectEnable: selectEnable, editDisable: editDisable, addDisable: addDisable, defaultValue: defaultValue, fieldKey: fieldKey, fieldUniKey: fieldUniKey, formatSetting: formatSetting, toolbarSetting: toolbarSetting, buttonSetting: buttonSetting, containerRef: containerRef, optionsFilter: optionsFilter, allowFiltering: allowFiltering, allowSorting: allowSorting, searchSetting: searchSetting, searchTerm: searchTerm, haveSum: haveSum, isCopying: isCopying, typeDragging: typeDragging, visibleContentColumns: visibleContentColumns, rowHeight: rowHeight, changeDataSource: changeDataSource, handleCommandClick: handleCommandClick, handleKeyDown: handleKeyDown, handeCopyCell: handeCopyCell, onDuplicate: onDuplicate, setSelectedCell: setSelectedCell, setStartCell: setStartCell, focusEditElementCell: focusEditElementCell, rowChange: rowChange, filterBy: filterBy, setFilterBy: setFilterBy, orderBy: orderBy, setOrderBy: setOrderBy, searchClient: searchClient, handleDataChange: handleDataChange, handleDuplicate: () => {
                                 handleDuplicate(dataSource, startCell.row, fieldKey, defaultValue, fieldUniKey, changeDataSource, containerRef, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate);
                             }, setContentColumns: (newColumns) => {
                                 setContentColumns(newColumns);
@@ -49059,12 +49065,14 @@ const Wizard = React$5.forwardRef((props, ref) => {
     const { steps, activeStep, setActiveStep, className = '', headerClassName = '', contentClassName = '', contentWrapperClassName = '', type = 'horizontal', heightContent = 'auto', widthContent = '100%', separator = jsxRuntime.jsx(SvgChevronRight, { fontSize: 17 }) } = props;
     // ** Renders Wizard Header
     const renderHeader = () => {
-        return steps.filter(x => x.visiable !== false).map((step, index) => {
-            return (jsxRuntime.jsxs(React$5.Fragment, { children: [index !== 0 && index !== steps.length ? jsxRuntime.jsx("div", { className: 'line', children: separator }) : null, jsxRuntime.jsx("div", { className: classNames$1('step', {
-                            crossed: (step.done !== undefined ? step.done : activeStep > (index + 1)),
+        return steps
+            .filter((x) => x.visible !== false)
+            .map((step, index) => {
+            return (jsxRuntime.jsxs(React$5.Fragment, { children: [index !== 0 && index !== steps.length ? jsxRuntime.jsx("div", { className: "line", children: separator }) : null, jsxRuntime.jsx("div", { className: classNames$1('step', {
+                            crossed: step.done !== undefined ? step.done : activeStep > index + 1,
                             disable: step.disable,
-                            active: (index + 1) === activeStep
-                        }), "data-target": `#${step.id}`, children: jsxRuntime.jsxs("button", { type: 'button', disabled: step.disable, className: 'step-trigger', onClick: () => setActiveStep?.(index + 1), children: [jsxRuntime.jsx("span", { className: 'bs-stepper-box', children: step.icon ? step.icon : index + 1 }), jsxRuntime.jsxs("span", { className: 'bs-stepper-label', children: [jsxRuntime.jsxs("span", { className: 'bs-stepper-title', children: [step.title, " "] }), step.loading && jsxRuntime.jsx(Spinner$1, { className: 'text-info', style: { borderWidth: 2, height: 15, width: 15, marginRight: 3 } }), " ", step.subtitle ? jsxRuntime.jsx("span", { className: 'bs-stepper-subtitle', children: step.subtitle }) : null] })] }) })] }, step.id));
+                            active: index + 1 === activeStep
+                        }), "data-target": `#${step.id}`, children: jsxRuntime.jsxs("button", { type: "button", disabled: step.disable, className: "step-trigger", onClick: () => setActiveStep?.(index + 1), children: [jsxRuntime.jsx("span", { className: "bs-stepper-box", children: step.icon ? step.icon : index + 1 }), jsxRuntime.jsxs("span", { className: "bs-stepper-label", children: [jsxRuntime.jsxs("span", { className: "bs-stepper-title", children: [step.title, " "] }), step.loading && jsxRuntime.jsx(Spinner$1, { className: "text-info", style: { borderWidth: 2, height: 15, width: 15, marginRight: 3 } }), " ", step.subtitle ? jsxRuntime.jsx("span", { className: "bs-stepper-subtitle", children: step.subtitle }) : null] })] }) })] }, step.id));
         });
     };
     // ** Renders Wizard Content
@@ -49072,7 +49080,7 @@ const Wizard = React$5.forwardRef((props, ref) => {
         return steps.map((step, index) => {
             return (jsxRuntime.jsx("div", { className: classNames$1('content', {
                     [contentClassName]: contentClassName,
-                    'active dstepper-block': activeStep === (index + 1)
+                    'active dstepper-block': activeStep === index + 1
                 }), id: step.id, children: step.content }, step.id));
         });
     };
@@ -68334,13 +68342,11 @@ const ModalImportComponent = (props) => {
     const [isSaveSetting, setIsSaveSetting] = React$5.useState(true);
     const formSchema = create().shape({
         step: create$1(),
-        sheetId: create$2()
-            .when('step', {
+        sheetId: create$2().when('step', {
             is: 1,
             then: create$2().required(`${t('Sheet name')} ${t('is required')}`)
         }),
-        headerRow: create$1()
-            .when('step', {
+        headerRow: create$1().when('step', {
             is: 1,
             then: create$1().required(`${t('Header row')} ${t('is required')}`)
         })
@@ -68375,29 +68381,29 @@ const ModalImportComponent = (props) => {
     };
     const onSubmit = (data) => {
         if (getValues('step') === 1) {
-            getColumnsSheetExcel(data.file, data.headerRow ?? 0, data.sheetId ?? "", handleSetColumns);
+            getColumnsSheetExcel(data.file, data.headerRow ?? 0, data.sheetId ?? '', handleSetColumns);
         }
         else if (getValues('step') === 2) {
-            const check = data.dataMap.find(x => x.isRequired && !x.column);
+            const check = data.dataMap.find((x) => x.isRequired && !x.column);
             if (check) {
                 messageBoxError(t, `Vui lòng chọn trường ghép cho cột <<${check.header}>>`);
                 return;
             }
-            mapDataImportExcel(dataMerge, getValues('headerRow') ?? 0, data.dataMap, handleValidate)
-                .then((arr) => {
+            mapDataImportExcel(dataMerge, getValues('headerRow') ?? 0, data.dataMap, handleValidate).then((arr) => {
                 setCheckInitValidate(true);
                 if (isSaveSetting) {
-                    updateGeneralSettingApi(data.dataMap.map(x => ({ ...x, column: undefined })));
+                    updateGeneralSettingApi(data.dataMap.map((x) => ({ ...x, column: undefined })));
                 }
                 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));
                     setValue('step', 3);
-                }).catch(() => {
+                })
+                    .catch(() => {
                     notificationError(t('GetFail'));
                     setCheckInitValidate(false);
                 });
@@ -68405,7 +68411,7 @@ const ModalImportComponent = (props) => {
         }
         else if (getValues('step') === 3) {
             if (dataInvalid.length > 0) {
-                messageBoxConfirm(t, handleAdd, dataValid, "The data from your excel file still has invalid rows. Please double check or import only valid lines now.");
+                messageBoxConfirm(t, handleAdd, dataValid, 'The data from your excel file still has invalid rows. Please double check or import only valid lines now.');
             }
             else {
                 handleAdd(dataValid);
@@ -68425,34 +68431,35 @@ const ModalImportComponent = (props) => {
             else {
                 setDataError([]);
             }
-        }).catch(() => {
+        })
+            .catch(() => {
             setCheckInit(false);
             notificationError(t('AddFail'));
         });
     };
     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 = [
         {
             field: 'row',
-            headerText: "Row",
+            headerText: 'Row',
             fixedType: 'left',
             textAlign: 'center',
             width: 80
         },
         {
             field: 'result',
-            headerText: "Result",
+            headerText: 'Result',
             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',
-            headerText: "Error detail",
+            headerText: 'Error detail',
             fixedType: 'left',
             width: 550,
             template: (props) => {
@@ -68466,16 +68473,18 @@ const ModalImportComponent = (props) => {
         console.log(watch('dataMap'));
     }, [watch('dataMap')]);
     const handleFormOpened = () => {
-        getGeneralSettingApi().then((rs) => {
+        getGeneralSettingApi()
+            .then((rs) => {
             const arr = rs?.value ? JSON.parse(rs.value) : [];
             setValue('dataMap', [...mapColumn].map((x) => {
-                const ele = arr.find(y => x.field === y.field);
+                const ele = arr.find((y) => x.field === y.field);
                 if (ele) {
                     x.headerDefault = ele.headerDefault;
                 }
                 return x;
             }));
-        }).catch(() => {
+        })
+            .catch(() => {
             setValue('dataMap', [...mapColumn]);
         });
         if (headerValidateExcelColumns && headerValidateExcelColumns.length > 0) {
@@ -68484,7 +68493,7 @@ const ModalImportComponent = (props) => {
         else {
             setValidateExcelColumns([
                 ...defaultValidateExcelColumns,
-                ...mapColumn.map(e => ({
+                ...mapColumn.map((e) => ({
                     field: e.field,
                     headerText: e.header,
                     width: e.width ?? 150,
@@ -68506,7 +68515,7 @@ 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, 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'),
@@ -68525,12 +68534,12 @@ const ModalImportComponent = (props) => {
                                     {
                                         id: 'handle-error',
                                         title: t('Error result'),
-                                        visiable: !!headerErrorExcelColumns,
+                                        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 && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Input$1, { checked: isSaveSetting, type: 'checkbox', className: 'me-50', onChange: (val) => {
+                                ] }) }) }) }), 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 && (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') })] })] })] }) }));
+                                        } }), 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') })] })] })] }) }));
 };
 
 const TabsMenuComponent = ({ buttonWidth, tabParent, tabChild, resourceCodeParent, resources, resourceCode, windowSize, renderModal }) => {
@@ -68663,7 +68672,7 @@ 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, selectEnable, setSelectedRows, fieldKey, isMulti } = props;
+    const { col, indexCol, indexRow, isSelected, row, zeroVisiable, groupColumns, visibleGroupColumn, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, selectEnable, setSelectedRows, fieldKey, isMulti } = props;
     const cellId = `content-${idTable}-row${indexRow}col-${indexCol}`;
     const checkOverflow = () => {
         const element = document.getElementById(cellId);
@@ -68733,7 +68742,7 @@ const RenderContentCol = (props) => {
                             }, children: displayText }) }), checkOverflow() && (jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: cellId, placement: "top", children: jsxRuntime.jsx("div", { style: { color: textColor }, children: displayText }) }))] }));
         }
     };
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: col.visible !== false && (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) }, { 'r-active': isSelected }), style: {
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: col.visible !== false && (visibleGroupColumn || !groupColumns?.includes(col.field)) && (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) }, { 'r-active': isSelected }), style: {
                 left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
                 right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined
             }, onClick: (e) => {
@@ -68781,12 +68790,27 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
         }
         setExpandsAll(true);
     }, [groupSetting?.groupColumns]);
-    const { levels: headerColumns, flatVisble, 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);
         setContentColumns(rs.flat);
         return rs;
     }, [columns, settingColumns]);
-    const optionGroupColumns = React$5.useMemo(() => contentColumns.filter((x) => !groupColumns.includes(x.field)).map((x) => ({ ...x, headerDisplay: t(x.headerDisplay ?? x.headerText) })), [groupColumns, contentColumns]);
+    const optionGroupColumns = React$5.useMemo(() => contentColumns.filter((x) => !groupColumns.includes(x.field)).map((x) => ({ ...x, headerDisplay: t(x.columnGroupText ?? x.headerDisplay ?? x.headerText) })), [groupColumns, contentColumns]);
+    const firstColSpan = React$5.useMemo(() => {
+        let count = 0;
+        let index = 3;
+        for (let i = 0; i < contentColumns.length; i++) {
+            const col = contentColumns[i];
+            if (col.visible !== false && (groupSetting?.visibleGroupColumn || !groupColumns?.includes(col.field))) {
+                count++;
+            }
+            if (count === 3) {
+                index = i;
+                break;
+            }
+        }
+        return index;
+    }, [contentColumns, groupColumns]);
     // Tính toán dữ liệu hiển thị dựa trên các điều kiện lọc, tìm kiếm và sắp xếp
     const viewData = React$5.useMemo(() => {
         if (!dataSource || dataSource.length === 0) {
@@ -68995,7 +69019,6 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
             }
         }
     }, [selectedItem]);
-    const firstColSpan = flatVisble.length > 6 ? 3 : Math.floor(flatVisble.length / 2);
     const RenderContent = ({ datas, level = 0 }) => {
         return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: datas.map((row, indexRow) => {
                 const [expand, setExpand] = React$5.useState(row.expand ?? true);
@@ -69020,12 +69043,12 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
                     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: firstColSpan, children: jsxRuntime.jsxs("div", { className: "r-rowcell-div", children: [jsxRuntime.jsx(SvgChevronRight, { style: { marginLeft: level * 20, transform: expand ? 'rotate(90deg)' : 'rotate(0deg)' }, fontSize: 15, onClick: () => {
+                    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)' }, 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) {
+                                        if (indexCol <= firstColSpan || colSum.visible === false || (!groupSetting?.visibleGroupColumn && groupColumns?.includes(colSum.field))) {
                                             return;
                                         }
                                         let sumValue = row[colSum.field];
@@ -69046,11 +69069,11 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
                 }
                 else {
                     const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
-                    return (jsxRuntime.jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", className: "r-row", children: contentColumns.map((column, indexCol) => (jsxRuntime.jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: fieldKey, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row, zeroVisiable: zeroVisiable }, indexCol))) }, `row-content-${indexRow}`));
+                    return (jsxRuntime.jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", className: "r-row", children: contentColumns.map((column, indexCol) => (jsxRuntime.jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: fieldKey, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row, zeroVisiable: zeroVisiable, groupColumns: groupColumns, visibleGroupColumn: groupSetting?.visibleGroupColumn }, indexCol))) }, `row-content-${indexRow}`));
                 }
             }) }));
     };
-    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'}` }, children: [jsxRuntime.jsxs("table", { role: "presentation", style: { width: '100%' }, children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: flatVisble }), jsxRuntime.jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((rowColumn, indexParent) => {
+    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'}` }, children: [jsxRuntime.jsxs("table", { role: "presentation", style: { width: '100%' }, children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: contentColumns, groupColumns: groupColumns, visibleGroupColumn: groupSetting?.visibleGroupColumn }), 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: selectEnable ?? false, 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]);
                                                         if (querySetting?.changeFilter) {
@@ -69061,9 +69084,9 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
                                                         if (querySetting?.changeOrder) {
                                                             querySetting.changeOrder(val);
                                                         }
-                                                    }, columns: contentColumns, setContentColumns: setContentColumns, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, totalCount: dataSource?.length ?? 0 }, `header-${indexParent}-${index}`))) }, `header-${-indexParent}`));
+                                                    }, columns: contentColumns, groupColumns: groupColumns, visibleGroupColumn: groupSetting?.visibleGroupColumn, setContentColumns: setContentColumns, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, totalCount: dataSource?.length ?? 0 }, `header-${indexParent}-${index}`))) }, `header-${-indexParent}`));
                                         }) }), jsxRuntime.jsx("tbody", { className: "r-gridcontent", role: "rowgroup", children: jsxRuntime.jsx(RenderContent, { datas: viewData }) }), jsxRuntime.jsx("tfoot", { className: "r-gridfoot", children: (columnsAggregate?.length ?? 0) > 0 && (jsxRuntime.jsx("tr", { className: "r-row", children: contentColumns.map((col, indexCol) => {
-                                                if (col.visible === false) {
+                                                if (col.visible === false || (!groupSetting?.visibleGroupColumn && groupColumns.includes(col.field))) {
                                                     return;
                                                 }
                                                 const item = columnsAggregate?.find((x) => x.field === col.field);