Intermediate

Number Formatting Methods

The Webix library offers predefined methods for number formatting. All of them are accessible via the i18n module and are mainly used during localization.

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.

Custom Formatting

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