The Webix library offers predefined methods for number formatting. All of them are accessible via the i18n module and are mainly used during localization.
const string1 = webix.i18n.numberFormat("123.45"); const string2 = webix.i18n.intFormat("123.45") const string3 = webix.i18n.priceFormat("123.45");
They will format data according to the rules stated in the current locale.
Applying locales within a component:
// datatable { header:"LongDate", width:170, id:"start", format:webix.i18n.numberFormat } // other components template:function(obj) {return webix.i18n.numberFormat(obj.start); }
For more details dive into the Date and Number Localization article.
If you need to format a number with custom formatting rules, you can use the following methods of the Number class:
Here you need to specify rules right in a data component:
const string1 = webix.Number.format("-1236.45",{ groupDelimiter:",", groupSize:3, decimalDelimiter:".", decimalSize:2, minusPosition:"after", minusSign:"-" }); // -> 1,236.45-
Applying format within a component:
// datatable { header:"LongDate", width:170, id:"votes", format:webix.Number.numToStr({ groupDelimiter:"", groupSize:0, decimalDelimiter:",", decimalSize:5, minusPosition:"parentheses", minusSign:"()", }); } // other components template:function(obj) { return webix.Number.numToStr({ groupDelimiter:"", groupSize:0, decimalDelimiter:",", decimalSize:5, minusPosition:"parentheses", minusSign:"()", }); }
Related sample: Using Number Templates
You can also get the object with configuration options used for formatting:
const cfg = webix.Number.getConfig("1'111.00"); // ->{decimalSize: 2, groupSize: 3, decimalDelimiter: ".", groupDelimiter: "'", // prefix: "", sufix: ""}
and define the format of a parsed value:
const num1 = webix.Number.parse("(10'009.00)", { decimalSize: 2, groupSize: 3, decimalDelimiter: ".", groupDelimiter: "'",minusPosition:"parentheses", minusSign:"()", }); // -> -10009