Nested tables

[HenrikClausen]

Im having a data table with expandable rows that should contain yet another table like this :

                        <q-table :columns="tableColumnDefinitions.processColumns" :data="processingOrders" row-key="ProcessingOrderID" hide-bottom :rows-per-page-options="[0]" :pagination.sync="pagination">
                            <template v-slot:body="props">
                                <q-tr :props="props">
                                    <q-td key="exp1" :props="props">
                                        <q-btn dense round flat :icon="props.expand ? 'arrow_drop_up' : 'arrow_drop_down'" @@click="expandProcessing(props)" />
                                    </q-td>
                                    <q-td key="ProcessingOrderID" :props="props">{{ props.row.ProcessingOrderID }}</q-td>
                                    <q-td key="ParentOrderID" :props="props">{{ props.row.ParentOrderID }}</q-td>
                                    <q-td key="CustomerName" :props="props">{{ props.row.CustomerName }}</q-td>
                                    <q-td key="DeliveryDate" :props="props">{{ props.row.DeliveryDate }}</q-td>
                                    <q-td key="SalesRep" :props="props">{{ props.row.SalesRep }}</q-td>
                                </q-tr>
                                <q-tr v-show="props.expand" :props="props">
                                    <q-td colspan="100%">
                                        <q-table :columns="tableColumnDefinitions.processLineColumns" :data="props.row.Lines" row-key="ID" hide-bottom :rows-per-page-options="[0]" :pagination.sync="pagination">
                                            </q-table>
                                        <ul>
                                            <li v-for="line in props.row.Lines">{{line}}</li>
                                        </ul>
                                    </q-td>
                                </q-tr>
                            </template>

                        </q-table>

Now the outer table renders fine, but the inner table doesnt render at all. The props.row.Lines does contain data and I can render it in a simple list…

Any suggestions?

[HenrikClausen]

Well… It turned out that props.row.Lines were null when no data was present… Not an empty array.
If I either made it an empty array as default or changed the v-show with v-if on the expanded row, it works fine.