Derik Whittaker



Images in this post missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at
Custom Formatters for YUI DataTable

In a prior posting (here) I walked through how to add the YUI DataTable to your site.  Today I thought I would take that a step further and explain how to create custom formatters so your grid can look all fancy and stuff. 

A custom formatter is a way to define a layout for the DataTable.  There are built in formatters, but you can also define your own.

Here are the list of built in formatters (found in YUI docs):

  • "button" points to YAHOO.widget.DataTable.formatButton
  • "checkbox" points to YAHOO.widget.DataTable.formatCheckbox
  • "currency" points to YAHOO.widget.DataTable.formatCurrency
  • "date" points to YAHOO.widget.DataTable.formatDate
  • "dropdown" points to YAHOO.widget.DataTable.formatDropdown
  • "email" points to YAHOO.widget.DataTable.formatEmail
  • "link" points to YAHOO.widget.DataTable.formatLink
  • "number" points to YAHOO.widget.DataTable.formatNumber
  • "radio" points to YAHOO.widget.DataTable.formatRadio
  • "text" points to YAHOO.widget.DataTable.formatText
  • "textarea" points to YAHOO.widget.DataTable.formatTextarea
  • "textbox" points to YAHOO.widget.DataTable.formatTextbox

Creating your own formatter is cake, with a few lines of code you are off to the races.

IN order to create your own custom formatter you need to do 2 things.

  1. Create the actual formatter:
    // wanna create a custom formatter for the cell
    this.myCustomFormatter = function(elCell, oRecord, oColumn, oData) 
    	var name = oRecord.getData("Name");
            var episodeNumber = oRecord.getData("EpisodeNumber");
            elCell.innerHTML = "" + name + "";

    You will notice that the code above is actually creating a delegate callback that the DataTable will invoke.  It is inside this callback that all the 'magic' happens.
  2. Assign the formatter to the DataTable:
    // Add the custom formatter to the shortcuts 
    YAHOO.widget.DataTable.Formatter.myCustom = this.myCustomFormatter; 

    This code simply will assign your formatter to the Formatter collection that is part of the DataTable
  3. Tell the particular column on the DataTable which formatter to use:
    var myColumnDefs = [                    
    	{key:"EpisodeNumber", label:"#", width:30},
            {key:"Name", formatter:"myCustom"}, 
            {key:"EpisodeDate", label:"Release Date", width:100},
            {key:"Count", width:50}

    Pay close attention to this code, take notice where I use 'formatter:"myCustom".  The use of myCustom MUST match the name you assigned the formatter on the DataTable formatters collection.

There you go, a quick overview on how to create and use a custom formatter for you your YUI DataTable.

Till next time,

[----- Remember to check out DimeCasts.Net -----]

Posted 09-17-2008 6:43 AM by Derik Whittaker
Filed under: ,



Alejandro wrote re: Custom Formatters for YUI DataTable
on 09-24-2008 12:10 PM

Great!! Your information is very helpful! Thanks a lot! =)

Michael B wrote re: Custom Formatters for YUI DataTable
on 04-28-2009 12:37 PM

I am trying to using a custom parser (to get the right data from the cell) AND a custom formatter (to format the data in the cell to my liking) at the same time, and it seems to be ignoring the custom formatter, and just outputting whatever the custom parser returns (i.e. a number).

Michael B wrote re: Custom Formatters for YUI DataTable
on 04-29-2009 10:45 AM

Follow up to my last comment: for my custom formatter to work, I had to pull out the custom formatter function into the global window scope, like this:

var myCustomFormatter = function(...){ ... }; // worked

instead of

this.myCustomFormatter = function(...){ ...}; // didn't work

Also, instead of assigning a string to the formatter: parameter, I used the function name (without quotes).

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Google Reader or Homepage Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of
Red-Gate Tools For SQL and .NET


SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
NHibernate Profiler
Balsamiq Mockups
JetBrains - ReSharper
Web Sequence Diagrams
Ducksboard<-- NEW Friend!


Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers


Community Server (Commercial Edition)