Как построить таблицу отложенной загрузки в Ember с фиксированным первым столбцом и строкой заголовка?

Question

Я пытаюсь построить таблицу в Ember 2.0 с помощью:

• до миллиона строк (поэтому мне нужен ленивый рендеринг)
• фиксированная строка заголовка
• фиксированный первый столбец, который прокручивается по вертикали
• столбцы содержимого с вертикальной и горизонтальной прокруткой

Хорошим примером этого является первая таблица на этой странице: http://opensource.addepar.com/ember-table/

К сожалению, ember-table имеет проблемы с производительностью в Ember 2.0+, поэтому я пытаюсь выяснить, как развернуть собственную таблицу с помощью ember-collection.

Вот твиддл с тем, что у меня пока есть: https://ember-twiddle.com/e897c3dd00a715ba827b

Я использовал две коллекции Ember - одну для первого столбца и одну для прокручиваемого содержимого.

<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. Как получить строку заголовка для прокрутки в тандеме с контентом?

Я попытался сделать это с jQuery в действии scrollChange, и не могу понять, почему это не работает.

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

(РЕДАКТИРОВАТЬ) Ответ на комментарий Генри - был нацелен на неправильный div

3. Как я могу расположить вторую коллекцию углей так, чтобы она не перекрывалась с первой?

Я пытался сделать это с помощью CSS, но position: absolute заставляет коллекцию исчезать. Я не уверен, как еще позиционировать это.