react-table-edit 1.2.2 → 1.2.4

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import react__default, { ReactNode, Dispatch, SetStateAction } from 'react';
-import { TFunction } from 'i18next';
+import { TFunction } from 'react-i18next';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type IFColumnSelectTable = {
@@ -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

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import react__default, { ReactNode, Dispatch, SetStateAction } from 'react';
-import { TFunction } from 'i18next';
+import { TFunction } from 'react-i18next';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type IFColumnSelectTable = {
@@ -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

@@ -27,16 +27,16 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// index.ts
-var Table_edit_exports = {};
-__export(Table_edit_exports, {
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
   InputStyleComponent: () => InputStyleComponent,
   SelectTable: () => SelectTable,
   SelectTableTree: () => SelectTableTree,
   TabsMenuComponent: () => TabsMenuComponent,
   checkDecimalSeparator: () => checkDecimalSeparator,
   checkThousandSeparator: () => checkThousandSeparator,
-  default: () => Table_edit_default,
+  default: () => src_default,
   formartNumberic: () => formartNumberic,
   generateUUID: () => generateUUID,
   isNullOrUndefined: () => isNullOrUndefined,
@@ -48,21 +48,19 @@ __export(Table_edit_exports, {
   messageHtmlBoxError: () => messageHtmlBoxError,
   notificationError: () => notificationError,
   notificationSuccess: () => notificationSuccess,
-  objSymbolDecimal: () => objSymbolDecimal,
-  objSymbolThousand: () => objSymbolThousand,
   roundNumber: () => roundNumber,
   useOnClickOutside: () => useOnClickOutside
 });
-module.exports = __toCommonJS(Table_edit_exports);
+module.exports = __toCommonJS(src_exports);
 
-// test-app/src/component/table/index.tsx
+// src/component/table/index.tsx
 var import_react16 = require("react");
 var import_reactstrap11 = require("reactstrap");
 var import_classnames14 = __toESM(require("classnames"));
 var import_react_i18next12 = require("react-i18next");
 var import_becoxy_icons7 = require("becoxy-icons");
 
-// test-app/src/component/react-input/index.tsx
+// src/component/react-input/index.tsx
 var import_becoxy_icons = require("becoxy-icons");
 var import_classnames = __toESM(require("classnames"));
 var import_react = require("react");
@@ -99,7 +97,7 @@ var ReactInput = (props) => {
 };
 var react_input_default = ReactInput;
 
-// test-app/src/component/notifications.tsx
+// src/component/notifications.tsx
 var import_react2 = require("react");
 var import_sweetalert2 = __toESM(require("sweetalert2"));
 var import_sweetalert2_react_content = __toESM(require("sweetalert2-react-content"));
@@ -236,7 +234,7 @@ var messageBoxConfirm2 = async (t, data, data2, message) => {
   });
 };
 
-// test-app/src/component/utils.ts
+// src/component/utils.ts
 var import_react3 = require("react");
 var useOnClickOutside = (ref, handler) => {
   (0, import_react3.useEffect)(
@@ -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];
@@ -362,10 +357,10 @@ var roundNumber = (num, fraction) => {
   return result;
 };
 
-// test-app/src/component/table/index.tsx
+// src/component/table/index.tsx
 var import_moment3 = __toESM(require("moment"));
 
-// test-app/src/component/edit-form/index.tsx
+// src/component/edit-form/index.tsx
 var import_react8 = require("react");
 var import_reactstrap6 = require("reactstrap");
 var import_react_hook_form4 = require("react-hook-form");
@@ -373,7 +368,7 @@ var import_yup = require("@hookform/resolvers/yup");
 var import_react_i18next5 = require("react-i18next");
 var import_classnames6 = __toESM(require("classnames"));
 
-// test-app/src/component/input-text/index.tsx
+// src/component/input-text/index.tsx
 var import_react_hook_form = require("react-hook-form");
 var import_reactstrap2 = require("reactstrap");
 var import_classnames2 = __toESM(require("classnames"));
@@ -464,7 +459,7 @@ var TextInput = (props) => {
 };
 var input_text_default = TextInput;
 
-// test-app/src/component/input-number/index.tsx
+// src/component/input-number/index.tsx
 var import_react_hook_form2 = require("react-hook-form");
 var import_reactstrap3 = require("reactstrap");
 var import_classnames3 = __toESM(require("classnames"));
@@ -598,13 +593,13 @@ var NumberInput = (props) => {
 };
 var input_number_default = NumberInput;
 
-// test-app/src/component/edit-form/select-table/index.tsx
+// src/component/edit-form/select-table/index.tsx
 var import_react_hook_form3 = require("react-hook-form");
 var import_reactstrap5 = require("reactstrap");
 var import_classnames5 = __toESM(require("classnames"));
 var import_react7 = require("react");
 
-// test-app/src/component/select-table/index.tsx
+// src/component/select-table/index.tsx
 var import_react6 = __toESM(require("react"));
 var import_reactstrap4 = require("reactstrap");
 var import_react_i18next3 = require("react-i18next");
@@ -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}`
               ),
@@ -1173,7 +1170,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
   );
 });
 
-// test-app/src/component/edit-form/select-table/index.tsx
+// src/component/edit-form/select-table/index.tsx
 var import_react_i18next4 = require("react-i18next");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var SelectTableBox = (props) => {
@@ -1290,7 +1287,7 @@ var SelectTableBox = (props) => {
 };
 var select_table_default = SelectTableBox;
 
-// test-app/src/component/edit-form/index.tsx
+// src/component/edit-form/index.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var defaultWidth = 200;
 var EditForm = (0, import_react8.forwardRef)((props, ref) => {
@@ -1626,12 +1623,12 @@ var EditForm = (0, import_react8.forwardRef)((props, ref) => {
 });
 var edit_form_default = EditForm;
 
-// test-app/src/component/sidebar-setting-column/index.tsx
+// src/component/sidebar-setting-column/index.tsx
 var import_react10 = require("react");
 var import_reactstrap7 = require("reactstrap");
 var import_react_i18next7 = require("react-i18next");
 
-// test-app/src/component/modal-header/index.tsx
+// src/component/modal-header/index.tsx
 var import_becoxy_icons3 = require("becoxy-icons");
 var import_classnames7 = __toESM(require("classnames"));
 var import_react_i18next6 = require("react-i18next");
@@ -1675,7 +1672,7 @@ var ModalHeader = (props) => {
 };
 var modal_header_default = ModalHeader;
 
-// test-app/src/component/sidebar/index.tsx
+// src/component/sidebar/index.tsx
 var import_becoxy_icons4 = require("becoxy-icons");
 var import_classnames8 = __toESM(require("classnames"));
 var import_react9 = require("react");
@@ -1779,7 +1776,7 @@ var Sidebar = (props) => {
 };
 var sidebar_default = Sidebar;
 
-// test-app/src/component/sidebar-setting-column/index.tsx
+// src/component/sidebar-setting-column/index.tsx
 var import_classnames9 = __toESM(require("classnames"));
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var SidebarSetColumn = (props) => {
@@ -2031,7 +2028,7 @@ var SidebarSetColumn = (props) => {
 };
 var sidebar_setting_column_default = SidebarSetColumn;
 
-// test-app/src/component/table/paging/index.tsx
+// src/component/table/paging/index.tsx
 var import_becoxy_icons5 = require("becoxy-icons");
 var import_classnames10 = __toESM(require("classnames"));
 var import_react11 = require("react");
@@ -2117,7 +2114,7 @@ var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOpt
   ] }) });
 };
 
-// test-app/src/component/table/header.tsx
+// src/component/table/header.tsx
 var import_react12 = require("react");
 var import_classnames11 = __toESM(require("classnames"));
 var import_reactstrap8 = require("reactstrap");
@@ -2207,13 +2204,13 @@ var HeaderTableCol = (props) => {
 };
 var header_default = HeaderTableCol;
 
-// test-app/src/component/table/command.tsx
+// src/component/table/command.tsx
 var import_react14 = require("react");
 var import_classnames12 = __toESM(require("classnames"));
 var import_reactstrap9 = require("reactstrap");
 var import_react_i18next10 = require("react-i18next");
 
-// test-app/src/component/icon/index.tsx
+// src/component/icon/index.tsx
 var Icon = __toESM(require("becoxy-icons"));
 var import_react13 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
@@ -2228,7 +2225,7 @@ var IconCustom = (props) => {
 };
 var icon_default = IconCustom;
 
-// test-app/src/component/table/command.tsx
+// src/component/table/command.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var CommandElement = (props) => {
   const { commandItems, rowData, indexRow, handleCommandClick, indexFocus, setIndexFocus } = props;
@@ -2262,7 +2259,7 @@ var CommandElement = (props) => {
 };
 var command_default = CommandElement;
 
-// test-app/src/component/select-table-tree/index.tsx
+// src/component/select-table-tree/index.tsx
 var import_react15 = __toESM(require("react"));
 var import_reactstrap10 = require("reactstrap");
 var import_react_i18next11 = require("react-i18next");
@@ -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);
             })
           ]
@@ -2823,7 +2825,7 @@ var SelectTableTree = (0, import_react15.forwardRef)((props, ref) => {
   );
 });
 
-// test-app/src/component/table/index.tsx
+// src/component/table/index.tsx
 var import_react_number_format = require("react-number-format");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
@@ -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,8 +3210,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,
@@ -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;
@@ -3912,7 +3911,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
                   className: "cursor-pointer",
                   onChange: () => {
                   },
-                  style: { textAlign: col.textAlign ?? "center", marginTop: 6 }
+                  style: { textAlign: col.textAlign ?? "center" }
                 }
               )
             }
@@ -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}`);
   };
@@ -4187,7 +4191,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
 });
 var table_default = TableEdit;
 
-// test-app/src/component/tab-menu/index.tsx
+// src/component/tab-menu/index.tsx
 var import_becoxy_icons8 = require("becoxy-icons");
 var import_classnames15 = __toESM(require("classnames"));
 var import_react17 = require("react");
@@ -4323,13 +4327,13 @@ var TabsMenuComponent = ({
   ] });
 };
 
-// test-app/src/component/input-style/index.tsx
+// src/component/input-style/index.tsx
 var import_becoxy_icons9 = require("becoxy-icons");
 var import_reactstrap13 = require("reactstrap");
 var import_classnames16 = __toESM(require("classnames"));
 var import_react18 = require("react");
 
-// test-app/src/component/input-style/fonts.ts
+// src/component/input-style/fonts.ts
 var OptionFont = [
   {
     value: 1,
@@ -5185,7 +5189,7 @@ var OptionFont = [
   }
 ];
 
-// test-app/src/component/input-style/index.tsx
+// src/component/input-style/index.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var InputStyleComponent = (props) => {
   const {
@@ -5318,8 +5322,8 @@ var InputStyleComponent = (props) => {
   ] }) });
 };
 
-// index.ts
-var Table_edit_default = table_default;
+// src/index.ts
+var src_default = table_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   InputStyleComponent,
@@ -5339,8 +5343,6 @@ var Table_edit_default = table_default;
   messageHtmlBoxError,
   notificationError,
   notificationSuccess,
-  objSymbolDecimal,
-  objSymbolThousand,
   roundNumber,
   useOnClickOutside
 });

package/dist/index.mjs

@@ -1,11 +1,11 @@
-// test-app/src/component/table/index.tsx
+// src/component/table/index.tsx
 import { Fragment as Fragment20, forwardRef as forwardRef4, useEffect as useEffect9, useImperativeHandle, useRef as useRef4, useState as useState8 } from "react";
 import { Button as Button6, DropdownMenu as DropdownMenu4, DropdownToggle as DropdownToggle4, Input as Input9, UncontrolledDropdown, UncontrolledTooltip as UncontrolledTooltip5 } from "reactstrap";
 import classnames9 from "classnames";
 import { useTranslation as useTranslation12 } from "react-i18next";
 import { AlertCircle, Info as Info2, Settings } from "becoxy-icons";
 
-// test-app/src/component/react-input/index.tsx
+// src/component/react-input/index.tsx
 import { X } from "becoxy-icons";
 import classNames from "classnames";
 import { Fragment, useEffect, useState } from "react";
@@ -42,7 +42,7 @@ var ReactInput = (props) => {
 };
 var react_input_default = ReactInput;
 
-// test-app/src/component/notifications.tsx
+// src/component/notifications.tsx
 import { Fragment as Fragment2 } from "react";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
@@ -179,7 +179,7 @@ var messageBoxConfirm2 = async (t, data, data2, message) => {
   });
 };
 
-// test-app/src/component/utils.ts
+// src/component/utils.ts
 import { useEffect as useEffect2 } from "react";
 var useOnClickOutside = (ref, handler) => {
   useEffect2(
@@ -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];
@@ -305,10 +302,10 @@ var roundNumber = (num, fraction) => {
   return result;
 };
 
-// test-app/src/component/table/index.tsx
+// src/component/table/index.tsx
 import moment3 from "moment";
 
-// test-app/src/component/edit-form/index.tsx
+// src/component/edit-form/index.tsx
 import { forwardRef as forwardRef2, useEffect as useEffect4, useRef as useRef2, useState as useState3 } from "react";
 import {
   DropdownItem as DropdownItem2,
@@ -325,7 +322,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { useTranslation as useTranslation5 } from "react-i18next";
 import classNames2 from "classnames";
 
-// test-app/src/component/input-text/index.tsx
+// src/component/input-text/index.tsx
 import { Controller } from "react-hook-form";
 import { Input as Input2, Label, FormFeedback } from "reactstrap";
 import classnames from "classnames";
@@ -416,7 +413,7 @@ var TextInput = (props) => {
 };
 var input_text_default = TextInput;
 
-// test-app/src/component/input-number/index.tsx
+// src/component/input-number/index.tsx
 import { Controller as Controller2 } from "react-hook-form";
 import { Input as Input3, Label as Label2, FormFeedback as FormFeedback2 } from "reactstrap";
 import classnames2 from "classnames";
@@ -550,13 +547,13 @@ var NumberInput = (props) => {
 };
 var input_number_default = NumberInput;
 
-// test-app/src/component/edit-form/select-table/index.tsx
+// src/component/edit-form/select-table/index.tsx
 import { Controller as Controller3 } from "react-hook-form";
 import { FormFeedback as FormFeedback3, Label as Label3, UncontrolledTooltip as UncontrolledTooltip2 } from "reactstrap";
 import classnames4 from "classnames";
 import { Fragment as Fragment7 } from "react";
 
-// test-app/src/component/select-table/index.tsx
+// src/component/select-table/index.tsx
 import React, { forwardRef, Fragment as Fragment5, useEffect as useEffect3, useMemo, useRef, useState as useState2 } from "react";
 import {
   DropdownItem,
@@ -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}`
               ),
@@ -1134,7 +1133,7 @@ var SelectTable = forwardRef((props, ref) => {
   );
 });
 
-// test-app/src/component/edit-form/select-table/index.tsx
+// src/component/edit-form/select-table/index.tsx
 import { useTranslation as useTranslation4 } from "react-i18next";
 import { Fragment as Fragment8, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var SelectTableBox = (props) => {
@@ -1251,7 +1250,7 @@ var SelectTableBox = (props) => {
 };
 var select_table_default = SelectTableBox;
 
-// test-app/src/component/edit-form/index.tsx
+// src/component/edit-form/index.tsx
 import { Fragment as Fragment9, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var defaultWidth = 200;
 var EditForm = forwardRef2((props, ref) => {
@@ -1587,12 +1586,12 @@ var EditForm = forwardRef2((props, ref) => {
 });
 var edit_form_default = EditForm;
 
-// test-app/src/component/sidebar-setting-column/index.tsx
+// src/component/sidebar-setting-column/index.tsx
 import { Fragment as Fragment11, useEffect as useEffect6, useState as useState5 } from "react";
 import { Button as Button3, Input as Input6 } from "reactstrap";
 import { useTranslation as useTranslation7 } from "react-i18next";
 
-// test-app/src/component/modal-header/index.tsx
+// src/component/modal-header/index.tsx
 import { Edit, Info, Plus as Plus2, X as X2 } from "becoxy-icons";
 import classNames3 from "classnames";
 import { useTranslation as useTranslation6 } from "react-i18next";
@@ -1636,7 +1635,7 @@ var ModalHeader = (props) => {
 };
 var modal_header_default = ModalHeader;
 
-// test-app/src/component/sidebar/index.tsx
+// src/component/sidebar/index.tsx
 import { ChevronLeft, ChevronRight } from "becoxy-icons";
 import classNames4 from "classnames";
 import { useEffect as useEffect5, useState as useState4 } from "react";
@@ -1740,7 +1739,7 @@ var Sidebar = (props) => {
 };
 var sidebar_default = Sidebar;
 
-// test-app/src/component/sidebar-setting-column/index.tsx
+// src/component/sidebar-setting-column/index.tsx
 import classnames5 from "classnames";
 import { Fragment as Fragment12, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 var SidebarSetColumn = (props) => {
@@ -1992,7 +1991,7 @@ var SidebarSetColumn = (props) => {
 };
 var sidebar_setting_column_default = SidebarSetColumn;
 
-// test-app/src/component/table/paging/index.tsx
+// src/component/table/paging/index.tsx
 import { ChevronRight as ChevronRight2, ChevronLeft as ChevronLeft2, ChevronsLeft, ChevronsRight } from "becoxy-icons";
 import classNames5 from "classnames";
 import { Fragment as Fragment13, useEffect as useEffect7, useState as useState6 } from "react";
@@ -2078,7 +2077,7 @@ var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOpt
   ] }) });
 };
 
-// test-app/src/component/table/header.tsx
+// src/component/table/header.tsx
 import { Fragment as Fragment14 } from "react";
 import classnames6 from "classnames";
 import { Input as Input7 } from "reactstrap";
@@ -2168,13 +2167,13 @@ var HeaderTableCol = (props) => {
 };
 var header_default = HeaderTableCol;
 
-// test-app/src/component/table/command.tsx
+// src/component/table/command.tsx
 import { Fragment as Fragment17 } from "react";
 import classnames7 from "classnames";
 import { Button as Button4, UncontrolledTooltip as UncontrolledTooltip3 } from "reactstrap";
 import { useTranslation as useTranslation10 } from "react-i18next";
 
-// test-app/src/component/icon/index.tsx
+// src/component/icon/index.tsx
 import * as Icon from "becoxy-icons";
 import { Fragment as Fragment16 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
@@ -2189,7 +2188,7 @@ var IconCustom = (props) => {
 };
 var icon_default = IconCustom;
 
-// test-app/src/component/table/command.tsx
+// src/component/table/command.tsx
 import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var CommandElement = (props) => {
   const { commandItems, rowData, indexRow, handleCommandClick, indexFocus, setIndexFocus } = props;
@@ -2223,7 +2222,7 @@ var CommandElement = (props) => {
 };
 var command_default = CommandElement;
 
-// test-app/src/component/select-table-tree/index.tsx
+// src/component/select-table-tree/index.tsx
 import React2, { forwardRef as forwardRef3, Fragment as Fragment18, useEffect as useEffect8, useMemo as useMemo2, useRef as useRef3, useState as useState7 } from "react";
 import {
   DropdownItem as DropdownItem3,
@@ -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);
             })
           ]
@@ -2792,7 +2796,7 @@ var SelectTableTree = forwardRef3((props, ref) => {
   );
 });
 
-// test-app/src/component/table/index.tsx
+// src/component/table/index.tsx
 import { NumericFormat } from "react-number-format";
 import { Fragment as Fragment21, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 var TableEdit = forwardRef4((props, ref) => {
@@ -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,8 +3181,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,
@@ -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;
@@ -3881,7 +3882,7 @@ var TableEdit = forwardRef4((props, ref) => {
                   className: "cursor-pointer",
                   onChange: () => {
                   },
-                  style: { textAlign: col.textAlign ?? "center", marginTop: 6 }
+                  style: { textAlign: col.textAlign ?? "center" }
                 }
               )
             }
@@ -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}`);
   };
@@ -4156,7 +4162,7 @@ var TableEdit = forwardRef4((props, ref) => {
 });
 var table_default = TableEdit;
 
-// test-app/src/component/tab-menu/index.tsx
+// src/component/tab-menu/index.tsx
 import { ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight4 } from "becoxy-icons";
 import classNames6 from "classnames";
 import { Fragment as Fragment22, useEffect as useEffect10, useState as useState9 } from "react";
@@ -4292,13 +4298,13 @@ var TabsMenuComponent = ({
   ] });
 };
 
-// test-app/src/component/input-style/index.tsx
+// src/component/input-style/index.tsx
 import { Bold, Droplet, Italic, Type, Underline } from "becoxy-icons";
 import { Button as Button7, Input as Input10 } from "reactstrap";
 import classnames10 from "classnames";
 import { Fragment as Fragment23 } from "react";
 
-// test-app/src/component/input-style/fonts.ts
+// src/component/input-style/fonts.ts
 var OptionFont = [
   {
     value: 1,
@@ -5154,7 +5160,7 @@ var OptionFont = [
   }
 ];
 
-// test-app/src/component/input-style/index.tsx
+// src/component/input-style/index.tsx
 import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 var InputStyleComponent = (props) => {
   const {
@@ -5287,8 +5293,8 @@ var InputStyleComponent = (props) => {
   ] }) });
 };
 
-// index.ts
-var Table_edit_default = table_default;
+// src/index.ts
+var src_default = table_default;
 export {
   InputStyleComponent,
   SelectTable,
@@ -5296,7 +5302,7 @@ export {
   TabsMenuComponent,
   checkDecimalSeparator,
   checkThousandSeparator,
-  Table_edit_default as default,
+  src_default as default,
   formartNumberic,
   generateUUID,
   isNullOrUndefined,
@@ -5308,8 +5314,6 @@ export {
   messageHtmlBoxError,
   notificationError,
   notificationSuccess,
-  objSymbolDecimal,
-  objSymbolThousand,
   roundNumber,
   useOnClickOutside
 };

package/package.json

@@ -1,64 +1,53 @@
-{
-  "name": "react-table-edit",
-  "license": "MIT",
-  "version": "1.2.2",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist/**/*"
-  ],
-  "scripts": {
-    "build": "tsup index.ts --format cjs,esm --dts",
-    "release": "pnpm run build && changeset publish",
-    "lint": "tsc"
-  },
-  "keywords": [
-    "react",
-    "table",
-    "react-table",
-    "table-template",
-    "table-edit",
-    "datagrid"
-  ],
-  "author": "hungnv",
-  "dependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/plugin-transform-modules-commonjs": "^7.24.8",
-    "@babel/preset-env": "^7.25.4",
-    "@babel/preset-react": "^7.24.7",
-    "@hookform/resolvers": "^2.8.10",
-    "@syncfusion/ej2-react-dropdowns": "20.2.36",
-    "@types/react-resizable": "^3.0.7",
-    "becoxy-icons": "1.8.1",
-    "bootstrap": "5.1.0",
-    "classnames": "2.3.1",
-    "css-loader": "^7.1.2",
-    "moment": "^2.29.3",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "react-hook-form": "7.43.9",
-    "react-hot-toast": "2.2.0",
-    "react-i18next": "^11.16.9",
-    "react-resizable": "^3.0.5",
-    "react-router-dom": "^6.3.0",
-    "react-select": "^5.3.2",
-    "reactstrap": "9.0.1",
-    "style-loader": "^4.0.0",
-    "sweetalert2": "^11.4.14",
-    "sweetalert2-react-content": "^5.0.0",
-    "ts-loader": "^9.5.1",
-    "webpack": "^5.77.0",
-    "webpack-dev-server": "^4.15.1",
-    "react-number-format": "^5.3.3",
-    "yup": "^0.32.11"
-  },
-  "peerDependencies": {
-    "react": ">=16.8.6",
-    "react-dom": ">=16.8.6"
-  },
-  "devDependencies": {
-    "tsup": "^8.0.2",
-    "typescript": "^5.6.2"
-  }
-}
+{
+  "name": "react-table-edit",
+  "version": "1.2.4",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "start": "node dist/index.js"
+  },
+  "keywords": [
+    "react",
+    "table",
+    "react-table",
+    "table-template",
+    "table-edit",
+    "datagrid"
+  ],
+  "license": "ISC",
+  "author": "hungnv",
+  "dependencies": {
+    "@hookform/resolvers": "^2.8.10",
+    "@types/react-resizable": "^3.0.7",
+    "becoxy-icons": "1.8.1",
+    "bootstrap": "5.1.0",
+    "classnames": "2.3.1",
+    "moment": "^2.29.3",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-hook-form": "7.43.9",
+    "react-hot-toast": "2.2.0",
+    "i18next": "^21.8.2",
+    "react-i18next": "^11.16.9",
+    "react-resizable": "^3.0.5",
+    "react-router-dom": "^6.3.0",
+    "reactstrap": "9.0.1",
+    "sweetalert2": "^11.4.14",
+    "sweetalert2-react-content": "^5.0.0",
+    "react-number-format": "^5.3.3",
+    "yup": "^0.32.11"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.6",
+    "react-dom": ">=16.8.6"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.2",
+    "typescript": "^5.6.3"
+  }
+}