YUI Library Home

Site Search (YDN & YUIBlog):

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

# DataTable Control: Highlighting Cells, Rows, or Columns

View example in new window.

## Sample Code for this Example

Data:

YAHOO.example.Data.webstats = [ ["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] ]

CSS:

/* No custom CSS. */

Markup:

<div id="cell"></div> <div id="row"></div> <div id="column"></div>

JavaScript:

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 Logger Output:

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

Reload with logging
and debugging enabled.

### DataTable Control Examples:

- Basic Example
- Progressive Enhancement
- Custom Cell Formatting
- Conditional row coloring
- Nested Headers
- JSON Data Over XHR
- XML Data Over XHR With POST
- Textual Data Over XHR
- Local XML Data
- Adding and Deleting Rows
- Client-side Pagination
- Client-side Sorting
- Server-side Pagination and Sorting for Dynamic Data
- XY-scrolling, Y-scrolling, and X-scrolling
- Row Selection
- Cell Selection
- Inline Cell Editing
- Context Menu Integration
- Showing, Hiding, and Reordering Columns.
- Highlighting Cells, Rows, or Columns
- Complex Example of Multiple Features
- Datatable with Autocomplete
- Skinning Model
- Configuring the Paginator (included with examples for Paginator)
- Complex Application (included with examples for Layout Manager)

### More DataTable Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

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