cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<style scoped>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly/* custom styles for this example */
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith.example .yui3-datatable {
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith margin-bottom: 1em;
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly/* css to counter global site css */
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith.example table {
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith width: auto;
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith.example caption {
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith display: table-caption;
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith.example td {
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith text-transform: none;
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith border: 0 none;
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<div class="intro">
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith <p>The `datatable-sort` module adds column sorting functionality to a basic DataTable.</p>
819e90d415ed17d59af3a247b2ad9d6feb0c21b5Luke Smith<div class="example yui3-skin-sam">
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {{>datatable-sort-source}}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<h2>Implementing Sortable Columns</h2>
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith<p>To add column sorting functionality to any DataTable, simply include the `datatable-sort` module in your `use()` line and add the `sortable: true` configuration to the configuration objects of the columns you want to be sortable.</p>
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith<p>Note, if you want all columns to be sortable, simply set `sortable: true` on the DataTable instance.</p>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny DonnellyYUI().use("datatable-sort", function(Y) {
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {key:"Company", label:"Click to Sort Column A", sortable:true},
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {key:"Phone", label:"Not Sortable Column B"},
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {key:"Contact", label:"Click to Sort Column C", sortable:true}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {Company:"Company Bee", Phone:"415-555-1234", Contact:"Sally Spencer"},
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {Company:"Acme Company", Phone:"650-555-4444", Contact:"John Jones"},
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {Company:"Industrial Industries", Phone:"408-555-5678", Contact:"Robin Smith"}
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith columns: cols,
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith data : data,
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly summary: "Contacts list",
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly caption: "Table with simple column sorting"
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith }).render("#sort");
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith<!--h6>Pre-sorted Data</h6>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<p>Often data is already sorted when it loads, and we want the data to reverse-sort the first time the user clicks on the column. In that case, define the `lastSortedBy` value in the DataTableSort plugin to indicate the field that is already sorted and whether it is sorted in "asc" or "desc" order.</p>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny DonnellyYUI().use("datatable-sort", function(Y) {
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {key:"Company", label:"Click to Sort Column A", sortable:true},
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {key:"Phone", label:"Not Sortable Column B"},
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {key:"Contact", label:"Click to Sort Column C", sortable:true}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly presortedData = [
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {Company:"Acme Company", Phone:"415-555-1234", Contact:"John Jones"},
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {Company:"Company Bee", Phone:"650-555-4444", Contact:"Sally Spencer"},
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {Company:"Industrial Industries", Phone:"408-555-5678", Contact:"Robin Smith"}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly columnset: cols,
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly recordset: presortedData,
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly summary: "Contacts list",
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly caption: "This table loads with presorted data"
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly lastSortedBy: {
eb17ee6092f0f0c34723b1344149f7eab4286a40Luke Smith key: "Company",
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly .render("#presorted");
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<h6>Configurable Trigger</h6>
994d0b3f447aa108b0ed35a5e4a8d82a62b6fb0fLuke Smith<p>By default, sorts will be triggered when the user clicks on the TH element
994d0b3f447aa108b0ed35a5e4a8d82a62b6fb0fLuke Smithof a sortable column, which fires a `theadCellClick` DataTable event. You can
994d0b3f447aa108b0ed35a5e4a8d82a62b6fb0fLuke Smithset this to be any other DataTable custom event by setting the `trigger`
994d0b3f447aa108b0ed35a5e4a8d82a62b6fb0fLuke Smithattribute in the DataTableSort plugin constructor. Note: Since the `trigger`
994d0b3f447aa108b0ed35a5e4a8d82a62b6fb0fLuke Smithattribute is `initOnly`, this value can only be set in the plugin constructor
994d0b3f447aa108b0ed35a5e4a8d82a62b6fb0fLuke Smithand not after the plugin has been instantiated.</p>
994d0b3f447aa108b0ed35a5e4a8d82a62b6fb0fLuke Smith<p>A related change worth making is to remove the link from the TH content,
994d0b3f447aa108b0ed35a5e4a8d82a62b6fb0fLuke Smithsince the user will not be clicking to sort in this implementation. Simply set
994d0b3f447aa108b0ed35a5e4a8d82a62b6fb0fLuke Smiththe `template` attribute to be the unadorned `"{value}"` string.</p>
994d0b3f447aa108b0ed35a5e4a8d82a62b6fb0fLuke Smith<p><strong>Note:</strong> touch devices don't support the `dblclick` event, so the last table won't be sortable for all users. Be mindful of your audience when configuring triggers.</p>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny DonnellyYUI().use("datatable-sort", function(Y) {
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {key:"Company", label:"Dblclick to Sort A", sortable:true},
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {key:"Phone", label:"Not Sortable Column B"},
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {key:"Contact", label:"Dblclick to Sort C", sortable:true}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {Company:"Company Bee", Phone:"415-555-1234", Contact:"Sally Spencer"},
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {Company:"Acme Company", Phone:"650-555-4444", Contact:"John Jones"},
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {Company:"Industrial Industries", Phone:"408-555-5678", Contact:"Robin Smith"}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly columnset: cols,
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly recordset: data,
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly summary: "Contacts list",
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly caption: "This table sorts on doubleclick"
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly trigger: "theadCellDblclick",
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly template: "{value}"
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly .render("#dblclick");