react-table-edit 1.4.38 → 1.4.40

package/dist/index.mjs

@@ -17696,8 +17696,15 @@ const calculateTableStructure = (columns, settingColumns) => {
                 const column = settingColumns.find((y) => y.field === cell.field);
                 if (column) {
                     cell.visible = column.visible;
-                    cell.fixedType = column.fixedType;
-                    cell.width = column.width;
+                    if (column.fixedType !== undefined && column.fixedType !== null) {
+                        cell.fixedType = column.fixedType;
+                    }
+                    if (column.width !== undefined && column.width !== null) {
+                        cell.width = column.width;
+                    }
+                    if (column.headerText !== undefined && column.headerText !== null) {
+                        cell.headerText = column.headerText;
+                    }
                 }
                 else {
                     cell.visible = false;
@@ -17705,24 +17712,24 @@ const calculateTableStructure = (columns, settingColumns) => {
             }
             levels[level].push(cell);
             const headerKey = `${level}-${indexCol}`;
-            if (col.fixedType === "left" && col.visible !== false) {
+            if (cell.fixedType === "left" && cell.visible !== false) {
                 objHeaderWidthFixLeft[headerKey] = leftTotal;
             }
             if (!hasChildren) {
                 const index = flat.length;
-                const width = col.width ?? 40;
+                const width = cell.width ?? 40;
                 cell.index = index;
                 flat.push(cell);
-                if (col.fixedType === "left" && col.visible !== false) {
+                if (cell.fixedType === "left" && cell.visible !== false) {
                     objWidthFixLeft[index] = leftTotal;
                     leftTotal += width;
                 }
-                if (col.fixedType === "right" && col.in !== false) {
+                if (cell.fixedType === "right" && cell.visible !== false) {
                     rightTotal -= width;
                     objWidthFixRight[index] = rightTotal;
                 }
             }
-            if (col.fixedType === "right" && col.visible !== false) {
+            if (cell.fixedType === "right" && cell.visible !== false) {
                 objHeaderWidthFixRight[headerKey] = rightTotal;
             }
             return colspanSum + colspan;
@@ -40337,7 +40344,7 @@ const Sidebar = (props) => {
 };
 
 const SidebarSetColumn = (props) => {
-    const { column, setColumn, openSidebar, handleSidebar } = props;
+    const { column, setColumn, openSidebar, handleSidebar, resetDefaultColumns, formatSetting } = props;
     const { t } = useTranslation();
     const [dataSource, setDataSource] = useState([]);
     const [indexFocus, setIndexFocus] = useState();
@@ -40368,46 +40375,83 @@ const SidebarSetColumn = (props) => {
             window.removeEventListener("resize", handleWindowResize);
         };
     }, []);
+    const handleResetColumns = () => {
+        if (resetDefaultColumns) {
+            resetDefaultColumns();
+        }
+        handleSidebar();
+        setDataSource([]);
+    };
     const renderFooterButtons = () => {
-        return (jsxs(Fragment, { children: [jsx(Button$1, { color: "primary", onClick: handleSubmit, className: "me-1", children: t("Confirm") }), jsx(Button$1, { color: "secondary", onClick: handleCancel, outline: true, children: t("Close") })] }));
+        return (jsxs(Fragment, { children: [resetDefaultColumns && jsx(Button$1, { color: "primary", onClick: () => messageBoxConfirm(t, handleResetColumns, {}, 'Do you want to reset the default settings?'), className: "me-1", children: t("Reset") }), jsx(Button$1, { color: "primary", onClick: handleSubmit, className: "me-1", children: t("Confirm") }), jsx(Button$1, { color: "secondary", onClick: handleCancel, outline: true, children: t("Close") })] }));
     };
     const visibleTemplate = (item, index) => {
-        return (jsx(Input$1, { defaultChecked: item.visible ?? true, disabled: item.invisibleDisable, type: "checkbox", style: { height: 18 }, className: " cursor-pointer", onChange: (e) => {
+        return (jsx("div", { className: "r-cell-text", children: jsx(Input$1, { defaultChecked: item.visible ?? true, type: "checkbox", style: { height: 18 }, className: " cursor-pointer", onChange: (e) => {
+                    if (dataSource) {
+                        dataSource[index].visible = e.target.checked;
+                        setDataSource(dataSource);
+                    }
+                } }) }));
+    };
+    const headerTextTemplate = (item, index) => {
+        let textValue = t(item.headerText);
+        return (jsx(Input$1, { defaultValue: textValue, className: classNames$2("border-0 rounded-0 input-element"), onChange: (e) => {
+                textValue = e.target?.value;
+            }, onBlur: () => {
                 if (dataSource) {
-                    dataSource[index].visible = e.target.checked;
+                    dataSource[index].headerText = textValue;
                     setDataSource(dataSource);
                 }
             } }));
     };
     const fixColumnTemplate = (item, index) => {
-        return (jsx(Input$1, { defaultChecked: item.fixedType === "left" || item.fixedType === "right", type: "checkbox", style: { height: 18 }, className: " cursor-pointer", onChange: (e) => {
+        const optionsFix = [{ label: 'Trái', value: 'left' }, { label: 'Phải', value: 'right' }];
+        return (jsx(SelectTable, { options: optionsFix, textAlign: "left", isClearable: true, onChange: (val) => {
                 if (dataSource) {
-                    if (e.target.checked) {
-                        if (index * 2 <= dataSource.length) {
-                            dataSource[index].fixedType = "left";
-                        }
-                        else {
-                            dataSource[index].fixedType = "right";
-                        }
-                    }
-                    else {
-                        dataSource[index].fixedType = undefined;
+                    dataSource[index].fixedType = val?.value;
+                    setDataSource([...dataSource]);
+                }
+            }, value: item.fixedType ? optionsFix.find(x => x.value === item.fixedType) : undefined }));
+    };
+    const widthColumnTemplate = (item, index) => {
+        const numericFormatProps = {
+            value: !isNullOrUndefined(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 ?? "0");
+        return (jsx(NumericFormat, { style: { textAlign: 'right', height: 29 }, ...numericFormatProps, defaultValue: formartNumberic(item.width, formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", 0), className: classNames$2("form-control border-0 rounded-0 input-numeric"), onValueChange: (values) => {
+                floatValue = values?.floatValue;
+            }, onFocus: (e) => {
+                e.target.setSelectionRange(0, e.target.innerText.length - 1);
+            }, onBlur: () => {
+                if (floatValue !== item.width) {
+                    if (dataSource) {
+                        dataSource[index].width = !isNaN(floatValue) ? floatValue : 0;
+                        setDataSource(dataSource);
                     }
-                    setDataSource(dataSource);
                 }
             } }));
     };
     const columns = [
+        {
+            field: "",
+            headerText: "STT",
+            template: (row, index) => {
+                return index + 1;
+            },
+            textAlign: 'center',
+            visible: true,
+            width: 50
+        },
         {
             field: "headerText",
             headerText: "Column name",
-            template: (e) => {
-                return jsx(Fragment$1, { children: t(e.headerText) });
-            },
+            template: headerTextTemplate,
             visible: true,
-            width: 175,
-            maxWidth: 200,
-            minWidth: 150
+            width: 200
         },
         {
             field: "",
@@ -40415,9 +40459,7 @@ const SidebarSetColumn = (props) => {
             headerText: "Display",
             textAlign: "center",
             visible: true,
-            width: 100,
-            maxWidth: 120,
-            minWidth: 80
+            width: 80
         },
         {
             field: "",
@@ -40425,18 +40467,15 @@ const SidebarSetColumn = (props) => {
             headerText: "Fix the column",
             textAlign: "center",
             visible: true,
-            width: 100,
-            maxWidth: 120,
-            minWidth: 80
+            width: 80
         },
         {
             field: "width",
             headerText: "Column width",
             textAlign: "right",
             visible: true,
-            width: 100,
-            maxWidth: 120,
-            minWidth: 80
+            template: widthColumnTemplate,
+            width: 100
         }
     ];
     const renderHeaderCol = (col, indexCol) => {
@@ -40454,10 +40493,6 @@ const SidebarSetColumn = (props) => {
                                             return renderHeaderCol(col, index);
                                         }) }) }), jsx("tbody", { className: "r-gridcontent", children: dataSource?.map((row, indexRow) => {
                                         return (jsx("tr", { className: classNames$2("r-row", { "last-row": indexRow === dataSource.length - 1 }, { "fisrt-row": indexRow === 0 }), children: columns.map((col, indexCol) => {
-                                                let value = row[col.field];
-                                                if (col.type === "numeric" || (col.typeCondition && col.typeCondition(row) === "numeric")) {
-                                                    value = formartNumberic(row[col.field], ",", ".", col.numericSettings?.fraction, true) ?? 0;
-                                                }
                                                 return (jsx(Fragment, { children: col.visible !== false && (jsx("td", { className: classNames$2(`r-rowcell fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": indexFocus === indexRow }), style: {
                                                             padding: 0,
                                                             textAlign: col.textAlign ? col.textAlign : "left"
@@ -40475,7 +40510,7 @@ const SidebarSetColumn = (props) => {
                                                             }
                                                         }, children: jsx("div", { className: classNames$2("r-rowcell-div"), style: {
                                                                 width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : "auto"
-                                                            }, children: jsx("div", { className: classNames$2("r-rowcell-content"), children: jsx("div", { className: "r-cell-text", children: col.template ? col.template(row, indexRow) : value }) }) }) }, `col-${indexRow}-${indexCol}`)) }, indexCol));
+                                                            }, children: jsx("div", { className: classNames$2("r-rowcell-content"), children: col.template && col.template(row, indexRow) }) }) }, `col-${indexRow}-${indexCol}`)) }, indexCol));
                                             }) }, `row-${indexRow}`));
                                     }) })] }) }) }) }), jsx("div", { className: "d-flex justify-content-end p-1 ", style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }, children: renderFooterButtons() })] }));
 };
@@ -42807,7 +42842,7 @@ const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleI
 
 const TableEdit = forwardRef((props, ref) => {
     const { t } = useTranslation();
-    const { idTable, dataSource, columns, pagingSetting, setDataSource, height, maxHeight, minHeight, defaultValue, toolbarSetting, searchSetting, selectedItem, selectEnable, editDisable, addDisable, buttonSetting, formatSetting, haveSum, isMulti, disableAutoKey, commandClick, dataSourceChange, rowChange, setSelectedItem, handleSelect, onDuplicate, saveSettingColumn, allowFilter = true, allowOrder, settingColumns, optionsFilter } = props;
+    const { idTable, dataSource, columns, pagingSetting, setDataSource, height, maxHeight, minHeight, defaultValue, toolbarSetting, searchSetting, selectedItem, selectEnable, editDisable, addDisable, buttonSetting, formatSetting, haveSum, isMulti, disableAutoKey, commandClick, dataSourceChange, rowChange, setSelectedItem, handleSelect, onDuplicate, saveSettingColumn, allowFilter = true, allowOrder, settingColumns, optionsFilter, resetDefaultColumns } = props;
     useImperativeHandle(ref, () => {
         return {
             refeshFocusRow: handleRefeshRow
@@ -42820,7 +42855,6 @@ const TableEdit = forwardRef((props, ref) => {
     const [searchTerm, setSearchTerm] = useState("");
     const [orderBy, setOrderBy] = useState([]);
     const [filterBy, setFilterBy] = useState([]);
-    const [refreshColumns, setRefreshColumns] = useState(false);
     const tableElement = useRef(null);
     const gridRef = useRef(null);
     const totalCount = dataSource.length;
@@ -42835,7 +42869,7 @@ const TableEdit = forwardRef((props, ref) => {
     }, [dataSource]);
     const { levels: headerColumns, flat: contentColumns, flatVisble, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, objHeaderWidthFixLeft, objHeaderWidthFixRight, indexFirstEdit: indexFirstEdit, indexLastEdit: indexLastEdit } = useMemo(() => {
         return calculateTableStructure(columns, settingColumns);
-    }, [columns, settingColumns, refreshColumns]);
+    }, [columns, settingColumns]);
     const handleRefeshRow = () => {
         setRefreshRow(true);
         setTimeout(() => {
@@ -43104,15 +43138,27 @@ const TableEdit = forwardRef((props, ref) => {
                         }
                     } }));
             default:
-                return (jsx(Input$1, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, style: { textAlign: col.textAlign, height: 29 }, value: isNullOrUndefined(row[col.field]) ? "" : row[col.field], className: classNames$2("border-0 rounded-0 input-element", { "is-invalid": col.validate && col.validate(row[col.field], row) }), onChange: (val) => {
-                        if (row[col.field] != val.target?.value) {
-                            row[col.field] = val.target?.value;
+                let textValue = row[col.field] ?? '';
+                return (jsx(Input$1, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, style: { textAlign: col.textAlign, height: 29 }, defaultValue: textValue, className: classNames$2("border-0 rounded-0 input-element", { "is-invalid": col.validate && col.validate(row[col.field], row) }), onChange: (val) => {
+                        textValue = val.target?.value;
+                    }, onBlur: () => {
+                        if (row[col.field] != textValue) {
+                            row[col.field] = textValue;
                             if (col.callback) {
-                                col.callback(val.target.value, indexRow, row);
+                                col.callback(textValue, indexRow, row);
                             }
                             handleDataChange(row, col, indexRow);
                         }
                     }, onKeyDown: (e) => {
+                        if (e.key === "ArrowDown" || e.key === "NumpadEnter" || e.key === "ArrowUp" || e.key === "Enter" || e.key === "Tab") {
+                            if (row[col.field] != textValue) {
+                                row[col.field] = textValue;
+                                if (col.callback) {
+                                    col.callback(textValue, indexRow, row);
+                                }
+                                handleDataChange(row, col, indexRow);
+                            }
+                        }
                         checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
                     }, onPaste: (e) => {
                         if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable && !col.disablePaste) {
@@ -43674,15 +43720,9 @@ const TableEdit = forwardRef((props, ref) => {
                                                             }, changeOrder: (val) => {
                                                                 setOrderBy([...val]);
                                                             }, columns: contentColumns, setColumns: (newColumns) => {
-                                                                newColumns.forEach((x) => {
-                                                                    const column = columns.find((y) => y.field === x.field);
-                                                                    if (column) {
-                                                                        column.visible = x.visible;
-                                                                        column.fixedType = x.fixedType;
-                                                                        column.width = x.width;
-                                                                    }
-                                                                });
-                                                                setRefreshColumns(!refreshColumns);
+                                                                if (saveSettingColumn) {
+                                                                    saveSettingColumn(newColumns.map((x) => ({ field: x.field, headerText: x.headerText, visible: x.visible, fixedType: x.fixedType, width: x.width })));
+                                                                }
                                                             }, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, totalCount: totalCount }, `header-${indexParent}-${index}`));
                                                     }) }, `header-${-indexParent}`));
                                             }) }), jsx("tbody", { className: "r-gridcontent", role: "rowgroup", children: dataSource.map((row, indexRow) => {
@@ -43707,20 +43747,10 @@ const TableEdit = forwardRef((props, ref) => {
                                     handleDeleteAll(t, messageBoxConfirmDelete, setIndexFocus, changeDataSource, editDisable, addDisable, toolbarSetting, buttonSetting);
                                 }, setOpenPopupSetupColumn: setOpenPopupSetupColumn, indexFocus: indexFocus, editDisable: editDisable, addDisable: addDisable, buttonSetting: buttonSetting, toolbarSetting: toolbarSetting, headerColumns: headerColumns, t: t }))] }), pagingSetting?.allowPaging ? (jsx(PagingComponent, { onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: pagingClient ? totalCount : pagingSetting?.totalItem ?? 0, onChangePageSize: onChangePageSize })) : (jsx(Fragment$1, {}))] }), jsx(SidebarSetColumn, { handleSidebar: () => {
                     setOpenPopupSetupColumn(!openPopupSetupColumn);
-                }, openSidebar: openPopupSetupColumn, column: [...contentColumns], setColumn: (newColumns) => {
+                }, openSidebar: openPopupSetupColumn, column: [...contentColumns], resetDefaultColumns: resetDefaultColumns, setColumn: (newColumns) => {
                     if (saveSettingColumn) {
-                        console.log(newColumns);
                         saveSettingColumn(newColumns.map((x) => ({ field: x.field, headerText: x.headerText, visible: x.visible, fixedType: x.fixedType, width: x.width })));
                     }
-                    newColumns.forEach((x) => {
-                        const column = columns.find((y) => y.field === x.field);
-                        if (column) {
-                            column.visible = x.visible;
-                            column.fixedType = x.fixedType;
-                            column.width = x.width;
-                        }
-                    });
-                    setRefreshColumns(!refreshColumns);
                 } })] }));
 });