react-table-edit 1.5.42 → 1.5.43

package/dist/index.mjs

@@ -20246,7 +20246,7 @@ const TableElement$1 = React__default.memo((props) => {
 
 const defaultMaxHeight$1 = 250;
 const SelectTable = forwardRef((props, ref) => {
-    const { id, menuWidth, width, invalid, placeholder, textAlign, options, columns, value, fieldValue, fieldLabel, maxHeight, isClearable, component, isMulti, noHeader, isDisabled, showFooter, formatSetting, allowCreate, onPaste, onChange, handleAdd, onKeyDown, onOpenMenu, loadOptions, onCloseMenu, footerComponent, formatOptionLabel, compareFunction } = props;
+    const { id, menuWidth, width, invalid, placeholder, textAlign, options, columns, value, fieldValue, fieldLabel, maxHeight, isClearable, component, isMulti, noHeader, isDisabled, showFooter, formatSetting, allowCreate, onPaste, onChange, handleAdd, onKeyDown, onOpenMenu, loadOptions, onCloseMenu, footerComponent, formatOptionLabel, compareFunction, } = props;
     const selectTableRef = useRef(null);
     const selectMenuTableRef = useRef(null);
     const inputRef = useRef(null);
@@ -20263,8 +20263,8 @@ const SelectTable = forwardRef((props, ref) => {
         {
             headerText: 'Name',
             field: fieldLabel ?? 'label',
-            width: menuWidth
-        }
+            width: menuWidth,
+        },
     ];
     const closeMenu = () => {
         setDropdownOpen(false);
@@ -20274,7 +20274,12 @@ const SelectTable = forwardRef((props, ref) => {
     };
     const handChange = (val) => {
         if (val && val.isCreated) {
-            const newVal = { ...val, [fieldLabel ?? 'label']: val.valueCreate, isCreated: undefined, isCreatedItem: true };
+            const newVal = {
+                ...val,
+                [fieldLabel ?? 'label']: val.valueCreate,
+                isCreated: undefined,
+                isCreatedItem: true,
+            };
             options.unshift(newVal);
             onChange(newVal);
             return;
@@ -20283,7 +20288,9 @@ const SelectTable = forwardRef((props, ref) => {
     };
     useEffect(() => {
         if (dropdownOpen && value && !isMulti && selectMenuTableRef) {
-            const index = currentOptions?.findIndex((row) => (compareFunction ? compareFunction(row) : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value']));
+            const index = currentOptions?.findIndex((row) => compareFunction
+                ? compareFunction(row)
+                : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value']);
             if (index >= 0) {
                 selectMenuTableRef.current.scrollTo({ top: (index - 1) * 30 });
             }
@@ -20330,14 +20337,28 @@ const SelectTable = forwardRef((props, ref) => {
             }
         }
     };
-    const listKeyUse = ['Escape', 'Space', 'Enter', 'Tab', 'NumpadEnter', 'ArrowDown', 'ArrowUp', 'F9'];
+    const listKeyUse = [
+        'Escape',
+        'Space',
+        'Enter',
+        'Tab',
+        'NumpadEnter',
+        'ArrowDown',
+        'ArrowUp',
+        'F9',
+    ];
     const handleOnKeyDown = (e) => {
         let key = '';
         if (onKeyDown &&
             (!dropdownOpen ||
                 !listKeyUse.includes(e.code) ||
-                ((e.code === 'Enter' || e.code === 'Tab' || e.code === 'NumpadEnter' || e.code === 'Space') && !(currentOptions[indexFocus] || haveCreateNew)) ||
-                ((e.code === 'ArrowDown' || e.code === 'ArrowUp') && currentOptions.length === 0) ||
+                ((e.code === 'Enter' ||
+                    e.code === 'Tab' ||
+                    e.code === 'NumpadEnter' ||
+                    e.code === 'Space') &&
+                    !(currentOptions[indexFocus] || haveCreateNew)) ||
+                ((e.code === 'ArrowDown' || e.code === 'ArrowUp') &&
+                    currentOptions.length === 0) ||
                 (e.code === 'Escape' && !(isClearable && value && !isDisabled)))) {
             key = onKeyDown(e);
         }
@@ -20350,7 +20371,12 @@ const SelectTable = forwardRef((props, ref) => {
             else if (e.code === 'Space') {
                 let newItem;
                 if (haveCreateNew && indexFocus === 0) {
-                    newItem = { valueCreate: searchTerm, [fieldValue ?? 'value']: searchTerm, [fieldLabel ?? 'label']: `${t('Create')} '${searchTerm}'`, isCreated: true };
+                    newItem = {
+                        valueCreate: searchTerm,
+                        [fieldValue ?? 'value']: searchTerm,
+                        [fieldLabel ?? 'label']: `${t('Create')} '${searchTerm}'`,
+                        isCreated: true,
+                    };
                 }
                 else {
                     newItem = currentOptions[indexFocus];
@@ -20371,10 +20397,17 @@ const SelectTable = forwardRef((props, ref) => {
                     flag = true;
                 }
             }
-            else if (e.code === 'Enter' || e.code === 'Tab' || e.code === 'NumpadEnter') {
+            else if (e.code === 'Enter' ||
+                e.code === 'Tab' ||
+                e.code === 'NumpadEnter') {
                 let newItem;
                 if (haveCreateNew && indexFocus === 0) {
-                    newItem = { valueCreate: searchTerm, [fieldValue ?? 'value']: searchTerm, [fieldLabel ?? 'label']: `${t('Create')} '${searchTerm}'`, isCreated: true };
+                    newItem = {
+                        valueCreate: searchTerm,
+                        [fieldValue ?? 'value']: searchTerm,
+                        [fieldLabel ?? 'label']: `${t('Create')} '${searchTerm}'`,
+                        isCreated: true,
+                    };
                 }
                 else {
                     newItem = currentOptions[indexFocus];
@@ -20392,7 +20425,10 @@ const SelectTable = forwardRef((props, ref) => {
                         newIndex = indexFocus + 1;
                     }
                     else if (value) {
-                        newIndex = currentOptions?.findIndex((row) => (compareFunction ? compareFunction(row) : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value'])) + 1;
+                        newIndex =
+                            currentOptions?.findIndex((row) => compareFunction
+                                ? compareFunction(row)
+                                : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value']) + 1;
                     }
                     if (newIndex < currentOptions.length) {
                         setIndexFocus(newIndex);
@@ -20416,7 +20452,10 @@ const SelectTable = forwardRef((props, ref) => {
                         newIndex = indexFocus - 1;
                     }
                     else if (value) {
-                        newIndex = currentOptions?.findIndex((row) => (compareFunction ? compareFunction(row) : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value'])) - 1;
+                        newIndex =
+                            currentOptions?.findIndex((row) => compareFunction
+                                ? compareFunction(row)
+                                : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value']) - 1;
                     }
                     if (newIndex >= 0) {
                         setIndexFocus(newIndex);
@@ -20449,7 +20488,11 @@ const SelectTable = forwardRef((props, ref) => {
                     scrollToElement(selectMenuTableRef.current, selectMenuTableRef.current.scrollHeight);
                 }
                 else if (flag === 0 && rect.bottom + 30 > parentRect.bottom) {
-                    scrollToElement(selectMenuTableRef.current, elementFocus.offsetTop - selectMenuTableRef.current.offsetTop - parentRect.height + rect.height + 50);
+                    scrollToElement(selectMenuTableRef.current, elementFocus.offsetTop -
+                        selectMenuTableRef.current.offsetTop -
+                        parentRect.height +
+                        rect.height +
+                        50);
                 }
                 else if (flag === 2 && rect.top < parentRect.top + 50) {
                     scrollToElement(selectMenuTableRef.current, elementFocus.offsetTop - 65);
@@ -20463,7 +20506,7 @@ const SelectTable = forwardRef((props, ref) => {
         timeOutElement = setTimeout(() => {
             elemment.scrollTo({
                 top,
-                behavior: 'smooth'
+                behavior: 'smooth',
             });
         }, 100);
     };
@@ -20473,7 +20516,12 @@ const SelectTable = forwardRef((props, ref) => {
         }
         for (let index = 0; index < columnsSearch.length; index++) {
             const key = columnsSearch[index].field.trim();
-            if (data[key] && data[key].toString().trim().toLowerCase().includes(keyword.trim().toLowerCase())) {
+            if (data[key] &&
+                data[key]
+                    .toString()
+                    .trim()
+                    .toLowerCase()
+                    .includes(keyword.trim().toLowerCase())) {
                 return true;
             }
         }
@@ -20489,7 +20537,8 @@ const SelectTable = forwardRef((props, ref) => {
         if (!searchTerm) {
             setOptionsLoad(undefined);
         }
-        else if (allowCreate && !currentOptions?.find((x) => x[fieldLabel ?? 'label'] === searchTerm)) {
+        else if (allowCreate &&
+            !currentOptions?.find((x) => x[fieldLabel ?? 'label'] === searchTerm)) {
             setHaveCreateNew(true);
             return;
         }
@@ -20501,9 +20550,24 @@ const SelectTable = forwardRef((props, ref) => {
     };
     React__default.memo((props) => {
         const { indexRow, row, isSelected, level = 0 } = props;
-        return (jsxs("tr", { id: `row-select-table-${indexRow}`, style: { paddingLeft: 10 * level }, className: classNames$1('r-select-row', { 'last-row': indexRow === currentOptions.length - 1 }, { 'fisrt-row': indexRow === 0 }), children: [isMulti && (jsx("td", { className: classNames$1(`r-select-rowcell`, { 'r-select-move': indexFocus === indexRow, 'r-select-active': !isMulti && value && (compareFunction ? compareFunction(row) : value[fieldValue ?? 'value'] === row[fieldValue ?? 'value']) }), style: { width: 40, textAlign: 'center', padding: 0, paddingBottom: 6 }, onClick: (e) => {
+        return (jsxs("tr", { id: `row-select-table-${indexRow}`, style: { paddingLeft: 10 * level }, className: classNames$1('r-select-row', { 'last-row': indexRow === currentOptions.length - 1 }, { 'fisrt-row': indexRow === 0 }), children: [isMulti && (jsx("td", { className: classNames$1(`r-select-rowcell`, {
+                        'r-select-move': indexFocus === indexRow,
+                        'r-select-active': !isMulti &&
+                            value &&
+                            (compareFunction
+                                ? compareFunction(row)
+                                : value[fieldValue ?? 'value'] ===
+                                    row[fieldValue ?? 'value']),
+                    }), style: {
+                        width: 40,
+                        textAlign: 'center',
+                        padding: 0,
+                        paddingBottom: 6,
+                    }, onClick: (e) => {
                         if (isMulti) {
-                            const index = value?.findIndex((x) => (compareFunction ? compareFunction(row) : x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']));
+                            const index = value?.findIndex((x) => compareFunction
+                                ? compareFunction(row)
+                                : x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']);
                             if (index > -1) {
                                 value?.splice(index, 1);
                                 handChange([...value]);
@@ -20521,25 +20585,42 @@ const SelectTable = forwardRef((props, ref) => {
                         }
                     }, children: jsx(Input$1, { checked: isSelected, type: "checkbox", className: "cursor-pointer", onChange: () => { }, style: { textAlign: 'center', marginTop: 6 } }) })), (columns ? columns : defaultColumns).map((col, indexCol) => {
                     let valueDisplay = row[col.field];
-                    if (col.type === 'numeric' || (col.typeCondition && col.typeCondition(row) === 'numeric')) {
-                        valueDisplay = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? '.', formatSetting?.thousandSeparator ?? ',', col.fraction ?? 0, true, false) ?? 0;
+                    if (col.type === 'numeric' ||
+                        (col.typeCondition && col.typeCondition(row) === 'numeric')) {
+                        valueDisplay =
+                            formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? '.', formatSetting?.thousandSeparator ?? ',', col.fraction ?? 0, true, false) ?? 0;
                     }
                     else if (col.type === 'date') {
-                        valueDisplay = valueDisplay ? formatDateTime(valueDisplay, formatSetting?.dateFormat) : '';
+                        valueDisplay = valueDisplay
+                            ? formatDateTime(valueDisplay, formatSetting?.dateFormat)
+                            : '';
                     }
                     else if (col.type === 'datetime') {
-                        valueDisplay = valueDisplay ? formatDateTime(valueDisplay, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
+                        valueDisplay = valueDisplay
+                            ? formatDateTime(valueDisplay, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm')
+                            : '';
                     }
                     return (jsxs(Fragment, { children: [col.visible !== false && (jsx("td", { id: `select-${id}-${indexRow}-${indexCol}`, 
                                 // ref={refRow}
-                                className: classNames$1(`r-select-rowcell`, { 'r-select-move': indexFocus === indexRow, 'r-select-active': !isMulti && value && (compareFunction ? compareFunction(row) : value[fieldValue ?? 'value'] === row[fieldValue ?? 'value']) }), style: {
+                                className: classNames$1(`r-select-rowcell`, {
+                                    'r-select-move': indexFocus === indexRow,
+                                    'r-select-active': !isMulti &&
+                                        value &&
+                                        (compareFunction
+                                            ? compareFunction(row)
+                                            : value[fieldValue ?? 'value'] ===
+                                                row[fieldValue ?? 'value']),
+                                }), style: {
                                     minWidth: col.minWidth,
                                     width: col.width,
                                     maxWidth: col.maxWidth,
-                                    textAlign: col.textAlign ? col.textAlign : 'left'
+                                    textAlign: col.textAlign ? col.textAlign : 'left',
                                 }, onClick: (e) => {
                                     if (isMulti) {
-                                        const index = value?.findIndex((x) => (compareFunction ? compareFunction(row) : x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']));
+                                        const index = value?.findIndex((x) => compareFunction
+                                            ? compareFunction(row)
+                                            : x[fieldValue ?? 'value'] ===
+                                                row[fieldValue ?? 'value']);
                                         if (index > -1) {
                                             value?.splice(index, 1);
                                             handChange([...value]);
@@ -20566,7 +20647,7 @@ const SelectTable = forwardRef((props, ref) => {
                                         setIndexFocus(indexRow);
                                     }
                                     e.stopPropagation();
-                                }, children: col.template ? col.template(row, indexRow) : col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : valueDisplay }, `col-${indexRow}-${indexCol}`)), checkOverflow(indexRow, indexCol) && (jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay }))] }, indexCol));
+                                }, children: col.template ? (col.template(row, indexRow)) : col.type === 'numeric' && Number(row[col.field]) < 0 ? (jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] })) : (valueDisplay) }, `col-${indexRow}-${indexCol}`)), checkOverflow(indexRow, indexCol) && (jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay }))] }, indexCol));
                 })] }, `row-${indexRow}`));
     });
     return (jsx("div", { className: classNames$1('react-select-table', { 'is-invalid': invalid }), ref: ref, id: id, children: jsx("div", { ref: selectTableRef, children: jsxs(Dropdown$1$1, { isOpen: dropdownOpen, toggle: () => { }, onMouseDown: (e) => e.preventDefault(), children: [jsxs(DropdownToggle$1, { onClick: (e) => {
@@ -20575,9 +20656,27 @@ const SelectTable = forwardRef((props, ref) => {
                                 handleOpenClose();
                             }
                             e.preventDefault();
-                        }, tag: "div", style: { width: width ? width : selectTableRef?.current?.clientWidth ? selectTableRef?.current?.clientWidth : 'auto' }, className: classNames$1('select-table-control', { 'r-select-is-disabled': isDisabled }, { 'r-select-is-open': dropdownOpen }, { 'r-select-is-focus': isFocus }, { 'r-select-is-invalid': invalid }), children: [jsxs("div", { className: "select-table-container", children: [isMulti ? (jsx("div", { className: classNames$1('select-value is-mutil', { 'd-none': searchTerm }), children: value?.map((ele, index) => {
-                                            return (jsxs("span", { children: [index === 0 ? '' : ', ', formatOptionLabel ? formatOptionLabel(ele) : ele[fieldLabel ?? 'label']] }, index));
-                                        }) })) : (jsxs("div", { className: classNames$1('select-value', { 'd-none': searchTerm }), children: [value ? (formatOptionLabel ? formatOptionLabel(value) : value[fieldLabel ?? 'label']) : '', " "] })), !((isMulti ? value?.length > 0 : value) || isDisabled || searchTerm) && jsx("div", { className: classNames$1('select-placeholder'), children: placeholder }), jsx("div", { className: "input-container", children: jsx("input", { style: { textAlign: textAlign ?? 'left' }, ref: inputRef, className: classNames$1('select-input'), readOnly: isDisabled, value: searchTerm, onPaste: (e) => onPaste && !dropdownOpen && onPaste(e), onChange: (val) => {
+                        }, tag: "div", style: {
+                            width: width
+                                ? width
+                                : selectTableRef?.current?.clientWidth
+                                    ? selectTableRef?.current?.clientWidth
+                                    : 'auto',
+                        }, className: classNames$1('select-table-control', { 'r-select-is-disabled': isDisabled }, { 'r-select-is-open': dropdownOpen }, { 'r-select-is-focus': isFocus }, { 'r-select-is-invalid': invalid }), children: [jsxs("div", { className: "select-table-container", children: [isMulti ? (jsx("div", { className: classNames$1('select-value is-mutil', {
+                                            'd-none': searchTerm,
+                                        }), children: value?.map((ele, index) => {
+                                            return (jsxs("span", { children: [index === 0 ? '' : ', ', formatOptionLabel
+                                                        ? formatOptionLabel(ele)
+                                                        : ele[fieldLabel ?? 'label']] }, index));
+                                        }) })) : (jsxs("div", { className: classNames$1('select-value', {
+                                            'd-none': searchTerm,
+                                        }), children: [value
+                                                ? formatOptionLabel
+                                                    ? formatOptionLabel(value)
+                                                    : value[fieldLabel ?? 'label']
+                                                : '', ' '] })), !((isMulti ? value?.length > 0 : value) ||
+                                        isDisabled ||
+                                        searchTerm) && (jsx("div", { className: classNames$1('select-placeholder'), children: placeholder })), jsx("div", { className: "input-container", children: jsx("input", { style: { textAlign: textAlign ?? 'left' }, ref: inputRef, className: classNames$1('select-input'), readOnly: isDisabled, value: searchTerm, onPaste: (e) => onPaste && !dropdownOpen && onPaste(e), onChange: (val) => {
                                                 if (val.target.value) {
                                                     if (loadOptions && val.target.value) {
                                                         setIsLoading(true);
@@ -20599,13 +20698,23 @@ const SelectTable = forwardRef((props, ref) => {
                             width: width ? width + 2 : 'min-content',
                             position: 'fixed',
                             borderRadius: 4,
-                            zIndex: 9999
+                            zIndex: 9999,
                         }, children: jsx(DropdownItem$1, { className: classNames$1('p-0 menu-select-table'), tag: "div", header: true, children: dropdownOpen && (jsx("div", { style: { backgroundColor: 'none' }, onMouseDown: (e) => {
                                     if (!isDisabled) {
                                         inputRef?.current.focus();
                                         e.preventDefault();
                                     }
-                                }, children: jsxs("div", { className: "r-select-grid", children: [jsx("div", { className: classNames$1('r-select-gridtable', { 'no-header': noHeader || (columns?.length ?? 0) === 0 }), ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight$1 }, children: jsx(TableElement$1, { haveCreateNew: haveCreateNew, isLoading: isLoading, searchTerm: searchTerm, fieldLabel: fieldLabel, noHeader: noHeader, closeMenu: closeMenu, value: value, isMulti: isMulti, currentOptions: currentOptions, fieldValue: fieldValue, columns: columns, defaultColumns: defaultColumns, indexFocus: indexFocus, formatSetting: formatSetting, handChange: handChange, compareFunction: compareFunction, setIndexFocus: setIndexFocus, setSearchTerm: setSearchTerm }) }), jsxs("div", { className: classNames$1('r-select-footer', { 'd-none': !(showFooter === true || handleAdd || isMulti) }), children: [jsxs(Button$1$1, { outline: true, color: "primary", onClick: () => handleAdd?.(), className: classNames$1('r-btn d-flex align-items-center', { 'd-none': !handleAdd }), children: [jsx(SvgPlus, { className: "me-50", fontSize: 16 }), t('AddNew'), " (F9)"] }), isMulti && jsx("div", { className: "ms-50 text-primary h-100 d-flex align-items-center", children: t('countSelected', { item: value?.length ?? 0 }) }), footerComponent ? footerComponent() : null] })] }) })) }) })] }) }) }));
+                                }, children: jsxs("div", { className: "r-select-grid", children: [jsx("div", { className: classNames$1('r-select-gridtable', {
+                                                'no-header': noHeader || (columns?.length ?? 0) === 0,
+                                            }), ref: selectMenuTableRef, style: {
+                                                width: menuWidth,
+                                                minWidth: selectTableRef?.current?.clientWidth,
+                                                maxHeight: maxHeight ?? defaultMaxHeight$1,
+                                            }, children: jsx(TableElement$1, { haveCreateNew: haveCreateNew, isLoading: isLoading, searchTerm: searchTerm, fieldLabel: fieldLabel, noHeader: noHeader, closeMenu: closeMenu, value: value, isMulti: isMulti, currentOptions: currentOptions, fieldValue: fieldValue, columns: columns, defaultColumns: defaultColumns, indexFocus: indexFocus, formatSetting: formatSetting, handChange: handChange, compareFunction: compareFunction, setIndexFocus: setIndexFocus, setSearchTerm: setSearchTerm }) }), jsxs("div", { className: classNames$1('r-select-footer', {
+                                                'd-none': !(showFooter === true ||
+                                                    handleAdd ||
+                                                    isMulti),
+                                            }), children: [jsxs(Button$1$1, { outline: true, color: "primary", onClick: () => handleAdd?.(), className: classNames$1('r-btn d-flex align-items-center', { 'd-none': !handleAdd }), children: [jsx(SvgPlus, { className: "me-50", fontSize: 16 }), t('AddNew'), " (F9)"] }), isMulti && (jsx("div", { className: "ms-50 text-primary h-100 d-flex align-items-center", children: t('countSelected', { item: value?.length ?? 0 }) })), footerComponent ? footerComponent() : null] })] }) })) }) })] }) }) }));
 });
 
 const PagingComponent = ({ totalItem, gridRef, pageSize, currentPage, onChangePage, pageOptions, onChangePageSize }) => {
@@ -68864,7 +68973,7 @@ const UnExpandAllIcon = ({ className, color = '#7F7F7F', size = 24, onClick, sty
 };
 
 const RenderContentCol = React__default.memo((props) => {
-    const { col, indexCol, indexRow, isSelected, row, zeroVisiable, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, setSelectedRows, handleCloseContext, handleDoubleClick, fieldKey, isMulti } = props;
+    const { col, indexCol, indexRow, isSelected, row, zeroVisiable, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, setSelectedRows, handleCloseContext, handleDoubleClick, handleCellClick, fieldKey, isMulti, } = props;
     const cellId = `content-${idTable}-row${indexRow}col-${indexCol}`;
     const checkOverflow = () => {
         const element = document.getElementById(cellId);
@@ -68886,10 +68995,12 @@ const RenderContentCol = React__default.memo((props) => {
     const RenderElement = () => {
         if (col.field === '#' || col.type === '#') {
             return (jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer text-center', {
-                    'r-active-cell': isSelected
+                    'r-active-cell': isSelected,
                 }), style: {
-                    fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType ? 600 : 400,
-                    fontStyle: row.haveItalicType ? 'italic' : 'normal'
+                    fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType
+                        ? 600
+                        : 400,
+                    fontStyle: row.haveItalicType ? 'italic' : 'normal',
                 }, onDoubleClick: (e) => {
                     e.preventDefault();
                     handleCloseContext();
@@ -68898,11 +69009,15 @@ const RenderContentCol = React__default.memo((props) => {
         }
         else if (col.type === 'checkbox' || col.field === 'checkbox') {
             return (jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer', {
-                    'r-active-cell': isSelected
+                    'r-active-cell': isSelected,
                 }), style: {
                     display: 'flex',
-                    justifyContent: col.textAlign === 'center' ? 'center' : col.textAlign === 'right' ? 'flex-end' : 'flex-start',
-                    alignItems: 'center'
+                    justifyContent: col.textAlign === 'center'
+                        ? 'center'
+                        : col.textAlign === 'right'
+                            ? 'flex-end'
+                            : 'flex-start',
+                    alignItems: 'center',
                 }, onClick: (e) => {
                     setSelectedRows(toggleSelect());
                     e.stopPropagation();
@@ -68912,8 +69027,12 @@ const RenderContentCol = React__default.memo((props) => {
             let value = row[col.field];
             // ✅ Format dữ liệu theo loại cột
             if (col.type === 'numeric') {
-                value = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
-                if (!zeroVisiable && !col.zeroVisiable && !(row?.sortOrder < 0 || row?.sortOrder > 100000) && (value === '0' || value === 0)) {
+                value =
+                    formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
+                if (!zeroVisiable &&
+                    !col.zeroVisiable &&
+                    !(row?.sortOrder < 0 || row?.sortOrder > 100000) &&
+                    (value === '0' || value === 0)) {
                     value = '';
                 }
             }
@@ -68921,31 +69040,43 @@ const RenderContentCol = React__default.memo((props) => {
                 value = value ? formatDateTime(value, formatSetting?.dateFormat) : '';
             }
             else if (col.type === 'datetime') {
-                value = value ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
+                value = value
+                    ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm')
+                    : '';
             }
             if (col.template) {
                 value = col.template(row, indexRow) ?? '';
             }
             const isNegative = col.type === 'numeric' && Number(row[col.field]) < 0;
-            const textColor = isNegative ? formatSetting?.colorNegative ?? 'red' : undefined;
-            const prefix = isNegative ? formatSetting?.prefixNegative ?? '-' : '';
-            const suffix = isNegative ? formatSetting?.suffixNegative ?? '' : '';
-            const displayText = isNegative ? `${prefix}${value}${suffix}` : value ?? '';
+            const textColor = isNegative
+                ? (formatSetting?.colorNegative ?? 'red')
+                : undefined;
+            const prefix = isNegative ? (formatSetting?.prefixNegative ?? '-') : '';
+            const suffix = isNegative ? (formatSetting?.suffixNegative ?? '') : '';
+            const displayText = isNegative
+                ? `${prefix}${value}${suffix}`
+                : (value ?? '');
             return (jsxs("div", { className: classNames$1('r-rowcell-div cursor-pointer', {
-                    'r-active-cell': isSelected
+                    'r-active-cell': isSelected,
                 }), style: {
-                    fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType ? 600 : 400,
-                    fontStyle: row.haveItalicType ? 'italic' : 'normal'
+                    fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType
+                        ? 600
+                        : 400,
+                    fontStyle: row.haveItalicType ? 'italic' : 'normal',
                 }, children: [jsx("div", { className: "r-cell-text", style: {
                             display: 'flex',
-                            justifyContent: col.textAlign === 'center' ? 'center' : col.textAlign === 'right' ? 'flex-end' : 'flex-start',
-                            alignItems: 'center'
+                            justifyContent: col.textAlign === 'center'
+                                ? 'center'
+                                : col.textAlign === 'right'
+                                    ? 'flex-end'
+                                    : 'flex-start',
+                            alignItems: 'center',
                         }, children: jsx("div", { id: cellId, style: {
                                 color: textColor,
                                 overflow: 'hidden',
                                 textOverflow: 'ellipsis',
                                 whiteSpace: 'pre',
-                                maxWidth: '100%'
+                                maxWidth: '100%',
                             }, children: displayText }) }), checkOverflow() && (jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: cellId, placement: "top", children: jsx("div", { style: { color: textColor }, onClick: (e) => {
                                 e.stopPropagation();
                                 e.preventDefault();
@@ -68954,15 +69085,21 @@ const RenderContentCol = React__default.memo((props) => {
     };
     const clickTimerRef = useRef(null);
     return (jsx(Fragment$1, { children: col.visible !== false && col.isGroup !== true && (jsx("td", { className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, {
-                'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight)
+                'fixed-last': (col.fixedType === 'left' &&
+                    indexCol === lastObjWidthFixLeft) ||
+                    (col.fixedType === 'right' &&
+                        indexCol === fisrtObjWidthFixRight),
             }, { 'r-active': isSelected }), style: {
                 left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
-                right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined
+                right: col.fixedType === 'right'
+                    ? objWidthFixRight[indexCol]
+                    : undefined,
             }, onClick: (e) => {
                 const tag = e.target?.nodeName;
                 if (tag !== 'DIV' && tag !== 'TD') {
                     return;
                 }
+                handleCellClick?.(row, col);
                 if (clickTimerRef.current) {
                     window.clearTimeout(clickTimerRef.current);
                 }
@@ -68990,7 +69127,7 @@ const RenderContentCol = React__default.memo((props) => {
 });
 
 const TableElement = React__default.memo((props) => {
-    const { contentColumns, dataSource, fieldKey, filterBy, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, orderBy, selectedRows, setContentColumns, setSelectedRows, formatSetting, gridRef, idTable, headerColumns, objHeaderWidthFixLeft, objHeaderWidthFixRight, isMulti, querySetting, searchSetting, searchTerm, columnsAggregate, haveSum, expandsAll, zeroVisiable, setFilterBy, setOrderBy, setExpandsAll, handleDoubleClick, contextMenuItems, handleContextMenuClick, isLoading } = props;
+    const { contentColumns, dataSource, fieldKey, filterBy, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, orderBy, selectedRows, setContentColumns, setSelectedRows, formatSetting, gridRef, idTable, headerColumns, objHeaderWidthFixLeft, objHeaderWidthFixRight, isMulti, querySetting, searchSetting, searchTerm, columnsAggregate, haveSum, expandsAll, zeroVisiable, setFilterBy, setOrderBy, setExpandsAll, handleDoubleClick, handleCellClick, contextMenuItems, handleContextMenuClick, isLoading, } = props;
     const { t } = useTranslation();
     const [context, setContext] = useState(null);
     const virtualDivRef = useRef(null);
@@ -69036,7 +69173,10 @@ const TableElement = React__default.memo((props) => {
         if (searchTerm) {
             datas = datas.filter((row) => {
                 return searchSetting?.keyField?.some((key) => {
-                    return row[key]?.toString().toLowerCase().includes(searchTerm.trim().toLowerCase());
+                    return row[key]
+                        ?.toString()
+                        .toLowerCase()
+                        .includes(searchTerm.trim().toLowerCase());
                 });
             });
         }
@@ -69045,7 +69185,10 @@ const TableElement = React__default.memo((props) => {
                 return filterBy.every((filter) => {
                     const { key, value, ope } = filter;
                     const rowValue = row[key];
-                    if (rowValue === undefined || rowValue === null || value === undefined || value === null) {
+                    if (rowValue === undefined ||
+                        rowValue === null ||
+                        value === undefined ||
+                        value === null) {
                         return false;
                     }
                     const valStr = String(rowValue).toLowerCase();
@@ -69111,56 +69254,72 @@ const TableElement = React__default.memo((props) => {
                     }
                     let value = row[col.field];
                     if (col.type === 'numeric') {
-                        value = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
+                        value =
+                            formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
                     }
                     else if (col.type === 'date') {
-                        value = value ? formatDateTime(value, formatSetting?.dateFormat) : '';
+                        value = value
+                            ? formatDateTime(value, formatSetting?.dateFormat)
+                            : '';
                     }
                     else if (col.type === 'datetime') {
-                        value = value ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
+                        value = value
+                            ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm')
+                            : '';
                     }
                     if (col.template) {
                         value = col.template(row, indexRow) ?? '';
                     }
                     return (jsxs(Fragment$1, { children: [jsxs("tr", { "aria-rowindex": indexRow + 1, role: "row", className: "r-row", children: [jsx("td", { className: "r-rowcell r-cell-group", colSpan: 3, children: jsxs("div", { className: "r-rowcell-div", children: [jsx(SvgChevronRight, { style: {
                                                         marginLeft: level * 20,
-                                                        transform: expand ? 'rotate(90deg)' : 'rotate(0deg)'
+                                                        transform: expand ? 'rotate(90deg)' : 'rotate(0deg)',
                                                     }, fontSize: 15, onClick: () => {
                                                         setExpand(!expand);
                                                         setExpandsAll(undefined);
                                                         row.expand = !expand;
                                                     } }), t(col.headerDisplay ?? col.headerText ?? ''), ": ", value, " (", row.children.length, ")"] }) }), contentColumns.map((colSum, indexCol) => {
-                                        if (indexCol <= firstColSpan || colSum.visible === false || colSum.isGroup === true) {
+                                        if (indexCol <= firstColSpan ||
+                                            colSum.visible === false ||
+                                            colSum.isGroup === true) {
                                             return;
                                         }
                                         let sumValue = row[colSum.field];
-                                        const haveSum = row[colSum.field] !== undefined && row[colSum.field] !== null;
-                                        if (!haveSum && colSum.haveSum === true && colSum.type === 'numeric') {
+                                        const haveSum = row[colSum.field] !== undefined &&
+                                            row[colSum.field] !== null;
+                                        if (!haveSum &&
+                                            colSum.haveSum === true &&
+                                            colSum.type === 'numeric') {
                                             sumValue = row.children.reduce(function (accumulator, currentValue) {
-                                                return Number(accumulator ?? 0) + Number(currentValue[colSum.field] ?? 0);
+                                                return (Number(accumulator ?? 0) +
+                                                    Number(currentValue[colSum.field] ?? 0));
                                             }, 0);
                                         }
                                         if (colSum.type === 'numeric') {
                                             sumValue = formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', colSum.numericSettings?.fraction, true, false);
-                                            if (!zeroVisiable && !col.zeroVisiable && (sumValue === '0' || sumValue === 0)) {
+                                            if (!zeroVisiable &&
+                                                !col.zeroVisiable &&
+                                                (sumValue === '0' || sumValue === 0)) {
                                                 sumValue = '';
                                             }
                                         }
                                         return (jsx("td", { className: "r-rowcell r-cell-sum-group", children: jsx("div", { className: "r-rowcell-div", style: {
-                                                    justifyContent: colSum.textAlign ? colSum.textAlign : 'left'
-                                                }, children: (haveSum || colSum.haveSum === true) && Number(row[colSum.field] ?? '0') < 0 ? (jsxs("div", { style: {
-                                                        color: formatSetting?.colorNegative ?? 'red'
+                                                    justifyContent: colSum.textAlign
+                                                        ? colSum.textAlign
+                                                        : 'left',
+                                                }, children: (haveSum || colSum.haveSum === true) &&
+                                                    Number(row[colSum.field] ?? '0') < 0 ? (jsxs("div", { style: {
+                                                        color: formatSetting?.colorNegative ?? 'red',
                                                     }, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `group-sum-cell-${level}-${indexRow}-${indexCol}`));
-                                    })] }), expand && jsx(RenderContent, { datas: row.children, level: level + 1 })] }, `row-${level}-${indexRow}`));
+                                    })] }), expand && (jsx(RenderContent, { datas: row.children, level: level + 1 }))] }, `row-${level}-${indexRow}`));
                 }
                 else {
                     const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
                     return (jsx("tr", { id: `row-content-${indexRow}`, "aria-rowindex": indexRow + 1, role: "row", className: classNames$1('r-row', {
-                            'r-last-row': level === 0 && indexRow === viewData.length - 1
+                            'r-last-row': level === 0 && indexRow === viewData.length - 1,
                         }), onContextMenu: (e) => {
                             e.preventDefault();
                             handleContextMenu(e, row);
-                        }, children: contentColumns.map((column, indexCol) => (jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: fieldKey, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMulti, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row, zeroVisiable: zeroVisiable, handleCloseContext: handleCloseContext, handleDoubleClick: handleDoubleClick }, indexCol))) }, `row-content-${indexRow}`));
+                        }, children: contentColumns.map((column, indexCol) => (jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: fieldKey, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMulti, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row, zeroVisiable: zeroVisiable, handleCloseContext: handleCloseContext, handleDoubleClick: handleDoubleClick, handleCellClick: handleCellClick }, indexCol))) }, `row-content-${indexRow}`));
                 }
             }) }));
     });
@@ -69172,7 +69331,7 @@ const TableElement = React__default.memo((props) => {
                 x: e.clientX,
                 y: e.clientY,
                 row,
-                show: true
+                show: true,
             });
         }, 100);
     };
@@ -69196,20 +69355,28 @@ const TableElement = React__default.memo((props) => {
                                 let sumValue = item?.value;
                                 if (!item && col.haveSum === true && col.type === 'numeric') {
                                     sumValue = viewData.reduce(function (accumulator, currentValue) {
-                                        return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
+                                        return (Number(accumulator ?? 0) +
+                                            Number(currentValue[col.field] ?? 0));
                                     }, 0);
                                 }
                                 if (col.type === 'numeric') {
                                     sumValue = formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false);
                                 }
                                 return (jsx("td", { className: classNames$1(`p-0 px-50 r-footer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
-                                        left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
-                                        right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
-                                        textAlign: col.textAlign ? col.textAlign : 'left'
-                                    }, children: jsx("div", { className: "r-footer-div", children: (item || col.haveSum === true) && Number(item?.value ?? '0') < 0 ? (jsxs("div", { style: {
-                                                color: formatSetting?.colorNegative ?? 'red'
+                                        left: col.fixedType === 'left'
+                                            ? objWidthFixLeft[indexCol]
+                                            : undefined,
+                                        right: col.fixedType === 'right'
+                                            ? objWidthFixRight[indexCol]
+                                            : undefined,
+                                        textAlign: col.textAlign ? col.textAlign : 'left',
+                                    }, children: jsx("div", { className: "r-footer-div", children: (item || col.haveSum === true) &&
+                                            Number(item?.value ?? '0') < 0 ? (jsxs("div", { style: {
+                                                color: formatSetting?.colorNegative ?? 'red',
                                             }, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `summarycell-${indexCol}`));
-                            }) })) })] }), jsx("div", { ref: virtualDivRef }), context && (contextMenuItems?.length ?? 0) > 0 && handleContextMenuClick && (jsx(Popover$1, { className: "r-context-popover", placement: "right-start", isOpen: context.show, target: virtualDivRef.current, toggle: handleCloseContext, fade: false, children: jsx(PopoverBody$1, { children: contextMenuItems?.map((item, index) => {
+                            }) })) })] }), jsx("div", { ref: virtualDivRef }), context &&
+                (contextMenuItems?.length ?? 0) > 0 &&
+                handleContextMenuClick && (jsx(Popover$1, { className: "r-context-popover", placement: "right-start", isOpen: context.show, target: virtualDivRef.current, toggle: handleCloseContext, fade: false, children: jsx(PopoverBody$1, { children: contextMenuItems?.map((item, index) => {
                         return (jsxs("div", { className: "r-context-item", onClick: () => {
                                 handleCloseContext();
                                 handleContextMenuClick?.(item, context.row);
@@ -69217,7 +69384,7 @@ const TableElement = React__default.memo((props) => {
                     }) }) })), (viewData.length ?? 0) === 0 && !isLoading && (jsxs("div", { className: "r-no-data", children: [jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })] })] }) }), t('No data available.')] }))] }));
 });
 
-const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoading, formatSetting, querySetting, pagingSetting, searchSetting, columnsAggregate, toolbarSetting, selectedItem, setSelectedItem, handleSelect, saveSettingColumn, resetDefaultColumns, settingColumns, headerComponent, groupSetting, zeroVisiable, isMulti, handleDoubleClick, contextMenuItems, headerHeight, handleContextMenuClick, }) => {
+const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoading, formatSetting, querySetting, pagingSetting, searchSetting, columnsAggregate, toolbarSetting, selectedItem, setSelectedItem, handleSelect, saveSettingColumn, resetDefaultColumns, settingColumns, headerComponent, groupSetting, zeroVisiable, isMulti, handleDoubleClick, handleCellClick, contextMenuItems, headerHeight, handleContextMenuClick, }) => {
     const { t } = useTranslation();
     const gridRef = useRef(null);
     const [openPopupSetupColumn, setOpenPopupSetupColumn] = useState(false);
@@ -69444,7 +69611,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
         }), children: [jsxs("div", { className: "r-grid", children: [toolbarSetting?.showTopToolbar && (jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption, maximize: maximize, setMaximize: setMaximize })), headerComponent && headerComponent(), jsxs("div", { ref: gridRef, className: "r-gridtable", style: {
                             height: `${heightTable ? `${heightTable}px` : 'auto'}`,
                             position: 'relative',
-                        }, children: [jsx(TableElement, { idTable: idTable, gridRef: gridRef, isLoading: isLoading, dataSource: dataSource, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, fieldKey: fieldKey, lastObjWidthFixLeft: lastObjWidthFixLeft, fisrtObjWidthFixRight: fisrtObjWidthFixRight, selectedRows: selectedRows, isMulti: isMulti, filterBy: filterBy, orderBy: orderBy, formatSetting: formatSetting, contentColumns: contentColumns, headerColumns: headerColumns, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, searchTerm: searchTerm, searchSetting: searchSetting, columnsAggregate: columnsAggregate, haveSum: haveSum, expandsAll: expandsAll, zeroVisiable: zeroVisiable, contextMenuItems: contextMenuItems, handleContextMenuClick: handleContextMenuClick, setFilterBy: setFilterBy, setSelectedRows: setSelectedRows, setOrderBy: setOrderBy, handleDoubleClick: handleDoubleClick, querySetting: querySetting, setContentColumns: setContentColumns, setExpandsAll: setExpandsAll }), isLoading && (jsx("div", { className: "r-loading-overlay", children: jsxs("div", { className: "r-loading", children: [jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) }))] })] }), pagingSetting?.allowPaging && (jsx(PagingComponent, { gridRef: gridRef, onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: pagingSetting?.totalItem ?? 0, onChangePageSize: onChangePageSize })), jsx(SettingColumn, { gridRef: gridRef, handleSidebar: () => {
+                        }, children: [jsx(TableElement, { idTable: idTable, gridRef: gridRef, isLoading: isLoading, dataSource: dataSource, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, fieldKey: fieldKey, lastObjWidthFixLeft: lastObjWidthFixLeft, fisrtObjWidthFixRight: fisrtObjWidthFixRight, selectedRows: selectedRows, isMulti: isMulti, filterBy: filterBy, orderBy: orderBy, formatSetting: formatSetting, contentColumns: contentColumns, headerColumns: headerColumns, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, searchTerm: searchTerm, searchSetting: searchSetting, columnsAggregate: columnsAggregate, haveSum: haveSum, expandsAll: expandsAll, zeroVisiable: zeroVisiable, contextMenuItems: contextMenuItems, handleContextMenuClick: handleContextMenuClick, setFilterBy: setFilterBy, setSelectedRows: setSelectedRows, setOrderBy: setOrderBy, handleDoubleClick: handleDoubleClick, handleCellClick: handleCellClick, querySetting: querySetting, setContentColumns: setContentColumns, setExpandsAll: setExpandsAll }), isLoading && (jsx("div", { className: "r-loading-overlay", children: jsxs("div", { className: "r-loading", children: [jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) }))] })] }), pagingSetting?.allowPaging && (jsx(PagingComponent, { gridRef: gridRef, onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: pagingSetting?.totalItem ?? 0, onChangePageSize: onChangePageSize })), jsx(SettingColumn, { gridRef: gridRef, handleSidebar: () => {
                     setOpenPopupSetupColumn(!openPopupSetupColumn);
                 }, settingColumns: settingColumns, openSidebar: openPopupSetupColumn, column: [...contentColumns], resetDefaultColumns: resetDefaultColumns, setColumn: (newColumns) => {
                     if (saveSettingColumn) {