Yahoo! Developer Network Home - Help

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.

SKU
Item
Quantity
Description
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 nullify the default coloring for a simpler looking table with the marked rows really standing 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:

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.

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    // cache of the records to mark 
9    markRecs = {}; 
10 
11// Create the DataSource 
12Ex.dataSource = new YAHOO.util.DataSource(Ex.Data.inventory); 
13Ex.dataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; 
14Ex.dataSource.responseSchema = { 
15    fields : ['SKU','Quantity','Item','Description'
16}; 
17 
18// Create a custom function to store the records needing row coloring 
19YAHOO.widget.DataTable.Formatter.rowMarker = function (cell,rec,col,data) { 
20    if (data < 40) { 
21        // In object hash to prevent duplication 
22        markRecs[rec.getId()] = rec; 
23    } 
24    cell.innerHTML = data; 
25}; 
26 
27// Function to add the color class to rows 
28Ex.updateMarks = function () { 
29    // Clear mark class off all rows 
30    Dom.removeClass(Dom.getElementsByClassName('mark','tr','tbl'), 'mark'); 
31 
32    // Apply mark class to identified rows 
33    for (var recKey in markRecs) { 
34        if (YAHOO.lang.hasOwnProperty(markRecs, recKey)) { 
35            Dom.addClass(Ex.dataTable.getTrEl(markRecs[recKey]), 'mark'); 
36        } 
37    } 
38}; 
39 
40// Instantiate the DataTable. 
41Ex.dataTable = new YAHOO.widget.DataTable('tbl'
42                [ {key:'SKU',sortable: true}, 
43                  {key:'Item',sortable: true}, 
44                  {key:'Quantity',sortable: true, formatter: 'rowMarker'}, 
45                  {key:'Description',sortable: true
46                ], 
47                Ex.dataSource); 
48 
49// Set row colors initially 
50Ex.updateMarks(); 
51 
52// Add the class to the rows on renderEvent 
53Ex.dataTable.subscribe('renderEvent',Ex.updateMarks); 
54 
55}); 
view plain | print | ?

Copyright © 2008 Yahoo! Inc. All rights reserved.

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