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