react-table-edit 1.4.39 → 1.4.40

package/dist/component/sidebar-setting-column/index.d.ts

@@ -4,6 +4,8 @@ export interface IFPropsDetail {
     setColumn: any;
     openSidebar: boolean;
     handleSidebar: any;
+    resetDefaultColumns?: () => void;
+    formatSetting?: any;
 }
 declare const SidebarSetColumn: (props: IFPropsDetail) => import("react/jsx-runtime").JSX.Element;
 export default SidebarSetColumn;

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

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction } from "react";
-import { IColumnTable, IFTableEditButton, IFTableEditFormat, IFTableEditPaging, IFTableEditSearchSetting, IFTableEditToolbar } from "../type";
+import { IColumnTable, IFSettingColumns, IFTableEditButton, IFTableEditFormat, IFTableEditPaging, IFTableEditSearchSetting, IFTableEditToolbar } from "../type";
 export type IFTableEditProps = {
     idTable?: string;
     dataSource: any[];
@@ -24,26 +24,15 @@ export type IFTableEditProps = {
     allowFilter?: boolean;
     allowOrder?: boolean;
     optionsFilter?: any;
-    settingColumns?: {
-        field: string;
-        headerText?: string;
-        visible?: boolean;
-        fixedType?: "left" | "right";
-        width?: number | string;
-    }[];
+    settingColumns?: IFSettingColumns[];
     setSelectedItem?: Dispatch<SetStateAction<any>>;
     commandClick?: (data: any) => void;
     handleSelect?: (data: any) => void;
     dataSourceChange?: (data: any[]) => void;
     rowChange?: (row: any, indexRow: number, field: string) => void;
     onDuplicate?: (newData: any, index: number) => void;
-    saveSettingColumn?: (data: {
-        field: string;
-        headerText?: string;
-        visible?: boolean;
-        fixedType?: "left" | "right";
-        width?: number | string;
-    }[]) => void;
+    saveSettingColumn?: (data: IFSettingColumns[]) => void;
+    resetDefaultColumns?: () => void;
 };
 type IFRef = {
     refeshFocusRow: any;

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

@@ -31,6 +31,19 @@ export type IFToolbarOptions = {
     /** Template toolbar */
     template: any;
 };
+/** Cấu hình thiết lập bảng */
+export type IFSettingColumns = {
+    /** Tên thuộc tính */
+    field: string;
+    /** Tiêu đề hiển thị ở header */
+    headerText?: string;
+    /** Có hiển thị không */
+    visible?: boolean;
+    /** Cố định trái/phải */
+    fixedType?: "left" | "right";
+    /** Chiều rộng cột */
+    width?: number | string;
+};
 /** Cấu hình phần tử form khi dùng loại cột `form` */
 export type ISettingFormElement = {
     /** Schema định nghĩa cấu trúc form */

package/dist/index.d.ts

@@ -35,6 +35,19 @@ type IFToolbarOptions = {
     /** Template toolbar */
     template: any;
 };
+/** Cấu hình thiết lập bảng */
+type IFSettingColumns = {
+    /** Tên thuộc tính */
+    field: string;
+    /** Tiêu đề hiển thị ở header */
+    headerText?: string;
+    /** Có hiển thị không */
+    visible?: boolean;
+    /** Cố định trái/phải */
+    fixedType?: "left" | "right";
+    /** Chiều rộng cột */
+    width?: number | string;
+};
 /** Cấu hình phần tử form khi dùng loại cột `form` */
 type ISettingFormElement = {
     /** Schema định nghĩa cấu trúc form */
@@ -412,26 +425,15 @@ type IFTableEditProps = {
     allowFilter?: boolean;
     allowOrder?: boolean;
     optionsFilter?: any;
-    settingColumns?: {
-        field: string;
-        headerText?: string;
-        visible?: boolean;
-        fixedType?: "left" | "right";
-        width?: number | string;
-    }[];
+    settingColumns?: IFSettingColumns[];
     setSelectedItem?: Dispatch<SetStateAction<any>>;
     commandClick?: (data: any) => void;
     handleSelect?: (data: any) => void;
     dataSourceChange?: (data: any[]) => void;
     rowChange?: (row: any, indexRow: number, field: string) => void;
     onDuplicate?: (newData: any, index: number) => void;
-    saveSettingColumn?: (data: {
-        field: string;
-        headerText?: string;
-        visible?: boolean;
-        fixedType?: "left" | "right";
-        width?: number | string;
-    }[]) => void;
+    saveSettingColumn?: (data: IFSettingColumns[]) => void;
+    resetDefaultColumns?: () => void;
 };
 type IFRef = {
     refeshFocusRow: any;
@@ -743,4 +745,4 @@ type TableViewProps = {
 declare const TableView: React__default.FC<TableViewProps>;
 
 export { ExportExcelComponent, FindNodeByPath, ImportExcelComponent, InputStyleComponent, SelectTable, SelectTableTree, TableView, TabsMenuComponent, Wizard, calculateTableStructure, checkDecimalSeparator, checkThousandSeparator, TableEdit as default, formartNumberic, formatDateTime, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, roundNumber, useOnClickOutside };
-export type { FromItemsField, IColumnTable, IColumnsAgg, ICommandItem, IFColumnSelectTable, IFColumnSelectTableTree, IFCurrentPage, IFCurrentPageConfig, IFFilterTable, IFOrderTable, IFPageSize, IFPropsDetail, IFTableEditButton, IFTableEditFormat, IFTableEditPaging, IFTableEditSearchSetting, IFTableEditToolbar, IFTableSelectFormat, IFTableTreeSelectFormat, IFToolbarOptions, IHeaderColumnTable, ISettingFormElement, ISettingNumericElement, ISettingSelectElement };
+export type { FromItemsField, IColumnTable, IColumnsAgg, ICommandItem, IFColumnSelectTable, IFColumnSelectTableTree, IFCurrentPage, IFCurrentPageConfig, IFFilterTable, IFOrderTable, IFPageSize, IFPropsDetail, IFSettingColumns, IFTableEditButton, IFTableEditFormat, IFTableEditPaging, IFTableEditSearchSetting, IFTableEditToolbar, IFTableSelectFormat, IFTableTreeSelectFormat, IFToolbarOptions, IHeaderColumnTable, ISettingFormElement, ISettingNumericElement, ISettingSelectElement };

package/dist/index.js

@@ -17724,12 +17724,15 @@ const calculateTableStructure = (columns, settingColumns) => {
                 const column = settingColumns.find((y) => y.field === cell.field);
                 if (column) {
                     cell.visible = column.visible;
-                    if (column.fixedType) {
+                    if (column.fixedType !== undefined && column.fixedType !== null) {
                         cell.fixedType = column.fixedType;
                     }
-                    if (column.width) {
+                    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;
@@ -17737,24 +17740,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;
@@ -40369,7 +40372,7 @@ const Sidebar = (props) => {
 };
 
 const SidebarSetColumn = (props) => {
-    const { column, setColumn, openSidebar, handleSidebar } = props;
+    const { column, setColumn, openSidebar, handleSidebar, resetDefaultColumns, formatSetting } = props;
     const { t } = reactI18next.useTranslation();
     const [dataSource, setDataSource] = React$5.useState([]);
     const [indexFocus, setIndexFocus] = React$5.useState();
@@ -40400,46 +40403,83 @@ const SidebarSetColumn = (props) => {
             window.removeEventListener("resize", handleWindowResize);
         };
     }, []);
+    const handleResetColumns = () => {
+        if (resetDefaultColumns) {
+            resetDefaultColumns();
+        }
+        handleSidebar();
+        setDataSource([]);
+    };
     const renderFooterButtons = () => {
-        return (jsxRuntime.jsxs(React$5.Fragment, { children: [jsxRuntime.jsx(Button$1, { color: "primary", onClick: handleSubmit, className: "me-1", children: t("Confirm") }), jsxRuntime.jsx(Button$1, { color: "secondary", onClick: handleCancel, outline: true, children: t("Close") })] }));
+        return (jsxRuntime.jsxs(React$5.Fragment, { children: [resetDefaultColumns && jsxRuntime.jsx(Button$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, { color: "primary", onClick: handleSubmit, className: "me-1", children: t("Confirm") }), jsxRuntime.jsx(Button$1, { color: "secondary", onClick: handleCancel, outline: true, children: t("Close") })] }));
     };
     const visibleTemplate = (item, index) => {
-        return (jsxRuntime.jsx(Input$1, { defaultChecked: item.visible ?? true, disabled: item.invisibleDisable, type: "checkbox", style: { height: 18 }, className: " cursor-pointer", onChange: (e) => {
+        return (jsxRuntime.jsx("div", { className: "r-cell-text", children: jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.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 jsxRuntime.jsx(jsxRuntime.Fragment, { children: t(e.headerText) });
-            },
+            template: headerTextTemplate,
             visible: true,
-            width: 175,
-            maxWidth: 200,
-            minWidth: 150
+            width: 200
         },
         {
             field: "",
@@ -40447,9 +40487,7 @@ const SidebarSetColumn = (props) => {
             headerText: "Display",
             textAlign: "center",
             visible: true,
-            width: 100,
-            maxWidth: 120,
-            minWidth: 80
+            width: 80
         },
         {
             field: "",
@@ -40457,18 +40495,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) => {
@@ -40486,10 +40521,6 @@ const SidebarSetColumn = (props) => {
                                             return renderHeaderCol(col, index);
                                         }) }) }), jsxRuntime.jsx("tbody", { className: "r-gridcontent", children: dataSource?.map((row, indexRow) => {
                                         return (jsxRuntime.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 (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && (jsxRuntime.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"
@@ -40507,7 +40538,7 @@ const SidebarSetColumn = (props) => {
                                                             }
                                                         }, children: jsxRuntime.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: jsxRuntime.jsx("div", { className: classNames$2("r-rowcell-content"), children: jsxRuntime.jsx("div", { className: "r-cell-text", children: col.template ? col.template(row, indexRow) : value }) }) }) }, `col-${indexRow}-${indexCol}`)) }, indexCol));
+                                                            }, children: jsxRuntime.jsx("div", { className: classNames$2("r-rowcell-content"), children: col.template && col.template(row, indexRow) }) }) }, `col-${indexRow}-${indexCol}`)) }, indexCol));
                                             }) }, `row-${indexRow}`));
                                     }) })] }) }) }) }), jsxRuntime.jsx("div", { className: "d-flex justify-content-end p-1 ", style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }, children: renderFooterButtons() })] }));
 };
@@ -42839,7 +42870,7 @@ const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleI
 
 const TableEdit = React$5.forwardRef((props, ref) => {
     const { t } = reactI18next.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;
     React$5.useImperativeHandle(ref, () => {
         return {
             refeshFocusRow: handleRefeshRow
@@ -43135,15 +43166,27 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                         }
                     } }));
             default:
-                return (jsxRuntime.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 (jsxRuntime.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) {
@@ -43732,7 +43775,7 @@ const TableEdit = React$5.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 ? (jsxRuntime.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 })) : (jsxRuntime.jsx(jsxRuntime.Fragment, {}))] }), jsxRuntime.jsx(SidebarSetColumn, { handleSidebar: () => {
                     setOpenPopupSetupColumn(!openPopupSetupColumn);
-                }, openSidebar: openPopupSetupColumn, column: [...contentColumns], setColumn: (newColumns) => {
+                }, openSidebar: openPopupSetupColumn, column: [...contentColumns], resetDefaultColumns: resetDefaultColumns, setColumn: (newColumns) => {
                     if (saveSettingColumn) {
                         saveSettingColumn(newColumns.map((x) => ({ field: x.field, headerText: x.headerText, visible: x.visible, fixedType: x.fixedType, width: x.width })));
                     }