how to use expandable rows

[aaronucsd]

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 for themeInstance or if that's optional. I can not get the expandable icons columns to show up like in the example.

        @columns={{expandedItemsTable.columns}}
        @data={{expandedItemsTable.data}}
        @pageSize={{4}}
        @enableRowSelection={{true}}

        {{!-- @themeInstance={{this.DefaultTheme}} --}}
        @expandedRowComponent={{component "rows/expanded-row"}}
        @multipleExpand={{true}}
        @expandedItems={{this.expandedItems}}

[darrenw-npi]

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 ember g component expand-row

/* 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 expanded-row component but from your issue it looks like you have this already.

P.S. I haven't figured out what the expandedItems property is for but I havent' needed it so far. If you know please let me know.