YUI Library Examples: DataTable Control: Conditional row coloring

SKU	Item	Quantity	Description
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.

	view plain \| print \| ?

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 \| ?

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	});

INFO 1910ms (+34) 2:51:14 PM:
LogReader  instance0
LogReader initialized

INFO 1876ms (+0) 2:51:14 PM:

DataTable instance yui-dt0

Post-render routine executed

INFO 1876ms (+28) 2:51:14 PM:
DataTable  instance yui-dt0
DataTable rendered

INFO 1848ms (+3) 2:51:14 PM:

DataTable instance yui-dt0

DataTable message hidden

INFO 1845ms (+0) 2:51:14 PM:
DataTable  instance yui-dt0
DataTable rendering...

INFO 1845ms (+1) 2:51:14 PM:
RecordSet  instance yui-rs6
Set 14 Record(s) at index 0

INFO 1844ms (+0) 2:51:14 PM:
DataSource  instance0
Parsed array data is {results => [{Description => Red baseball helmet. Size: Large., Item => Helmet, Quantity => 43, SKU => 23-23874}, {Description => Leather football., Item => Football, Quantity => 84, SKU => 48-38835}, {Description => Light blue swim goggles, Item => Goggles, Quantity => 31, SKU => 84-84848}, {Description => Set of 2 badminton rackets, net, and 3 birdies., Item => Badminton Set, Quantity => 56, SKU => 84-84843}, {Description => Canister of 3 tennis balls., Item => Tennis Balls, Quantity => 128, SKU => 84-39321}, {Description => , Item => Snowboard, Quantity => 55, SKU => 39-48949}, {Description => Soccer cleats. Size: 10., Item => Cleats, Quantity => 77, SKU => 99-28128}, {Description => , Item => Volleyball, Quantity => 65, SKU => 83-48281}, {Description => Blue sweatband. Size: Medium., Item => Sweatband, Quantity => 12, SKU => 89-32811}, {Description => Set of 9 golf clubs and bag., Item => Golf Set, Quantity => 43, SKU => 28-22847}, {Description => Green basketball shorts. Size: Small., Item => Basketball Shorts, Quantity => 1, SKU => 38-38281}, {Description => Lip balm. Flavor: Cherry., Item => Lip balm, Quantity => 288, SKU => 82-38333}, {Description => , Item => Ping Pong Ball, Quantity => 177, SKU => 21-38485}, {Description => Glow-in-the-dark hockey puck., Item => Hockey Puck, Quantity => 87, SKU => 83-38285}]}

INFO 1844ms (+0) 2:51:14 PM:

DataSource instance0

Received live data response for "null"

INFO 1844ms (+1) 2:51:14 PM:

DataSource instance0

Making connection to live data for "null"

INFO 1843ms (+0) 2:51:14 PM:

DataTable instance yui-dt0

DataTable showing message: Loading...

WARN 1843ms (+0) 2:51:14 PM:

DataTable instance yui-dt0

Could not find DragDrop for resizeable Columns

INFO 1843ms (+4) 2:51:14 PM:

DataTable instance yui-dt0

TH cells for 4 keys created

INFO 1839ms (+1) 2:51:14 PM:
RecordSet  instance yui-rs6
RecordSet initialized

INFO 1838ms (+1) 2:51:14 PM:
ColumnSet  instance yui-cs1
ColumnSet initialized

INFO 1837ms (+1837) 2:51:14 PM:
DataSource  instance0
DataSource initialized

INFO 0ms (+0) 2:51:12 PM:
global
Logger initialized

YUI Library Examples: DataTable Control: Conditional row coloring

CSS

Markup:

JavaScript:

Configuration for This Example

YUI Logger Output:

Logger Console

DataTable Control Examples:

More DataTable Control Resources: