DataTable Widget :: Basic Table

Sample Code

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"});