Number Formatting Methods

The Webix library offers predefined methods for number formatting.

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:

// datagrid
{ header:"LongDate", width:170,  id:"start", format:webix.i18n.numberFormat }

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

• format
• numToStr
• parse
• getConfig

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:

// datagrid
{ header:"LongDate", width:170,  id:"votes", format: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