I was running into issues with the block params while trying to create a customisable table view.
So, first the things I was able to achieve. I created a custom-table component, which allows to provide a custom template for the row by calling like this. For the sake of simplicity, data is a parameter of the controller
application/template.hbs:
{{#custom-table model=data}}
{{#table-row model=data as |row|}}
<!-- custom table row template -->
<span>custom row:</span><span>{{row}}</span>
{{/table-row}}
{{/custom-table}}
I created a table-row component, which has a template that makes use of a block param and iterates through the model:
table-row/component.hbs:
{{#each model as |row|}}
<div>{{yield row}}</div>
{{/each}}
This works pretty well so far. However, the custom-table component keeps all the logic for the table, like filtering data. Now I would like to enable the user to specify a custom header. However the header would for instance need to have access to the filter value from the table component. So, the custom-table component should be called like that:
{{#custom-table model=data}}
{{#table-header}}
<!-- custom header template -->
<div>
<!-- access filter value from custom-table -->
{{input value=filter}}
</div>
{{/table-header}}
{{#table-row model=data as |row|}}
<!-- custom table row template -->
<span>custom row: </span><span>{{row}}</span>
{{/table-row}}
{{/custom-table}}
Apparently the filter is assumed to be found within the scope of the application template and not the custom-table component. Same issue if I would like to use the filteredData property of the custom-table component to render the rows. Is there a way to access the parameters of the custom-table component, when providing an option to use a customisable template?
Here is a twiddle showing my issues: Ember Twiddle