react-table-edit 1.4.16 → 1.4.18

package/dist/component/edit-form/select-table/index.d.ts

@@ -1,4 +1,4 @@
-import { IFColumnSelectTable } from "../../select-table";
+import { IFColumnSelectTable } from "../../type";
 interface ISelectTableBox {
     id?: string;
     name: string;

package/dist/component/edit-form-inline/select-table/index.d.ts

@@ -1,4 +1,4 @@
-import { IFColumnSelectTable } from "../../select-table";
+import { IFColumnSelectTable } from "../../type";
 interface ISelectTableBox {
     id?: string;
     name: string;

package/dist/component/table/command.d.ts

@@ -5,7 +5,7 @@ type IFDataProps = {
     rowData: any;
     indexRow: number;
     indexFocus?: number;
-    setIndexFocus: Dispatch<SetStateAction<number>>;
+    setIndexFocus?: Dispatch<SetStateAction<number>>;
     handleCommandClick: any;
 };
 declare const CommandElement: (props: IFDataProps) => import("react/jsx-runtime").JSX.Element;

package/dist/component/type/index.d.ts

@@ -4,6 +4,10 @@ import { UseFormGetValues, UseFormReset, UseFormSetValue } from "react-hook-form
 type ITextAlign = 'center' | 'left' | 'right';
 /** Loại chỉnh sửa của cột */
 type IEditType = 'text' | 'numeric' | 'datetime' | 'selectTree' | 'date' | 'select' | 'checkbox' | 'form' | 'formInline' | 'color';
+/** Loại hiển thị của cột */
+type IViewType = 'text' | 'numeric' | 'datetime' | 'date' | 'checkbox' | '#' | 'command';
+/** Loại loc của cột */
+type IFilterType = 'text' | 'numeric' | 'date' | 'select';
 /** Cấu hình thao tác trên cột */
 export type ICommandItem = {
     /** ID thao tác */
@@ -343,4 +347,65 @@ export type FromItemsField = {
     /** Danh sách lựa chọn (chỉ áp dụng với loại 'select' và 'selectCreatable') */
     options?: any[];
 };
+export type IColumnsVirtualizedAgg = {
+    field: string;
+    value: any;
+    /** Kiểu xem cột */
+    type?: string;
+};
+/** Định nghĩa cột bảng ciew ảo*/
+export type IColumnVirtualizedTable = {
+    /** Tên thuộc tính */
+    field: string;
+    /** Tiêu đề hiển thị ở header */
+    headerText?: string;
+    /** Khóa chính */
+    isPrimarykey?: boolean;
+    /** Có tính tổng */
+    haveSum?: boolean;
+    /** Có tooltip */
+    haveToolTip?: boolean;
+    /** Chiều rộng cột */
+    width?: number | string;
+    /** Chiều rộng tối thiểu */
+    minWidth?: number | string;
+    /** Chiều rộng tối đa */
+    maxWidth?: number | string;
+    /** Có hiển thị không */
+    visible?: boolean;
+    /** Kiểu xem cột */
+    type?: IViewType;
+    settingFilter?: IFSettingFilterColumn;
+    /** Căn lề */
+    textAlign?: ITextAlign;
+    /** Cố định trái/phải */
+    fixedType?: 'left' | 'right' | undefined;
+    /** Danh sách thao tác */
+    commandItems?: ICommandItem[];
+    /** Cấu hình cho kiểu numeric */
+    numericSettings?: ISettingNumericElement;
+    /** Danh sách cột con */
+    columns?: IColumnTable[];
+    /** Điều kiện disable cột */
+    disabledCondition?: (row: any) => boolean;
+    /** Template hiển thị khi không ở chế độ edit */
+    template?: (row: any, indexRow: number) => JSX.Element | string | number | undefined;
+    /** Số dòng chiếm (rowspan) */
+    rowspan?: number;
+};
+export type IFSettingFilterColumn = {
+    /** Kiểu lọc cột */
+    filterType?: IFilterType;
+    allowFilter?: boolean;
+    options: any[];
+};
+export type IFOrderTable = {
+    key: string;
+    direction: 'asc' | 'desc';
+};
+export type IFFilterTable = {
+    key: string;
+    value: any;
+    ope: 'startswith' | 'endswith' | 'contains' | 'equal' | 'notequal' | 'greaterthan' | 'greaterthanorequal' | 'lessthan' | 'lessthanorequal';
+};
 export {};

package/dist/component/utils.d.ts

@@ -21,3 +21,28 @@ export declare const FindNodeByPath: (tree: any[], path: string) => {
     firstIndex: number;
     node: any;
 } | null;
+/**
+ * Tính toán cấu trúc bảng từ dữ liệu column dạng cây:
+ * - Tạo header dạng nhiều cấp (header theo chiều dọc)
+ * - Chuyển cột thành dạng phẳng để render nội dung
+ * - Tính toán vị trí cố định trái/phải (fixed column) để hiển thị sticky
+ *
+ * @param columns Mảng cấu trúc cây đại diện cho các cột của bảng
+ * @returns {
+ *   levels: IHeaderColumnTable[][]       // Các hàng header theo cấp
+ *   flat: IColumnVirtualizedTable[]      // Danh sách cột phẳng
+ *   objWidthFixLeft: Record<number, number>      // Offset trái cho cột fixed left
+ *   objWidthFixRight: Record<number, number>     // Offset phải cho cột fixed right
+ *   lastObjWidthFixLeft: number          // Chỉ số cột cuối cùng fixed left
+ *   fisrtObjWidthFixRight: number        // Chỉ số cột đầu tiên fixed right
+ * }
+ */
+export declare const calculateTableStructure: (columns: any[]) => {
+    levels: any[][];
+    flat: any[];
+    flatVisble: any[];
+    objWidthFixLeft: Record<number, number>;
+    objWidthFixRight: Record<number, number>;
+    lastObjWidthFixLeft: number;
+    fisrtObjWidthFixRight: number;
+};

package/dist/component/virtualized-table/content.d.ts

@@ -0,0 +1,22 @@
+import { IColumnVirtualizedTable, IFTableEditFormat } from "../type";
+type IContentColProps = {
+    col: IColumnVirtualizedTable;
+    row: any;
+    indexRow: number;
+    indexCol: number;
+    isSelected: boolean;
+    formatSetting?: IFTableEditFormat;
+    idTable: string;
+    selectedRows: any[];
+    objWidthFixLeft: any;
+    objWidthFixRight: any;
+    lastObjWidthFixLeft: number;
+    fisrtObjWidthFixRight: number;
+    selectEnable?: boolean;
+    isMulti?: boolean;
+    fieldKey: string;
+    setSelectedRows: (value: any[]) => void;
+    handleCommandClick: (id: string, rowData: any, index: number) => void;
+};
+export declare const RenderContentCol: (props: IContentColProps) => false | import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/component/virtualized-table/group-col.d.ts

@@ -0,0 +1,6 @@
+import { IColumnVirtualizedTable } from "../type";
+type IFProps = {
+    contentColumns: IColumnVirtualizedTable[];
+};
+export declare const RenderColGroup: ({ contentColumns }: IFProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/component/virtualized-table/header.d.ts

@@ -0,0 +1,31 @@
+import { Dispatch, SetStateAction } from 'react';
+import { IColumnVirtualizedTable, IFFilterTable, IFOrderTable } from "../type";
+import 'react-resizable/css/styles.css';
+import { IFTableEditFormat } from 'react-table-edit';
+type IFDataProps = {
+    selectEnable: boolean;
+    dataSource: any[];
+    setSelectedRows: Dispatch<SetStateAction<any[]>>;
+    col: IColumnVirtualizedTable;
+    columns: IColumnVirtualizedTable[];
+    setColumns?: (columns: IColumnVirtualizedTable[]) => void;
+    changeFilter: (data: IFFilterTable[]) => void;
+    changeOrder: (data: IFOrderTable[]) => void;
+    indexCol: number;
+    indexParent: number;
+    objWidthFixLeft: any;
+    objWidthFixRight: any;
+    totalCount: number;
+    lastObjWidthFixLeft: number;
+    fisrtObjWidthFixRight: number;
+    selectedRows: any[];
+    isMulti: boolean;
+    allowFilter?: boolean;
+    allowOrder?: boolean;
+    filterBy: IFFilterTable[];
+    orderBy: IFOrderTable[];
+    container: any;
+    formatSetting?: IFTableEditFormat;
+};
+declare const HeaderTableCol: (props: IFDataProps) => import("react/jsx-runtime").JSX.Element;
+export default HeaderTableCol;

package/dist/component/virtualized-table/index.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { IColumnsVirtualizedAgg, IColumnVirtualizedTable, IFFilterTable, IFOrderTable, IFTableEditFormat, IFTableEditPaging, IFTableEditSearchSetting, IFTableEditToolbar } from '../type';
+type VirtualTableProps = {
+    idTable: string;
+    dataSource: any[];
+    rowHeight?: number;
+    height?: number;
+    columns: IColumnVirtualizedTable[];
+    selectEnable?: boolean;
+    isMutil?: boolean;
+    isLoading?: boolean;
+    formatSetting?: IFTableEditFormat;
+    allowFilter?: boolean;
+    allowOrder?: boolean;
+    pagingSetting?: IFTableEditPaging;
+    toolbarSetting?: IFTableEditToolbar;
+    searchSetting?: IFTableEditSearchSetting;
+    columnsAggregate?: IColumnsVirtualizedAgg[];
+    setColumns?: (columns: IColumnVirtualizedTable[]) => void;
+    commandClick?: (data: any) => void;
+    changeFilter?: (data: IFFilterTable[]) => void;
+    changeOrder?: (data: IFOrderTable[]) => void;
+};
+declare const VirtualTable: React.FC<VirtualTableProps>;
+export default VirtualTable;

package/dist/component/virtualized-table/loading-item.d.ts

@@ -0,0 +1,4 @@
+export declare const SkeletonRow: ({ columns, rowHeight }: {
+    columns: number;
+    rowHeight: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -8,6 +8,10 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 type ITextAlign = 'center' | 'left' | 'right';
 /** Loại chỉnh sửa của cột */
 type IEditType = 'text' | 'numeric' | 'datetime' | 'selectTree' | 'date' | 'select' | 'checkbox' | 'form' | 'formInline' | 'color';
+/** Loại hiển thị của cột */
+type IViewType = 'text' | 'numeric' | 'datetime' | 'date' | 'checkbox' | '#' | 'command';
+/** Loại loc của cột */
+type IFilterType = 'text' | 'numeric' | 'date' | 'select';
 /** Cấu hình thao tác trên cột */
 type ICommandItem = {
     /** ID thao tác */
@@ -347,6 +351,67 @@ type FromItemsField = {
     /** Danh sách lựa chọn (chỉ áp dụng với loại 'select' và 'selectCreatable') */
     options?: any[];
 };
+type IColumnsVirtualizedAgg = {
+    field: string;
+    value: any;
+    /** Kiểu xem cột */
+    type?: string;
+};
+/** Định nghĩa cột bảng ciew ảo*/
+type IColumnVirtualizedTable = {
+    /** Tên thuộc tính */
+    field: string;
+    /** Tiêu đề hiển thị ở header */
+    headerText?: string;
+    /** Khóa chính */
+    isPrimarykey?: boolean;
+    /** Có tính tổng */
+    haveSum?: boolean;
+    /** Có tooltip */
+    haveToolTip?: boolean;
+    /** Chiều rộng cột */
+    width?: number | string;
+    /** Chiều rộng tối thiểu */
+    minWidth?: number | string;
+    /** Chiều rộng tối đa */
+    maxWidth?: number | string;
+    /** Có hiển thị không */
+    visible?: boolean;
+    /** Kiểu xem cột */
+    type?: IViewType;
+    settingFilter?: IFSettingFilterColumn;
+    /** Căn lề */
+    textAlign?: ITextAlign;
+    /** Cố định trái/phải */
+    fixedType?: 'left' | 'right' | undefined;
+    /** Danh sách thao tác */
+    commandItems?: ICommandItem[];
+    /** Cấu hình cho kiểu numeric */
+    numericSettings?: ISettingNumericElement;
+    /** Danh sách cột con */
+    columns?: IColumnTable[];
+    /** Điều kiện disable cột */
+    disabledCondition?: (row: any) => boolean;
+    /** Template hiển thị khi không ở chế độ edit */
+    template?: (row: any, indexRow: number) => JSX.Element | string | number | undefined;
+    /** Số dòng chiếm (rowspan) */
+    rowspan?: number;
+};
+type IFSettingFilterColumn = {
+    /** Kiểu lọc cột */
+    filterType?: IFilterType;
+    allowFilter?: boolean;
+    options: any[];
+};
+type IFOrderTable = {
+    key: string;
+    direction: 'asc' | 'desc';
+};
+type IFFilterTable = {
+    key: string;
+    value: any;
+    ope: 'startswith' | 'endswith' | 'contains' | 'equal' | 'notequal' | 'greaterthan' | 'greaterthanorequal' | 'lessthan' | 'lessthanorequal';
+};
 
 type IFTableEditProps = {
     idTable?: string;
@@ -415,6 +480,31 @@ declare const FindNodeByPath: (tree: any[], path: string) => {
     firstIndex: number;
     node: any;
 } | null;
+/**
+ * Tính toán cấu trúc bảng từ dữ liệu column dạng cây:
+ * - Tạo header dạng nhiều cấp (header theo chiều dọc)
+ * - Chuyển cột thành dạng phẳng để render nội dung
+ * - Tính toán vị trí cố định trái/phải (fixed column) để hiển thị sticky
+ *
+ * @param columns Mảng cấu trúc cây đại diện cho các cột của bảng
+ * @returns {
+ *   levels: IHeaderColumnTable[][]       // Các hàng header theo cấp
+ *   flat: IColumnVirtualizedTable[]      // Danh sách cột phẳng
+ *   objWidthFixLeft: Record<number, number>      // Offset trái cho cột fixed left
+ *   objWidthFixRight: Record<number, number>     // Offset phải cho cột fixed right
+ *   lastObjWidthFixLeft: number          // Chỉ số cột cuối cùng fixed left
+ *   fisrtObjWidthFixRight: number        // Chỉ số cột đầu tiên fixed right
+ * }
+ */
+declare const calculateTableStructure: (columns: any[]) => {
+    levels: any[][];
+    flat: any[];
+    flatVisble: any[];
+    objWidthFixLeft: Record<number, number>;
+    objWidthFixRight: Record<number, number>;
+    lastObjWidthFixLeft: number;
+    fisrtObjWidthFixRight: number;
+};
 
 type IFDataProps$1 = {
     buttonWidth?: number;
@@ -623,4 +713,4 @@ type IFProps = {
 };
 declare const Wizard: React.ForwardRefExoticComponent<IFProps & React.RefAttributes<unknown>>;
 
-export { ExportExcelComponent, FindNodeByPath, type FromItemsField, type IColumnTable, type ICommandItem, type IFColumnSelectTable, type IFColumnSelectTableTree, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFPropsDetail, type IFTableEditButton, type IFTableEditFormat, type IFTableEditPaging, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFTableSelectFormat, type IFTableTreeSelectFormat, type IFToolbarOptions, type IHeaderColumnTable, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, ImportExcelComponent, InputStyleComponent, SelectTable, SelectTableTree, TabsMenuComponent, Wizard, checkDecimalSeparator, checkThousandSeparator, TableEdit as default, formartNumberic, formatDateTime, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, roundNumber, useOnClickOutside };
+export { ExportExcelComponent, FindNodeByPath, type FromItemsField, type IColumnTable, type IColumnVirtualizedTable, type IColumnsVirtualizedAgg, type ICommandItem, type IFColumnSelectTable, type IFColumnSelectTableTree, type IFCurrentPage, type IFCurrentPageConfig, type IFFilterTable, type IFOrderTable, type IFPageSize, type IFPropsDetail, type IFSettingFilterColumn, type IFTableEditButton, type IFTableEditFormat, type IFTableEditPaging, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFTableSelectFormat, type IFTableTreeSelectFormat, type IFToolbarOptions, type IHeaderColumnTable, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, ImportExcelComponent, InputStyleComponent, SelectTable, SelectTableTree, TabsMenuComponent, Wizard, calculateTableStructure, checkDecimalSeparator, checkThousandSeparator, TableEdit as default, formartNumberic, formatDateTime, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, roundNumber, useOnClickOutside };

package/dist/index.js

@@ -19297,6 +19297,77 @@ const FindNodeByPath = (tree, path) => {
     }
     return { parent: current, lastIndex: levels.at(-1), firstIndex: levels.length === 1 ? levels[0] : -1, node };
 };
+/**
+ * Tính toán cấu trúc bảng từ dữ liệu column dạng cây:
+ * - Tạo header dạng nhiều cấp (header theo chiều dọc)
+ * - Chuyển cột thành dạng phẳng để render nội dung
+ * - Tính toán vị trí cố định trái/phải (fixed column) để hiển thị sticky
+ *
+ * @param columns Mảng cấu trúc cây đại diện cho các cột của bảng
+ * @returns {
+ *   levels: IHeaderColumnTable[][]       // Các hàng header theo cấp
+ *   flat: IColumnVirtualizedTable[]      // Danh sách cột phẳng
+ *   objWidthFixLeft: Record<number, number>      // Offset trái cho cột fixed left
+ *   objWidthFixRight: Record<number, number>     // Offset phải cho cột fixed right
+ *   lastObjWidthFixLeft: number          // Chỉ số cột cuối cùng fixed left
+ *   fisrtObjWidthFixRight: number        // Chỉ số cột đầu tiên fixed right
+ * }
+ */
+const calculateTableStructure = (columns) => {
+    const levels = [];
+    const flat = [];
+    const objWidthFixLeft = {};
+    const objWidthFixRight = {};
+    let maxDepth = 0;
+    // Tính depth tối đa
+    const calculateDepth = (cols, depth = 1) => (Math.max(...cols.map(col => (col.columns?.length ? calculateDepth(col.columns, depth + 1) : depth))));
+    maxDepth = calculateDepth(columns);
+    let leftTotal = 0;
+    let rightTotal = 0;
+    const traverse = (cols, level = 0) => {
+        levels[level] = levels[level] || [];
+        return cols.reduce((colspanSum, col) => {
+            const hasChildren = (col.columns?.length ?? 0) > 0;
+            const colspan = hasChildren ? traverse(col.columns, level + 1) : 1;
+            const cell = {
+                ...col,
+                columns: col.columns ?? [],
+                colspan,
+                rowspan: hasChildren ? 1 : maxDepth - level
+            };
+            levels[level].push(cell);
+            if (!hasChildren) {
+                const visible = col.visible !== false;
+                const index = flat.length;
+                const width = col.width ?? 40;
+                cell.index = index;
+                flat.push(cell);
+                if (col.fixedType === 'left' && visible) {
+                    objWidthFixLeft[index] = leftTotal;
+                    leftTotal += width;
+                }
+                if (col.fixedType === 'right' && visible) {
+                    objWidthFixRight[index] = rightTotal;
+                    rightTotal += width;
+                }
+            }
+            return colspanSum + colspan;
+        }, 0);
+    };
+    traverse(columns);
+    const flatVisble = flat.filter((e) => e.visible !== false);
+    const lastObjWidthFixLeft = Math.max(...Object.keys(objWidthFixLeft).map(Number), 0);
+    const fisrtObjWidthFixRight = Math.min(...Object.keys(objWidthFixRight).map(Number), flat.length);
+    return {
+        levels,
+        flat,
+        flatVisble,
+        objWidthFixLeft,
+        objWidthFixRight,
+        lastObjWidthFixLeft,
+        fisrtObjWidthFixRight
+    };
+};
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
 
@@ -23065,7 +23136,6 @@ const EditForm = React$5.forwardRef((props, ref) => {
     const { innerWidth } = window;
     const inputRef = React$5.useRef(null);
     const editFormRef = React$5.useRef(null);
-    const buttonRef = React$5.useRef(null);
     const [dropdownOpen, setDropdownOpen] = React$5.useState(false);
     const [isFocus, setIsFocus] = React$5.useState(false);
     const [itemsField, setItemsField] = React$5.useState([]);
@@ -23251,7 +23321,7 @@ const EditForm = React$5.forwardRef((props, ref) => {
                         }, children: jsxRuntime.jsxs(DropdownItem$1, { className: 'p-0', style: { borderRadius: '6px' }, tag: 'div', header: true, children: [jsxRuntime.jsx("div", { onKeyDown: (e) => formKeyDown(e, handleSubmit(handleOnSubmit)), className: 'p-1', style: {
                                         maxHeight: menuHeight ? menuHeight : 300,
                                         overflow: "auto"
-                                    }, children: itemsField ? renderForm(itemsField) : '' }), jsxRuntime.jsxs("div", { className: "d-flex justify-content-between p-50", style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }, children: [jsxRuntime.jsx("div", { className: "text-primary py-25", style: { fontSize: 12 }, children: footerTemplate ? footerTemplate(rowData) : '' }), !onChangeField ? jsxRuntime.jsxs("div", { className: "d-flex justify-content-end", children: [isClearable && jsxRuntime.jsx(Button$1, { ref: buttonRef, className: 'btn me-50 py-25 px-50', outline: true, onClick: () => {
+                                    }, children: itemsField ? renderForm(itemsField) : '' }), jsxRuntime.jsxs("div", { className: "d-flex justify-content-between p-50", style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }, children: [jsxRuntime.jsx("div", { className: "text-primary py-25", style: { fontSize: 12 }, children: footerTemplate ? footerTemplate(rowData) : '' }), !onChangeField ? jsxRuntime.jsxs("div", { className: "d-flex justify-content-end", children: [isClearable && jsxRuntime.jsx(Button$1, { className: 'btn me-50 py-25 px-50', outline: true, onClick: () => {
                                                         itemsField.forEach((e) => {
                                                             if (e.type === 'numeric') {
                                                                 setValue(e.name, 0);
@@ -23264,7 +23334,7 @@ const EditForm = React$5.forwardRef((props, ref) => {
                                                         if (e.code === 'Tab') {
                                                             closeMenu();
                                                         }
-                                                    }, children: t('Clear') }), jsxRuntime.jsx(Button$1, { ref: buttonRef, color: 'primary', className: 'btn btn-primary py-25 px-50', onClick: handleSubmit(handleOnSubmit), onKeyDown: (e) => {
+                                                    }, children: t('Clear') }), jsxRuntime.jsx(Button$1, { color: 'primary', className: 'btn btn-primary py-25 px-50', onClick: handleSubmit(handleOnSubmit), onKeyDown: (e) => {
                                                         if (e.code === 'Tab') {
                                                             closeMenu();
                                                         }
@@ -23518,7 +23588,9 @@ const CommandElement = (props) => {
                     }), color: item.color ? item.color : '#000', onClick: (e) => {
                         handleCommandClick(item.id, rowData, indexRow);
                         if (indexRow === indexFocus) {
-                            setIndexFocus(-1);
+                            if (setIndexFocus) {
+                                setIndexFocus(-1);
+                            }
                         }
                         e.preventDefault();
                     }, children: [item.icon && jsxRuntime.jsx(IconCustom, { iconName: item.icon, size: 16 }), jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", target: `command-item-${indexRow}-${index}`, place: "top", children: t(item.tooltip ?? '') })] }, `command-${index}`));
@@ -41760,7 +41832,7 @@ const HeaderTableCol = (props) => {
                     width: col.width ? typeof col.width === 'number' ? col.width : col.width?.includes('px') || col.width?.includes('%') ? col.width : `${col.width}px` : 'auto',
                     minWidth: col.fixedType ? col.width : col.minWidth ? typeof col.minWidth === 'number' ? col.minWidth : col.minWidth?.includes('px') || col.minWidth?.includes('%') ? col.minWidth : `${col.minWidth}px` : 'auto',
                     maxWidth: col.fixedType ? col.width : col.maxWidth ? typeof col.maxWidth === 'number' ? col.maxWidth : col.maxWidth?.includes('px') || col.maxWidth?.includes('%') ? col.maxWidth : `${col.maxWidth}px` : 'auto'
-                }, children: jsxRuntime.jsxs("div", { style: { justifyContent: col.textAlign ?? 'left' }, className: classnames('r-headercell-div'), children: [col.field === 'checkbox' && (jsxRuntime.jsx(Input$1, { checked: totalCount > 0 && selectedRows?.length >= totalCount, type: "checkbox", className: classnames('cursor-pointer', { 'd-none': !isMulti }), style: { textAlign: col.textAlign ?? 'left', marginTop: 6 }, onChange: (e) => {
+                }, children: jsxRuntime.jsxs("div", { style: { justifyContent: col.textAlign ?? 'left' }, className: classnames('r-headercell-div'), children: [col.field === 'checkbox' && (jsxRuntime.jsx(Input$1, { checked: !!(totalCount > 0 && selectedRows?.length >= totalCount), type: "checkbox", className: classnames('cursor-pointer', { 'd-none': !isMulti }), style: { textAlign: col.textAlign ?? 'left', marginTop: 6 }, onChange: (e) => {
                                 if (selectEnable) {
                                     if (e.target.checked) {
                                         setSelectedRows(dataSource.map((item) => { return item; }));
@@ -42258,13 +42330,13 @@ editDisable, addDisable, toolbarSetting, buttonSetting) => {
 };
 
 const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleInsertAfter, handleDeleteAll, setOpenPopupSetupColumn, indexFocus, editDisable, addDisable, buttonSetting, toolbarSetting, headerColumns, t }) => {
-    return (jsxRuntime.jsx("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: jsxRuntime.jsxs("div", { className: "r-toolbar-items", children: [jsxRuntime.jsxs("div", { className: "r-toolbar-left", children: [jsxRuntime.jsxs("div", { className: classnames('r-toolbar-item d-flex', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: [jsxRuntime.jsx(Button$1, { color: 'success', outline: true, onClick: () => handleAdd(1), className: 'd-flex', children: t('Add item') }), jsxRuntime.jsxs(UncontrolledDropdown, { className: 'nav-item', children: [jsxRuntime.jsx(DropdownToggle$1, { tag: 'div', className: 'me-0 d-flex', children: jsxRuntime.jsx(Button$1, { type: 'button', color: 'success', outline: true, style: { marginLeft: -1 }, className: 'px-25', children: jsxRuntime.jsx("svg", { fill: '#28c76f', height: "15", width: "20", viewBox: "0 0 20 20", children: jsxRuntime.jsx("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) }) }), jsxRuntime.jsxs(DropdownMenu$1, { className: 'formula-dropdown icon-dropdown p-0', style: { width: 60 }, children: [jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(10), children: " 10 " }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(20), children: " 20 " }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(30), children: " 30 " }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(40), children: " 40 " }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(50), children: " 50 " })] })] })] }), (indexFocus ?? -1) > -1 ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1, { color: 'success', outline: true, onClick: () => { handleDuplicate(); }, className: 'd-flex', children: t('Duplicate') }) }), jsxRuntime.jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1, { color: 'success', outline: true, onClick: handleInsertBefore, className: 'd-flex', children: t('Insert item before') }) }), jsxRuntime.jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1, { color: 'success', outline: true, onClick: handleInsertAfter, className: 'd-flex', children: t('Insert item after') }) })] }) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }), jsxRuntime.jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1, { color: 'primary', outline: true, onClick: handleDeleteAll, className: 'd-flex', children: t('Delete all item') }) }), toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
+    return (jsxRuntime.jsx("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: jsxRuntime.jsxs("div", { className: "r-toolbar-items", children: [jsxRuntime.jsxs("div", { className: "r-toolbar-left", children: [jsxRuntime.jsxs("div", { className: classnames('r-toolbar-item d-flex', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: [jsxRuntime.jsx(Button$1, { color: 'success', outline: true, onClick: () => handleAdd(1), className: 'd-flex', children: t('Add item') }), jsxRuntime.jsxs(UncontrolledDropdown, { className: 'nav-item', children: [jsxRuntime.jsx(DropdownToggle$1, { tag: 'div', className: 'me-0 d-flex', children: jsxRuntime.jsx(Button$1, { type: 'button', color: 'success', outline: true, style: { marginLeft: -1 }, className: 'px-25', children: jsxRuntime.jsx("svg", { fill: '#28c76f', height: "15", width: "20", viewBox: "0 0 20 20", children: jsxRuntime.jsx("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) }) }), jsxRuntime.jsxs(DropdownMenu$1, { className: 'formula-dropdown icon-dropdown p-0', style: { width: 60 }, children: [jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(10), children: "Th\u00EAm 10 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(20), children: "Th\u00EAm 20 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(30), children: "Th\u00EAm 30 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(40), children: "Th\u00EAm 40 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(50), children: "Th\u00EAm 50 h\u00E0ng" })] })] })] }), (indexFocus ?? -1) > -1 ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1, { color: 'success', outline: true, onClick: () => { handleDuplicate(); }, className: 'd-flex', children: t('Duplicate') }) }), jsxRuntime.jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1, { color: 'success', outline: true, onClick: handleInsertBefore, className: 'd-flex', children: t('Insert item before') }) }), jsxRuntime.jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1, { color: 'success', outline: true, onClick: handleInsertAfter, className: 'd-flex', children: t('Insert item after') }) })] }) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }), jsxRuntime.jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1, { color: 'primary', outline: true, onClick: handleDeleteAll, className: 'd-flex', children: t('Delete all item') }) }), toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
                             return ((item.align === 'left') ? jsxRuntime.jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : '');
                         })] }), jsxRuntime.jsx("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
                         return ((item.align === 'center') ? jsxRuntime.jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : '');
                     }) }), jsxRuntime.jsxs("div", { className: "r-toolbar-right", children: [toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
                             return ((item.align === 'right') ? jsxRuntime.jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : '');
-                        }), jsxRuntime.jsx("div", { className: classnames('r-toolbar-item me-25', { 'd-none': headerColumns.length > 1 }), "aria-disabled": "false", children: jsxRuntime.jsx(SvgSettings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }), jsxRuntime.jsx("div", { className: classnames('r-toolbar-item me-25', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: jsxRuntime.jsxs(UncontrolledDropdown, { className: 'dropdown-user nav-item', children: [jsxRuntime.jsx(DropdownToggle$1, { tag: 'div', color: "primary", onClick: (e) => e.preventDefault(), children: jsxRuntime.jsx(SvgInfo, { className: "cursor-pointer text-primary" }) }), jsxRuntime.jsx(DropdownMenu$1, { className: 'formula-dropdown icon-dropdown', children: jsxRuntime.jsxs("ul", { className: "mb-0 pe-50", children: [jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\u00E2n b\u1EA3n" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Ch\u1ECDn \u00F4 v\u00E0 Ctrl + V \u0111\u1EC3 d\u00E1n th\u00F4ng tin t\u1EEB excel" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\u00E9p h\u00E0ng" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + V \u0111\u1EC3  d\u00E1n h\u00E0ng" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n Ctrl + Shift + \u2193 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng d\u01B0\u1EDBi" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n Ctrl + Shift + \u2191 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng tr\u00EAn" })] }) })] }) })] })] }) }));
+                        }), jsxRuntime.jsx("div", { className: classnames('r-toolbar-item me-25', { 'd-none': headerColumns.length > 1 }), "aria-disabled": "false", children: jsxRuntime.jsx(SvgSettings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }), jsxRuntime.jsx("div", { className: classnames('r-toolbar-item me-25', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: jsxRuntime.jsxs(UncontrolledDropdown, { className: 'dropdown-user nav-item', children: [jsxRuntime.jsx(DropdownToggle$1, { tag: 'div', color: "primary", onClick: (e) => e.preventDefault(), children: jsxRuntime.jsx(SvgInfo, { className: "cursor-pointer text-primary" }) }), jsxRuntime.jsx(DropdownMenu$1, { className: 'formula-dropdown icon-dropdown', children: jsxRuntime.jsxs("ul", { className: "mb-0 pe-50", children: [jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\u00E2n b\u1EA3n" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Ch\u1ECDn \u00F4 v\u00E0 Ctrl + V \u0111\u1EC3 d\u00E1n th\u00F4ng tin t\u1EEB excel" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\u00E9p h\u00E0ng" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + V \u0111\u1EC3  d\u00E1n h\u00E0ng" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n Ctrl ho\u1EB7c Alt + Shift + \u2193 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng d\u01B0\u1EDBi" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n Ctrl ho\u1EB7c Alt + Shift + \u2191 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng tr\u00EAn" })] }) })] }) })] })] }) }));
 };
 
 const handleArrowRight = (e, params) => {
@@ -42630,24 +42702,6 @@ const TableEdit = React$5.forwardRef((props, ref) => {
         setHeaderColumns(arrHeaderColumns);
         setContentColumns(arrContentColumns);
     }, [columns]);
-    React$5.useEffect(() => {
-        const arrHeaderColumns = [];
-        const arrContentColumns = [];
-        let headerLevelRow = 0;
-        if (levelCol) {
-            headerLevelRow = levelCol;
-        }
-        else {
-            headerLevelRow = stretchColumn(columns, 0);
-            setLevelCol(headerLevelRow);
-        }
-        for (let i = 0; i < headerLevelRow; i++) {
-            arrHeaderColumns.push([]);
-        }
-        getNestedChildren(columns, arrHeaderColumns, arrContentColumns, 0, headerLevelRow);
-        setHeaderColumns(arrHeaderColumns);
-        setContentColumns(arrContentColumns);
-    }, [columns]);
     const getNestedChildren = (array, arrHeaderColumns, arrContentColumns, level, maxLevelRow) => {
         array.forEach((item) => {
             const ele = { ...item, visible: item.visible, rowspan: 1, index: 0 };
@@ -42856,7 +42910,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                         }
                     } }));
             case 'checkbox':
-                return (jsxRuntime.jsx(Input$1, { checked: row[col.field], id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, type: "checkbox", className: "input-checkbox cursor-pointer", style: { textAlign: col.textAlign ?? 'left', marginTop: 6 }, onChange: (val) => {
+                return (jsxRuntime.jsx(Input$1, { checked: !!row[col.field], id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, type: "checkbox", className: "input-checkbox cursor-pointer", style: { textAlign: col.textAlign ?? 'left', marginTop: 6 }, onChange: (val) => {
                         row[col.field] = val.currentTarget.checked;
                         if (col.callback) {
                             col.callback(val.target.value, indexRow, row);
@@ -43283,14 +43337,14 @@ const TableEdit = React$5.forwardRef((props, ref) => {
     }, [selectedItem]);
     const renderContentCol = (col, row, indexRow, indexCol, isSelected) => {
         if (col.field === 'command') {
-            return (col.visible !== false && jsxRuntime.jsx("td", { className: classnames(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'cell-fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
+            return (col.visible !== false && jsxRuntime.jsx("td", { className: classnames(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
                     left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
                     right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
                     textAlign: col.textAlign ? col.textAlign : 'left',
                 }, children: jsxRuntime.jsx("div", { className: "r-rowcell-div command", children: jsxRuntime.jsx(CommandElement, { commandItems: col.commandItems ?? [], handleCommandClick: handleCommandClick, indexRow: indexRow, rowData: row, setIndexFocus: setIndexFocus, indexFocus: indexFocus }) }) }, `col-${indexRow}-${indexCol}`));
         }
         else if (col.field === '#') {
-            return (col.visible !== false && jsxRuntime.jsx("td", { className: classnames(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'cell-fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), tabIndex: Number(`${indexRow}${indexCol}`), style: {
+            return (col.visible !== false && jsxRuntime.jsx("td", { className: classnames(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), tabIndex: Number(`${indexRow}${indexCol}`), style: {
                     left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
                     right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
                     textAlign: 'center',
@@ -43328,7 +43382,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                 }, children: jsxRuntime.jsx("div", { className: "r-rowcell-div", children: indexRow + 1 }) }, `col-${indexRow}-${indexCol}`));
         }
         else if (col.field === 'checkbox') {
-            return (jsxRuntime.jsx("td", { className: classnames(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'cell-fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
+            return (jsxRuntime.jsx("td", { className: classnames(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
                     left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
                     right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
                 }, children: jsxRuntime.jsx("div", { className: "r-rowcell-div cursor-pointer", style: { alignItems: 'center' }, onClick: (e) => {
@@ -43368,7 +43422,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
             }
             const typeDis = !editDisable && (indexFocus === indexRow || col.editType === 'checkbox') && (!col.disabledCondition || !col.disabledCondition(row)) ? (col.editEnable ? 1 : (col.template ? 2 : 3)) : (col.template ? 2 : 3);
             const errorMessage = typeDis === 1 || col.field === '' || !col.validate ? '' : col.validate(row[col.field], row);
-            return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && jsxRuntime.jsx("td", { className: classnames(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'cell-fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
+            return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && jsxRuntime.jsx("td", { className: classnames(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
                         left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
                         right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
                     }, onClick: (e) => {
@@ -65360,6 +65414,7 @@ exports.SelectTable = SelectTable;
 exports.SelectTableTree = SelectTableTree;
 exports.TabsMenuComponent = TabsMenuComponent;
 exports.Wizard = Wizard;
+exports.calculateTableStructure = calculateTableStructure;
 exports.checkDecimalSeparator = checkDecimalSeparator;
 exports.checkThousandSeparator = checkThousandSeparator;
 exports["default"] = TableEdit;