Ember.jsで高機能なテーブルを表示する

Ember Tableというテーブル表示ライブラリを使うことで、高機能なテーブルを表示できます。
遅延読み込みにも対応しており、大量のデータを表示するのに効果を発揮します。(100万行のデータを表示するサンプルは、非常に高速に動作しています。)

(Ember Table)[http://addepar.github.com/ember-table/]

Ember Tableは以下のような機能を持っています。

• 表示要素の書式をカスタマイズ(金額表示、日付表示などは組み込みで用意されてる)
• レイティング入力
• 折れ線グラフ
• 棒グラフ
• 合計行表示
• データをajaxで遅延読み込み
• ツリーデータの子要素の展開/非表示切り替え

以下表示サンプルのコードです。まずテンプレートです。

<script type="text/x-handlebars" data-template-name="application">
  <div class='presentation-container'>
    {{view Ember.Table.TablesContainer controllerBinding="tableController"}}
  </div>
</script>

Ember.Table.TablesContainer を使って表示します。シンプルですね。

App.TableSimpleExample.TableController = Ember.Table.TableController.extend
  hasHeader: yes 
  hasFooter: no
  numFixedColumns: 0
  numRows: 1000000
  rowHeight: 30

  columns: Ember.computed ->
    columnNames = ['open', 'high', 'low', 'close', 'volume']
    entryColumn = Ember.Table.ColumnDefinition.create
      columnWidth: 100
      headerCellName: 'Entry'
      getCellContent: (row) -> row['index'];
    dateColumn = Ember.Table.ColumnDefinition.create
      columnWidth: 150
      headerCellName: 'Date'
      getCellContent: (row) -> row['date'].toDateString();
    columns= columnNames.map (key, index) ->
      name = key.charAt(0).toUpperCase() + key.slice(1)
      Ember.Table.ColumnDefinition.create
        columnWidth: 100
        headerCellName: name
        getCellContent: (row) -> row[key].toFixed(2)
    columns.unshift(dateColumn)
    columns.unshift(entryColumn)
    columns
  .property()

  content: Ember.computed ->
    App.TableSimpleExample.LazyDataSource.create
      content: new Array(@get('numRows'))
  .property 'numRows'

columnsメソッドは、列の定義を返します。各列の名前、書式、幅を指定しています。
contentメソッドが、データを返します。LazyDataSourceを使って、遅延読み込みを行なっています。
numRowsは項目の数です。1000000行が設定されています。行が表示される段階で実データを取得します。読み込まれます。

最後にLazyDataSourceの定義を見てみましょう。

App.TableSimpleExample.LazyDataSource = Ember.ArrayProxy.extend
  objectAt: (idx) ->
    row  = @get('content')[idx]
    return row if row
    date = new Date();
    date.setDate(date.getDate() + idx)
    row =
      index: idx
      date:  date
      open:  Math.random() * 100 - 50
      high:  Math.random() * 100 - 50
      low:   Math.random() * 100 - 50
      close: Math.random() * 100 - 50
      volume: Math.random() * 1000000
    @get('content')[idx] = row
    row

ここでは外部からデータを読み込んでくることはせず、ランダム値を使ってサンプルデータを生成しています。

このサンプルの実際の動作は、以下のページで確認できます。

Ember Tableには、データをajax経由で動的に読み込んでくるサンプルもあり、遅延読み込みにも対応しています。

大量のデータの表示に耐えうるライブラリだと感じました。