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. |
Loading data... |
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-bottom: 1px solid #ddd; |
11 | } |
12 | .yui-skin-sam .yui-dt thead th { |
13 | border-bottom: 1px 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 | border: none; |
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 | ? |
1 | <div id="tbl"></div> |
view plain | print | ? |
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.
1 | YAHOO.util.Event.onDOMReady(function () { |
2 | |
3 | // Create a shortcut |
4 | var Dom = YAHOO.util.Dom; |
5 | |
6 | // Contain our code under the YAHOO.example namespace |
7 | var Ex = YAHOO.example, |
8 | // cache of the records to mark |
9 | markRecs = {}; |
10 | |
11 | // Create the DataSource |
12 | Ex.dataSource = new YAHOO.util.DataSource(Ex.Data.inventory); |
13 | Ex.dataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; |
14 | Ex.dataSource.responseSchema = { |
15 | fields : ['SKU','Quantity','Item','Description'] |
16 | }; |
17 | |
18 | // Create a custom function to store the records needing row coloring |
19 | YAHOO.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 |
28 | Ex.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. |
41 | Ex.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 |
50 | Ex.updateMarks(); |
51 | |
52 | // Add the class to the rows on renderEvent |
53 | Ex.dataTable.subscribe('renderEvent',Ex.updateMarks); |
54 | |
55 | }); |
view plain | print | ? |
Note: Logging and debugging is currently turned off for this example.
Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings