DataTable Widget :: Custom Sorting

Sample Code

CSS:

/* custom css*/ #sort {margin:1em;} #sort table {border-collapse:collapse;} #sort th, #sort td {border:1px solid #000;} #sort th {background-color:#696969;}/*dark gray*/ #sort th a {color:#fff;} #sort th .yui-dt-headtext {margin-right:5px;padding-right:15px;} /*room for arrow*/ #sort .yui-dt-sortedbyasc, #sort .yui-dt-sortedbydesc {background-color:#3F3F3F;}/*dark gray*/ #sort .yui-dt-sortedbyasc .yui-dt-headtext {background-image: url('img/arrow_up.gif'); background-repeat:no-repeat; background-position:right;}/*arrow up*/ #sort .yui-dt-sortedbydesc .yui-dt-headtext {background-image: url('img/arrow_dn.gif'); background-repeat:no-repeat; background-position:right;}/*arrow down*/ #sort .yui-dt-odd {background-color:#eee;} /*light gray zebra stripe*/

Markup:

<div id="sort"></div>

JavaScript:

// Custom sort functionality to sort by areacode within states YAHOO.example.sortStatesAsc = function(a, b) { var comp = YAHOO.util.Sort.compareAsc; var compState = comp(a.state, b.state); return (compState !== 0) ? compState : comp(a.areacode, b.areacode); }; YAHOO.example.sortStatesDesc = function(a, b) { var comp = YAHOO.util.Sort.compareDesc; var compState = comp(a.state, b.state); return (compState !== 0) ? compState : comp(a.areacode, b.areacode); }; var myColumnHeaders = [ {key:"areacode",text:"Area Codes",sortable:true}, {key:"state",text:"States",sortable:true,sortOptions:{ascFunction:YAHOO.example.sortStatesAsc,descFunction:YAHOO.example.sortStatesDesc}} ]; var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders); var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.areacodes); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; myDataSource.responseSchema = { fields: ["areacode","state"] }; var myDataTable = new YAHOO.widget.DataTable("sort",myColumnSet,myDataSource,{caption:"Example: Custom Sorting",sortedBy:{colKey:"areacode",dir:"asc"}}); var onColumnSort = function(oArgs) { var column = oArgs.column; var dir = oArgs.dir; YAHOO.log("Column \"" + column.key + "\" sorted " + dir,"info","SortExample"); }; myDataTable.subscribe("columnSortEvent",onColumnSort);