-
-
Notifications
You must be signed in to change notification settings - Fork 130
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Programmatically Load Expanded Row's Data #717
Comments
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; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
The text was updated successfully, but these errors were encountered: