-
Notifications
You must be signed in to change notification settings - Fork 133
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
how to use expandable rows #461
Comments
I know this is an old issue but just so it can be closed and for the benefit of others who come across this. If I understand you correctly you are trying to get the plus and minus icons to appear in a column for expanding the rows. If this is not correct please let me know. I spent the last 2 hours on this myself and finally solved it. You don't need to use a theme to do it. First create a new component to use for toggling the expand row with /* component.js */
import Component from '@ember/component';
export default Component.extend({
actions: {
collapseRow(index, record) {
this.get('collapseRow')(index, record);
},
expandRow(index, record) {
this.get('expandRow')(index, record);
},
},
}); {{!-- template.hbs --}}
{{#if isExpanded}}
<a
href="#"
{{action "collapseRow" index record bubbles=false}}
class={{themeInstance.collapseRow}}
><i class="glyphicon glyphicon-minus"></i></a>
{{else}}
<a
href="#"
{{action "expandRow" index record bubbles=false}}
class={{themeInstance.expandRow}}
><i class="glyphicon glyphicon-plus"></i></a>
{{/if}} Then add a column using this component in your controller.js ...
export default Controller.extend({
init() {
this._super(...argument);
this.set('columns', [{
component: 'expand-row', // This is the name of the component you created above
mayBeHidden: false,
},
{
title: 'Code',
propertyName: 'code',
},
{
title: 'Description',
propertyName: 'description',
},
...
]
}
}); Finally pass the columns property object in your template (as per the documentation and you are already doing) {{!-- Glimmer Style --}}
<ModelsTable
@data={{this.data}}
@columns={{this.columns}}
@expandedRowComponent={{component "expanded-row"}}
@multipleExpand={{true}}
@expandedItems={{this.expandedItems}}/> {{!-- Old Style --}}
{{models-table
data=data
columns=columns
expandedRowComponent=(component "expanded-row")
multipleExpand=true
expandedItems=expandedItems
}} You will obviously need an P.S. I haven't figured out what the |
Sorry not an issue but i can not find a good way to leverage this expandable row locally.
https://onechiporenko.github.io/ember-models-table/v.2/#/examples/expandable-rows
I tried everything. I set
expandedRowComponent
to my custom row component. That shows up.I'm have
expandedItems
equals to an empty []. It's not clear to me what to set forthemeInstance
or if that's optional. I can not get the expandable icons columns to show up like in the example.The text was updated successfully, but these errors were encountered: