react-table-edit 1.5.22 → 1.5.23

package/dist/index.mjs

@@ -39685,7 +39685,7 @@ const SettingColumn = (props) => {
     // const [indexFocus, setIndexFocus] = useState<number>()
     useEffect(() => {
         if (openSidebar) {
-            setDataSource([...column.map(x => ({ ...x }))]);
+            setDataSource([...column.map((x) => ({ ...x }))]);
         }
     }, [openSidebar]);
     const handleCancel = () => {
@@ -39705,9 +39705,9 @@ const SettingColumn = (props) => {
         const handleWindowResize = () => {
             setWindowSize(getWindowSize());
         };
-        window.addEventListener("resize", handleWindowResize);
+        window.addEventListener('resize', handleWindowResize);
         return () => {
-            window.removeEventListener("resize", handleWindowResize);
+            window.removeEventListener('resize', handleWindowResize);
         };
     }, []);
     const handleResetColumns = () => {
@@ -39717,7 +39717,7 @@ const SettingColumn = (props) => {
         handleSidebar();
         setDataSource([]);
     };
-    const visibleTemplate = (item, index) => {
+    const VisibleTemplate = ({ index, item }) => {
         return (jsx(Input$1, { defaultChecked: item.visible ?? true, disabled: item.field === 'command' || item.field === '#' || item.field === 'checkbox' || item.visibleLocked, type: "checkbox", style: { height: 18 }, className: " cursor-pointer", onChange: (e) => {
                 if (dataSource) {
                     dataSource[index].visible = e.target.checked;
@@ -39725,9 +39725,9 @@ const SettingColumn = (props) => {
                 }
             } }));
     };
-    const headerDisplayTemplate = (item, index) => {
-        let textValue = t(item.headerDisplay ?? (item.headerText ?? ''));
-        return (jsx(Input$1, { defaultValue: textValue, className: classNames$1(""), onChange: (e) => {
+    const HeaderDisplayTemplate = ({ index, item }) => {
+        let textValue = t(item.headerDisplay ?? item.headerText ?? '');
+        return (jsx(Input$1, { defaultValue: textValue, className: classNames$1(''), onChange: (e) => {
                 textValue = e.target?.value;
             }, onBlur: () => {
                 if (dataSource) {
@@ -39736,25 +39736,28 @@ const SettingColumn = (props) => {
                 }
             } }));
     };
-    const fixColumnTemplate = (item, index) => {
-        const optionsFix = [{ label: 'Trái', value: 'left' }, { label: 'Phải', value: 'right' }];
-        return (jsx(SelectTable, { component: gridRef, options: optionsFix, textAlign: "left", isClearable: true, onChange: (val) => {
+    const FixColumnTemplate = ({ index, item }) => {
+        const optionsFix = [
+            { label: 'Trái', value: 'left' },
+            { label: 'Phải', value: 'right' }
+        ];
+        return (jsx(SelectTable, { component: gridRef, options: optionsFix, textAlign: 'left', isClearable: true, onChange: (val) => {
                 if (dataSource) {
                     dataSource[index].fixedType = val?.value;
                     setDataSource([...dataSource]);
                 }
-            }, value: item.fixedType ? optionsFix.find(x => x.value === item.fixedType) : undefined }));
+            }, value: item.fixedType ? optionsFix.find((x) => x.value === item.fixedType) : undefined }));
     };
-    const widthColumnTemplate = (item, index) => {
+    const WidthColumnTemplate = ({ index, item }) => {
         const numericFormatProps = {
-            value: !isNullOrUndefined$1(item.width) ? item.width?.toString() : "",
+            value: !isNullOrUndefined$1(item.width) ? item.width?.toString() : '',
             thousandSeparator: checkThousandSeparator(formatSetting?.thousandSeparator, formatSetting?.decimalSeparator),
             decimalSeparator: checkDecimalSeparator(formatSetting?.thousandSeparator, formatSetting?.decimalSeparator),
             allowNegative: false,
             decimalScale: 0
         };
-        let floatValue = parseFloat(item.width?.toString() ?? "0");
-        return (jsx(NumericFormat, { style: { textAlign: 'right', height: 29, width: '100%' }, ...numericFormatProps, defaultValue: formartNumberic(item.width?.toString() ?? '0', formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", 0), className: classNames$1("form-control"), onValueChange: (values) => {
+        let floatValue = parseFloat(item.width?.toString() ?? '0');
+        return (jsx(NumericFormat, { style: { textAlign: 'right', height: 29, width: '100%' }, ...numericFormatProps, defaultValue: formartNumberic(item.width?.toString() ?? '0', formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', 0), className: classNames$1('form-control'), onValueChange: (values) => {
                 floatValue = values?.floatValue;
             }, onFocus: (e) => {
                 e.target.setSelectionRange(0, e.target.innerText.length - 1);
@@ -39767,9 +39770,9 @@ const SettingColumn = (props) => {
                 }
             } }));
     };
-    return (jsxs(Sidebar, { open: openSidebar, toggleSidebar: handleCancel, width: 900, children: [jsx(ModalHeader, { typeModal: "Edit", handleModal: handleCancel, title: "Column setup" }), jsxs("div", { className: "r-setting-container", children: [jsxs("div", { style: { fontWeight: 700, color: "#000" }, className: 'r-setting-row r-setting-header me-75', children: [jsx("span", { className: "r-setting-cell", style: { width: 30 } }), jsx("span", { className: "r-setting-cell", style: { width: 200 }, children: t('Column name') }), jsx("span", { className: "r-setting-cell", style: { flex: 1 }, children: t('Column name display') }), jsx("span", { className: "r-setting-cell", style: { width: 80, textAlign: 'center' }, children: t('Display') }), jsx("span", { className: "r-setting-cell", style: { width: 100 }, children: t('Fix the column') }), jsx("span", { className: "r-setting-cell", style: { width: 110 }, children: t('Column width(px)') })] }), jsx("div", { className: 'r-setting-content', style: { height: windowSize.innerHeight - 140 }, children: jsx(dist.exports.ReactSortable, { tag: 'div', list: dataSource, handle: '.drag-icon', setList: newState => setDataSource(newState), children: dataSource.map((item, index) => {
-                                return jsx(Fragment$1, { children: jsxs("div", { className: 'r-setting-row', children: [jsx("div", { className: "r-setting-cell", style: { width: 30 }, children: jsx(SvgDragDrop, { fontSize: 12, className: 'drag-icon cursor-move' }) }), jsx("div", { className: "r-setting-cell", style: { width: 200 }, children: t(item.headerText ?? '') }), jsx("div", { className: "r-setting-cell", style: { flex: 1 }, children: headerDisplayTemplate(item, index) }), jsx("div", { className: "r-setting-cell", style: { width: 80, textAlign: 'center' }, children: visibleTemplate(item, index) }), jsx("div", { className: "r-setting-cell", style: { width: 100 }, children: fixColumnTemplate(item, index) }), jsx("div", { className: "r-setting-cell", style: { width: 110 }, children: widthColumnTemplate(item, index) })] }) });
-                            }) }) })] }), jsxs("div", { style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }, className: "d-flex justify-content-between align-items-center w-100 py-75 px-1", children: [jsx("div", { children: settingColumns?.updatedDate && jsxs("p", { children: [jsxs("strong", { children: [t("Update date"), ": "] }), " ", jsx("span", { children: settingColumns.updatedDate ? formatDateTime(settingColumns.updatedDate, "DD/MM/yyyy HH:mm") : "" }), jsxs("strong", { className: "ms-2", children: [t("Editor"), ": "] }), " ", jsx("span", { children: settingColumns.updatedByName })] }) }), jsxs("div", { children: [resetDefaultColumns && jsx(Button$1$1, { color: "primary", onClick: () => messageBoxConfirm(t, handleResetColumns, {}, 'Do you want to reset the default settings?'), className: "me-1", children: t("Reset") }), jsx(Button$1$1, { color: "primary", onClick: handleSubmit, className: "me-1", children: t("Confirm") }), jsx(Button$1$1, { color: "secondary", onClick: handleCancel, outline: true, children: t("Close") })] })] })] }));
+    return (jsxs(Sidebar, { open: openSidebar, toggleSidebar: handleCancel, width: 900, children: [jsx(ModalHeader, { typeModal: 'Edit', handleModal: handleCancel, title: 'Column setup' }), jsxs("div", { className: "r-setting-container", children: [jsxs("div", { style: { fontWeight: 700, color: '#000' }, className: "r-setting-row r-setting-header me-75", children: [jsx("span", { className: "r-setting-cell", style: { width: 30 } }), jsx("span", { className: "r-setting-cell", style: { width: 200 }, children: t('Column name') }), jsx("span", { className: "r-setting-cell", style: { flex: 1 }, children: t('Column name display') }), jsx("span", { className: "r-setting-cell", style: { width: 80, textAlign: 'center' }, children: t('Display') }), jsx("span", { className: "r-setting-cell", style: { width: 100 }, children: t('Fix the column') }), jsx("span", { className: "r-setting-cell", style: { width: 110 }, children: t('Column width(px)') })] }), jsx("div", { className: "r-setting-content", style: { height: windowSize.innerHeight - 140 }, children: jsx(dist.exports.ReactSortable, { tag: "div", list: dataSource, handle: ".drag-icon", setList: (newState) => setDataSource(newState), children: dataSource.map((item, index) => {
+                                return (jsx(Fragment$1, { children: jsxs("div", { className: "r-setting-row", children: [jsx("div", { className: "r-setting-cell", style: { width: 30 }, children: jsx(SvgDragDrop, { fontSize: 12, className: "drag-icon cursor-move" }) }), jsx("div", { className: "r-setting-cell", style: { width: 200 }, children: t(item.headerText ?? '') }), jsx("div", { className: "r-setting-cell", style: { flex: 1 }, children: jsx(HeaderDisplayTemplate, { item: item, index: index }) }), jsx("div", { className: "r-setting-cell", style: { width: 80, textAlign: 'center' }, children: jsx(VisibleTemplate, { item: item, index: index }) }), jsx("div", { className: "r-setting-cell", style: { width: 100 }, children: jsx(FixColumnTemplate, { item: item, index: index }) }), jsx("div", { className: "r-setting-cell", style: { width: 110 }, children: jsx(WidthColumnTemplate, { item: item, index: index }) })] }) }));
+                            }) }) })] }), jsxs("div", { style: { boxShadow: '0 4px 24px 0 rgb(34 41 47 / 10%)' }, className: "d-flex justify-content-between align-items-center w-100 py-75 px-1", children: [jsx("div", { children: settingColumns?.updatedDate && (jsxs("p", { children: [jsxs("strong", { children: [t('Update date'), ": "] }), " ", jsx("span", { children: settingColumns.updatedDate ? formatDateTime(settingColumns.updatedDate, 'DD/MM/yyyy HH:mm') : '' }), jsxs("strong", { className: "ms-2", children: [t('Editor'), ": "] }), " ", jsx("span", { children: settingColumns.updatedByName })] })) }), jsxs("div", { children: [resetDefaultColumns && (jsx(Button$1$1, { color: "primary", onClick: () => messageBoxConfirm(t, handleResetColumns, {}, 'Do you want to reset the default settings?'), className: "me-1", children: t('Reset') })), jsx(Button$1$1, { color: "primary", onClick: handleSubmit, className: "me-1", children: t('Confirm') }), jsx(Button$1$1, { color: "secondary", onClick: handleCancel, outline: true, children: t('Close') })] })] })] }));
 };
 
 const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleInsertAfter, handleDeleteAll, setOpenPopupSetupColumn, focusRow, editDisable, addDisable, buttonSetting, toolbarSetting, headerColumns }) => {
@@ -68763,7 +68766,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
         setContentColumns(rs.flat);
         return rs;
     }, [columns, settingColumns]);
-    const optionGroupColumns = useMemo(() => contentColumns.filter((x) => !groupColumns.includes(x.field)).map((x) => ({ ...x, headerDisplay: t(x.headerDisplay ?? x.headerText) })), [groupColumns, contentColumns]);
+    const optionGroupColumns = useMemo(() => contentColumns.filter((x) => !groupColumns.includes(x.field)).map((x) => ({ ...x, headerDisplay: t(x.columnGroupText ?? x.headerDisplay ?? x.headerText) })), [groupColumns, contentColumns]);
     const firstColSpan = useMemo(() => {
         let count = 0;
         let index = 3;
@@ -69016,10 +69019,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
                                                         setExpandsAll(undefined);
                                                         row.expand = !expand;
                                                     } }), t(col.headerDisplay ?? col.headerText), ": ", value, " (", row.children.length, ")"] }) }), contentColumns.map((colSum, indexCol) => {
-                                        console.log(indexCol < firstColSpan || colSum.visible === false || (!groupSetting?.visibleGroupColumn && groupColumns?.includes(colSum.field)));
-                                        console.log(firstColSpan);
-                                        console.log(!groupSetting?.visibleGroupColumn && groupColumns?.includes(colSum.field));
-                                        if (indexCol < firstColSpan || colSum.visible === false || (!groupSetting?.visibleGroupColumn && groupColumns?.includes(colSum.field))) {
+                                        if (indexCol <= firstColSpan || colSum.visible === false || (!groupSetting?.visibleGroupColumn && groupColumns?.includes(colSum.field))) {
                                             return;
                                         }
                                         let sumValue = row[colSum.field];