react-table-edit 1.2.3 → 1.2.5

package/dist/index.d.mts

@@ -16,6 +16,14 @@ type IFColumnSelectTable = {
     maxWidth?: number;
     minWidth?: number;
 };
+type IFTableSelectFormat = {
+    dateFormat?: string;
+    decimalSeparator?: string;
+    thousandSeparator?: string;
+    colorNegative?: string;
+    prefixNegative?: string;
+    suffixNegative?: string;
+};
 type Props$1 = {
     id?: string;
     component?: any;
@@ -39,12 +47,11 @@ type Props$1 = {
     noHeader?: boolean;
     maxHeight?: number;
     columns?: IFColumnSelectTable[];
-    decimalSeparator?: string;
-    thousandSeparator?: string;
     isClearable?: boolean;
     isDisabled?: boolean;
     showFooter?: boolean;
     onPaste?: any;
+    formatSetting?: IFTableSelectFormat;
 };
 declare const SelectTable: react__default.ForwardRefExoticComponent<Props$1 & react__default.RefAttributes<unknown>>;
 
@@ -96,6 +103,7 @@ type ISettingNumericElement = {
     min?: number;
     max?: number;
     fraction?: number;
+    allowNegative?: boolean;
 };
 type IColumnTable = {
     field: string;
@@ -159,6 +167,14 @@ type IFTableEditSearchSetting = {
     keyField?: string[];
     setSearchTerm?: Dispatch<SetStateAction<string>>;
 };
+type IFTableEditFormat = {
+    dateFormat?: string;
+    decimalSeparator?: string;
+    thousandSeparator?: string;
+    colorNegative?: string;
+    prefixNegative?: string;
+    suffixNegative?: string;
+};
 type IFTableEditProps = {
     idTable?: string;
     dataSource: any[];
@@ -176,11 +192,10 @@ type IFTableEditProps = {
     selectedItem?: any;
     setSelectedItem?: Dispatch<SetStateAction<any>>;
     isMulti?: boolean;
-    haveSum?: boolean;
     editDisable?: boolean;
     addDisable?: boolean;
-    decimalSeparator?: string;
-    thousandSeparator?: string;
+    haveSum?: boolean;
+    formatSetting?: IFTableEditFormat;
     pagingSetting?: IFTableEditPaging;
     buttonSetting?: IFTableEditButton;
     toolbarSetting?: IFTableEditToolbar;
@@ -248,9 +263,7 @@ declare const generateUUID: () => string;
  * @param isDone đã nhập xong
  * @returns
  */
-declare const objSymbolDecimal: any;
-declare const objSymbolThousand: any;
-declare const formartNumberic: (str: string | number, decimalSeparator: string, thousandSeparator: string, fraction?: number, isDone?: boolean) => string;
+declare const formartNumberic: (str: string | number, decimalSeparator: string, thousandSeparator: string, fraction?: number, isDone?: boolean, haveNegative?: boolean) => string;
 declare const roundNumber: (num: number, fraction: number) => number;
 
 type IFDataProps = {
@@ -278,6 +291,14 @@ type IFColumnSelectTableTree = {
     maxWidth?: number;
     minWidth?: number;
 };
+type IFTableTreeSelectFormat = {
+    dateFormat?: string;
+    decimalSeparator?: string;
+    thousandSeparator?: string;
+    colorNegative?: string;
+    prefixNegative?: string;
+    suffixNegative?: string;
+};
 type Props = {
     id?: string;
     component?: any;
@@ -301,13 +322,12 @@ type Props = {
     noHeader?: boolean;
     maxHeight?: number;
     columns?: IFColumnSelectTableTree[];
-    decimalSeparator?: string;
     fieldChildren?: string;
-    thousandSeparator?: string;
     isClearable?: boolean;
     isDisabled?: boolean;
     showFooter?: boolean;
     selectChilds?: boolean;
+    formatSetting?: IFTableTreeSelectFormat;
     onPaste?: any;
 };
 declare const SelectTableTree: react__default.ForwardRefExoticComponent<Props & react__default.RefAttributes<unknown>>;
@@ -335,4 +355,4 @@ interface IFDataInputStyle {
 }
 declare const InputStyleComponent: (props: IFDataInputStyle) => react_jsx_runtime.JSX.Element;
 
-export { type FromItemsField, type IColumnTable, type ICommandItem, type IFColumnSelectTable, type IFColumnSelectTableTree, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditButton, type IFTableEditPaging, type IFTableEditProps, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFToolbarOptions, type IHeaderColumnTable, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, InputStyleComponent, SelectTable, SelectTableTree, TabsMenuComponent, checkDecimalSeparator, checkThousandSeparator, TableEdit as default, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, objSymbolDecimal, objSymbolThousand, roundNumber, useOnClickOutside };
+export { type FromItemsField, type IColumnTable, type ICommandItem, type IFColumnSelectTable, type IFColumnSelectTableTree, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditButton, type IFTableEditFormat, type IFTableEditPaging, type IFTableEditProps, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFTableSelectFormat, type IFTableTreeSelectFormat, type IFToolbarOptions, type IHeaderColumnTable, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, InputStyleComponent, SelectTable, SelectTableTree, TabsMenuComponent, checkDecimalSeparator, checkThousandSeparator, TableEdit as default, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, roundNumber, useOnClickOutside };

package/dist/index.d.ts

@@ -16,6 +16,14 @@ type IFColumnSelectTable = {
     maxWidth?: number;
     minWidth?: number;
 };
+type IFTableSelectFormat = {
+    dateFormat?: string;
+    decimalSeparator?: string;
+    thousandSeparator?: string;
+    colorNegative?: string;
+    prefixNegative?: string;
+    suffixNegative?: string;
+};
 type Props$1 = {
     id?: string;
     component?: any;
@@ -39,12 +47,11 @@ type Props$1 = {
     noHeader?: boolean;
     maxHeight?: number;
     columns?: IFColumnSelectTable[];
-    decimalSeparator?: string;
-    thousandSeparator?: string;
     isClearable?: boolean;
     isDisabled?: boolean;
     showFooter?: boolean;
     onPaste?: any;
+    formatSetting?: IFTableSelectFormat;
 };
 declare const SelectTable: react__default.ForwardRefExoticComponent<Props$1 & react__default.RefAttributes<unknown>>;
 
@@ -96,6 +103,7 @@ type ISettingNumericElement = {
     min?: number;
     max?: number;
     fraction?: number;
+    allowNegative?: boolean;
 };
 type IColumnTable = {
     field: string;
@@ -159,6 +167,14 @@ type IFTableEditSearchSetting = {
     keyField?: string[];
     setSearchTerm?: Dispatch<SetStateAction<string>>;
 };
+type IFTableEditFormat = {
+    dateFormat?: string;
+    decimalSeparator?: string;
+    thousandSeparator?: string;
+    colorNegative?: string;
+    prefixNegative?: string;
+    suffixNegative?: string;
+};
 type IFTableEditProps = {
     idTable?: string;
     dataSource: any[];
@@ -176,11 +192,10 @@ type IFTableEditProps = {
     selectedItem?: any;
     setSelectedItem?: Dispatch<SetStateAction<any>>;
     isMulti?: boolean;
-    haveSum?: boolean;
     editDisable?: boolean;
     addDisable?: boolean;
-    decimalSeparator?: string;
-    thousandSeparator?: string;
+    haveSum?: boolean;
+    formatSetting?: IFTableEditFormat;
     pagingSetting?: IFTableEditPaging;
     buttonSetting?: IFTableEditButton;
     toolbarSetting?: IFTableEditToolbar;
@@ -248,9 +263,7 @@ declare const generateUUID: () => string;
  * @param isDone đã nhập xong
  * @returns
  */
-declare const objSymbolDecimal: any;
-declare const objSymbolThousand: any;
-declare const formartNumberic: (str: string | number, decimalSeparator: string, thousandSeparator: string, fraction?: number, isDone?: boolean) => string;
+declare const formartNumberic: (str: string | number, decimalSeparator: string, thousandSeparator: string, fraction?: number, isDone?: boolean, haveNegative?: boolean) => string;
 declare const roundNumber: (num: number, fraction: number) => number;
 
 type IFDataProps = {
@@ -278,6 +291,14 @@ type IFColumnSelectTableTree = {
     maxWidth?: number;
     minWidth?: number;
 };
+type IFTableTreeSelectFormat = {
+    dateFormat?: string;
+    decimalSeparator?: string;
+    thousandSeparator?: string;
+    colorNegative?: string;
+    prefixNegative?: string;
+    suffixNegative?: string;
+};
 type Props = {
     id?: string;
     component?: any;
@@ -301,13 +322,12 @@ type Props = {
     noHeader?: boolean;
     maxHeight?: number;
     columns?: IFColumnSelectTableTree[];
-    decimalSeparator?: string;
     fieldChildren?: string;
-    thousandSeparator?: string;
     isClearable?: boolean;
     isDisabled?: boolean;
     showFooter?: boolean;
     selectChilds?: boolean;
+    formatSetting?: IFTableTreeSelectFormat;
     onPaste?: any;
 };
 declare const SelectTableTree: react__default.ForwardRefExoticComponent<Props & react__default.RefAttributes<unknown>>;
@@ -335,4 +355,4 @@ interface IFDataInputStyle {
 }
 declare const InputStyleComponent: (props: IFDataInputStyle) => react_jsx_runtime.JSX.Element;
 
-export { type FromItemsField, type IColumnTable, type ICommandItem, type IFColumnSelectTable, type IFColumnSelectTableTree, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditButton, type IFTableEditPaging, type IFTableEditProps, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFToolbarOptions, type IHeaderColumnTable, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, InputStyleComponent, SelectTable, SelectTableTree, TabsMenuComponent, checkDecimalSeparator, checkThousandSeparator, TableEdit as default, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, objSymbolDecimal, objSymbolThousand, roundNumber, useOnClickOutside };
+export { type FromItemsField, type IColumnTable, type ICommandItem, type IFColumnSelectTable, type IFColumnSelectTableTree, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditButton, type IFTableEditFormat, type IFTableEditPaging, type IFTableEditProps, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFTableSelectFormat, type IFTableTreeSelectFormat, type IFToolbarOptions, type IHeaderColumnTable, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, InputStyleComponent, SelectTable, SelectTableTree, TabsMenuComponent, checkDecimalSeparator, checkThousandSeparator, TableEdit as default, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, roundNumber, useOnClickOutside };

package/dist/index.js

@@ -48,8 +48,6 @@ __export(src_exports, {
   messageHtmlBoxError: () => messageHtmlBoxError,
   notificationError: () => notificationError,
   notificationSuccess: () => notificationSuccess,
-  objSymbolDecimal: () => objSymbolDecimal,
-  objSymbolThousand: () => objSymbolThousand,
   roundNumber: () => roundNumber,
   useOnClickOutside: () => useOnClickOutside
 });
@@ -314,9 +312,7 @@ var generateUUID = () => {
     return (c === "x" ? r : 3).toString(16);
   });
 };
-var objSymbolDecimal = { 0: ",", 1: "." };
-var objSymbolThousand = { 1: ",", 0: "." };
-var formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 10, isDone) => {
+var formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 10, isDone, haveNegative = true) => {
   if (isDone) {
     str = roundNumber(Number(str), fraction);
   }
@@ -332,7 +328,6 @@ var formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 10,
       if (arr[0][0] === "-") {
         flagNegative = true;
         arr[0] = arr[0].substring(1, arr[0].length);
-        console.log(arr[0].substring(1, arr[0].length));
       }
       let count = 0;
       for (let i = arr[0].length - 2; i >= 0; i--) {
@@ -347,7 +342,7 @@ var formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 10,
       if (isDone) {
         flag = (arr[1]?.substring(0, fraction) ?? "") !== "";
       }
-      if (flagNegative) {
+      if (flagNegative && haveNegative) {
         arr[0] = "-".concat(arr[0]);
       }
       return flag ? `${arr[0]}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ""}` : arr[0];
@@ -624,8 +619,6 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
     textAlign,
     options,
     columns,
-    decimalSeparator,
-    thousandSeparator,
     onChange,
     value,
     fieldValue,
@@ -641,6 +634,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
     isDisabled,
     showFooter,
     footerComponent,
+    formatSetting,
     onPaste
   } = props;
   const selectTableRef = (0, import_react6.useRef)();
@@ -919,7 +913,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
           (columns ? columns : defaultColumns).map((col, indexCol) => {
             let valueDisplay = row[col.field];
             if (col.type === "numeric" || col.typeCondition && col.typeCondition(row) === "numeric") {
-              valueDisplay = formartNumberic(row[col.field], decimalSeparator ?? ".", thousandSeparator ?? ",", col.fraction ?? 0, true) ?? 0;
+              valueDisplay = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ".", formatSetting?.thousandSeparator ?? ",", col.fraction ?? 0, true, false) ?? 0;
             } else if (col.type === "date") {
               valueDisplay = valueDisplay ? (0, import_moment.default)(valueDisplay).format("DD/MM/yyyy") : "";
             } else if (col.type === "datetime") {
@@ -965,7 +959,10 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
                     }
                     e.stopPropagation();
                   },
-                  children: col.template ? col.template(row, indexRow) : valueDisplay
+                  children: col.template ? col.template(row, indexRow) : col.type === "numeric" && Number(row[col.field]) < 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
+                    " ",
+                    `${formatSetting?.prefixNegative ?? "-"}${value}${formatSetting?.suffixNegative ?? ""}`
+                  ] }) : valueDisplay
                 },
                 `col-${indexRow}-${indexCol}`
               ),
@@ -2282,8 +2279,6 @@ var SelectTableTree = (0, import_react15.forwardRef)((props, ref) => {
     textAlign,
     options,
     columns,
-    decimalSeparator,
-    thousandSeparator,
     onChange,
     value,
     fieldValue,
@@ -2300,6 +2295,7 @@ var SelectTableTree = (0, import_react15.forwardRef)((props, ref) => {
     showFooter,
     selectChilds,
     footerComponent,
+    formatSetting,
     onPaste
   } = props;
   const selectTableRef = (0, import_react15.useRef)();
@@ -2541,7 +2537,7 @@ var SelectTableTree = (0, import_react15.forwardRef)((props, ref) => {
             (columns ? columns : defaultColumns).map((col, indexCol) => {
               let valueDisplay = row[col.field];
               if (col.type === "numeric" || col.typeCondition && col.typeCondition(row) === "numeric") {
-                valueDisplay = formartNumberic(row[col.field], decimalSeparator ?? ".", thousandSeparator ?? ",", col.fraction ?? 0, true) ?? 0;
+                valueDisplay = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ".", formatSetting?.thousandSeparator ?? ",", col.fraction ?? 0, true) ?? 0;
               } else if (col.type === "date") {
                 valueDisplay = valueDisplay ? (0, import_moment2.default)(valueDisplay).format("DD/MM/yyyy") : "";
               } else if (col.type === "datetime") {
@@ -2611,12 +2607,18 @@ var SelectTableTree = (0, import_react15.forwardRef)((props, ref) => {
                           className: (0, import_classnames13.default)("me-50 r-icon-expand", { "is-open": expanded })
                         }
                       ),
-                      col.template ? col.template(row, indexRow) : valueDisplay
+                      col.template ? col.template(row, indexRow) : col.type === "numeric" && Number(row[col.field]) < 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
+                        " ",
+                        `${formatSetting?.prefixNegative ?? "-"}${value}${formatSetting?.suffixNegative ?? ""}`
+                      ] }) : valueDisplay
                     ]
                   },
                   `col-${indexRow}-${indexCol}`
                 ),
-                checkOverflow(indexRow, indexCol) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_reactstrap10.UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay })
+                checkOverflow(indexRow, indexCol) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_reactstrap10.UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : col.type === "numeric" && Number(row[col.field]) < 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
+                  " ",
+                  `${formatSetting?.prefixNegative ?? "-"}${value}${formatSetting?.suffixNegative ?? ""}`
+                ] }) : valueDisplay })
               ] }, indexCol);
             })
           ]
@@ -2841,7 +2843,6 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
     maxHeight,
     minHeight,
     defaultValue,
-    haveSum,
     toolbarSetting,
     searchSetting,
     setSelectedItem,
@@ -2850,9 +2851,9 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
     editDisable,
     addDisable,
     buttonSetting,
-    decimalSeparator = ",",
-    thousandSeparator = ".",
+    formatSetting,
     handleSelect,
+    haveSum,
     isMulti
   } = props;
   (0, import_react16.useImperativeHandle)(ref, () => {
@@ -3128,8 +3129,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
             component: gridRef,
             columns: col.selectSettings?.columns,
             isClearable: col.selectSettings?.isClearable ?? false,
-            decimalSeparator,
-            thousandSeparator,
+            formatSetting,
             placeholder: t("Select"),
             loadOptions: col.selectSettings?.loadOptions,
             handleAdd: col.selectSettings?.handAddNew,
@@ -3210,11 +3210,10 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
                 component: gridRef,
                 columns: col.selectSettings?.columns,
                 isClearable: col.selectSettings?.isClearable ?? false,
-                decimalSeparator,
-                thousandSeparator,
+                formatSetting,
                 placeholder: t("Select"),
                 loadOptions: col.selectSettings?.loadOptions,
-                handleAdd: col.selectSettings?.handAddNew,
+                handleAdd: () => col.selectSettings?.handAddNew(indexRow, row),
                 fieldChildren: col.selectSettings?.fieldChild ?? "children",
                 selectChilds: col.selectSettings?.selectChilds,
                 showFooter: col.selectSettings?.showFooter,
@@ -3266,9 +3265,9 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
       case "numeric":
         const numericFormatProps = {
           value: !isNullOrUndefined(row[col.field]) ? row[col.field] : "",
-          thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
-          decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
-          // allowNegative: (allowNegative ? allowNegative : configNumber?.allowNegative) ?? false,
+          thousandSeparator: checkThousandSeparator(formatSetting?.thousandSeparator, formatSetting?.decimalSeparator),
+          decimalSeparator: checkDecimalSeparator(formatSetting?.thousandSeparator, formatSetting?.decimalSeparator),
+          allowNegative: col.numericSettings?.allowNegative ?? false,
           decimalScale: col.numericSettings?.fraction ?? 0
         };
         let floatValue = parseFloat(row[col.field]);
@@ -3278,7 +3277,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
             ...numericFormatProps,
-            defaultValue: formartNumberic(row[col.field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction),
+            defaultValue: formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", col.numericSettings?.fraction),
             className: (0, import_classnames14.default)("form-control border-0 rounded-0 input-numeric", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             onValueChange: (values) => {
               floatValue = values?.floatValue;
@@ -3923,7 +3922,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
     } else {
       let value = row[col.field];
       if (col.editType === "numeric" || col.editTypeCondition && col.editTypeCondition(row) === "numeric") {
-        value = formartNumberic(row[col.field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) ?? 0;
+        value = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", col.numericSettings?.fraction, true, false) ?? 0;
       } else if (col.editType === "date") {
         value = value ? (0, import_moment3.default)(value).format("DD/MM/yyyy") : "";
       } else if (col.editType === "datetime") {
@@ -3981,13 +3980,18 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
                   id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
                   className: (0, import_classnames14.default)("r-rowcell-content", { "r-is-invalid": errorMessage }),
                   style: {
-                    margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2,
-                    color: col.editType === "numeric" && Number(row[col.field]) < 0 ? "red" : ""
+                    margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2
                   },
                   children: [
-                    typeDis === 1 && !refreshRow ? RenderEdit(row, col, indexCol, indexRow) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }),
+                    typeDis === 1 && !refreshRow ? RenderEdit(row, col, indexCol, indexRow) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : col.editType === "numeric" && Number(row[col.field]) < 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
+                      " ",
+                      `${formatSetting?.prefixNegative ?? "-"}${value}${formatSetting?.suffixNegative ?? ""}`
+                    ] }) : value }),
                     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { id: `error-${indexRow}-${indexCol}`, className: (0, import_classnames14.default)("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_becoxy_icons7.AlertCircle, { fontSize: 15.5 }) }),
-                    !(typeDis === 1 && !refreshRow) && checkOverflow(indexRow, indexCol) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : value }),
+                    !(typeDis === 1 && !refreshRow) && checkOverflow(indexRow, indexCol) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : col.editType === "numeric" && Number(row[col.field]) < 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
+                      " ",
+                      `${formatSetting?.prefixNegative ?? "-"}${value}${formatSetting?.suffixNegative ?? ""}`
+                    ] }) : value }),
                     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                       import_reactstrap11.UncontrolledTooltip,
                       {
@@ -4025,7 +4029,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-footer-div", children: col.haveSum === true && col.editType === "numeric" ? formartNumberic(dataSource.reduce(function(accumulator, currentValue) {
           return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
-        }, 0), decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) : "" })
+        }, 0), formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", col.numericSettings?.fraction, true) : "" })
       }
     ) }, `summarycell-${indexCol}`);
   };
@@ -5339,8 +5343,6 @@ var src_default = table_default;
   messageHtmlBoxError,
   notificationError,
   notificationSuccess,
-  objSymbolDecimal,
-  objSymbolThousand,
   roundNumber,
   useOnClickOutside
 });

package/dist/index.mjs

@@ -257,9 +257,7 @@ var generateUUID = () => {
     return (c === "x" ? r : 3).toString(16);
   });
 };
-var objSymbolDecimal = { 0: ",", 1: "." };
-var objSymbolThousand = { 1: ",", 0: "." };
-var formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 10, isDone) => {
+var formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 10, isDone, haveNegative = true) => {
   if (isDone) {
     str = roundNumber(Number(str), fraction);
   }
@@ -275,7 +273,6 @@ var formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 10,
       if (arr[0][0] === "-") {
         flagNegative = true;
         arr[0] = arr[0].substring(1, arr[0].length);
-        console.log(arr[0].substring(1, arr[0].length));
       }
       let count = 0;
       for (let i = arr[0].length - 2; i >= 0; i--) {
@@ -290,7 +287,7 @@ var formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 10,
       if (isDone) {
         flag = (arr[1]?.substring(0, fraction) ?? "") !== "";
       }
-      if (flagNegative) {
+      if (flagNegative && haveNegative) {
         arr[0] = "-".concat(arr[0]);
       }
       return flag ? `${arr[0]}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ""}` : arr[0];
@@ -585,8 +582,6 @@ var SelectTable = forwardRef((props, ref) => {
     textAlign,
     options,
     columns,
-    decimalSeparator,
-    thousandSeparator,
     onChange,
     value,
     fieldValue,
@@ -602,6 +597,7 @@ var SelectTable = forwardRef((props, ref) => {
     isDisabled,
     showFooter,
     footerComponent,
+    formatSetting,
     onPaste
   } = props;
   const selectTableRef = useRef();
@@ -880,7 +876,7 @@ var SelectTable = forwardRef((props, ref) => {
           (columns ? columns : defaultColumns).map((col, indexCol) => {
             let valueDisplay = row[col.field];
             if (col.type === "numeric" || col.typeCondition && col.typeCondition(row) === "numeric") {
-              valueDisplay = formartNumberic(row[col.field], decimalSeparator ?? ".", thousandSeparator ?? ",", col.fraction ?? 0, true) ?? 0;
+              valueDisplay = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ".", formatSetting?.thousandSeparator ?? ",", col.fraction ?? 0, true, false) ?? 0;
             } else if (col.type === "date") {
               valueDisplay = valueDisplay ? moment(valueDisplay).format("DD/MM/yyyy") : "";
             } else if (col.type === "datetime") {
@@ -926,7 +922,10 @@ var SelectTable = forwardRef((props, ref) => {
                     }
                     e.stopPropagation();
                   },
-                  children: col.template ? col.template(row, indexRow) : valueDisplay
+                  children: col.template ? col.template(row, indexRow) : col.type === "numeric" && Number(row[col.field]) < 0 ? /* @__PURE__ */ jsxs5("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
+                    " ",
+                    `${formatSetting?.prefixNegative ?? "-"}${value}${formatSetting?.suffixNegative ?? ""}`
+                  ] }) : valueDisplay
                 },
                 `col-${indexRow}-${indexCol}`
               ),
@@ -2251,8 +2250,6 @@ var SelectTableTree = forwardRef3((props, ref) => {
     textAlign,
     options,
     columns,
-    decimalSeparator,
-    thousandSeparator,
     onChange,
     value,
     fieldValue,
@@ -2269,6 +2266,7 @@ var SelectTableTree = forwardRef3((props, ref) => {
     showFooter,
     selectChilds,
     footerComponent,
+    formatSetting,
     onPaste
   } = props;
   const selectTableRef = useRef3();
@@ -2510,7 +2508,7 @@ var SelectTableTree = forwardRef3((props, ref) => {
             (columns ? columns : defaultColumns).map((col, indexCol) => {
               let valueDisplay = row[col.field];
               if (col.type === "numeric" || col.typeCondition && col.typeCondition(row) === "numeric") {
-                valueDisplay = formartNumberic(row[col.field], decimalSeparator ?? ".", thousandSeparator ?? ",", col.fraction ?? 0, true) ?? 0;
+                valueDisplay = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ".", formatSetting?.thousandSeparator ?? ",", col.fraction ?? 0, true) ?? 0;
               } else if (col.type === "date") {
                 valueDisplay = valueDisplay ? moment2(valueDisplay).format("DD/MM/yyyy") : "";
               } else if (col.type === "datetime") {
@@ -2580,12 +2578,18 @@ var SelectTableTree = forwardRef3((props, ref) => {
                           className: classnames8("me-50 r-icon-expand", { "is-open": expanded })
                         }
                       ),
-                      col.template ? col.template(row, indexRow) : valueDisplay
+                      col.template ? col.template(row, indexRow) : col.type === "numeric" && Number(row[col.field]) < 0 ? /* @__PURE__ */ jsxs14("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
+                        " ",
+                        `${formatSetting?.prefixNegative ?? "-"}${value}${formatSetting?.suffixNegative ?? ""}`
+                      ] }) : valueDisplay
                     ]
                   },
                   `col-${indexRow}-${indexCol}`
                 ),
-                checkOverflow(indexRow, indexCol) && /* @__PURE__ */ jsx15(UncontrolledTooltip4, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay })
+                checkOverflow(indexRow, indexCol) && /* @__PURE__ */ jsx15(UncontrolledTooltip4, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : col.type === "numeric" && Number(row[col.field]) < 0 ? /* @__PURE__ */ jsxs14("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
+                  " ",
+                  `${formatSetting?.prefixNegative ?? "-"}${value}${formatSetting?.suffixNegative ?? ""}`
+                ] }) : valueDisplay })
               ] }, indexCol);
             })
           ]
@@ -2810,7 +2814,6 @@ var TableEdit = forwardRef4((props, ref) => {
     maxHeight,
     minHeight,
     defaultValue,
-    haveSum,
     toolbarSetting,
     searchSetting,
     setSelectedItem,
@@ -2819,9 +2822,9 @@ var TableEdit = forwardRef4((props, ref) => {
     editDisable,
     addDisable,
     buttonSetting,
-    decimalSeparator = ",",
-    thousandSeparator = ".",
+    formatSetting,
     handleSelect,
+    haveSum,
     isMulti
   } = props;
   useImperativeHandle(ref, () => {
@@ -3097,8 +3100,7 @@ var TableEdit = forwardRef4((props, ref) => {
             component: gridRef,
             columns: col.selectSettings?.columns,
             isClearable: col.selectSettings?.isClearable ?? false,
-            decimalSeparator,
-            thousandSeparator,
+            formatSetting,
             placeholder: t("Select"),
             loadOptions: col.selectSettings?.loadOptions,
             handleAdd: col.selectSettings?.handAddNew,
@@ -3179,11 +3181,10 @@ var TableEdit = forwardRef4((props, ref) => {
                 component: gridRef,
                 columns: col.selectSettings?.columns,
                 isClearable: col.selectSettings?.isClearable ?? false,
-                decimalSeparator,
-                thousandSeparator,
+                formatSetting,
                 placeholder: t("Select"),
                 loadOptions: col.selectSettings?.loadOptions,
-                handleAdd: col.selectSettings?.handAddNew,
+                handleAdd: () => col.selectSettings?.handAddNew(indexRow, row),
                 fieldChildren: col.selectSettings?.fieldChild ?? "children",
                 selectChilds: col.selectSettings?.selectChilds,
                 showFooter: col.selectSettings?.showFooter,
@@ -3235,9 +3236,9 @@ var TableEdit = forwardRef4((props, ref) => {
       case "numeric":
         const numericFormatProps = {
           value: !isNullOrUndefined(row[col.field]) ? row[col.field] : "",
-          thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
-          decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
-          // allowNegative: (allowNegative ? allowNegative : configNumber?.allowNegative) ?? false,
+          thousandSeparator: checkThousandSeparator(formatSetting?.thousandSeparator, formatSetting?.decimalSeparator),
+          decimalSeparator: checkDecimalSeparator(formatSetting?.thousandSeparator, formatSetting?.decimalSeparator),
+          allowNegative: col.numericSettings?.allowNegative ?? false,
           decimalScale: col.numericSettings?.fraction ?? 0
         };
         let floatValue = parseFloat(row[col.field]);
@@ -3247,7 +3248,7 @@ var TableEdit = forwardRef4((props, ref) => {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
             ...numericFormatProps,
-            defaultValue: formartNumberic(row[col.field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction),
+            defaultValue: formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", col.numericSettings?.fraction),
             className: classnames9("form-control border-0 rounded-0 input-numeric", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             onValueChange: (values) => {
               floatValue = values?.floatValue;
@@ -3892,7 +3893,7 @@ var TableEdit = forwardRef4((props, ref) => {
     } else {
       let value = row[col.field];
       if (col.editType === "numeric" || col.editTypeCondition && col.editTypeCondition(row) === "numeric") {
-        value = formartNumberic(row[col.field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) ?? 0;
+        value = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", col.numericSettings?.fraction, true, false) ?? 0;
       } else if (col.editType === "date") {
         value = value ? moment3(value).format("DD/MM/yyyy") : "";
       } else if (col.editType === "datetime") {
@@ -3950,13 +3951,18 @@ var TableEdit = forwardRef4((props, ref) => {
                   id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
                   className: classnames9("r-rowcell-content", { "r-is-invalid": errorMessage }),
                   style: {
-                    margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2,
-                    color: col.editType === "numeric" && Number(row[col.field]) < 0 ? "red" : ""
+                    margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2
                   },
                   children: [
-                    typeDis === 1 && !refreshRow ? RenderEdit(row, col, indexCol, indexRow) : /* @__PURE__ */ jsx16("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }),
+                    typeDis === 1 && !refreshRow ? RenderEdit(row, col, indexCol, indexRow) : /* @__PURE__ */ jsx16("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : col.editType === "numeric" && Number(row[col.field]) < 0 ? /* @__PURE__ */ jsxs15("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
+                      " ",
+                      `${formatSetting?.prefixNegative ?? "-"}${value}${formatSetting?.suffixNegative ?? ""}`
+                    ] }) : value }),
                     /* @__PURE__ */ jsx16("span", { id: `error-${indexRow}-${indexCol}`, className: classnames9("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: /* @__PURE__ */ jsx16(AlertCircle, { fontSize: 15.5 }) }),
-                    !(typeDis === 1 && !refreshRow) && checkOverflow(indexRow, indexCol) && /* @__PURE__ */ jsx16(UncontrolledTooltip5, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : value }),
+                    !(typeDis === 1 && !refreshRow) && checkOverflow(indexRow, indexCol) && /* @__PURE__ */ jsx16(UncontrolledTooltip5, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : col.editType === "numeric" && Number(row[col.field]) < 0 ? /* @__PURE__ */ jsxs15("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
+                      " ",
+                      `${formatSetting?.prefixNegative ?? "-"}${value}${formatSetting?.suffixNegative ?? ""}`
+                    ] }) : value }),
                     /* @__PURE__ */ jsx16(
                       UncontrolledTooltip5,
                       {
@@ -3994,7 +4000,7 @@ var TableEdit = forwardRef4((props, ref) => {
         },
         children: /* @__PURE__ */ jsx16("div", { className: "r-footer-div", children: col.haveSum === true && col.editType === "numeric" ? formartNumberic(dataSource.reduce(function(accumulator, currentValue) {
           return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
-        }, 0), decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) : "" })
+        }, 0), formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", col.numericSettings?.fraction, true) : "" })
       }
     ) }, `summarycell-${indexCol}`);
   };
@@ -5308,8 +5314,6 @@ export {
   messageHtmlBoxError,
   notificationError,
   notificationSuccess,
-  objSymbolDecimal,
-  objSymbolThousand,
   roundNumber,
   useOnClickOutside
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table-edit",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",