PERF: improve rendering speed of topic header

This also ensures we have a clean point to override rendering of topic list header
in case we decide to add/remove columns, you no longer need to override the
entire discovery template, only the header and item templates.

app/assets/javascripts/discourse/components/sortable-heading.js.es6

@@ -1,27 +0,0 @@
-/**
-  Renders a heading for a table with optional sorting controls.
-
-  @class SortableHeadingComponent
-  @extends Ember.Component
-  @namespace Discourse
-  @module Discourse
-**/
-export default Ember.Component.extend({
-  tagName: 'th',
-  classNameBindings: ['number:num', 'sortBy', 'iconSortClass:sorting', 'sortable:sortable'],
-  attributeBindings: ['colspan'],
-
-  sortable: function() {
-    return this.get('sortBy');
-  }.property('sortBy'),
-
-  iconSortClass: function() {
-    if (this.get('sortable') && this.get('sortBy') === this.get('order')) {
-      return this.get('ascending') ? 'fa fa-chevron-up' : 'fa fa-chevron-down';
-    }
-  }.property('sortable', 'order', 'ascending'),
-
-  click: function() {
-    this.sendAction('action', this.get('sortBy'));
-  }
-});

app/assets/javascripts/discourse/components/topic-list-header.js.es6

@@ -0,0 +1,67 @@
+import StringBuffer from 'discourse/mixins/string-buffer';
+
+export default Ember.Component.extend(StringBuffer, {
+  tagName: 'tr',
+
+  rerenderTriggers: ['order', 'ascending'],
+
+  click: function(e) {
+    var target = $(e.target);
+
+    if(target.parents().andSelf().hasClass('bulk-select')){
+      this.sendAction('toggleBulkSelect');
+    } else {
+      var th = target.closest('th.sortable');
+      if(th.length > 0) {
+        this.sendAction('changeSort', th.data('sort-order'));
+      }
+    }
+
+  },
+
+  renderColumn: function(buffer, options){
+    var className = options.sortable ? "sortable " : "";
+    className += options.order || "";
+
+    var sortIcon = "";
+    if(this.get("order") === options.order){
+      className += " sorting";
+      sortIcon = " <i class='fa fa-chevron-" + (this.get('ascending') ? 'up' : 'down') +  "'></i>";
+    }
+
+    if(options.number){
+      className += " num";
+    }
+
+    buffer.push("<th data-sort-order='" + options.order + "' class='"+ className +"'>" + I18n.t(options.name) + sortIcon + "</th>");
+  },
+
+  renderString: function(buffer){
+    var self = this;
+
+    if(this.get('currentUser')){
+      buffer.push("<th class='star'>");
+      if(this.get('canBulkSelect')){
+        var title = I18n.t('topics.bulk.toggle');
+        buffer.push("<button class='btn bulk-select' title='" + title + "'><i class='fa fa-list'></i></button>");
+      }
+      buffer.push("</th>");
+    }
+
+    var column = function(options){
+      self.renderColumn(buffer, options);
+    };
+
+    column({name: 'topic.title', sortable: false, order: 'default'});
+
+    if(!this.get('hideCategory')) {
+      column({name: 'category_title', sortable: true, order: 'category'});
+    }
+
+    column({sortable: false, order: 'posters', name: 'users'});
+    column({sortable: true, order: 'posts', name: 'posts', number: true});
+    column({sortable: true, order: 'views', name: 'views', number: true});
+    column({sortable: true, order: 'activity', name: 'activity', number: true});
+  }
+
+});

app/assets/javascripts/discourse/templates/components/sortable-heading.hbs

@@ -1,2 +0,0 @@
-{{yield}}
-<i {{bind-attr class="iconSortClass"}}></i>

app/assets/javascripts/discourse/templates/discovery/topics.hbs

@@ -37,31 +37,7 @@
   {{#if hasTopics}}
     <table class='topic-list'>
       <thead>
-        <tr>
-          {{#if currentUser}}
-          <th class='star'>
-            {{#if canBulkSelect}}
-            <button class='btn bulk-select' {{action "toggleBulkSelect"}} title="{{i18n 'topics.bulk.toggle'}}"><i class='fa fa-list'></i></button>
-            {{/if}}
-          </th>
-          {{/if}}
-          {{#sortable-heading class="default"}} {{i18n 'topic.title'}} {{/sortable-heading}}
-          {{#unless controller.hideCategory}}
-            {{#sortable-heading sortBy="category" action="changeSort" order=order ascending=ascending}}
-              {{i18n 'category_title'}}
-            {{/sortable-heading}}
-          {{/unless}}
-          {{#sortable-heading class="posters"}} {{i18n 'users'}} {{/sortable-heading}}
-          {{#sortable-heading sortBy="posts" number=true action="changeSort" order=order ascending=ascending}}
-            {{i18n 'posts'}}
-          {{/sortable-heading}}
-          {{#sortable-heading sortBy="views" number=true action="changeSort" order=order ascending=ascending}}
-            {{i18n 'views'}}
-          {{/sortable-heading}}
-          {{#sortable-heading sortBy="activity" number=true action="changeSort" order=order ascending=ascending}}
-            {{i18n 'activity'}}
-          {{/sortable-heading}}
-        </tr>
+        {{topic-list-header currentUser=currentUser canBulkSelect=canBulkSelect changeSort="changeSort" toggleBulkSelect="toggleBulkSelect" hideCategory=hideCategory order=order ascending=ascending}}
       </thead>
       <tbody>
         {{each content in topics itemController="topic-list-item" itemView="topic-list-item"}}