Example: DataTable - Integrated Feature Set (YUI Library)

# DataTable Widget :: Integrated Feature Set

### Sample Code

Data:

YAHOO.example.Data.areacodes = [ {areacode: "201", state: "New Jersey"}, ..., {areacode: "989", state: "Michigan"} ];

CSS:

/* custom css*/ #complex {margin:1em;} #complex table {border-collapse:collapse;} #complex th, #paginated td {border:1px solid #000;width:10em;} #complex th {background-color:#696969;}/* gray*/ #complex th .yui-dt-headtext {margin-right:5px;padding-right:15px;} /*room for arrow*/ #complex th a {color:#fff;} /* white */ #complex .yui-dt-sortedbyasc, #complex .yui-dt-sortedbydesc {background-color:#3F3F3F;}/*dark gray*/ #complex .yui-dt-sortedbyasc .yui-dt-headtext {background-image: url('img/arrow_up.gif'); background-repeat:no-repeat; background-position:right;}/*arrow up*/ #complex .yui-dt-sortedbydesc .yui-dt-headtext {background-image: url('img/arrow_dn.gif'); background-repeat:no-repeat; background-position:right;}/*arrow down*/ #complex .yui-dt-odd {background-color:#eee;} /*light gray*/ #complex .yui-dt-selected {background-color:#97C0A5;} /*green*/ .areacodestyle {text-align:center;} .statestyle, .notesstyle {padding-left:1em;}

Markup:

<div id="complex"></div>

JavaScript:

// Custom sort functionality to sort by areacode within states YAHOO.example.sortStatesAsc = function(a, b) { if((a === null) || (typeof a == "undefined")) { if((b === null) || (typeof b == "undefined")) { return 0; } else { return 1; } } else if((b === null) || (typeof b == "undefined")) { return -1; } 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) { if((a === null) || (typeof a == "undefined")) { if((b === null) || (typeof b == "undefined")) { return 0; } else { return -1; } } else if((b === null) || (typeof b == "undefined")) { return 1; } 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",width:"8em",className:"areacodestyle",sortable:true}, {key:"state",text:"States",width:"16em",className:"statestyle",sortable:true,sortOptions:{ascFunction:YAHOO.example.sortStatesAsc,descFunction:YAHOO.example.sortStatesDesc}}, {key:"notes",text:"Notes (editable)",editor:"textbox"} ]; 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 myConfigs = { caption:"Example: Integrated Feature Set", sortedBy:{colKey:"areacode",dir:"asc"}, paginator:true, paginatorOptions: { rowsPerPage: 25, dropdownOptions: [10,25,50,100], pageLinks: 5 } } var myDataTable = new YAHOO.widget.DataTable("complex",myColumnSet,myDataSource,myConfigs); myDataTable.subscribe("cellClickEvent",myDataTable.onEventSelectRow); myDataTable.subscribe("cellClickEvent",myDataTable.onEventEditCell); var onCellEdit = function(oArgs) { var oldData = oArgs.oldData || ""; var newData = oArgs.newData || ""; YAHOO.log("Cell \"" + oArgs.target.id + "\" was updated from \"" + oldData + "\" to \"" + newData + "\"", "info", this.toString()); } myDataTable.subscribe("cellEditEvent",onCellEdit);