February 24, 2021
Hot Topics:

10 Cool Things You Can Do with JavaScript and YUI

  • By Diona Kidd
  • Send Email »
  • More Articles »

5. Displaying Tabular Data on a Web Page

At some point, almost everyone needs to represent tabular data on a web page. The DataTable control provides a simple but powerful way to display tabular data on a web page. This YUI widget also offers interactive features including sortable and resizable columns, row selection, pagination, scrolling, and inline editing.

The DataTable control is dynamically marked up as a table, with a <thead> and two <tbody> elements. The <thead> is populated by the ColumnSet class and the <tbody> relies on the DataSource, RecordSet classes and DOM UI.

The DataTable has quite a few prerequisites, but don't be intimidated. Once you're set up, using the DataTable in your web page is pretty painless. You can use the included CSS to style the data table, without worrying about browser display issues. Dependancies are contingent upon the features you want to include. For instance, resizable columns require the DragDrop library and AJAX requires the Connection Manager. More information on the various features of the DataTable widget is available in the YUI documentation and examples.

<link type="text/css" rel="stylesheet" href="/build/datatable/

<!-- Dependencies -->
<script type="text/javascript" src="/build/yahoo-dom-event/
<script type="text/javascript" src="/build/element/
<script type="text/javascript" src="/build/datasource/
<!-- OPTIONAL: Connection (enables XHR) -->
<script type="text/javascript" src=" /build/connection/
<!-- Source -->
<script type="text/javascript" src="/build/datatable/

A table is useless without data, so you first need to define the data that will be used for the table. Do this by instantiating a DataSource object that will contain your data for the rows in the table.

YAHOO.example.fruit = [

Instantiation of the DataSource object is, of course, done by calling the method 'new' on the DataSource utility class. The first and only argument to 'new' is the data structure for the class uses to build the object. In this case, the argument is the array Yahoo.example.fruit.

var myDataSource = new YAHOO.util.DataSource(YAHOO.example.fruits);

You also could use JSON, XML, Text, or a HTML table but for this example, use a JavaScript array to keep things simple.

Next, you need to set the responseType and define your responseSchema for your DataSource object. Because you're using a JavaScript array, set the responseType to TYPE_JSArray. The responseSchema defines the names of the columns the object will receive.

myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
   fields: ["name","price"]

Now, you can instantiate the DataTable object. All you need to pass in is an ID or element reference of a DIV element that will act as a container for the DataTable, the column definitions, and the newly created DataSource object.

var myColumnDefs = [
   {key:"name", label:"Fruit Type"},
   {key:"price", label:"Price"}

var myDataTable = new YAHOO.widget.DataTable("myContainer",
   myColumnDefs, myDataSource);

As you can see, the keys for the column definitions match the fields defined in our responseSchema. The labels in the column definitions are used in the markup for the table for the visible table headers.

You also could pass in a forth parameter to the DataTable object containing configuration options. There are a lot of options to the DataTable control in YUI. Again, I would highly recommend reviewing the examples and documentation to see the full list of options and features for this widget.

5a. Pagination

One of the features of the DataTable widget that I find most useful is pagination. Pagination makes interaction with large datasets much easier for the end user and keeps the design of a page intact.

Pagination also occurs without page reloads and the pagination elements are configurable. A user can choose how many rows to show on a page and easily access other pages in the DataTable.

// Configure pagination features
// The following object literal reiterates default values
var myConfigs = {
   paginated:true,         // Enables built-in client-side pagination
   paginator:{             // Configurable options
      containers: null,    // Create container DIVs dynamically
      currentPage: 1,      // Show page 1
      // Show these in the rows-per-page dropdown
      dropdownOptions: [10,25,50,100,500],
      pageLinks: 0,        // Show links to all pages
      rowsPerPage: 100     // Show up to 100 rows per page
var myDataTable = new YAHOO.widget.DataTable("myContainer",
   myColumnDefs, myDataSource, myConfigs);

Page 2 of 4

This article was originally published on October 25, 2007

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date