DataTable Control (beta): Highlighting Cells, Rows, or Columns

View example in new window.

Page	VisitsThisMonth	VisitsThisYear	ViewsThisMonth	ViewsThisYear

Example: Cell Highlighting
Page	VisitsThisMonth	VisitsThisYear	ViewsThisMonth	ViewsThisYear
home.html	20	400	44	657
blog.html	24	377	97	567
contact.html	32	548	42	543
about.html	8	465	12	946
pagenotfound.html	0	0	0	0
Loading data...

Page	VisitsThisMonth	VisitsThisYear	ViewsThisMonth	ViewsThisYear

Example: Row Highlighting
Page	VisitsThisMonth	VisitsThisYear	ViewsThisMonth	ViewsThisYear
home.html	20	400	44	657
blog.html	24	377	97	567
contact.html	32	548	42	543
about.html	8	465	12	946
pagenotfound.html	0	0	0	0
Loading data...

Page	VisitsThisMonth	VisitsThisYear	ViewsThisMonth	ViewsThisYear

Example: Column Highlighting
Page	VisitsThisMonth	VisitsThisYear	ViewsThisMonth	ViewsThisYear
home.html	20	400	44	657
blog.html	24	377	97	567
contact.html	32	548	42	543
about.html	8	465	12	946
pagenotfound.html	0	0	0	0
Loading data...

Sample Code for this Example

Data:


1	YAHOO.example.Data.webstats = [
2	["home.html",20,400,44,657],
3	["blog.html",24,377,97,567],
4	["contact.html",32,548,42,543],
5	["about.html",8,465,12,946],
6	["pagenotfound.html",0,0,0,0]
7	]
	view plain \| print \| ?

CSS:


1	/* No custom CSS. */
	view plain \| print \| ?

Markup:


1	<div id="cell"></div>
2	<div id="row"></div>
3	<div id="column"></div>
	view plain \| print \| ?

JavaScript:


1	YAHOO.util.Event.addListener(window, "load", function() {
2	YAHOO.example.Highlighting = new function() {
3	var myColumnDefs = [
4	{key:"Page"},
5	{key:"VisitsThisMonth"},
6	{key:"VisitsThisYear"},
7	{key:"ViewsThisMonth"},
8	{key:"ViewsThisYear"}
9	];
10
11	this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.webstats);
12	this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
13	this.myDataSource.responseSchema = {
14	fields: ["Page","VisitsThisMonth","VisitsThisYear","ViewsThisMonth","ViewsThisYear"]
15	};
16
17	this.cellHighlightDataTable = new YAHOO.widget.DataTable("cell",
18	myColumnDefs, this.myDataSource, {
19	caption:"Example: Cell Highlighting"
20	});
21	// Enable cell highlighting
22	this.cellHighlightDataTable.subscribe("cellMouseoverEvent", this.cellHighlightDataTable.onEventHighlightCell);
23	this.cellHighlightDataTable.subscribe("cellMouseoutEvent", this.cellHighlightDataTable.onEventUnhighlightCell);
24
25	this.rowHighlightDataTable = new YAHOO.widget.DataTable("row",
26	myColumnDefs, this.myDataSource, {
27	caption:"Example: Row Highlighting"
28	});
29	// Enable row highlighting
30	this.rowHighlightDataTable.subscribe("rowMouseoverEvent", this.rowHighlightDataTable.onEventHighlightRow);
31	this.rowHighlightDataTable.subscribe("rowMouseoutEvent", this.rowHighlightDataTable.onEventUnhighlightRow);
32
33	this.colHighlightDataTable = new YAHOO.widget.DataTable("column",
34	myColumnDefs, this.myDataSource, {
35	caption:"Example: Column Highlighting"
36	});
37	// Enable Column highlighting
38	this.colHighlightDataTable.subscribe("theadCellMouseoverEvent", this.colHighlightDataTable.onEventHighlightColumn);
39	this.colHighlightDataTable.subscribe("theadCellMouseoutEvent", this.colHighlightDataTable.onEventUnhighlightColumn);
40	};
41	});
	view plain \| print \| ?

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.Highlighting = new function() {
        var myColumnDefs = [
            {key:"Page"},
            {key:"VisitsThisMonth"},
            {key:"VisitsThisYear"},
            {key:"ViewsThisMonth"},
            {key:"ViewsThisYear"}
        ];

this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.webstats);
        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        this.myDataSource.responseSchema = {
            fields: ["Page","VisitsThisMonth","VisitsThisYear","ViewsThisMonth","ViewsThisYear"]
        };

this.cellHighlightDataTable = new YAHOO.widget.DataTable("cell",
                myColumnDefs, this.myDataSource, {
                    caption:"Example: Cell Highlighting"
                });
        // Enable cell highlighting
        this.cellHighlightDataTable.subscribe("cellMouseoverEvent", this.cellHighlightDataTable.onEventHighlightCell);
        this.cellHighlightDataTable.subscribe("cellMouseoutEvent", this.cellHighlightDataTable.onEventUnhighlightCell);

this.rowHighlightDataTable = new YAHOO.widget.DataTable("row",
                myColumnDefs, this.myDataSource, {
                    caption:"Example: Row Highlighting"
                });
        // Enable row highlighting
        this.rowHighlightDataTable.subscribe("rowMouseoverEvent", this.rowHighlightDataTable.onEventHighlightRow);
        this.rowHighlightDataTable.subscribe("rowMouseoutEvent", this.rowHighlightDataTable.onEventUnhighlightRow);

this.colHighlightDataTable = new YAHOO.widget.DataTable("column",
                myColumnDefs, this.myDataSource, {
                    caption:"Example: Column Highlighting"
                });
        // Enable Column highlighting
        this.colHighlightDataTable.subscribe("theadCellMouseoverEvent", this.colHighlightDataTable.onEventHighlightColumn);
        this.colHighlightDataTable.subscribe("theadCellMouseoutEvent", this.colHighlightDataTable.onEventUnhighlightColumn);
    };
});

YUI Library Examples: DataTable Control (beta): Highlighting Cells, Rows, or Columns

Sample Code for this Example

YUI Logger Output:

Logger Console

DataTable Control (beta) Examples:

More DataTable Control (beta) Resources: