<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 on-tap="handleSortColumnTap" sort-key="origin">
            Origin
          </th>
          <th on-tap="handleSortColumnTap" sort-key="score" class="sort-column">
            Points
          </th>
        </tr>
      </thead>
      <tbody>
        <template id="engagement-table-items" is="dom-repeat"
                  items="{{engagementInfo}}" as="info"
                  sort="[[getTableSortFunction_(sortKey_, sortReverse)]]">
          <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>
