Yahoo! Developer Network Home - Help

Site Search (YDN & YUIBlog):

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

# DataTable Control (beta): Conditional row coloring

This example demonstrates how to color DataTable rows based on data in a cell. In this case, rows with Quantity less than 40 are highlighted.

View example in new window.

## CSS

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

/* Remove row striping, column borders, and sort highlighting */ .yui-skin-sam tr.yui-dt-odd, .yui-skin-sam tr.yui-dt-odd td.yui-dt-asc, .yui-skin-sam tr.yui-dt-odd td.yui-dt-desc, .yui-skin-sam tr.yui-dt-even td.yui-dt-asc, .yui-skin-sam tr.yui-dt-even td.yui-dt-desc { background-color: #fff; } .yui-skin-sam .yui-dt tbody td { border-bottom: 1px solid #ddd; } .yui-skin-sam .yui-dt thead th { border-bottom: 1px solid #7f7f7f; } .yui-skin-sam .yui-dt tr.yui-dt-last td, .yui-skin-sam .yui-dt th, .yui-skin-sam .yui-dt td { border: none; } /* Class for marked rows */ .yui-skin-sam .yui-dt tr.mark, .yui-skin-sam .yui-dt tr.mark td.yui-dt-asc, .yui-skin-sam .yui-dt tr.mark td.yui-dt-desc, .yui-skin-sam .yui-dt tr.mark td.yui-dt-asc, .yui-skin-sam .yui-dt tr.mark td.yui-dt-desc { background-color: #a33; color: #fff; }

## Markup:

<div id="tbl"></div>

## 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: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### DataTable Control (beta) Examples:

### More DataTable Control (beta) Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings