react-table-edit 1.5.22 → 1.5.23

package/dist/component/table/setting-column.d.ts

@@ -1,4 +1,4 @@
-import { IColumnTable, IFSettingColumns } from "../type";
+import { IColumnTable, IFSettingColumns } from '../type';
 export interface IFPropsDetail {
     gridRef: any;
     column: IColumnTable[];

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

@@ -151,6 +151,8 @@ export type IColumnTable = {
     headerText?: string;
     /** Tiêu đề hiển thị trên giao diện */
     headerDisplay?: string;
+    /** Tiêu đề hiển thị trên giao diện nhóm*/
+    columnGroupText?: string;
     /** Khóa chính */
     isPrimarykey?: boolean;
     /** Duy nhất trong bảng */

package/dist/index.d.ts

@@ -155,6 +155,8 @@ type IColumnTable = {
     headerText?: string;
     /** Tiêu đề hiển thị trên giao diện */
     headerDisplay?: string;
+    /** Tiêu đề hiển thị trên giao diện nhóm*/
+    columnGroupText?: string;
     /** Khóa chính */
     isPrimarykey?: boolean;
     /** Duy nhất trong bảng */

package/dist/index.js

@@ -39714,7 +39714,7 @@ const SettingColumn = (props) => {
     // const [indexFocus, setIndexFocus] = useState<number>()
     React$5.useEffect(() => {
         if (openSidebar) {
-            setDataSource([...column.map(x => ({ ...x }))]);
+            setDataSource([...column.map((x) => ({ ...x }))]);
         }
     }, [openSidebar]);
     const handleCancel = () => {
@@ -39734,9 +39734,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 = () => {
@@ -39746,7 +39746,7 @@ const SettingColumn = (props) => {
         handleSidebar();
         setDataSource([]);
     };
-    const visibleTemplate = (item, index) => {
+    const VisibleTemplate = ({ index, item }) => {
         return (jsxRuntime.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;
@@ -39754,9 +39754,9 @@ const SettingColumn = (props) => {
                 }
             } }));
     };
-    const headerDisplayTemplate = (item, index) => {
-        let textValue = t(item.headerDisplay ?? (item.headerText ?? ''));
-        return (jsxRuntime.jsx(Input$1, { defaultValue: textValue, className: classNames$1(""), onChange: (e) => {
+    const HeaderDisplayTemplate = ({ index, item }) => {
+        let textValue = t(item.headerDisplay ?? item.headerText ?? '');
+        return (jsxRuntime.jsx(Input$1, { defaultValue: textValue, className: classNames$1(''), onChange: (e) => {
                 textValue = e.target?.value;
             }, onBlur: () => {
                 if (dataSource) {
@@ -39765,25 +39765,28 @@ const SettingColumn = (props) => {
                 }
             } }));
     };
-    const fixColumnTemplate = (item, index) => {
-        const optionsFix = [{ label: 'Trái', value: 'left' }, { label: 'Phải', value: 'right' }];
-        return (jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.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);
@@ -39796,9 +39799,9 @@ const SettingColumn = (props) => {
                 }
             } }));
     };
-    return (jsxRuntime.jsxs(Sidebar, { open: openSidebar, toggleSidebar: handleCancel, width: 900, children: [jsxRuntime.jsx(ModalHeader, { typeModal: "Edit", handleModal: handleCancel, title: "Column setup" }), jsxRuntime.jsxs("div", { className: "r-setting-container", children: [jsxRuntime.jsxs("div", { style: { fontWeight: 700, color: "#000" }, className: 'r-setting-row r-setting-header me-75', children: [jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 30 } }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 200 }, children: t('Column name') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { flex: 1 }, children: t('Column name display') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 80, textAlign: 'center' }, children: t('Display') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 100 }, children: t('Fix the column') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 110 }, children: t('Column width(px)') })] }), jsxRuntime.jsx("div", { className: 'r-setting-content', style: { height: windowSize.innerHeight - 140 }, children: jsxRuntime.jsx(dist.exports.ReactSortable, { tag: 'div', list: dataSource, handle: '.drag-icon', setList: newState => setDataSource(newState), children: dataSource.map((item, index) => {
-                                return jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: 'r-setting-row', children: [jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 30 }, children: jsxRuntime.jsx(SvgDragDrop, { fontSize: 12, className: 'drag-icon cursor-move' }) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 200 }, children: t(item.headerText ?? '') }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { flex: 1 }, children: headerDisplayTemplate(item, index) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 80, textAlign: 'center' }, children: visibleTemplate(item, index) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 100 }, children: fixColumnTemplate(item, index) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 110 }, children: widthColumnTemplate(item, index) })] }) });
-                            }) }) })] }), jsxRuntime.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: [jsxRuntime.jsx("div", { children: settingColumns?.updatedDate && jsxRuntime.jsxs("p", { children: [jsxRuntime.jsxs("strong", { children: [t("Update date"), ": "] }), " ", jsxRuntime.jsx("span", { children: settingColumns.updatedDate ? formatDateTime(settingColumns.updatedDate, "DD/MM/yyyy HH:mm") : "" }), jsxRuntime.jsxs("strong", { className: "ms-2", children: [t("Editor"), ": "] }), " ", jsxRuntime.jsx("span", { children: settingColumns.updatedByName })] }) }), jsxRuntime.jsxs("div", { children: [resetDefaultColumns && jsxRuntime.jsx(Button$1$1, { color: "primary", onClick: () => messageBoxConfirm(t, handleResetColumns, {}, 'Do you want to reset the default settings?'), className: "me-1", children: t("Reset") }), jsxRuntime.jsx(Button$1$1, { color: "primary", onClick: handleSubmit, className: "me-1", children: t("Confirm") }), jsxRuntime.jsx(Button$1$1, { color: "secondary", onClick: handleCancel, outline: true, children: t("Close") })] })] })] }));
+    return (jsxRuntime.jsxs(Sidebar, { open: openSidebar, toggleSidebar: handleCancel, width: 900, children: [jsxRuntime.jsx(ModalHeader, { typeModal: 'Edit', handleModal: handleCancel, title: 'Column setup' }), jsxRuntime.jsxs("div", { className: "r-setting-container", children: [jsxRuntime.jsxs("div", { style: { fontWeight: 700, color: '#000' }, className: "r-setting-row r-setting-header me-75", children: [jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 30 } }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 200 }, children: t('Column name') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { flex: 1 }, children: t('Column name display') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 80, textAlign: 'center' }, children: t('Display') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 100 }, children: t('Fix the column') }), jsxRuntime.jsx("span", { className: "r-setting-cell", style: { width: 110 }, children: t('Column width(px)') })] }), jsxRuntime.jsx("div", { className: "r-setting-content", style: { height: windowSize.innerHeight - 140 }, children: jsxRuntime.jsx(dist.exports.ReactSortable, { tag: "div", list: dataSource, handle: ".drag-icon", setList: (newState) => setDataSource(newState), children: dataSource.map((item, index) => {
+                                return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-setting-row", children: [jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 30 }, children: jsxRuntime.jsx(SvgDragDrop, { fontSize: 12, className: "drag-icon cursor-move" }) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 200 }, children: t(item.headerText ?? '') }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { flex: 1 }, children: jsxRuntime.jsx(HeaderDisplayTemplate, { item: item, index: index }) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 80, textAlign: 'center' }, children: jsxRuntime.jsx(VisibleTemplate, { item: item, index: index }) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 100 }, children: jsxRuntime.jsx(FixColumnTemplate, { item: item, index: index }) }), jsxRuntime.jsx("div", { className: "r-setting-cell", style: { width: 110 }, children: jsxRuntime.jsx(WidthColumnTemplate, { item: item, index: index }) })] }) }));
+                            }) }) })] }), jsxRuntime.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: [jsxRuntime.jsx("div", { children: settingColumns?.updatedDate && (jsxRuntime.jsxs("p", { children: [jsxRuntime.jsxs("strong", { children: [t('Update date'), ": "] }), " ", jsxRuntime.jsx("span", { children: settingColumns.updatedDate ? formatDateTime(settingColumns.updatedDate, 'DD/MM/yyyy HH:mm') : '' }), jsxRuntime.jsxs("strong", { className: "ms-2", children: [t('Editor'), ": "] }), " ", jsxRuntime.jsx("span", { children: settingColumns.updatedByName })] })) }), jsxRuntime.jsxs("div", { children: [resetDefaultColumns && (jsxRuntime.jsx(Button$1$1, { color: "primary", onClick: () => messageBoxConfirm(t, handleResetColumns, {}, 'Do you want to reset the default settings?'), className: "me-1", children: t('Reset') })), jsxRuntime.jsx(Button$1$1, { color: "primary", onClick: handleSubmit, className: "me-1", children: t('Confirm') }), jsxRuntime.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 }) => {
@@ -68792,7 +68795,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
         setContentColumns(rs.flat);
         return rs;
     }, [columns, settingColumns]);
-    const optionGroupColumns = React$5.useMemo(() => contentColumns.filter((x) => !groupColumns.includes(x.field)).map((x) => ({ ...x, headerDisplay: t(x.headerDisplay ?? x.headerText) })), [groupColumns, contentColumns]);
+    const optionGroupColumns = React$5.useMemo(() => contentColumns.filter((x) => !groupColumns.includes(x.field)).map((x) => ({ ...x, headerDisplay: t(x.columnGroupText ?? x.headerDisplay ?? x.headerText) })), [groupColumns, contentColumns]);
     const firstColSpan = React$5.useMemo(() => {
         let count = 0;
         let index = 3;
@@ -69045,10 +69048,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];