Quasar Nested Tables - constrain nested table to parent width



  • Trying to figure out how to get the nested tables here to constrain their width to the parent row. Right now, the nested table may auto size itself and drive the parent table to end up with a horizontal scrollbar

    
    <q-table
            class="q-mt-lg q-pb-md"
            row-key="name"
            :data="reconciliation.configurationTypes"
            :rows-per-page-options="[0]"
            :hide-pagination="true"
            :hide-selected-banner="true"
            selection="multiple"
            :visible-columns="['name', 'directory']"
            ref="configurationTypesTable"
          >
            <template v-slot:header-selection>
              <q-checkbox class="float-left" v-model="reconciliation.selected" />
            </template>
    
            <template v-slot:body="props">
              <q-tr :props="props">
                <q-td>
                  <q-btn dense flat :icon="props.expand ? 'keyboard_arrow_down' : 'keyboard_arrow_right'" @click="props.expand = !props.expand"></q-btn>
                  <q-checkbox v-model="props.row.selected" />
                </q-td>
                <q-td v-for="col in props.cols" :key="col.name" :props="props">
                  <div v-if="col.name == 'name'">
                    {{ props.row[col.name] }}
                  </div>
                  <div v-if="col.name != 'name'" style="word-break: break-word; white-space: normal">
                    {{ props.row[col.name] }}
                  </div>
                </q-td>
              </q-tr>
              <q-tr v-show="props.expand" :props="props" class="bg-blue-grey">
                <q-td colspan="100%">
                  <div class="q-gutter-y-md">
                    <div v-for="reconciliationType in props.row.reconciliationTypes" :key="reconciliationType.name">
                      <q-table
                        :data="reconciliationType.configurations"
                        row-key="name"
                        :rows-per-page-options="[0]"
                        :hide-pagination="true"
                        selection="multiple"
                        :hide-selected-banner="true"
                        :visible-columns="['name', 'description']"
                        ref="configurationsTable"
                      >
                        <template v-slot:header-selection>
                          <q-checkbox class="float-left" v-model="reconciliationType.selected" />
                        </template>
    
                        <template v-slot:top>
                          <div class="text-h6">
                            {{ reconciliationType.name }}
                          </div>
                          <q-badge class="q-ml-md q-mr-md absolute q-pa-xs" color="blue-grey" style="right: 0px">
                            <q-icon name="check_box" color="white" class="q-ml-xs q-mr-xs" style="font-size: 1.8em" />
                            <span style="font-size: 1.2em"> {{ reconciliationType.checkedLabel }}</span>
                            <q-icon name="check_box_outline_blank" color="white" class="q-ml-lg q-mr-xs" style="font-size: 1.8em" />
                            <span style="font-size: 1.2em;" class="q-pr-sm"> {{ reconciliationType.uncheckedLabel }}</span>
                          </q-badge>
                        </template>
    
                        <template v-slot:body="props">
                          <q-tr :props="props">
                            <q-td>
                              <q-btn
                                dense
                                flat
                                v-if="props.row.properties.length > 0"
                                :icon="props.expand ? 'keyboard_arrow_down' : 'keyboard_arrow_right'"
                                @click="props.expand = !props.expand"
                              ></q-btn>
                              <q-checkbox v-model="props.row.selected" />
                            </q-td>
                            <q-td
                              v-for="col in props.cols"
                              :key="col.name"
                              :props="props"
                              style="word-break: break-word; white-space: normal; min-width: 200px"
                            >
                              <span v-if="col.name == 'name'">
                                {{ props.row[col.name] }}
                              </span>
                              <q-markdown v-if="col.name == 'description'" :noHtml="false" :src="props.row[col.name]" />
                            </q-td>
                          </q-tr>
                          <q-tr v-show="props.expand" :props="props" v-if="props.row.properties.length > 0">
                            <q-td colspan="100%">
                              <q-table
                                :data="props.row.properties"
                                row-key="path"
                                :rows-per-page-options="[0]"
                                :hide-pagination="true"
                                :hide-bottom="true"
                                selection="multiple"
                                :visible-columns="['name', 'baseline', 'tenant']"
                              >
                                <template v-slot:header-selection> </template>
    
                                <template v-slot:body="props">
                                  <q-tr :props="props">
                                    <q-td>
                                      <q-checkbox v-model="props.row.selected" />
                                    </q-td>
                                    <q-td v-for="col in props.cols" :key="col.name" :props="props">
                                      <div v-if="col.name == 'name'">
                                        {{ props.row[col.name] }}
                                      </div>
                                      <div v-if="col.name != 'name'" style="word-break: break-all; white-space: normal">
                                        {{ props.row[col.name] }}
                                      </div>
                                    </q-td>
                                  </q-tr>
                                </template>
                              </q-table>
                            </q-td>
                          </q-tr>
                        </template>
                      </q-table>
                    </div>
                  </div>
                </q-td>
              </q-tr>
            </template>
          </q-table>
    
    

Log in to reply