Make table in chrome:site-engagement sortable.

chrome/browser/resources/engagement/engagement_table.html

 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
 
 <dom-module id="engagement-table">
   <link rel="import" type="css" href="engagement_table.css">
   <template>
     <table>
       <thead>
         <tr>
-          <th>Origin</th>
-          <th>Points</th>
+          <th id="initial-sort-column" on-tap="handleSortColumnTap" sort-key="origin">Origin</th>

[tsergeant, 2015/10/27 23:35:34]

Adding/removing children here for the indicator is a little weird.

You could do something like

<span class="sort-indicator" hidden$="[[!sortKeyEquals('origin',
sortKey_)]]"></span>

on each row (sortKey_ needs to be a property).

And then define the super simple sortKeyEquals function.

To get the arrow to flip depending on sort direction, you can
`reflectToAttribute` the `sortReversed_` property, then do the rest in CSS:

.sort-indicator::before {
  content: '\u25B2';
}
:host([sort-reversed_]) .sort-indicator::before {
  content: '\u25BC';
}

[calamity, 2015/10/28 04:26:50]

Got rid of the span entirely and just used ::after on the ths.

+          <th on-tap="handleSortColumnTap" sort-key="score">Points</th>
         </tr>
       </thead>
       <tbody>
-        <template is="dom-repeat" items="{{engagementInfo}}" as="info">
+        <template id="engagement-table-items" is="dom-repeat" items="{{engagementInfo}}" as="info">
           <tr>
             <td class="origin-cell">{{info.origin}}</td>
             <td>{{info.score}}</td>
           </tr>
         </template>
       </tbody>
     </table>
   </template>
 </dom-module>
 <script src="engagement_table.js"></script>