Open day-0 opened 5 years ago
You can use a contextual component which will load data only when instantiated:
{{#body.expanded-row as |row|}}
<MyDataLoader @row=row as |data|>
<MyDisplayComponent @model=data>
</DataLoader>
{{/body.expanded-row}}
<!-- my-data-loader.hbs -->
{{#if this.data}}
{{yield data}}
{{else}}
<button click={{action "loadData"}}>load data</button>
{{/if}}
// my-data-loader.js
@action
async loadData() {
const id = this.row.id;
const data = await fetch(`api-host/some-resources/${id}`);
// or await this.store.findRecord('my-resource', id);
set(this, 'model', data);
}
// if glimmer:
get row() { return this.args.row; }
I was wondering if it was possible to load the data into the expandable component depending on the row being clicked and not have it pre-populated.
I ask this as the amount of data being returned is a lot and would like to re move the data that is used in the expandable component into a separate end point.
{{#light-table table height='65vh' as |t|}} {{t.head fixed=true}} {{#t.body canSelect=false canExpand=true onScrolledToBottom=(action 'onScrolledToBottom') as |body|}} {{#body.expanded-row as |row|}} {{people/bio row=row click=onClick}} {{/body.expanded-row}} {{#if isLoading}} {{#body.loader}} {{paper-progress-linear}} {{/body.loader}} {{/if}} {{#if table.isEmpty}} {{#body.no-data}} {{#unless isLoading}} No results {{/unless}} {{/body.no-data}} {{/if}} {{/t.body}} {{/light-table}}
and implement an onClick action of some sort that will know the row and then call the necessary end point to gather the data required.