 ( $, _, Backbone, Marionette, DataTableView) ->
 
 
-
     class DataRawView extends DataTableView
 
         el: '#raw-viz .DataTable'
+
+        events:
+          'click .js-sort': 'sort_table'
+
+        sort_table: ->
+          console.log 'sort table event fired'
+          column = $(event.target)
+
+          field = column.data 'field'
+          sort_order = column.data('order') or 'none'
+
+          sort_icon = $('i', column)
+
+          # Set the new sort order.
+          # Sort order changes from None -> Descending -> Ascending
+          if sort_order is 'none'
+            sort_order = 'desc'
+            sort_icon.removeClass('icon-sort icon-sort-up').addClass('icon-sort-down')
+          else if sort_order is 'desc'
+            sort_order = 'asc'
+            sort_icon.removeClass('icon-sort-down').addClass('icon-sort-up')
+          else if sort_order is 'asc'
+            sort_order = null
+            sort_icon.removeClass('icon-sort-up').addClass('icon-sort')
+
+          column.data('order', sort_order )
+
+          @collection.sort_fetch( field: field, order: sort_order )
+
 
         detect_scroll: ( event ) ->
 


            # Bind events to handle fixed-header rendering, sorting, and pagination
            # FIXME: scroll events should be bound to $el, not parent container
            #$('#vizContainer').scroll( { view: @ }, (event) => @detect_scroll(event) )
            #$('#vizContainer').scroll( { view: @ }, (event) => @detect_pagination(event) )
            #@.on( 'render', @detect_sort )

            # Set the location of the data div and change it when we resize
            # the window.

              .empty()
              .append header_row.html()
            header.css( 'width', header_row.width() )

            # If we've scrolled past the header row of the table, make our
            # fixed header visible
