dom-repeat

[kersten]

Hi there,

how would i use a dom-repeat template within a table? This one doesn't work:

<mat-tbody>
    <template is="dom-repeat" items="[[orders]]">
        <order item="{{item}}"></order>
    </template>
</mat-tbody>

[Pupix]

Hello.

What's that order tag? Inside mat-tbody you can only use mat-tr as per the HTML spec

Permitted content: Zero or more <tr> elements.

If you must use the order tag, which is not compatible with the Web Components standards because it doesn't have a hyphen, you structure should be:

<mat-tbody>
    <template is="dom-repeat" items="[[orders]]">
        <mat-tr>
            <mat-td>
                <order item="{{item}}"></order>
            </mat-td>
        </mat-tr>
    </template>
</mat-tbody>

[kersten]

Sorry for the inconvenience the order item is named my-order not only order

[Pupix]

Does it work now, with the above structure ?

[kersten]

Yes, but now I have another problem. I will rephrase the question.

What do I have to do, to use one order in the orders array to use it as a custom element. I have some logic in the my-order element like parsing entries and functions on dates etc.

<mat-table>
    <mat-thead>
        <mat-th>Abteilung</mat-th>
        <mat-th>Lieferschein</mat-th>
        <mat-th>Letzterscan</mat-th>
        <mat-th>Mitarbeiter</mat-th>
    </mat-thead>
    <mat-tbody>
        <template is="dom-repeat" items="[[orders]]">
            <mat-tr>
                <mat-td>
                    <my-order order="{{item}}" admin="{{admin}}"></my-order>
                </mat-td>
            </mat-tr>
        </template>
    </mat-tbody>
</mat-table>

What would be the best way to fill this table with correct number of tds?

[Pupix]

IMO you should enclose the whole mat-table and my-order's logic into an orders-table.

This approach will let reduce the load time, initializing only one web component instead of one for each row and it will also make the table reusable. This way, whenever you need an orders table you don't have to rebuild it from the ground up.

[kersten]

OK, thanks. I will comment and close here if I am done with that

[Pupix]

Any progress on this?