YUI Library Examples: DataTable Control (beta): Conditional row coloring

CSS

We nullify the default coloring for a simpler looking table with the marked rows really standing out.

Markup:

JavaScript:

Using a custom formatter, records that need to have their corresponding rows colored are stored in a collection outside the DataTable. Then the DataTable's renderEvent is subscribed to with a function to apply the mark class to the appropriate rows.

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,
    // cache of the records to mark
    markRecs = {};

// 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']
};

// Create a custom function to store the records needing row coloring
YAHOO.widget.DataTable.Formatter.rowMarker = function (cell,rec,col,data) {
    if (data < 40) {
        // In object hash to prevent duplication
        markRecs[rec.getId()] = rec;
    }
    cell.innerHTML = data;
};

// Function to add the color class to rows
Ex.updateMarks = function () {
    // Clear mark class off all rows
    Dom.removeClass(Dom.getElementsByClassName('mark','tr','tbl'), 'mark');

// Apply mark class to identified rows
    for (var recKey in markRecs) {
        if (YAHOO.lang.hasOwnProperty(markRecs, recKey)) {
            Dom.addClass(Ex.dataTable.getTrEl(markRecs[recKey]), 'mark');
        }
    }
};

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

// Set row colors initially
Ex.updateMarks();

// Add the class to the rows on renderEvent
Ex.dataTable.subscribe('renderEvent',Ex.updateMarks);

});

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 (beta): Conditional row coloring

CSS

Markup:

JavaScript:

YUI Logger Output:

DataTable Control (beta) Examples:

More DataTable Control (beta) Resources: