Example: DataTable - Basic Table (YUI Library)

# DataTable Widget :: Basic Table

### Sample Code

Data:

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

CSS:

/* custom css*/ #basic {margin:1em;} #basic table {border-collapse:collapse;} #basic th, #basic td {border:1px solid #000;padding:.25em;} #basic th {background-color:#696969;color:#fff;} /*dark gray*/ #basic .yui-dt-odd {background-color:#eee;} /*light gray*/ #basic em {font-style:italic;} #basic strong {font-weight:bold;} #basic .big {font-size:136%;} #basic .small {font-size:77%}

Markup:

<div id="basic"></div>

JavaScript:

var myColumnHeaders = [ {key:"POID", abbr:"Purchase order ID", sortable:true, resizeable:true}, {key:"Date", type:"date", sortable:true, resizeable:true}, {key:"Quantity", type:"number", sortable:true, resizeable:true}, {key:"Amount", type:"currency", sortable:true, resizeable:true}, {key:"Title", type:"html", sortable:true, resizeable:true} ]; var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders); var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; myDataSource.responseSchema = { fields: ["POID","Date","Quantity","Amount","Title"] }; var myDataTable = new YAHOO.widget.DataTable("basic", myColumnSet, myDataSource,{caption:"Example: Basic Table"});