react-table-edit 1.5.45 → 1.5.47

package/dist/component/table/filter-element.d.ts

@@ -9,5 +9,5 @@ type IFilterProps = {
     formatSetting?: IFTableEditFormat;
     changeFilter: (data: IFFilterTable[]) => void;
 };
-declare const FilterComponent: ({ optionsFilter, formatSetting, filterBy, setOpenFilter, changeFilter, column }: IFilterProps) => import("react/jsx-runtime").JSX.Element;
+declare const FilterComponent: ({ optionsFilter, formatSetting, filterBy, setOpenFilter, changeFilter, column, }: IFilterProps) => import("react/jsx-runtime").JSX.Element;
 export default FilterComponent;

package/dist/index.js

@@ -39586,7 +39586,7 @@ const DateRangePicker = React$5.forwardRef((props, ref) => {
                                     }, children: t('Last month') })] })] })] }) }));
 });
 
-const FilterComponent = ({ optionsFilter, formatSetting, filterBy, setOpenFilter, changeFilter, column }) => {
+const FilterComponent = ({ optionsFilter, formatSetting, filterBy, setOpenFilter, changeFilter, column, }) => {
     const { t } = reactI18next.useTranslation();
     const fieldFilter = column.fieldFilter ?? column.field;
     let typeFilter = column.filterType;
@@ -39613,14 +39613,22 @@ const FilterComponent = ({ optionsFilter, formatSetting, filterBy, setOpenFilter
                 from.value = filterValue?.from;
             }
             else {
-                filterBy.push({ key: fieldFilter, ope: 'greaterthanorequal', value: filterValue?.from });
+                filterBy.push({
+                    key: fieldFilter,
+                    ope: 'greaterthanorequal',
+                    value: filterValue?.from,
+                });
             }
             const to = filterBy.find((item) => item.key === fieldFilter && item.ope === 'lessthanorequal');
             if (to) {
                 to.value = filterValue?.to;
             }
             else {
-                filterBy.push({ key: fieldFilter, ope: 'lessthanorequal', value: filterValue?.to });
+                filterBy.push({
+                    key: fieldFilter,
+                    ope: 'lessthanorequal',
+                    value: filterValue?.to,
+                });
             }
         }
         else {
@@ -39630,7 +39638,11 @@ const FilterComponent = ({ optionsFilter, formatSetting, filterBy, setOpenFilter
                 filter.value = filterValue ?? '';
             }
             else {
-                filterBy.push({ key: fieldFilter, ope: operator ?? 'equal', value: filterValue ?? '' });
+                filterBy.push({
+                    key: fieldFilter,
+                    ope: operator ?? 'equal',
+                    value: filterValue ?? '',
+                });
             }
         }
         changeFilter([...filterBy]);
@@ -39639,19 +39651,19 @@ const FilterComponent = ({ optionsFilter, formatSetting, filterBy, setOpenFilter
     /* eslint-disable */
     switch (typeFilter) {
         case 'text':
-            return jsxRuntime.jsx(StringFilterComponent, { fieldFilter: fieldFilter, optionsFilter: optionsFilter, filterBy: filterBy, column: column, handleSave: handleSave });
+            return (jsxRuntime.jsx(StringFilterComponent, { fieldFilter: fieldFilter, optionsFilter: optionsFilter, filterBy: filterBy, column: column, handleSave: handleSave }));
         case 'numeric':
-            return jsxRuntime.jsx(NumberFilterComponent, { fieldFilter: fieldFilter, optionsFilter: optionsFilter, filterBy: filterBy, column: column, handleSave: handleSave, formatSetting: formatSetting });
+            return (jsxRuntime.jsx(NumberFilterComponent, { fieldFilter: fieldFilter, optionsFilter: optionsFilter, filterBy: filterBy, column: column, handleSave: handleSave, formatSetting: formatSetting }));
         case 'select':
-            return jsxRuntime.jsx(SelectFilterComponent, { fieldFilter: fieldFilter, optionsFilter: optionsFilter, filterBy: filterBy, column: column, handleSave: handleSave });
+            return (jsxRuntime.jsx(SelectFilterComponent, { fieldFilter: fieldFilter, optionsFilter: optionsFilter, filterBy: filterBy, column: column, handleSave: handleSave }));
         case 'date':
-            return jsxRuntime.jsx(DateRangeFilterComponent, { fieldFilter: fieldFilter, optionsFilter: optionsFilter, filterBy: filterBy, column: column, handleSave: handleSave });
+            return (jsxRuntime.jsx(DateRangeFilterComponent, { fieldFilter: fieldFilter, optionsFilter: optionsFilter, filterBy: filterBy, column: column, handleSave: handleSave }));
         default:
             return jsxRuntime.jsx("div", { children: t('No filter available') });
     }
     /* eslint-enable */
 };
-const StringFilterComponent = ({ fieldFilter, filterBy, handleSave }) => {
+const StringFilterComponent = ({ fieldFilter, filterBy, handleSave, }) => {
     const { t } = reactI18next.useTranslation();
     const filter = filterBy.find((item) => item.key === fieldFilter);
     const [operator, setOperator] = React$5.useState(filter?.ope ?? 'contains');
@@ -39661,7 +39673,7 @@ const StringFilterComponent = ({ fieldFilter, filterBy, handleSave }) => {
         { label: 'Kết thúc bởi', value: 'endswith' },
         { label: 'Chứa', value: 'contains' },
         { label: 'Bằng', value: 'equal' },
-        { label: 'Không bằng', value: 'notequal' }
+        { label: 'Không bằng', value: 'notequal' },
     ];
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-filter-popup", onKeyDown: (e) => {
                 if (e.code === 'Enter' || e.code === 'NumpadEnter') {
@@ -39676,7 +39688,7 @@ const StringFilterComponent = ({ fieldFilter, filterBy, handleSave }) => {
                         setValueFilter(val.target.value);
                     } }), jsxRuntime.jsxs("div", { className: "d-flex justify-content-end", children: [jsxRuntime.jsx(Button$1$1, { color: "primary", style: { borderRadius: 3 }, className: "me-50 py-25 px-50 fw-bold", onClick: () => handleSave('text', valueFilter, operator), children: t('Filter') }), jsxRuntime.jsx(Button$1$1, { className: "py-25 px-50  fw-bold", outline: true, style: { borderRadius: 3 }, onClick: () => handleSave(), children: t('Clear') })] })] }) }));
 };
-const NumberFilterComponent = ({ column, filterBy, fieldFilter, handleSave, formatSetting }) => {
+const NumberFilterComponent = ({ column, filterBy, fieldFilter, handleSave, formatSetting, }) => {
     const { t } = reactI18next.useTranslation();
     const filter = filterBy.find((item) => item.key === fieldFilter);
     const [operator, setOperator] = React$5.useState(filter?.ope ?? 'equal');
@@ -39686,17 +39698,15 @@ const NumberFilterComponent = ({ column, filterBy, fieldFilter, handleSave, form
         { label: 'Lớn hơn hoặc bằng', value: 'greaterthanorequal' },
         { label: 'Bằng', value: 'equal' },
         { label: 'Bé hơn', value: 'lessthan' },
-        { label: 'Bé hơn hoặc bằng', value: 'lessthanorequal' }
+        { label: 'Bé hơn hoặc bằng', value: 'lessthanorequal' },
     ];
     const numericFormatProps = {
         value: !isNullOrUndefined$1(valueFilter) ? valueFilter.toString() : '',
         thousandSeparator: checkThousandSeparator(formatSetting?.thousandSeparator, formatSetting?.decimalSeparator),
         decimalSeparator: checkDecimalSeparator(formatSetting?.thousandSeparator, formatSetting?.decimalSeparator),
         allowNegative: column.numericSettings?.allowNegative ?? false,
-        decimalScale: column.numericSettings?.fraction ?? 0
+        decimalScale: column.numericSettings?.fraction ?? 0,
     };
-    console.log(column.numericSettings?.fraction);
-    console.log(column.field);
     let floatValue = parseFloat(valueFilter ?? '0');
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-filter-popup", onKeyDown: (e) => {
                 if (e.code === 'Enter' || e.code === 'NumpadEnter') {
@@ -39717,7 +39727,7 @@ const NumberFilterComponent = ({ column, filterBy, fieldFilter, handleSave, form
                         }
                     } }), jsxRuntime.jsxs("div", { className: "d-flex justify-content-end", children: [jsxRuntime.jsx(Button$1$1, { color: "primary", style: { borderRadius: 3 }, className: "me-50 py-25 px-50 fw-bold", onClick: () => handleSave('numeric', valueFilter, operator), children: t('Filter') }), jsxRuntime.jsx(Button$1$1, { className: "py-25 px-50  fw-bold", outline: true, style: { borderRadius: 3 }, onClick: () => handleSave(), children: t('Clear') })] })] }) }));
 };
-const SelectFilterComponent = ({ column, filterBy, handleSave, fieldFilter, optionsFilter }) => {
+const SelectFilterComponent = ({ column, filterBy, handleSave, fieldFilter, optionsFilter, }) => {
     const { t } = reactI18next.useTranslation();
     const filter = filterBy.find((item) => item.key === fieldFilter);
     const [valueFilter, setValueFilter] = React$5.useState(filter?.value ?? '');
@@ -39728,15 +39738,22 @@ const SelectFilterComponent = ({ column, filterBy, handleSave, fieldFilter, opti
                     }, 100);
                     e.stopPropagation();
                 }
-            }, children: [jsxRuntime.jsx("div", { className: "mb-1", children: jsxRuntime.jsx(SelectTable, { value: optionsFilter ? optionsFilter[column.fieldFilter ?? column.field]?.find((x) => x.value === valueFilter) : undefined, options: (optionsFilter && optionsFilter[column.fieldFilter ?? column.field]) ?? [], isClearable: true, onChange: (val) => {
+            }, children: [jsxRuntime.jsx("div", { className: "mb-1", children: jsxRuntime.jsx(SelectTable, { value: optionsFilter
+                            ? optionsFilter[column.fieldFilter ?? column.field]?.find((x) => x.value === valueFilter)
+                            : undefined, options: (optionsFilter &&
+                            optionsFilter[column.fieldFilter ?? column.field]) ??
+                            [], isClearable: true, onChange: (val) => {
                             setValueFilter(val?.value);
                         }, placeholder: t('Select') }) }), jsxRuntime.jsxs("div", { className: "d-flex justify-content-end", children: [jsxRuntime.jsx(Button$1$1, { color: "primary", style: { borderRadius: 3 }, className: "me-50 py-25 px-50 fw-bold", onClick: () => handleSave('select', valueFilter, 'equal'), children: t('Filter') }), jsxRuntime.jsx(Button$1$1, { className: "py-25 px-50  fw-bold", outline: true, style: { borderRadius: 3 }, onClick: () => handleSave(), children: t('Clear') })] })] }) }));
 };
-const DateRangeFilterComponent = ({ fieldFilter, filterBy, handleSave }) => {
+const DateRangeFilterComponent = ({ fieldFilter, filterBy, handleSave, }) => {
     const { t } = reactI18next.useTranslation();
     const from = filterBy.find((item) => item.key === fieldFilter && item.ope === 'greaterthanorequal')?.value;
     const to = filterBy.find((item) => item.key === fieldFilter && item.ope === 'lessthanorequal')?.value;
-    const [valueFilter, setValueFilter] = React$5.useState({ from: from ?? undefined, to: to ?? undefined });
+    const [valueFilter, setValueFilter] = React$5.useState({
+        from: from ?? undefined,
+        to: to ?? undefined,
+    });
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-filter-popup", onKeyDown: (e) => {
                 if (e.code === 'Enter' || e.code === 'NumpadEnter') {
                     setTimeout(() => {
@@ -69671,7 +69688,7 @@ const RenderContentCol = React__default["default"].memo((props) => {
 });
 
 const TableElement = React__default["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, handleCellClick, 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 } = reactI18next.useTranslation();
     const [context, setContext] = React$5.useState(null);
     const virtualDivRef = React$5.useRef(null);
@@ -69717,7 +69734,10 @@ const TableElement = React__default["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());
                 });
             });
         }
@@ -69726,7 +69746,10 @@ const TableElement = React__default["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();
@@ -69792,52 +69815,68 @@ const TableElement = React__default["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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("tr", { "aria-rowindex": indexRow + 1, role: "row", className: "r-row", children: [jsxRuntime.jsx("td", { className: "r-rowcell r-cell-group", colSpan: 3, children: jsxRuntime.jsxs("div", { className: "r-rowcell-div", children: [jsxRuntime.jsx(SvgChevronRight, { style: {
                                                         marginLeft: level * 20,
-                                                        transform: expand ? 'rotate(90deg)' : 'rotate(0deg)'
+                                                        transform: expand ? 'rotate(90deg)' : 'rotate(0deg)',
                                                     }, fontSize: 15, onClick: () => {
                                                         setExpand(!expand);
                                                         setExpandsAll(undefined);
                                                         row.expand = !expand;
                                                     } }), t(col.headerDisplay ?? col.headerText ?? ''), ": ", value, " (", row.children.length, ")"] }) }), contentColumns.map((colSum, indexCol) => {
-                                        if (indexCol <= firstColSpan || colSum.visible === false || colSum.isGroup === true) {
+                                        if (indexCol <= firstColSpan ||
+                                            colSum.visible === false ||
+                                            colSum.isGroup === true) {
                                             return;
                                         }
                                         let sumValue = row[colSum.field];
-                                        const haveSum = row[colSum.field] !== undefined && row[colSum.field] !== null;
-                                        if (!haveSum && colSum.haveSum === true && colSum.type === 'numeric') {
+                                        const haveSum = row[colSum.field] !== undefined &&
+                                            row[colSum.field] !== null;
+                                        if (!haveSum &&
+                                            colSum.haveSum === true &&
+                                            colSum.type === 'numeric') {
                                             sumValue = row.children.reduce(function (accumulator, currentValue) {
-                                                return Number(accumulator ?? 0) + Number(currentValue[colSum.field] ?? 0);
+                                                return (Number(accumulator ?? 0) +
+                                                    Number(currentValue[colSum.field] ?? 0));
                                             }, 0);
                                         }
                                         if (colSum.type === 'numeric') {
                                             sumValue = formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', colSum.numericSettings?.fraction, true, false);
-                                            if (!zeroVisiable && !col.zeroVisiable && (sumValue === '0' || sumValue === 0)) {
+                                            if (!zeroVisiable &&
+                                                !col.zeroVisiable &&
+                                                (sumValue === '0' || sumValue === 0)) {
                                                 sumValue = '';
                                             }
                                         }
                                         return (jsxRuntime.jsx("td", { className: "r-rowcell r-cell-sum-group", children: jsxRuntime.jsx("div", { className: "r-rowcell-div", style: {
-                                                    justifyContent: colSum.textAlign ? colSum.textAlign : 'left'
-                                                }, children: (haveSum || colSum.haveSum === true) && Number(row[colSum.field] ?? '0') < 0 ? (jsxRuntime.jsxs("div", { style: {
-                                                        color: formatSetting?.colorNegative ?? 'red'
-                                                    }, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `group-sum-cell-${level}-${indexRow}-${indexCol}`));
-                                    })] }), expand && jsxRuntime.jsx(RenderContent, { datas: row.children, level: level + 1 })] }, `row-${level}-${indexRow}`));
+                                                    justifyContent: colSum.textAlign
+                                                        ? colSum.textAlign
+                                                        : 'left',
+                                                }, children: (haveSum || colSum.haveSum === true) &&
+                                                    Number(row[colSum.field] ?? '0') < 0 ? (jsxRuntime.jsx("div", { style: {
+                                                        color: formatSetting?.colorNegative ?? 'red',
+                                                    }, children: `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}` })) : (sumValue) }) }, `group-sum-cell-${level}-${indexRow}-${indexCol}`));
+                                    })] }), expand && (jsxRuntime.jsx(RenderContent, { datas: row.children, level: level + 1 }))] }, `row-${level}-${indexRow}`));
                 }
                 else {
                     const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
                     return (jsxRuntime.jsx("tr", { id: `row-content-${indexRow}`, "aria-rowindex": indexRow + 1, role: "row", className: classNames$1('r-row', {
-                            'r-last-row': level === 0 && indexRow === viewData.length - 1
+                            'r-last-row': level === 0 && indexRow === viewData.length - 1,
                         }), onContextMenu: (e) => {
                             e.preventDefault();
                             handleContextMenu(e, row);
@@ -69853,7 +69892,7 @@ const TableElement = React__default["default"].memo((props) => {
                 x: e.clientX,
                 y: e.clientY,
                 row,
-                show: true
+                show: true,
             });
         }, 100);
     };
@@ -69877,20 +69916,28 @@ const TableElement = React__default["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 (jsxRuntime.jsx("td", { className: classNames$1(`p-0 px-50 r-footer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
-                                        left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
-                                        right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
-                                        textAlign: col.textAlign ? col.textAlign : 'left'
-                                    }, children: jsxRuntime.jsx("div", { className: "r-footer-div", children: (item || col.haveSum === true) && Number(item?.value ?? '0') < 0 ? (jsxRuntime.jsxs("div", { style: {
-                                                color: formatSetting?.colorNegative ?? 'red'
+                                        left: col.fixedType === 'left'
+                                            ? objWidthFixLeft[indexCol]
+                                            : undefined,
+                                        right: col.fixedType === 'right'
+                                            ? objWidthFixRight[indexCol]
+                                            : undefined,
+                                        textAlign: col.textAlign ? col.textAlign : 'left',
+                                    }, children: jsxRuntime.jsx("div", { className: "r-footer-div", children: (item || col.haveSum === true) &&
+                                            Number(item?.value ?? '0') < 0 ? (jsxRuntime.jsxs("div", { style: {
+                                                color: formatSetting?.colorNegative ?? 'red',
                                             }, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `summarycell-${indexCol}`));
-                            }) })) })] }), jsxRuntime.jsx("div", { ref: virtualDivRef }), context && (contextMenuItems?.length ?? 0) > 0 && handleContextMenuClick && (jsxRuntime.jsx(Popover$1, { className: "r-context-popover", placement: "right-start", isOpen: context.show, target: virtualDivRef.current, toggle: handleCloseContext, fade: false, children: jsxRuntime.jsx(PopoverBody$1, { children: contextMenuItems?.map((item, index) => {
+                            }) })) })] }), jsxRuntime.jsx("div", { ref: virtualDivRef }), context &&
+                (contextMenuItems?.length ?? 0) > 0 &&
+                handleContextMenuClick && (jsxRuntime.jsx(Popover$1, { className: "r-context-popover", placement: "right-start", isOpen: context.show, target: virtualDivRef.current, toggle: handleCloseContext, fade: false, children: jsxRuntime.jsx(PopoverBody$1, { children: contextMenuItems?.map((item, index) => {
                         return (jsxRuntime.jsxs("div", { className: "r-context-item", onClick: () => {
                                 handleCloseContext();
                                 handleContextMenuClick?.(item, context.row);