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.
Loading... | |||
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. |
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-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 | ? |
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.
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 | |
9 | // Create the DataSource |
10 | Ex.dataSource = new YAHOO.util.DataSource(Ex.Data.inventory); |
11 | Ex.dataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; |
12 | Ex.dataSource.responseSchema = { |
13 | fields : ['SKU','Quantity','Item','Description'] |
14 | }; |
15 | |
16 | // Define a custom row formatter function |
17 | var 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. |
25 | Ex.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 | ? |
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.
Note: Logging and debugging is currently turned off for this example.
Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings