API Docs for:
Show:

gallery-datatable-formatters Module

Available since 3.6.0

Define a "named" Column Formatters object and attach it to the Y.DataTable namespace. The named formatters are defined as a series of format strings that are typically used by the data formatting function Y.DataType.Number.format and Y.DataType.Date.format.

The function namedFormatter is defined that can be used to call as a column formatter which formats the column cell using the formatStrings object.

This module includes an override of the Y.DataTable.BodyView._createRowHTML method. Therefore implementers shouldn't call the namedFormatter method directly because the overridden method handles the call if the entered formatter string name is recognized.

Usage

The format string names can be used in a column configuration object as follows;

    var dt1 = new Y.DataTable({
       data: some_data,
       columns: [
           { key:"start_date", label:"Start", formatter:"fullDate" },
           { key:"end_date", label:"End", formatter:"default", 
             formatOptions:{ type:'date', formatConfig:{ format:'%F' } } },
           { key:"qty", label:"Inventory Qty", formatter:"comma" },
           { key:"cost", label:"Carried Cost", formatter:"currency",
             formatConfig:{ prefix:'£', thousandsSeparator:","} }
       ]
    }).render();

Pre-Defined formatStrings settings; (specifically, Y.DataTable.Formatters.formatStrings)

For "number" formatting, using Y.DataType.Number.

stringFormatter ObjectFormatted Example
general{ decimalPlaces:0 }123457
general2{ decimalPlaces:2 }123456.79
currency{ prefix:'$', decimalPlaces:0, thousandsSeparator:',' }$ 123,457
currency2{ prefix:'$', decimalPlaces:2, thousandsSeparator:',' }$ 123,456.78
currency3{ prefix:'$', decimalPlaces:3, thousandsSeparator:',' }$ 123,457.789
comma{ decimalPlaces:0, thousandsSeparator:','}123,457
comma2{ decimalPlaces:2, thousandsSeparator:','}123,456.78
comma3{ decimalPlaces:3, thousandsSeparator:','}123,457.789

For "date" formatting, using Y.DataType.Date.
(Please refer to the Date.format method above for the proper use of "strftime" format strings)

stringFormatter ObjectFormatted Example
shortDate{ format:'%D' }03/12/92
longDate{ format:'%m/%d/%Y' }03/12/1992
fullDate{ format:'%B %e, %Y' }March 12, 1992
isoDate{ format:'%F'}1992-03-12
isoDateTime{ format:'%FT%T'}1992-03-12T22:11:07

Replaceable Hash

This utility can also replace the cell value with values from a data hash (i.e. JS simple object, consisting of key:value pairs). Access to this capability is by providing a formatter as any string not-recognizable in the formatStrings object AND by providing a formatConfig object (equal to the hash) in the column definition.

User-Defined formatStrings

Implementers may add their own "named" formatting strings for their own use-cases simply by adding more named formatters to the formatStrings object as;

Y.DataTable.Formatters.formatStrings['myNumberFmtr'] = {
    type:'number',
    formatConfig:{ thousandsSeparator:'x', decimalPlaces:11 }
};
Y.DataTable.Formatters.formatStrings['myDateFmtr'] = {
    type:'date',
    formatConfig:{ format:{ "At the tone the TIME will be %T" }
};

This module provides the following classes: