 
   populate: ->
     if @loadData()
-      rows = Object.keys(@data.data)
-        .map (key) =>
-          row = @data.data[key]
-          row.key = key
-          return row
-
-      @setItems rows
+      @setItems(Object.keys(@data.data)
+        .map (key) => $.extend({ key }, @data.data[key])
+        .sort (a, b) -> a.title.localeCompare(b.title))
 
   show: ->
     @populate()

              # p - No support, but has (P)olyfill
              # n - (N)o support, or disabled by default
              # d - (D)isabled by default (need to enable flag or something)

          tr.append(td)


        .forEach (key) =>
          agent = @data.agents[key]
          version = agent.versions[agent.versions.length - i] or ''
          support = String(item.stats[key][version])
          td = $('<td>').text(version)

          hasNote = support.match(/\s#(\d+)$/)
          if hasNote
            td.append $('<span>').text(hasNote[1])
            support = support.replace /\s#(\d+)$/g, ''
            needNotes.push hasNote[1]

          supportKeys = support.split(/\s/g)

          supportKeys
            .forEach (supportKey) ->
              # y - (Y)es, supported by default
              if supportKey is 'y'
                td.addClass('is-supported')

              # a - (A)lmost supported (aka Partial support)
              else if supportKey is 'a'
                td.addClass('is-almost-supported')

              else if supportKey is 'x'
