Rendering rows using template tags

[dackjaniels2001]

Hi,

I am using mdc-data-table and trying to render table rows for all the children of a collection of nested objects.
Using a normal table this would look something like this:

<tbody>
             <template repeat.for="contract of contracts">
                <tr as-element="compose" view="./contract/contract.html"></tr>
                <template repeat.for="beneficiary of contract.beneficiaries">
                    <tr as-element="compose" view="./beneficiary/beneficiary.html"></tr>
                    <template repeat.for="service of beneficiary.services">
                        <tr as-element="compose" view="./service/service.html"></tr>
                        <template repeat.for="transactionLine of service.transactionLines">
                            <tr as-element="compose" view="./transaction-line/transaction-line.html"></tr>
                        </template>
                    </template>
                </template>
             </template>
</tbody>

If I try and emulate the same, but instead of using <tr>'s, I use <mdc-data-table-row>'s, the resulting <mdc-data-table-content> in the rendered Aurelia view is completely empty.

Looking at the code in mdc-data-table.js, is see querySelector is failing to return any elements.

var rows = (_g = element.querySelectorAll('mdc-data-table-content>mdc-data-table-row')) !== null && _g !== void 0 ? _g : [];

Obviously the selector mdc-data-table-content>mdc-data-table-row will not find anything as the selector uses immediate child whereas in my case I have a template element in between the content and row elements.

Any idea how I might achieve what I want?

[MaximBalaganskiy]

The content you supply to <mdc-data-table> element is transformed into proper HTML <table> DOM. Only cells content is used as is. I am afraid the bridge's element is not suitable for your task unless you flatten the collection.
As an option, you can instantiate MDCDataTable instance directly, which will allow you to use required DOM structure.

[dackjaniels2001]

Thanks the for quick response @MaximBalaganskiy , I will have a look at instantiating the table directly, that approach had not occurred to me.

[dackjaniels2001]

@MaximBalaganskiy Any chance you could give me some pointers on how to instantiate and MdcDataTable directly?
I've tried doing so in the attached() method of the containing component but I've not got very far with it, I think I am approaching it the wrong way. This is my first Aurelia project so it's all a bit new to me atm. Thanks.

[MaximBalaganskiy]

https://github.com/material-components/material-components-web/blob/master/packages/mdc-data-table/README.md