YUI Library Home

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

DataTable Control: Highlighting Cells, Rows, or Columns

View example in new window.

Page
VisitsThisMonth
VisitsThisYear
ViewsThisMonth
ViewsThisYear
Example: Cell Highlighting
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
Page
VisitsThisMonth
VisitsThisYear
ViewsThisMonth
ViewsThisYear
Example: Row Highlighting
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
Page
VisitsThisMonth
VisitsThisYear
ViewsThisMonth
ViewsThisYear
Example: Column Highlighting
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

Sample Code for this Example

Data:

1YAHOO.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:

1YAHOO.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 | ?

Configuration for This Example

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.

YUI Logger Output:

Logger Console

INFO 5089ms (+0) 11:56:25 PM:
DataTable  instance yui-dt2
Post-render routine executed
INFO 5089ms (+0) 11:56:25 PM:
DataTable  instance yui-dt2
DataTable rendered
INFO 5089ms (+0) 11:56:25 PM:
DataTable  instance yui-dt1
Post-render routine executed
INFO 5089ms (+0) 11:56:25 PM:
DataTable  instance yui-dt1
DataTable rendered
INFO 5089ms (+0) 11:56:25 PM:
DataTable  instance yui-dt0
Post-render routine executed
INFO 5089ms (+41) 11:56:25 PM:
DataTable  instance yui-dt0
DataTable rendered
INFO 5048ms (+1) 11:56:25 PM:
DataTable  instance yui-dt2
DataTable message hidden
INFO 5047ms (+0) 11:56:25 PM:
DataTable  instance yui-dt2
DataTable rendering...
INFO 5047ms (+0) 11:56:25 PM:
RecordSet  instance yui-rs2
Set 5 Record(s) at index 0
INFO 5047ms (+0) 11:56:25 PM:
DataSource  instance0
Parsed array data is {results => [{ViewsThisYear => 657, ViewsThisMonth => 44, VisitsThisYear => 400, VisitsThisMonth => 20, Page => home.html}, {ViewsThisYear => 567, ViewsThisMonth => 97, VisitsThisYear => 377, VisitsThisMonth => 24, Page => blog.html}, {ViewsThisYear => 543, ViewsThisMonth => 42, VisitsThisYear => 548, VisitsThisMonth => 32, Page => contact.html}, {ViewsThisYear => 946, ViewsThisMonth => 12, VisitsThisYear => 465, VisitsThisMonth => 8, Page => about.html}, {ViewsThisYear => 0, ViewsThisMonth => 0, VisitsThisYear => 0, VisitsThisMonth => 0, Page => pagenotfound.html}]}
INFO 5047ms (+0) 11:56:25 PM:
DataSource  instance0
Received live data response for "null"
INFO 5047ms (+0) 11:56:25 PM:
DataSource  instance0
Making connection to live data for "null"
INFO 5047ms (+0) 11:56:25 PM:
DataTable  instance yui-dt2
DataTable showing message: Loading...
WARN 5047ms (+0) 11:56:25 PM:
DataTable  instance yui-dt2
Could not find DragDrop for resizeable Columns
INFO 5047ms (+1) 11:56:25 PM:
DataTable  instance yui-dt2
TH cells for 5 keys created
INFO 5046ms (+0) 11:56:25 PM:
RecordSet  instance yui-rs2
RecordSet initialized
INFO 5046ms (+0) 11:56:25 PM:
ColumnSet  instance yui-cs2
ColumnSet initialized
INFO 5046ms (+1) 11:56:25 PM:
DataTable  instance yui-dt1
DataTable message hidden
INFO 5045ms (+0) 11:56:25 PM:
DataTable  instance yui-dt1
DataTable rendering...
INFO 5045ms (+0) 11:56:25 PM:
RecordSet  instance yui-rs1
Set 5 Record(s) at index 0
INFO 5045ms (+0) 11:56:25 PM:
DataSource  instance0
Parsed array data is {results => [{ViewsThisYear => 657, ViewsThisMonth => 44, VisitsThisYear => 400, VisitsThisMonth => 20, Page => home.html}, {ViewsThisYear => 567, ViewsThisMonth => 97, VisitsThisYear => 377, VisitsThisMonth => 24, Page => blog.html}, {ViewsThisYear => 543, ViewsThisMonth => 42, VisitsThisYear => 548, VisitsThisMonth => 32, Page => contact.html}, {ViewsThisYear => 946, ViewsThisMonth => 12, VisitsThisYear => 465, VisitsThisMonth => 8, Page => about.html}, {ViewsThisYear => 0, ViewsThisMonth => 0, VisitsThisYear => 0, VisitsThisMonth => 0, Page => pagenotfound.html}]}
INFO 5045ms (+0) 11:56:25 PM:
DataSource  instance0
Received live data response for "null"
INFO 5045ms (+0) 11:56:25 PM:
DataSource  instance0
Making connection to live data for "null"
INFO 5045ms (+0) 11:56:25 PM:
DataTable  instance yui-dt1
DataTable showing message: Loading...
WARN 5045ms (+0) 11:56:25 PM:
DataTable  instance yui-dt1
Could not find DragDrop for resizeable Columns
INFO 5045ms (+1) 11:56:25 PM:
DataTable  instance yui-dt1
TH cells for 5 keys created
INFO 5044ms (+0) 11:56:25 PM:
RecordSet  instance yui-rs1
RecordSet initialized
INFO 5044ms (+0) 11:56:25 PM:
ColumnSet  instance yui-cs1
ColumnSet initialized
INFO 5044ms (+3) 11:56:25 PM:
DataTable  instance yui-dt0
DataTable message hidden
INFO 5041ms (+0) 11:56:25 PM:
DataTable  instance yui-dt0
DataTable rendering...
INFO 5041ms (+0) 11:56:25 PM:
RecordSet  instance yui-rs0
Set 5 Record(s) at index 0
INFO 5041ms (+1) 11:56:25 PM:
DataSource  instance0
Parsed array data is {results => [{ViewsThisYear => 657, ViewsThisMonth => 44, VisitsThisYear => 400, VisitsThisMonth => 20, Page => home.html}, {ViewsThisYear => 567, ViewsThisMonth => 97, VisitsThisYear => 377, VisitsThisMonth => 24, Page => blog.html}, {ViewsThisYear => 543, ViewsThisMonth => 42, VisitsThisYear => 548, VisitsThisMonth => 32, Page => contact.html}, {ViewsThisYear => 946, ViewsThisMonth => 12, VisitsThisYear => 465, VisitsThisMonth => 8, Page => about.html}, {ViewsThisYear => 0, ViewsThisMonth => 0, VisitsThisYear => 0, VisitsThisMonth => 0, Page => pagenotfound.html}]}
INFO 5040ms (+0) 11:56:25 PM:
DataSource  instance0
Received live data response for "null"
INFO 5040ms (+1) 11:56:25 PM:
DataSource  instance0
Making connection to live data for "null"
INFO 5039ms (+1) 11:56:25 PM:
DataTable  instance yui-dt0
DataTable showing message: Loading...
WARN 5038ms (+0) 11:56:25 PM:
DataTable  instance yui-dt0
Could not find DragDrop for resizeable Columns
INFO 5038ms (+13) 11:56:25 PM:
DataTable  instance yui-dt0
TH cells for 5 keys created
INFO 5025ms (+0) 11:56:25 PM:
RecordSet  instance yui-rs0
RecordSet initialized
INFO 5025ms (+2) 11:56:25 PM:
ColumnSet  instance yui-cs0
ColumnSet initialized
INFO 5023ms (+26) 11:56:25 PM:
DataSource  instance0
DataSource initialized
INFO 4997ms (+4997) 11:56:25 PM:
LogReader  instance0
LogReader initialized
INFO 0ms (+0) 11:56:20 PM:
global
Logger initialized

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

More DataTable Control Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings