Funky Grails Tables with YUI DataTable

An article by Glen    2 Comments

Need to present some tablular data sources from a backend datasource and looking for a slick and painless cross-browser solution? You should definitely take a look at the YUI Datatable.

I’ve been using it on one of our internal projects where we need to present a large amount of tabular data, but let the client sort it as they need to. Our first draft has given us something like this:

One of the things I love about YUI is that the documentation and examples are first class, and with the new Dependency Configurator, getting your CSS and JS organised is much more straightforward.

You can use YUI controls with backend JSON, XML or even in-page HTML elements, but for my purposes, I needed to dynamically change the table based an incoming specification id. My backend controller does a little magic on how it slices the data, but you might consider a simpler version as something like:

def listData = {

        def lib= ControlLibrary.get(params.id)
        def controlsJSON = [ controls : lib.controls]
	render controlsJSON as JSON
}

So we’re just rending some JSON which consists of a key of “controls” followed by a list of individual controls (which is the data you see in the cell). Now, on to the client side. First go and sort out your dependencies, then we’ll get cracking with some Javascript…

You’ll need a div for the control to land in. So let’s spec that out first:

Ok. We have our div in place, it’s time to setup the Datatable code itself. YUI components typically rely on a DataSource component to do the actual fetching of the remote data. You tell the DataSource what kind of data to expect (JSON, XML, etc), give it a way to map the incoming data into something useful to you, and then feed it to a UI component for rendering. Let’s take that one step at a time… First let’s setup the DataSource… we’ll wrap it in a window “load” event to make sure it doesn’t fire until the page is loaded and all our JS and CSS is pulled down…

YAHOO.util.Event.addListener(window, "load", function() {

	// Setup your backend URL for retrieving the data
	var myDataSource = new YAHOO.util.XHRDataSource('');
	myDataSource.responseType = YAHOO.util.XHRDataSource.TYPE_JSON;

	// The response schema let's you map out the JSON fields you want to expose
	myDataSource.responseSchema = {
		resultsList : "controls",
		fields : [
			{ key : "id" },
			{ key : "reference"},
			{ key : "name"},
			{ key : "category" },
			{ key : "compliance" },
			{ key : "classification"}
		]
	}

I’m returning the JSON to consist of a “controls” element, so I’ll tell YUI to look in that JSON element for the data. Under that, my fields consist of id, reference, name, category, etc. I don’t need all the fields, so I just map the ones I need.

So I now have the data coming back, so it’s time to setup the table proper:

// map our JSON fields to column labels
var myColumnDefs = [
	{ key: "reference", label: "Spec", sortable: true },
	{ key: "name", label: "Name", sortable: true },
	{ key: "category", label: "Category", sortable: true },
	{ key: "compliance", label: "Compliance", sortable: true },
	{ key: "classification", label: "Classification", sortable: true }
];

// Now setup the table itself, giving datasource, and hint at presorted data
var myDataTable = new YAHOO.widget.DataTable("myContainer", myColumnDefs, myDataSource, {
	sortedBy : {
		key: "reference",
		dir: YAHOO.widget.DataTable.CLASS_ASC
	}
});

So the final step is to map our JSON fields through to proper table column names. In the example about the “reference” field appears titled as “Spec” in the table. Finally, we instantiate the table, and tell is that the data is pre-sorted by the “reference” field, so that the control can automatically add the relevent “tick” mark to show the sort direction.

There’s a bazillion other features you can using in the Datatable (including pagination, polling of the datasource, context menus and lots more). Go check out the examples for more info.

I’ve had tons of great experiences working with YUI components, and best of all, everything seems to work fine in Internet Explorer! Can’t wait to sink my teeth into YUI3.