Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

DataTable Formatters (gallery-datatable-formatters) on cdn

Last Updated: 01/29/13

+ 0 -

Todd Smith

YUI Contributor

See 13 more by this user.

Created: 09/5/12
Last CDN Push: 01/9/13
Build Tag: gallery-2013.01.09-23-24
Project: YUI 3
License: YUI BSD
YUI Version: 3.8.1
Free for use.

Provides a simple technique for using easily remembered "named" custom formatters within DataTable column definitions. This object extension adds a new static property to DataTable (as Y.DataTable.Formatters) that includes a variety of pre-defined formatters, such as;

(numeric) : "general", "currency", "currency2", "currency3", "comma", "comma2", "comma3"
(date): "shortDate", "longDate", "fullDate", "isoDate"

Please see the Formatters API Docs link below for a full listing of recognized format strings.

Example DataTable column entries

{ key:"bdate", label:"DOB", formatter:"longDate", ....} // outputs as mm/dd/yyyy
{ key:"salary", label:"Salary", formatter:"currency2" } // outputs as $ xx,xxx.xx

Additionally a `formatConfig` configuration object can be added which is recognized by the column formatter to create a "one-off" variation for a column.

Another element of the formatters allows using a formatter named "custom" where a formatConfig is defined as an object hash, then any values of the cell are replaced by the corresponding value from the hash (see example).

Implementers can add their own formatStrings to enforce their own business rules and/or usage requirements (see example).

This module includes a method over-ride of a DT method _createRowHTML that enables use of these formatters.

The code sample below shows two datatable applications using these formatters. The first one being a simple normal-use case and the second a more detailed application.

By defining the formatter as "custom" (or any other non-recognized name string) AND by defining an object hash in formatConfig, the formatter will use Y.Lang.sub to substitute for the data cell value from the hash match setting.

Example:
For a column with {key:'backordered', formatter:'custom', formatConfig:{'false':'No','true':'Yes'} }

any data in the field 'backordered' which is boolean false, will display as string "No", conversely true will display as "Yes". This can come in very handy for situations using a custom-defined hash mapping between a key to value setting.

Code Sample

<script src="http://yui.yahooapis.com/3.8.1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2013.01.09-23-24'
}).use('datatable','gallery-datatable-formatters', function(Y) {
 
//------------------   B A S I C   U S A G E   ---------------------
 
//
//  Use "standard" named formatters within a DT ...
//
   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:","} }
      ]
   });
 
//------------------   A D V A N C E D     U S A G E   ---------------------
 
//
//  Define a custom status code hash ... used on column "estatus"
// 
   var estatusCodes = {
      1: "Furloughed",
      2: "Sick Leave",
      3: "TDY",
      4: "Field Office",
      5: "Headquarters"
   };
   // used in a Column as;
   // { key:"estatus", formatter:"custom", formatConfig:estatusCodes  } 
 
 
   // Add a "named" formatter to the standard names ... 
   Y.DataTable.Formatters.formatStrings['sterling'] = {
      type:'number',
      formatConfig:{ prefix:'£', thousandsSeparator:","}
   };
 
//
//  Define columns for a more detailed DataTable, using custom format codes ...
//
   var cols = [
     // four columns of same key, different Date formatting ...
     { key:"edate", label:"Start Date", formatter:"shortDate" },
     { key:"edate", label:"Start Date", formatter:"longDate" },
     { key:"edate", label:"Start Date", formatter:"fullDate" },
     { key:"edate", label:"Start Date", formatter:"default",
         formatOptions:{ type:'date', formatConfig:{ format:'%F' } }
      },
 
     { key:"esalary", label:"esalary 1", formatter:"currency" },
     { key:"esalary", label:"esalary 2", formatter:"general2" },
     { key:"esalary", label:"esalary 3", formatter:"currency", 
         formatConfig:{ prefix:'£', thousandsSeparator:","} },
     { key:"esalary", label:"esalary 4", formatter:"sterling" },
 
     { key:"estatus", label:"Emp Status", formatter:"object", 
       formatOptions:estatusCodes  },
 
     { key:"emarried", label:"Marital Status", 
       formatter:"hash", 
       formatConfig:{ s:"Single", m:"Married", d:"Divorced",  w:"Widowed", u:"Unknown" } 
     }
   ];
 
//
// Create the DataTable and render it
//
   var myDTf = new Y.DataTable({
      columns: cols,
      data:   jsData
    }).render("#dtable_formatted");
 
});

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2013.01.09-23-24'
}).use('datatable','gallery-datatable-formatters', function(Y) {

//------------------   B A S I C   U S A G E   ---------------------

//
//  Use "standard" named formatters within a DT ...
//
   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:","} }
      ]
   });

//------------------   A D V A N C E D     U S A G E   ---------------------

//
//  Define a custom status code hash ... used on column "estatus"
// 
   var estatusCodes = {
      1: "Furloughed",
      2: "Sick Leave",
      3: "TDY",
      4: "Field Office",
      5: "Headquarters"
   };
   // used in a Column as;
   // { key:"estatus", formatter:"custom", formatConfig:estatusCodes  }

// Add a "named" formatter to the standard names ... 
   Y.DataTable.Formatters.formatStrings['sterling'] = {
      type:'number',
      formatConfig:{ prefix:'Â£', thousandsSeparator:","}
   };

//
//  Define columns for a more detailed DataTable, using custom format codes ...
//
   var cols = [
     // four columns of same key, different Date formatting ...
     { key:"edate", label:"Start Date", formatter:"shortDate" },
     { key:"edate", label:"Start Date", formatter:"longDate" },
     { key:"edate", label:"Start Date", formatter:"fullDate" },
     { key:"edate", label:"Start Date", formatter:"default",
         formatOptions:{ type:'date', formatConfig:{ format:'%F' } }
      },

{ key:"esalary", label:"esalary 1", formatter:"currency" },
     { key:"esalary", label:"esalary 2", formatter:"general2" },
     { key:"esalary", label:"esalary 3", formatter:"currency", 
         formatConfig:{ prefix:'Â£', thousandsSeparator:","} },
     { key:"esalary", label:"esalary 4", formatter:"sterling" },

{ key:"estatus", label:"Emp Status", formatter:"object", 
       formatOptions:estatusCodes  },

{ key:"emarried", label:"Marital Status", 
       formatter:"hash", 
       formatConfig:{ s:"Single", m:"Married", d:"Divorced",  w:"Widowed", u:"Unknown" } 
     }
   ];

//
// Create the DataTable and render it
//
   var myDTf = new Y.DataTable({
      columns: cols,
      data:   jsData
    }).render("#dtable_formatted");

});