YUI 3.x Home -

YUI Library Examples: DataTable: Column Sorting

DataTable: Column Sorting

The Y.Plugin.DataTableSort plugin adds column sorting functionality to a basic DataTable.

View example in new window.

Implementing Sortable Columns

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.

  1. YUI().use("datatable-sort", function(Y) {
  2.     var cols = [
  3.         {key:"Company", label:"Click to Sort Column A", sortable:true},
  4.         {key:"Phone", label:"Not Sortable Column B"},
  5.         {key:"Contact", label:"Click to Sort Column C", sortable:true}
  6.     ],
  7.     data = [
  8.         {Company:"Company Bee", Phone:"415-555-1234", Contact:"Sally Spencer"},
  9.         {Company:"Acme Company", Phone:"650-555-4444", Contact:"John Jones"},
  10.         {Company:"Industrial Industries", Phone:"408-555-5678", Contact:"Robin Smith"}
  11.     ],
  12.     table = new Y.DataTable.Base({
  13.         columnset: cols,
  14.         recordset: data,
  15.         summary: "Contacts list",
  16.         caption: "Table with simple column sorting"
  17.     }).plug(Y.Plugin.DataTableSort)
  18.       .render("#sort");
  19. });
YUI().use("datatable-sort", function(Y) {
    var cols = [
        {key:"Company", label:"Click to Sort Column A", sortable:true},
        {key:"Phone", label:"Not Sortable Column B"},
        {key:"Contact", label:"Click to Sort Column 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: "Table with simple column sorting"
    }).plug(Y.Plugin.DataTableSort)
      .render("#sort");
});
Pre-sorted Data

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.

  1. YUI().use("datatable-sort", function(Y) {
  2.     var cols = [
  3.         {key:"Company", label:"Click to Sort Column A", sortable:true},
  4.         {key:"Phone", label:"Not Sortable Column B"},
  5.         {key:"Contact", label:"Click to Sort Column C", sortable:true}
  6.     ],
  7.     presortedData = [
  8.         {Company:"Acme Company", Phone:"415-555-1234", Contact:"John Jones"},
  9.         {Company:"Company Bee", Phone:"650-555-4444", Contact:"Sally Spencer"},
  10.         {Company:"Industrial Industries", Phone:"408-555-5678", Contact:"Robin Smith"}
  11.     ],
  12.     table = new Y.DataTable.Base({
  13.         columnset: cols,
  14.         recordset: presortedData,
  15.         summary: "Contacts list",
  16.         caption: "This table loads with presorted data"
  17.     }).plug(Y.Plugin.DataTableSort, {
  18.             lastSortedBy: {
  19.                 field: "Company",
  20.                 dir: "asc"
  21.             }
  22.         })
  23.       .render("#presorted");
  24. });
  25.  
YUI().use("datatable-sort", function(Y) {
    var cols = [
        {key:"Company", label:"Click to Sort Column A", sortable:true},
        {key:"Phone", label:"Not Sortable Column B"},
        {key:"Contact", label:"Click to Sort Column C", sortable:true}
    ],
    presortedData = [
        {Company:"Acme Company", Phone:"415-555-1234", Contact:"John Jones"},
        {Company:"Company Bee", Phone:"650-555-4444", Contact:"Sally Spencer"},
        {Company:"Industrial Industries", Phone:"408-555-5678", Contact:"Robin Smith"}
    ],
    table = new Y.DataTable.Base({
        columnset: cols,
        recordset: presortedData,
        summary: "Contacts list",
        caption: "This table loads with presorted data"
    }).plug(Y.Plugin.DataTableSort, {
            lastSortedBy: {
                field: "Company",
                dir: "asc"
            }
        })
      .render("#presorted");
});
 
Configurable Trigger

By default, sorts will be triggered when the user clicks on the TH element of a sortable column, which fires a theadCellClick DataTable event. You can set this to be any other DataTable custom event by setting the trigger attribute in the DataTableSort plugin constructor. Note: Since the trigger attribute is initOnly, this value can only be set in the plugin constructor and not after the plugin has been instantiated.

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. 

  1. YUI().use("datatable-sort", function(Y) {
  2.     var cols = [
  3.         {key:"Company", label:"Dblclick to Sort A", sortable:true},
  4.         {key:"Phone", label:"Not Sortable Column B"},
  5.         {key:"Contact", label:"Dblclick to Sort C", sortable:true}
  6.     ],
  7.     data = [
  8.         {Company:"Company Bee", Phone:"415-555-1234", Contact:"Sally Spencer"},
  9.         {Company:"Acme Company", Phone:"650-555-4444", Contact:"John Jones"},
  10.         {Company:"Industrial Industries", Phone:"408-555-5678", Contact:"Robin Smith"}
  11.     ],
  12.     table = new Y.DataTable.Base({
  13.         columnset: cols,
  14.         recordset: data,
  15.         summary: "Contacts list",
  16.         caption: "This table sorts on doubleclick"
  17.     }).plug(Y.Plugin.DataTableSort, {
  18.             trigger: "theadCellDblclick",
  19.             template: "{value}"
  20.         })
  21.       .render("#dblclick");
  22. });
  23.  
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");
});
 

More DataTable Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings