7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync<style scoped>

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync/* custom styles for this example */

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync.dt-example {margin:1em;}

c58f1213e628a545081c70e26c6b67a841cff880vboxsync

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync/* css to counter global site css */

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync.dt-example th {text-transform:none;}

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync.dt-example table {width:auto;}

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync.dt-example caption {display:table-caption;}

cc4463d266cc5b433b63b2231570a9f77c126ab6vboxsync</style>

cc4463d266cc5b433b63b2231570a9f77c126ab6vboxsync

cc4463d266cc5b433b63b2231570a9f77c126ab6vboxsync<div class="intro">

cc4463d266cc5b433b63b2231570a9f77c126ab6vboxsync <p>The `Y.Plugin.DataTableSort` plugin adds column sorting functionality to a basic DataTable.</p>

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync</div>

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync<div class="example yui3-skin-sam">

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync {{>datatable-sort-source}}

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync</div>

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync<h2>Implementing Sortable Columns</h2>

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync<p>To add column sorting functionality to any 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.</p>

8ae363736c5bbaa490ae89e3a7174f9ad31fe54bvboxsync

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync```

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsyncYUI().use("datatable-sort", function(Y) {

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync var cols = [

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync {key:"Company", label:"Click to Sort Column A", sortable:true},

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync {key:"Phone", label:"Not Sortable Column B"},

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync {key:"Contact", label:"Click to Sort Column C", sortable:true}

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync ],

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync data = [

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync {Company:"Company Bee", Phone:"415-555-1234", Contact:"Sally Spencer"},

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync {Company:"Acme Company", Phone:"650-555-4444", Contact:"John Jones"},

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync {Company:"Industrial Industries", Phone:"408-555-5678", Contact:"Robin Smith"}

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync ],

4ab3529cde8c5258f459eeb71a532d1ba522111avboxsync table = new Y.DataTable.Base({

4ab3529cde8c5258f459eeb71a532d1ba522111avboxsync columnset: cols,

f2ca52afeb0baed982c05e9d8591e0e4c7539dbdvboxsync recordset: data,

f2ca52afeb0baed982c05e9d8591e0e4c7539dbdvboxsync summary: "Contacts list",

f2ca52afeb0baed982c05e9d8591e0e4c7539dbdvboxsync caption: "Table with simple column sorting"

f2ca52afeb0baed982c05e9d8591e0e4c7539dbdvboxsync }).plug(Y.Plugin.DataTableSort)

f2ca52afeb0baed982c05e9d8591e0e4c7539dbdvboxsync .render("#sort");

f2ca52afeb0baed982c05e9d8591e0e4c7539dbdvboxsync});

4ab3529cde8c5258f459eeb71a532d1ba522111avboxsync```

4ab3529cde8c5258f459eeb71a532d1ba522111avboxsync

4ab3529cde8c5258f459eeb71a532d1ba522111avboxsync<h6>Pre-sorted Data</h6>

4ab3529cde8c5258f459eeb71a532d1ba522111avboxsync

4ab3529cde8c5258f459eeb71a532d1ba522111avboxsync<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>

4ab3529cde8c5258f459eeb71a532d1ba522111avboxsync

4ab3529cde8c5258f459eeb71a532d1ba522111avboxsync```

4ab3529cde8c5258f459eeb71a532d1ba522111avboxsyncYUI().use("datatable-sort", function(Y) {

4ab3529cde8c5258f459eeb71a532d1ba522111avboxsync var cols = [

4ab3529cde8c5258f459eeb71a532d1ba522111avboxsync {key:"Company", label:"Click to Sort Column A", sortable:true},

4ab3529cde8c5258f459eeb71a532d1ba522111avboxsync {key:"Phone", label:"Not Sortable Column B"},

4ab3529cde8c5258f459eeb71a532d1ba522111avboxsync {key:"Contact", label:"Click to Sort Column C", sortable:true}

4ab3529cde8c5258f459eeb71a532d1ba522111avboxsync ],

4ab3529cde8c5258f459eeb71a532d1ba522111avboxsync presortedData = [

4ab3529cde8c5258f459eeb71a532d1ba522111avboxsync {Company:"Acme Company", Phone:"415-555-1234", Contact:"John Jones"},

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync {Company:"Company Bee", Phone:"650-555-4444", Contact:"Sally Spencer"},

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync {Company:"Industrial Industries", Phone:"408-555-5678", Contact:"Robin Smith"}

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync ],

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync table = new Y.DataTable.Base({

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync columnset: cols,

7eaaa8a4480370b82ef3735994f986f338fb4df2vboxsync recordset: presortedData,

7eaaa8a4480370b82ef3735994f986f338fb4df2vboxsync summary: "Contacts list",

7eaaa8a4480370b82ef3735994f986f338fb4df2vboxsync caption: "This table loads with presorted data"

7eaaa8a4480370b82ef3735994f986f338fb4df2vboxsync }).plug(Y.Plugin.DataTableSort, {

7eaaa8a4480370b82ef3735994f986f338fb4df2vboxsync lastSortedBy: {

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync key: "Company",

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync dir: "asc"

60b3bb99d58c291474ef79573ae7738ce769fdbbvboxsync }

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync })

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync .render("#presorted");

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync});

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync```

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync<h6>Configurable Trigger</h6>

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync<p>By default, sorts will be triggered when the user clicks on the TH element

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsyncof a sortable column, which fires a `theadCellClick` DataTable event. You can

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsyncset this to be any other DataTable custom event by setting the `trigger`

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsyncattribute in the DataTableSort plugin constructor. Note: Since the `trigger`

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsyncattribute is `initOnly`, this value can only be set in the plugin constructor

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsyncand not after the plugin has been instantiated.</p>

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync<p>A related change worth making is to remove the link from the TH content,

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsyncsince the user will not be clicking to sort in this implementation. Simply set

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsyncthe `template` attribute to be the unadorned `"{value}"` string.</p>

7377963ff2197709fbc259d8456b7ecf5b7debb5vboxsync

<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>

```

YUI().use("datatable-sort", function(Y) {

var cols = [

{key:"Company", label:"Dblclick to Sort A", sortable:true},

{key:"Phone", label:"Not Sortable Column B"},

{key:"Contact", label:"Dblclick to Sort C", sortable:true}

],

data = [

{Company:"Company Bee", Phone:"415-555-1234", Contact:"Sally Spencer"},

{Company:"Acme Company", Phone:"650-555-4444", Contact:"John Jones"},

{Company:"Industrial Industries", Phone:"408-555-5678", Contact:"Robin Smith"}

],

table = new Y.DataTable.Base({

columnset: cols,

recordset: data,

summary: "Contacts list",

caption: "This table sorts on doubleclick"

}).plug(Y.Plugin.DataTableSort, {

trigger: "theadCellDblclick",

template: "{value}"

})

.render("#dblclick");

});

```