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}}
+ `);
+ });
+
});