Yahoo! Developer Network Home - Help

YUI Library Examples: DataTable Control (beta): Basic Example

DataTable Control (beta): Basic Example

A demonstration of the DataTable's basic feature set.

id
date
quantity
amount
title
DataTable Caption
po-0167
3/24/1980
1
$4.00
A Book About Nothing
po-0783
1/3/1983
$12.12
The Meaning of Life
po-0297
12/12/1978
12
$1.25
This Book Was Meant to Be Read Aloud
po-1482
3/11/1985
6
$3.50
Read Me Twice

Sample Code for this Example

Data:

1YAHOO.example.Data = { 
2    bookorders: [ 
3        {id:"po-0167", date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing"}, 
4        {id:"po-0783", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life"}, 
5        {id:"po-0297", date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:"This Book Was Meant to Be Read Aloud"}, 
6        {id:"po-1482", date:new Date("March 11, 1985"), quantity:6, amount:3.5, title:"Read Me Twice"} 
7    ] 
8
view plain | print | ?

CSS:

1.yui-skin-sam .yui-dt-liner { white-space:nowrap}  
2
view plain | print | ?

Markup:

1<div id="basic"></div> 
view plain | print | ?

JavaScript:

1YAHOO.util.Event.addListener(window, "load"function() { 
2    YAHOO.example.Basic = new function() { 
3        var myColumnDefs = [ 
4            {key:"id", sortable:true, resizeable:true}, 
5            {key:"date", formatter:YAHOO.widget.DataTable.formatDate, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true}, 
6            {key:"quantity", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true, resizeable:true}, 
7            {key:"amount", formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true, resizeable:true}, 
8            {key:"title", sortable:true, resizeable:true
9        ]; 
10 
11        this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders); 
12        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; 
13        this.myDataSource.responseSchema = { 
14            fields: ["id","date","quantity","amount","title"
15        }; 
16 
17        this.myDataTable = new YAHOO.widget.DataTable("basic"
18                myColumnDefs, this.myDataSource, {caption:"DataTable Caption"}); 
19    }; 
20}); 
view plain | print | ?

Copyright © 2008 Yahoo! Inc. All rights reserved.

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