Programmatically Load Expanded Row's Data

[day-0]

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.

[saverio-kantox]

You can use a contextual component which will load data only when instantiated:

expanded row component

{{#body.expanded-row as |row|}}
<MyDataLoader @row=row as |data|>
  <MyDisplayComponent @model=data>
</DataLoader>
{{/body.expanded-row}}

data loader component template

<!-- my-data-loader.hbs -->
{{#if this.data}}
  {{yield data}}
{{else}}
  <button click={{action "loadData"}}>load data</button>
{{/if}}

data loader component

// 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; }