DataTable Widget: Column Sorting
The
Y.Plugin.DataTableSort plugin adds column sorting functionality to a basic DataTable. To add column sorting functionality to any basic datatable, simply call .plug(Y.Plugin.DataTableSort). The DataTableSort plugin is available in the datatable-sort submodule. To enable sorting, you must define sortable:true in each column definition.
YUI().use("datatable-sort", function(Y) { var cols = [ {key:"a", label:"Sortable Column A", sortable:true}, {key:"b", label:"Not Sortable Column B"}, {key:"c", label:"Sortable Column C", sortable:true} ], data = [ {a:"1A", b:"1B", c:"1C"}, {a:"2A", b:"2B", c:"2C"}, {a:"3A", b:"3B", c:"3C"} ], dt = new Y.DataTable.Base({columnset:cols, recordset:data}). plug(Y.Plugin.DataTableSort).render("#sort"); });
Configurable Trigger
By default, sorts will be triggered when the theadCellClick event is fired by the DataTable. You can set this to any other DataTable custom event via the trigger attribute of the DataTableSort constructor.
A related change worth making is to remove the link from the TH content, since the user will not be clicking to sort in this implementation. Simply set the template attribute to be the unadorned "{value}" string.
YUI().use("datatable-sort", function(Y) { var cols = [ {key:"a", label:"Mouseenter to Sort A", sortable:true}, {key:"b", label:"Not Sortable Column B"}, {key:"c", label:"Mouseenter to Sort C", sortable:true} ], data = [ {a:"1A", b:"1B", c:"1C"}, {a:"2A", b:"2B", c:"2C"}, {a:"3A", b:"3B", c:"3C"} ], dt = new Y.DataTable.Base({columnset:cols, recordset:data}). plug(Y.Plugin.DataTableSort, {trigger:"theadMouseenter", template:"{value}"}). render("#mouseenter"); });
