diff --git a/addon/components/lt-body.js b/addon/components/lt-body.js index 1765d90d..aa352e52 100644 --- a/addon/components/lt-body.js +++ b/addon/components/lt-body.js @@ -220,6 +220,14 @@ export default Component.extend({ */ useVirtualScrollbar: false, + /** + * @property virtualScrollbarSettled + * @type {Boolean} + * @default false + * @private + */ + virtualScrollbarSettled: false, + /** * Set this property to scroll to a specific px offset. * @@ -354,7 +362,10 @@ export default Component.extend({ _setupVirtualScrollbar() { let { fixedHeader, fixedFooter } = this.get('sharedOptions'); - this.set('useVirtualScrollbar', fixedHeader || fixedFooter); + this.setProperties({ + useVirtualScrollbar: fixedHeader || fixedFooter, + virtualScrollbarSettled: true + }); }, onRowsChange: observer('rows.[]', function() { diff --git a/addon/templates/components/lt-body.hbs b/addon/templates/components/lt-body.hbs index 19ba51f7..306ce701 100644 --- a/addon/templates/components/lt-body.hbs +++ b/addon/templates/components/lt-body.hbs @@ -8,59 +8,62 @@ {{#lt-scrollable tagName='' virtualScrollbar=useVirtualScrollbar + virtualScrollbarSettled=virtualScrollbarSettled autoHide=autoHideScrollbar scrollTo=targetScrollOffset onScrollY=(action 'onScroll') }}
- - - {{#if enableScaffolding}} - - {{#each columns as |column|}} - - {{/each}} - - {{/if}} + {{#if virtualScrollbarSettled}} +
+ + {{#if enableScaffolding}} + + {{#each columns as |column|}} + + {{/each}} + + {{/if}} - {{#if overwrite}} - {{yield columns rows}} - {{else}} - {{#each rows as |row|}} - {{lt.row row columns - data-row-id=row.rowId - table=table - tableActions=tableActions - extra=extra - enableScaffolding=enableScaffolding - canExpand=canExpand - canSelect=canSelect - click=(action 'onRowClick' row) - doubleClick=(action 'onRowDoubleClick' row)}} + {{#if overwrite}} + {{yield columns rows}} + {{else}} + {{#each rows as |row|}} + {{lt.row row columns + data-row-id=row.rowId + table=table + tableActions=tableActions + extra=extra + enableScaffolding=enableScaffolding + canExpand=canExpand + canSelect=canSelect + click=(action 'onRowClick' row) + doubleClick=(action 'onRowDoubleClick' row)}} + + {{yield (hash + expanded-row=(component lt.spanned-row classes='lt-expanded-row' colspan=colspan yield=row visible=row.expanded) + loader=(component lt.spanned-row visible=false) + no-data=(component lt.spanned-row visible=false) + ) rows}} + {{/each}} {{yield (hash - expanded-row=(component lt.spanned-row classes='lt-expanded-row' colspan=colspan yield=row visible=row.expanded) - loader=(component lt.spanned-row visible=false) - no-data=(component lt.spanned-row visible=false) + loader=(component lt.spanned-row classes='lt-is-loading' colspan=colspan) + no-data=(component lt.spanned-row classes='lt-no-data' colspan=colspan) + expanded-row=(component lt.spanned-row visible=false) ) rows}} - {{/each}} + {{/if}} + +
- {{yield (hash - loader=(component lt.spanned-row classes='lt-is-loading' colspan=colspan) - no-data=(component lt.spanned-row classes='lt-no-data' colspan=colspan) - expanded-row=(component lt.spanned-row visible=false) - ) rows}} + {{#if onScrolledToBottom}} + {{lt.infinity + rows=rows + inViewport=(action "inViewport") + exitViewport=(action "exitViewport") + scrollableContent=(concat "#" tableId " .lt-scrollable")}} {{/if}} - - - - {{#if onScrolledToBottom}} - {{lt.infinity - rows=rows - inViewport=(action "inViewport") - exitViewport=(action "exitViewport") - scrollableContent=(concat "#" tableId " .lt-scrollable")}} {{/if}}
diff --git a/addon/templates/components/lt-scrollable.hbs b/addon/templates/components/lt-scrollable.hbs index 3d719289..196ed60b 100644 --- a/addon/templates/components/lt-scrollable.hbs +++ b/addon/templates/components/lt-scrollable.hbs @@ -1,4 +1,4 @@ -{{#if virtualScrollbar}} +{{#if (and virtualScrollbarSettled virtualScrollbar)}} {{#ember-scrollable classNames='lt-scrollable' autoHide=autoHide diff --git a/tests/integration/components/light-table-test.js b/tests/integration/components/light-table-test.js index 1baaca4e..962ce930 100644 --- a/tests/integration/components/light-table-test.js +++ b/tests/integration/components/light-table-test.js @@ -296,4 +296,85 @@ module('Integration | Component | light table', function(hooks) { await click(element); } }); + + test('table body renders once when header is rendered in place', async function(assert) { + assert.expect(1); + + this.owner.register('component:custom-row', RowComponent.extend({ + didInsertElement() { + this._super(...arguments); + assert.ok(true, 'row is rendered once'); + } + })); + + this.set('table', new Table(Columns, this.server.createList('user', 1))); + + await render(hbs` + {{#light-table table height='500px' id='lightTable' as |t|}} + {{t.head}} + {{t.body rowComponent=(component "custom-row")}} + {{/light-table}} + `); + }); + + test('table body renders once when header is fixed', async function(assert) { + assert.expect(1); + + this.owner.register('component:custom-row', RowComponent.extend({ + didInsertElement() { + this._super(...arguments); + assert.ok(true, 'row is rendered once'); + } + })); + + this.set('table', new Table(Columns, this.server.createList('user', 1))); + + await render(hbs` + {{#light-table table height='500px' id='lightTable' as |t|}} + {{t.head fixed=true}} + {{t.body rowComponent=(component "custom-row")}} + {{/light-table}} + `); + }); + + test('table body renders once when footer is rendered in place', async function(assert) { + assert.expect(1); + + this.owner.register('component:custom-row', RowComponent.extend({ + didInsertElement() { + this._super(...arguments); + assert.ok(true, 'row is rendered once'); + } + })); + + this.set('table', new Table(Columns, this.server.createList('user', 1))); + + await render(hbs` + {{#light-table table height='500px' id='lightTable' as |t|}} + {{t.body rowComponent=(component "custom-row")}} + {{t.foot}} + {{/light-table}} + `); + }); + + test('table body renders once when footer is fixed', async function(assert) { + assert.expect(1); + + this.owner.register('component:custom-row', RowComponent.extend({ + didInsertElement() { + this._super(...arguments); + assert.ok(true, 'row is rendered once'); + } + })); + + this.set('table', new Table(Columns, this.server.createList('user', 1))); + + await render(hbs` + {{#light-table table height='500px' id='lightTable' as |t|}} + {{t.body rowComponent=(component "custom-row")}} + {{t.foot fixed=true}} + {{/light-table}} + `); + }); + });