YUI Library Home

YUI Library Examples: DataTable Control: Conditional row coloring

DataTable Control: Conditional row coloring

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

23-23874
Helmet
43
Red baseball helmet. Size: Large.
48-38835
Football
84
Leather football.
84-84848
Goggles
31
Light blue swim goggles
84-84843
Badminton Set
56
Set of 2 badminton rackets, net, and 3 birdies.
84-39321
Tennis Balls
128
Canister of 3 tennis balls.
39-48949
Snowboard
55
99-28128
Cleats
77
Soccer cleats. Size: 10.
83-48281
Volleyball
65
89-32811
Sweatband
12
Blue sweatband. Size: Medium.
28-22847
Golf Set
43
Set of 9 golf clubs and bag.
38-38281
Basketball Shorts
1
Green basketball shorts. Size: Small.
82-38333
Lip balm
288
Lip balm. Flavor: Cherry.
21-38485
Ping Pong Ball
177
83-38285
Hockey Puck
87
Glow-in-the-dark hockey puck.

CSS

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

1/* Remove row striping, column borders, and sort highlighting */ 
2.yui-skin-sam tr.yui-dt-odd, 
3.yui-skin-sam tr.yui-dt-odd td.yui-dt-asc, 
4.yui-skin-sam tr.yui-dt-odd td.yui-dt-desc, 
5.yui-skin-sam tr.yui-dt-even td.yui-dt-asc, 
6.yui-skin-sam tr.yui-dt-even td.yui-dt-desc { 
7    background-color: #fff; 
8} 
9.yui-skin-sam .yui-dt tbody td { 
10    border-bottom1px solid #ddd; 
11} 
12.yui-skin-sam .yui-dt thead th { 
13    border-bottom1px solid #7f7f7f; 
14} 
15.yui-skin-sam .yui-dt tr.yui-dt-last td, 
16.yui-skin-sam .yui-dt th, 
17.yui-skin-sam .yui-dt td { 
18    bordernone
19} 
20 
21/* Class for marked rows */ 
22.yui-skin-sam .yui-dt tr.mark, 
23.yui-skin-sam .yui-dt tr.mark td.yui-dt-asc, 
24.yui-skin-sam .yui-dt tr.mark td.yui-dt-desc, 
25.yui-skin-sam .yui-dt tr.mark td.yui-dt-asc, 
26.yui-skin-sam .yui-dt tr.mark td.yui-dt-desc { 
27    background-color: #a33
28    color: #fff; 
29} 
view plain | print | ?

Markup:

1<div id="tbl"></div> 
view plain | print | ?

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.

1YAHOO.util.Event.onDOMReady(function () { 
2 
3// Create a shortcut 
4var Dom = YAHOO.util.Dom; 
5 
6// Contain our code under the YAHOO.example namespace 
7var Ex = YAHOO.example; 
8 
9// Create the DataSource 
10Ex.dataSource = new YAHOO.util.DataSource(Ex.Data.inventory); 
11Ex.dataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; 
12Ex.dataSource.responseSchema = { 
13    fields : ['SKU','Quantity','Item','Description'
14}; 
15 
16// Define a custom row formatter function 
17var myRowFormatter = function(elTr, oRecord) { 
18    if (oRecord.getData('Quantity') < 40) { 
19        Dom.addClass(elTr, 'mark'); 
20    } 
21    return true
22};  
23 
24// Instantiate the DataTable. 
25Ex.dataTable = new YAHOO.widget.DataTable('tbl'
26                [ {key:'SKU',sortable: true}, 
27                  {key:'Item',sortable: true}, 
28                  {key:'Quantity',sortable: true}, 
29                  {key:'Description',sortable: true
30                ], 
31                Ex.dataSource, 
32                {formatRow: myRowFormatter}); // Enable the row formatter 
33}); 
view plain | print | ?

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

Copyright © 2009 Yahoo! Inc. All rights reserved.

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