react-table-edit 1.5.36 → 1.5.37

package/dist/index.mjs

@@ -68708,7 +68708,7 @@ const UnExpandAllIcon = ({ className, color = '#7F7F7F', size = 24, onClick, sty
 };
 
 const RenderContentCol = (props) => {
-    const { col, indexCol, indexRow, isSelected, row, zeroVisiable, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, setSelectedRows, handleCloseContext, handleDoubleClick, fieldKey, isMulti } = props;
+    const { col, indexCol, indexRow, isSelected, row, zeroVisiable, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, setSelectedRows, handleCloseContext, handleDoubleClick, fieldKey, isMulti, } = props;
     const cellId = `content-${idTable}-row${indexRow}col-${indexCol}`;
     const checkOverflow = () => {
         const element = document.getElementById(cellId);
@@ -68716,9 +68716,13 @@ const RenderContentCol = (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 }), style: {
-                    fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType ? 600 : 400,
-                    fontStyle: row.haveItalicType ? 'italic' : 'normal'
+            return (jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer text-center', {
+                    'r-active-cell': isSelected,
+                }), style: {
+                    fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType
+                        ? 600
+                        : 400,
+                    fontStyle: row.haveItalicType ? 'italic' : 'normal',
                 }, onDoubleClick: (e) => {
                     e.preventDefault();
                     handleCloseContext();
@@ -68726,7 +68730,17 @@ const RenderContentCol = (props) => {
                 }, children: indexRow + 1 }));
         }
         else if (col.type === 'checkbox' || col.field === 'checkbox') {
-            return (jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer', { 'r-active-cell': isSelected }), style: { display: 'flex', justifyContent: col.textAlign === 'center' ? 'center' : col.textAlign === 'right' ? 'flex-end' : 'flex-start', alignItems: 'center' }, onClick: (e) => {
+            return (jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer', {
+                    'r-active-cell': isSelected,
+                }), style: {
+                    display: 'flex',
+                    justifyContent: col.textAlign === 'center'
+                        ? 'center'
+                        : col.textAlign === 'right'
+                            ? 'flex-end'
+                            : 'flex-start',
+                    alignItems: 'center',
+                }, onClick: (e) => {
                     const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
                     if (index > -1) {
                         if (isMulti) {
@@ -68752,8 +68766,11 @@ const RenderContentCol = (props) => {
             let value = row[col.field];
             // ✅ Format dữ liệu theo loại cột
             if (col.type === 'numeric') {
-                value = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
-                if (!zeroVisiable && !(row?.sortOrder < 0 || row?.sortOrder > 100000) && (value === '0' || value === 0)) {
+                value =
+                    formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
+                if (!zeroVisiable &&
+                    !(row?.sortOrder < 0 || row?.sortOrder > 100000) &&
+                    (value === '0' || value === 0)) {
                     value = '';
                 }
             }
@@ -68761,42 +68778,63 @@ const RenderContentCol = (props) => {
                 value = value ? formatDateTime(value, formatSetting?.dateFormat) : '';
             }
             else if (col.type === 'datetime') {
-                value = value ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
+                value = value
+                    ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm')
+                    : '';
             }
             if (col.template) {
                 value = col.template(row, indexRow) ?? '';
             }
             const isNegative = col.type === 'numeric' && Number(row[col.field]) < 0;
-            const textColor = isNegative ? formatSetting?.colorNegative ?? 'red' : undefined;
-            const prefix = isNegative ? formatSetting?.prefixNegative ?? '-' : '';
-            const suffix = isNegative ? formatSetting?.suffixNegative ?? '' : '';
-            const displayText = isNegative ? `${prefix}${value}${suffix}` : value ?? '';
-            return (jsxs("div", { className: classNames$1('r-rowcell-div cursor-pointer', { 'r-active-cell': isSelected }), style: {
-                    fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType ? 600 : 400,
-                    fontStyle: row.haveItalicType ? 'italic' : 'normal'
+            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,
+                }), style: {
+                    fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType
+                        ? 600
+                        : 400,
+                    fontStyle: row.haveItalicType ? 'italic' : 'normal',
                 }, onDoubleClick: (e) => {
                     e.preventDefault();
                     handleCloseContext();
                     handleDoubleClick?.(row, col);
                 }, 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();
                             }, children: displayText }) }))] }));
         }
     };
-    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) }, { 'r-active': isSelected }), style: {
+    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),
+            }, { 'r-active': isSelected }), style: {
                 left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
-                right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined
+                right: col.fixedType === 'right'
+                    ? objWidthFixRight[indexCol]
+                    : undefined,
             }, onClick: (e) => {
                 if (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD') {
                     const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
@@ -68817,12 +68855,11 @@ const RenderContentCol = (props) => {
                             setSelectedRows([row]);
                         }
                     }
-                    e.stopPropagation();
                 }
             }, children: RenderElement() }, `col-${indexRow}-${indexCol}`)) }));
 };
 
-const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoading, formatSetting, querySetting, pagingSetting, searchSetting, columnsAggregate, toolbarSetting, selectedItem, setSelectedItem, handleSelect, saveSettingColumn, resetDefaultColumns, settingColumns, headerComponent, groupSetting, zeroVisiable, isMulti, handleDoubleClick, contextMenuItems, handleContextMenuClick }) => {
+const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoading, formatSetting, querySetting, pagingSetting, searchSetting, columnsAggregate, toolbarSetting, selectedItem, setSelectedItem, handleSelect, saveSettingColumn, resetDefaultColumns, settingColumns, headerComponent, groupSetting, zeroVisiable, isMulti, handleDoubleClick, contextMenuItems, handleContextMenuClick, }) => {
     const { t } = useTranslation();
     const gridRef = useRef(null);
     const [openPopupSetupColumn, setOpenPopupSetupColumn] = useState(false);
@@ -68830,7 +68867,8 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
     const [orderBy, setOrderBy] = useState([]);
     const [filterBy, setFilterBy] = useState([]);
     const [searchTerm, setSearchTerm] = useState('');
-    const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? 'id';
+    const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ??
+        'id';
     const [contentColumns, setContentColumns] = useState([]);
     const [groupColumns, setGroupColumns] = useState([]);
     const [expandsAll, setExpandsAll] = useState(true);
@@ -68849,7 +68887,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
         }
         setExpandsAll(true);
     }, [groupSetting?.groupColumns]);
-    const { levels: headerColumns, objHeaderWidthFixLeft, objHeaderWidthFixRight, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight } = useMemo(() => {
+    const { levels: headerColumns, objHeaderWidthFixLeft, objHeaderWidthFixRight, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, } = useMemo(() => {
         const rs = calculateTableStructure(columns, settingColumns?.value, groupSetting?.groupColumns);
         setContentColumns(rs.flat);
         return rs;
@@ -68878,7 +68916,10 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
         if (searchTerm) {
             datas = datas.filter((row) => {
                 return searchSetting?.keyField?.some((key) => {
-                    return row[key]?.toString().toLowerCase().includes(searchTerm.trim().toLowerCase());
+                    return row[key]
+                        ?.toString()
+                        .toLowerCase()
+                        .includes(searchTerm.trim().toLowerCase());
                 });
             });
         }
@@ -68887,7 +68928,10 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                 return filterBy.every((filter) => {
                     const { key, value, ope } = filter;
                     const rowValue = row[key];
-                    if (rowValue === undefined || rowValue === null || value === undefined || value === null) {
+                    if (rowValue === undefined ||
+                        rowValue === null ||
+                        value === undefined ||
+                        value === null) {
                         return false;
                     }
                     const valStr = String(rowValue).toLowerCase();
@@ -68950,10 +68994,19 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
         }
     };
     const searchTemplate = () => {
-        return (jsx("div", { className: "me-50 r-search", children: jsx(ReactInput, { style: { width: '230px' }, value: searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm, setSearchTerm: searchSetting?.setSearchTerm ? searchSetting?.setSearchTerm : setSearchTerm, placeholder: t('Search'), onKeyPress: handleKeyPress }) }));
+        return (jsx("div", { className: "me-50 r-search", children: jsx(ReactInput, { style: { width: '230px' }, value: searchSetting?.searchTerm !== undefined
+                    ? searchSetting?.searchTerm
+                    : searchTerm, setSearchTerm: searchSetting?.setSearchTerm
+                    ? searchSetting?.setSearchTerm
+                    : setSearchTerm, placeholder: t('Search'), onKeyPress: handleKeyPress }) }));
     };
     const groupbtnTemplate = () => {
-        return (jsxs(UncontrolledDropdown, { children: [jsx(DropdownToggle$1, { tag: "div", id: "group-dropdown-toggle", style: { position: 'relative' }, onClick: (e) => e.preventDefault(), children: jsx(GroupIcon, { color: "#7F7F7F", size: 24 }) }), jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-1", children: [jsx("div", { className: "mb-1", style: { fontSize: 16, fontWeight: 500 }, children: "Nh\u00F3m d\u1EEF li\u1EC7u theo c\u1ED9t" }), jsxs("div", { className: 'form-group', children: [jsx(Label$1, { id: `label-group-1`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 1" }), jsx("div", { className: "form-input", children: jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[0] ? { headerText: t(contentColumns.find((x) => x.field === groupColumns[0])?.headerText ?? contentColumns.find((x) => x.field === groupColumns[0])?.headerText) } : undefined, onChange: (val) => {
+        return (jsxs(UncontrolledDropdown, { children: [jsx(DropdownToggle$1, { tag: "div", id: "group-dropdown-toggle", style: { position: 'relative' }, onClick: (e) => e.preventDefault(), children: jsx(GroupIcon, { color: "#7F7F7F", size: 24 }) }), jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-1", children: [jsx("div", { className: "mb-1", style: { fontSize: 16, fontWeight: 500 }, children: "Nh\u00F3m d\u1EEF li\u1EC7u theo c\u1ED9t" }), jsxs("div", { className: 'form-group', children: [jsx(Label$1, { id: `label-group-1`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 1" }), jsx("div", { className: "form-input", children: jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[0]
+                                            ? {
+                                                headerText: t(contentColumns.find((x) => x.field === groupColumns[0])?.headerText ??
+                                                    contentColumns.find((x) => x.field === groupColumns[0])?.headerText),
+                                            }
+                                            : undefined, onChange: (val) => {
                                             if (val) {
                                                 groupColumns[0] = val.field;
                                             }
@@ -68961,7 +69014,12 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                                                 groupColumns.pop();
                                             }
                                             setGroupColumns([...groupColumns]);
-                                        }, isClearable: groupColumns?.length === 1 }) })] }), jsxs("div", { className: 'form-group', children: [jsx(Label$1, { id: `label-group-2`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 2" }), jsx("div", { className: "form-input", children: jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[1] ? { headerText: t(contentColumns.find((x) => x.field === groupColumns[1])?.headerText ?? contentColumns.find((x) => x.field === groupColumns[1])?.headerText) } : undefined, onChange: (val) => {
+                                        }, isClearable: groupColumns?.length === 1 }) })] }), jsxs("div", { className: 'form-group', children: [jsx(Label$1, { id: `label-group-2`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 2" }), jsx("div", { className: "form-input", children: jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[1]
+                                            ? {
+                                                headerText: t(contentColumns.find((x) => x.field === groupColumns[1])?.headerText ??
+                                                    contentColumns.find((x) => x.field === groupColumns[1])?.headerText),
+                                            }
+                                            : undefined, onChange: (val) => {
                                             if (val) {
                                                 groupColumns[1] = val.field;
                                             }
@@ -68969,7 +69027,12 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                                                 groupColumns.pop();
                                             }
                                             setGroupColumns([...groupColumns]);
-                                        }, isClearable: groupColumns?.length === 2 }) })] }), jsxs("div", { className: 'form-group', children: [jsx(Label$1, { id: `label-group-3`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 3" }), jsx("div", { className: "form-input", children: jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[2] ? { headerText: t(contentColumns.find((x) => x.field === groupColumns[2])?.headerText ?? contentColumns.find((x) => x.field === groupColumns[2])?.headerText) } : undefined, onChange: (val) => {
+                                        }, isClearable: groupColumns?.length === 2 }) })] }), jsxs("div", { className: 'form-group', children: [jsx(Label$1, { id: `label-group-3`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 3" }), jsx("div", { className: "form-input", children: jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[2]
+                                            ? {
+                                                headerText: t(contentColumns.find((x) => x.field === groupColumns[2])?.headerText ??
+                                                    contentColumns.find((x) => x.field === groupColumns[2])?.headerText),
+                                            }
+                                            : undefined, onChange: (val) => {
                                             if (groupSetting) {
                                                 if (val) {
                                                     groupColumns[2] = val.field;
@@ -68980,7 +69043,9 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                                                 setGroupColumns([...groupColumns]);
                                             }
                                         }, isClearable: groupColumns?.length === 3 }) })] }), jsxs("div", { className: "border-top d-flex justify-content-end mt-1", children: [jsx(Button$1$1, { color: "primary", className: "mt-1 me-50 rounded", size: "sm", onClick: () => {
-                                        groupSetting?.onGroup({ columnGrouped: groupColumns.filter((x) => x) });
+                                        groupSetting?.onGroup({
+                                            columnGrouped: groupColumns.filter((x) => x),
+                                        });
                                         document.getElementById('group-dropdown-toggle')?.click();
                                     }, children: `${t('Apply')}` }), jsx(Button$1$1, { color: "secondary", outline: true, className: "mt-1 rounded", size: "sm", onClick: () => {
                                         groupSetting?.onGroup({ columnGrouped: [] });
@@ -68988,14 +69053,16 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                                     }, children: `${t('Delete')}` })] })] })] }));
     };
     const chooseColumnsTemplate = () => {
-        return jsx(SvgSettings, { className: "r-toolbar-icon", fontSize: 20, color: "#7F7F7F", onClick: () => setOpenPopupSetupColumn(true) });
+        return (jsx(SvgSettings, { className: "r-toolbar-icon", fontSize: 20, color: "#7F7F7F", onClick: () => setOpenPopupSetupColumn(true) }));
     };
     const expandTemplate = () => {
         return (jsxs(Fragment$1, { children: [!expandsAll && (jsx(ExpandAllIcon, { onClick: () => {
                         setExpandsAll(true);
-                    }, color: "#7F7F7F", size: 24 })), expandsAll && jsx(UnExpandAllIcon, { onClick: () => setExpandsAll(false), color: "#7F7F7F", size: 24 })] }));
+                    }, color: "#7F7F7F", size: 24 })), expandsAll && (jsx(UnExpandAllIcon, { onClick: () => setExpandsAll(false), color: "#7F7F7F", size: 24 }))] }));
     };
-    const defaultToolbarOption = searchSetting?.searchEnable ? [{ template: searchTemplate, align: 'left' }] : [];
+    const defaultToolbarOption = searchSetting?.searchEnable
+        ? [{ template: searchTemplate, align: 'left' }]
+        : [];
     if (groupSetting) {
         defaultToolbarOption.push({ template: groupbtnTemplate, align: 'left' });
     }
@@ -69004,7 +69071,10 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
     }
     let toolbarTopOption = [];
     if (toolbarSetting?.toolbarOptions) {
-        toolbarTopOption = [...defaultToolbarOption, ...toolbarSetting?.toolbarOptions];
+        toolbarTopOption = [
+            ...defaultToolbarOption,
+            ...toolbarSetting?.toolbarOptions,
+        ];
     }
     else {
         toolbarTopOption = [...defaultToolbarOption];
@@ -69033,11 +69103,11 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
         }
     };
     useEffect(() => {
-        console.log(selectedRows);
-        console.log(isMulti);
         if (setSelectedItem) {
             if (isMulti) {
-                if (dataSource && selectedRows && selectedRows?.length !== selectedItem?.length) {
+                if (dataSource &&
+                    selectedRows &&
+                    selectedRows?.length !== selectedItem?.length) {
                     setSelectedItem([...selectedRows]);
                     if (handleSelect) {
                         handleSelect([...selectedRows]);
@@ -69046,7 +69116,8 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
             }
             else {
                 if (dataSource && selectedRows?.length > 0) {
-                    if (!selectedItem || selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
+                    if (!selectedItem ||
+                        selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
                         setSelectedItem({ ...selectedRows[0] });
                         if (handleSelect) {
                             handleSelect({ ...selectedRows[0] });
@@ -69065,7 +69136,8 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
     useEffect(() => {
         if (!isMulti) {
             if (dataSource && selectedItem && selectedItem[fieldKey]) {
-                if (selectedRows?.length === 0 || selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
+                if (selectedRows?.length === 0 ||
+                    selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
                     setSelectedRows([selectedItem]);
                 }
             }
@@ -69074,7 +69146,9 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
             }
         }
         else {
-            if (dataSource && selectedItem && selectedRows?.length !== selectedItem.length) {
+            if (dataSource &&
+                selectedItem &&
+                selectedRows?.length !== selectedItem.length) {
                 setSelectedRows(selectedItem ? [...selectedItem] : []);
             }
         }
@@ -69092,44 +69166,68 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                     const col = contentColumns.find((x) => x.field === row.field);
                     let value = row[col.field];
                     if (col.type === 'numeric') {
-                        value = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
+                        value =
+                            formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
                     }
                     else if (col.type === 'date') {
-                        value = value ? formatDateTime(value, formatSetting?.dateFormat) : '';
+                        value = value
+                            ? formatDateTime(value, formatSetting?.dateFormat)
+                            : '';
                     }
                     else if (col.type === 'datetime') {
-                        value = value ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
+                        value = value
+                            ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm')
+                            : '';
                     }
                     if (col.template) {
                         value = col.template(row, indexRow) ?? '';
                     }
-                    return (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)' }, fontSize: 15, onClick: () => {
+                    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)',
+                                                    }, fontSize: 15, onClick: () => {
                                                         setExpand(!expand);
                                                         setExpandsAll(undefined);
                                                         row.expand = !expand;
                                                     } }), t(col.headerDisplay ?? col.headerText), ": ", value, " (", row.children.length, ")"] }) }), contentColumns.map((colSum, indexCol) => {
-                                        if (indexCol <= firstColSpan || colSum.visible === false || colSum.isGroup === true) {
+                                        if (indexCol <= firstColSpan ||
+                                            colSum.visible === false ||
+                                            colSum.isGroup === true) {
                                             return;
                                         }
                                         let sumValue = row[colSum.field];
-                                        const haveSum = row[colSum.field] !== undefined && row[colSum.field] !== null;
-                                        if (!haveSum && colSum.haveSum === true && colSum.type === 'numeric') {
+                                        const haveSum = row[colSum.field] !== undefined &&
+                                            row[colSum.field] !== null;
+                                        if (!haveSum &&
+                                            colSum.haveSum === true &&
+                                            colSum.type === 'numeric') {
                                             sumValue = row.children.reduce(function (accumulator, currentValue) {
-                                                return Number(accumulator ?? 0) + Number(currentValue[colSum.field] ?? 0);
+                                                return (Number(accumulator ?? 0) +
+                                                    Number(currentValue[colSum.field] ?? 0));
                                             }, 0);
                                         }
                                         if (colSum.type === 'numeric') {
                                             sumValue = formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', colSum.numericSettings?.fraction, true, false);
-                                            if (!zeroVisiable && (sumValue === '0' || sumValue === 0)) {
+                                            if (!zeroVisiable &&
+                                                (sumValue === '0' || sumValue === 0)) {
                                                 sumValue = '';
                                             }
                                         }
-                                        return (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' }, 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}`));
+                                        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',
+                                                    }, 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}`));
                 }
                 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 }), onContextMenu: (e) => {
+                    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,
+                        }), 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}`));
@@ -69144,7 +69242,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                 x: e.clientX,
                 y: e.clientY,
                 row,
-                show: true
+                show: true,
             });
         }, 100);
     };
@@ -69159,7 +69257,10 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
             virtualDivRef.current.style.height = '0px';
         }
     }, [context]);
-    return (jsxs("div", { className: "r-table-edit r-virtualized-table", children: [jsxs("div", { className: "r-grid", children: [toolbarSetting?.showTopToolbar && jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), headerComponent && headerComponent(), jsxs("div", { ref: gridRef, className: "r-gridtable", style: { height: `${height ? `${height}px` : 'auto'}`, position: 'relative' }, children: [jsxs("table", { role: "presentation", style: { width: '100%' }, children: [jsx(RenderColGroup, { contentColumns: contentColumns }), jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((rowColumn, indexParent) => {
+    return (jsxs("div", { className: "r-table-edit r-virtualized-table", children: [jsxs("div", { className: "r-grid", children: [toolbarSetting?.showTopToolbar && (jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption })), headerComponent && headerComponent(), jsxs("div", { ref: gridRef, className: "r-gridtable", style: {
+                            height: `${height ? `${height}px` : 'auto'}`,
+                            position: 'relative',
+                        }, children: [jsxs("table", { role: "presentation", style: { width: '100%' }, children: [jsx(RenderColGroup, { contentColumns: contentColumns }), jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((rowColumn, indexParent) => {
                                             return (jsx("tr", { className: "r-row", role: "row", children: rowColumn.map((col, index) => (jsx(HeaderTableCol, { col: col, idTable: idTable ?? '', dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: true, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: gridRef, filterBy: filterBy, orderBy: orderBy, optionsFilter: querySetting?.optionsFilter, allowFiltering: querySetting?.allowFiltering, allowSorting: querySetting?.allowSorting, formatSetting: formatSetting, changeFilter: (val) => {
                                                         setFilterBy([...val]);
                                                         if (querySetting?.changeFilter) {
@@ -69177,20 +69278,32 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                                                 }
                                                 const item = columnsAggregate?.find((x) => x.field === col.field);
                                                 let sumValue = item?.value;
-                                                if (!item && col.haveSum === true && col.type === 'numeric') {
+                                                if (!item &&
+                                                    col.haveSum === true &&
+                                                    col.type === 'numeric') {
                                                     sumValue = viewData.reduce(function (accumulator, currentValue) {
-                                                        return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
+                                                        return (Number(accumulator ?? 0) +
+                                                            Number(currentValue[col.field] ?? 0));
                                                     }, 0);
                                                 }
                                                 if (col.type === 'numeric') {
                                                     sumValue = formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false);
                                                 }
                                                 return (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' }, 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) => {
+                                                        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) => {
                                         return (jsxs("div", { className: "r-context-item", onClick: () => {
                                                 handleCloseContext();
                                                 handleContextMenuClick?.(item, context.row);
@@ -69199,7 +69312,14 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
                     setOpenPopupSetupColumn(!openPopupSetupColumn);
                 }, settingColumns: settingColumns, openSidebar: openPopupSetupColumn, column: [...contentColumns], resetDefaultColumns: resetDefaultColumns, setColumn: (newColumns) => {
                     if (saveSettingColumn) {
-                        saveSettingColumn(newColumns.map((x, index) => ({ field: x.field, headerText: x.headerDisplay, visible: x.visible, fixedType: x.fixedType, width: x.width, sortOrder: index + 1 })));
+                        saveSettingColumn(newColumns.map((x, index) => ({
+                            field: x.field,
+                            headerText: x.headerDisplay,
+                            visible: x.visible,
+                            fixedType: x.fixedType,
+                            width: x.width,
+                            sortOrder: index + 1,
+                        })));
                     }
                 } })] }));
 };