0

I am trying to build a table in Ember 2.0 with:

  • up to a million rows (so I need lazy rendering)
  • a fixed header row
  • a fixed first column that scrolls vertically
  • content columns that scroll vertically and horizontally

A good example of this is the first table on this page: http://opensource.addepar.com/ember-table/#/overview

Unfortunately, ember-table has performance issues in Ember 2.0+ so I'm trying to figure out how to roll out my own table using ember-collection.

Here is a Twiddle with what I have so far: https://ember-twiddle.com/e897c3dd00a715ba827b

I used two Ember collections - one for the first column, and one for the scrollable content. 

<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>

I have 3 questions.

  1. Is this the correct approach?

  2. How can I get the header row to scroll in tandem with the content?

I tried doing this with jQuery in the scrollChange action, and cannot figure out why it's not working.

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

(EDIT) Answered by Henry's comment - was targeting the wrong div

  1. How can I get the second ember-collection positioned so that it's not overlapping with the first?

I tried doing it with CSS, but position: absolute makes the collection disappear. I'm not sure how else to position it.

Sandy
  • 1
  • 3
  • I can answer you the second question. You are applying the scroll to the wrong div. It should be `Ember.$('.header-container').scrollLeft(scrollLeft);` the one who scrolls, not its inner one. – Henry Vonfire Mar 14 '16 at 09:34
  • Thank you so much! I updated my Twiddle and question to reflect this. – Sandy Mar 14 '16 at 15:55
  • The overlapping of the header with the body can be solved by wrapping both `ember-collection`s with a div and a class like this `.table-body{ position:absolute; width:400px; height:500px; }`. – Henry Vonfire Mar 15 '16 at 09:31

0 Answers0