dimanche 13 mars 2016

How to build a lazy-loading table in Ember with a fixed first column and header row?

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://ift.tt/1nHBqnf

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: http://ift.tt/1Urcqxv

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

  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.




Aucun commentaire:

Enregistrer un commentaire