Number and Date Formatting

Number Formatting

To set the required format for number fields, you should use the format attribute.

Using number templates

webix.ui({
    view:"datatable",
    columns:[
        { id:"votes", format:webix.Number.numToStr({
            groupDelimiter:",",
            groupSize:3,
            decimalDelimiter:".",
            decimalSize:2})
        },
        ...
    ]
});

Related sample:  Using Number Templates

The numToStr method allows you to set the following properties for fractional numbers:

  • groupDelimiter - a mark that will be used to divide numbers with many digits into groups;
  • groupSize - the number of digits in a group;
  • decimalDelimiter - a mark that will be used as the decimal delimiter;
  • decimalSize - the number of digits after the decimal mark.

There are two default presets: numberFormat and priceFormat which provide number and price formatting according to the current locale:

webix.ui({
    view:"datatable",
    columns:[
        { id:"votes", format:webix.i18n.numberFormat },
        { id:"price", format:webix.i18n.priceFormat }
    ]
});

For details on number formatting methods, see Number Formatting Methods.

Setting numeric format for editors

You can apply the number format for datatable editors via the numberFormat attribute of the columns:

webix.ui({
    view:"datatable",
    columns:[
        { id:"votes", editor:"text", numberFormat:"1'111.00", header:"Votes"},
        { id:"rating", editor:"text", numberFormat:"1.111,00", header:"Rating"}
    ]
});

Read the details in the corresponding section about data editors.

Custom number format for editors

There is also a possibility to specify a custom number format for datatable editors via functions set in the format, editParse and editFormat attributes of the columns:

webix.ui({
    view:"datatable",
    columns:[    
      { id:"phone", editor:"text", header:"Votes", 
        format:function(value){ 
            return webix.i18n.numberFormat(value)
        },
        editParse: function(value){   
            return webix.Number.parse(value, { 
                groupSize:webix.i18n.groupSize, 
                groupDelimiter:webix.i18n.groupDelimiter, 
                decimalSize : webix.i18n.decimalSize,
                decimalDelimiter : webix.i18n.decimalDelimiter
            }); 
        }, 
        editFormat:function(value){ 
            return webix.i18n.numberFormat(value)
      }}
    ]
});

Read the details in the corresponding section about data editors.

Date Formatting

Dates in DataTable can be specified by both DateTime and string values.

But formatting can be applied only to DateTime objects. Therefore, to format string values you should convert them to DateTime format at first.

Common date formatting

To set the required format for date and time values, specify the format attribute.

As a value of the attribute you can use:

  • Members of the i18n object;
  • The dateToStr method of the Date object.

Setting date formats

webix.ui({
    view:"datatable",
    columns:[
        { template:"#start#", header:"Date",  format:webix.i18n.dateFormatStr},
        { template:"#start#", header:"Y-m-d", format:webix.Date.dateToStr("%Y-%m-%d")}
    ],
    data:[
        { text:"Finish", start:new Date(2012,11,12) },
        { text:"Start",  start:new Date(1988,1,29) }
    ]
});

Related sample:  Using Date Templates

For details on date formatting methods, see the article Date Formatting Methods.

Converting string values to DateTime format

To correctly work with dates, you need to have data in the grid as a valid Date object, but in all common formats data is presented as a string. DataTable provides a way to mark columns for auto-conversion from Date string to Date objects:

webix.ui({
    view:"datatable",
    columns:[
        { map:"(date)#start#", header:"Date",  format:webix.i18n.dateFormatStr}
    ]
});

Related sample:  Converting Strings to Dates

The (date) marker at the start of a map declaration forces data conversion from string to object. By default, a datatable will assume that data will be in the "%Y-%m-%d" format (mysql date format), but you can change it as follows:

webix.i18n.parseFormat = "%m.%d.%Y"
webix.i18n.setLocale();

For more details, see Date Formatting Methods.

Custom Formatting

You can apply custom formatting to a column by presenting the format attribute as a function (the function accepts a raw value and returns the formatted one).

webix.ui({
    view:"datatable",
    columns:[
        {id:"title", header:"Film title"},
        {id:"votes", header:"Votes", format:function(value){ 
            value = some_custom_logic(value);
            return value; }
        }
    ],
    ...
})
Back to top
If you have not checked yet, be sure to visit site of our main product Webix web development library and page of javascript datatables product.