ember.js - 最初の列とヘッダー行が固定された Ember で遅延読み込みテーブルを作成する方法は?

Question

Ember 2.0 でテーブルを作成しようとしています:

• 最大100万行（遅延レンダリングが必要です）
• 固定ヘッダー行
• 垂直方向にスクロールする固定の最初の列
• 縦横にスクロールするコンテンツ列

この良い例は、このページの最初の表です: http://opensource.addepar.com/ember-table/#/overview

残念ながら、ember-table には Ember 2.0+ のパフォーマンスの問題があるため、ember-collection を使用して独自のテーブルをロールアウトする方法を見つけようとしています。

ここに私がこれまでに持っているものをいじります: https://ember-twiddle.com/e897c3dd00a715ba827b

2 つの Ember コレクションを使用しました。1 つは最初の列用で、もう 1 つはスクロール可能なコンテンツ用です。

<div class='table-container'>
  <div class='header-container'>
    <div class="column-headers" style="width: 1500px">
      {{#each model.columnHeaders as |columnHeader|}}
        <div class='table-cell'>
          {{columnHeader}}
        </div>
      {{/each}}
    </div>
  </div>
  {{#ember-collection 
    items=model.rowHeaders 
    classNames='fixed-column'
    cell-layout=(fixed-grid-layout 1500 20) 
    scroll-top=scrollTop
    scroll-change=(action 'scrollChange')
    as |rowHeader|
  }}
    {{rowHeader}}
  {{/ember-collection}}

  {{#ember-collection 
    items=model.content
    classNames='scrolling-content' 
    cell-layout=(fixed-grid-layout 1500 20) 
    scroll-top=scrollTop
    scroll-left=scrollLeft
    scroll-change=(action 'scrollChange')
    as |item|
  }}
    {{#each item as |cell|}}
      <div class='table-cell'>
        {{cell}}
      </div>
    {{/each}}
  {{/ember-collection}}
</div>

3 つの質問があります。

1. これは正しいアプローチですか？

2. ヘッダー行をコンテンツと並行してスクロールするにはどうすればよいですか?

scrollChange アクションで jQuery を使用してこれを実行しようとしましたが、なぜ機能しないのかわかりません。

Ember.$('.column-headers').scrollLeft(scrollLeft);

(編集) ヘンリーのコメントで回答 - 間違った div をターゲットにしていました

3. 最初のコレクションと重ならないように、2 番目の ember-collection を配置するにはどうすればよいですか?

CSSでやってみたposition: absoluteのですが、コレクションが消えてしまいます。他にどのように配置すればよいかわかりません。