Nested Q-Table from Array

[CynthiaBlue]

I want to have a table that opens expanding rows (expanding the rows works now), and the expanded row shows information from an element of the array.

So for example, I have the main table defined like this:

       <q-table 
            class="my-sticky-header-table"
            title="Payments Report" 
            style="height: 600px"
            virtual-scroll
            bordered
            v-model:pagination="pagination"
            v-model:selected="selectedPerson"
            :rows="this.finalArray" 
            :columns="paymentsColumnsBH"
            :loading="loading"
            :selected-rows-label="getSelectedDog"
            row-key="p_key"
            @row-click="goToDogDetail"
            no-data-label="There are no dogs on the wait list."
            >

As you can see, the :rows is my array, which works great.

My array layout looks like this...
Where I have the person information, then I have the "payment" element which can include more than one payment:

I want the information from the payments element in the array to show in the expanded slot. I'm not sure how to configure the nested table to get that information.

This is how I have my nested table configured:

                  <q-table 
                      virtual-scroll
                      flat
                      :rows="this.finalArray.payments" 
                      :columns="columnsSubTableBH"
                      row-key="p_key"
                      no-data-label="Empty."
                      >
                     </q-table>

columnsSubTableBH: [
        {
          name: 'name',
          required: true,
          label: 'Details',
          align: 'left',
          field: row => row.totalPayment, // this cooresponds to col.value up above
          format: val => `${val}`,
          sortable: true
        },
      ],

How do I configure the nested table to get the data out of that element in the array? is this possible?
Thanks!

[metalsadman]

it would be from your <template #whateverQTableSlotYouUsedUsuallyTheBodySlot="props"> the passed props, which you can props.row. p.s. you should've included that part of the code.

[CynthiaBlue]

That worked perfectly thanks!

[CynthiaBlue]

Oh... I can include that code from the parent table. Thanks! This is all the code for both tables so far. I will think about how to do what you suggest.

<q-table 
            class="my-sticky-header-table"
            title="Payments Report" 
            style="height: 600px"
            virtual-scroll
            bordered
            v-model:pagination="pagination"
            v-model:selected="selectedPerson"
            :rows="this.finalArray" 
            :columns="paymentsColumnsBH"
            :loading="loading"
            :selected-rows-label="getSelectedDog"
            row-key="p_key"
            @row-click="goToDogDetail"
            no-data-label="There are no dogs on the wait list."
            >

            <template v-slot:top-right>
              <q-btn
                color="primary"
                icon-right="archive"
                label="Export to csv"
                no-caps
                @click="exportPaymentsTable"
              />
            </template>

            <template v-slot:header="props">
              <q-tr :props="props">
                <q-th auto-width />
                <q-th
                  v-for="col in props.cols"
                  :key="col.name"
                  :props="props"
                >
                  {{ col.label }} 
                </q-th>
              </q-tr>
            </template>

            <template v-slot:body="props">
              <q-tr :props="props">
                <q-td auto-width>
                  <q-btn size="sm" color="accent" round dense @click="props.expand = !props.expand" :icon="props.expand ? 'remove' : 'add'" />
                  {{ props.row.name }}
                </q-td>
                <q-td
                  v-for="col in props.cols"
                  :key="col.name"
                  :props="props"
                >
                  {{ col.value }} 
                </q-td>
              </q-tr>
              <q-tr v-show="props.expand" :props="props">
                <!-- <q-td key="name" :props="props" colspan="100%"> -->
                <q-td colspan="100%">
                  <div class="text-left">This is expand slot for row above: {{ props.row.l_name }}, {{ props.row.f_name }}
                    <br/>
                     <q-table 
                      virtual-scroll
                      flat
                      :rows="this.finalArray[26].payments" 
                      :columns="columnsSubTableBH"
                      row-key="p_key"
                      no-data-label="Empty."
                      :hide-bottom="hideBottom"
                      :hide-pagination="hidePagination"
                      :hide-selected-banner="hideSelectedBanner"
                      :hide-no-data="hideNoData"
                      :table-header-style="{ backgroundColor: '#ffffff' }"
                      dense
                      
                >

                      <template v-slot:header="props">
                        <q-tr :props="props">
                          <q-th auto-width />
                          <q-th
                            v-for="col in props.cols"
                            :key="col.name"
                            :props="props"
                            class="text-italic text-purple"
                            :table-header-style="{ backgroundColor: '#ffffff' }"

                          >
                            {{ col.label }} 
                          </q-th>
                        </q-tr>
                      </template> 

                      <template v-slot:body="props">
                        <q-tr :props="props">
                          <q-td
                            v-for="col in props.cols"
                            :key="col.name"
                            :props="props"
                          >
                            {{ col.value }} 
                          </q-td>
                        </q-tr>
                      </template>
                     </q-table>
                  </div>
                </q-td>
              </q-tr>
            </template>
          </q-table>
      

[CynthiaBlue]

This worked perfectly for my nested table, for anyone looking for this answer.

                <q-table 
                      virtual-scroll
                      flat
                      :rows="props.row.payments" 
                      :columns="columnsSubTableBH"
                      row-key="p_key"
                      no-data-label="Empty."
                      :hide-bottom="hideBottom"
                      :hide-pagination="hidePagination"
                      :hide-selected-banner="hideSelectedBanner"
                      :hide-no-data="hideNoData"
                      dense
                >