YUI Library Examples: DataTable Control: Conditional row coloring

CSS

We apply custom CSS for a simpler looking table so the marked rows can really stand out.

Markup:

JavaScript:

A custom row formatter is used to examine for Records where Quantity is less than 40 and apply a CSS class to the TR element to turn it a different color.

YAHOO.util.Event.onDOMReady(function () {

// Create a shortcut
var Dom = YAHOO.util.Dom;

// Contain our code under the YAHOO.example namespace
var Ex = YAHOO.example;

// Create the DataSource
Ex.dataSource = new YAHOO.util.DataSource(Ex.Data.inventory);
Ex.dataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
Ex.dataSource.responseSchema = {
    fields : ['SKU','Quantity','Item','Description']
};

// Define a custom row formatter function
var myRowFormatter = function(elTr, oRecord) {
    if (oRecord.getData('Quantity') < 40) {
        Dom.addClass(elTr, 'mark');
    }
    return true;
};

// Instantiate the DataTable.
Ex.dataTable = new YAHOO.widget.DataTable('tbl',
                [ {key:'SKU',sortable: true},
                  {key:'Item',sortable: true},
                  {key:'Quantity',sortable: true},
                  {key:'Description',sortable: true}
                ],
                Ex.dataSource,
                {formatRow: myRowFormatter}); // Enable the row formatter
});

YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

YUI Library Examples: DataTable Control: Conditional row coloring

CSS

Markup:

JavaScript:

YUI Logger Output:

DataTable Control Examples:

More DataTable Control Resources: