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.

View example in new window.

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.

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

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.


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

YAHOO.util.Event.onDOMReady(function () {

// Create a shortcut
var Dom = YAHOO.util.Dom;

// Contain our code under the YAHOO.example namespace
var Ex = YAHOO.example;

// Create the DataSource
Ex.dataSource = new YAHOO.util.DataSource(Ex.Data.inventory);
Ex.dataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
Ex.dataSource.responseSchema = {
    fields : ['SKU','Quantity','Item','Description']
};

// Define a custom row formatter function
var myRowFormatter = function(elTr, oRecord) {
    if (oRecord.getData('Quantity') < 40) {
        Dom.addClass(elTr, 'mark');
    }
    return true;
};

// Instantiate the DataTable.
Ex.dataTable = new YAHOO.widget.DataTable('tbl',
                [ {key:'SKU',sortable: true},
                  {key:'Item',sortable: true},
                  {key:'Quantity',sortable: true},
                  {key:'Description',sortable: true}
                ],
                Ex.dataSource,
                {formatRow: myRowFormatter}); // Enable the row formatter
});

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

YUI Library Examples: DataTable Control: Conditional row coloring

CSS

Markup:

JavaScript:

YUI Logger Output:

DataTable Control Examples:

More DataTable Control Resources: