Q-table with Grid mode not scrolling



  • I have a q-table that takes up the entire page. In normal mode it scrolls fine, but on small screens when it switches to grid mode, it does not scroll.

    Here’s my code:

    <div class="q-pa-none col">
          <!-- 'non-selectable' class prevents selecting text. Can still select a row -->
          <q-table class="sticky-header full-width full-height non-selectable"
            ref="table"
            dense
            flat
            square
            :grid="$q.screen.lt.sm"
            virtual-scroll
            :virtual-scroll-sticky-size-start="30"
            :virtual-scroll-sticky-size-end="30"
            :rows-per-page-options="[0]"
            :pagination.sync="pagination"
            :data="tableItems"
            :columns="columns"
            row-key="name"
            selection="single"
            :selected.sync="selectedRow"
            :sort-method="customSort"
            :filter="searchTerm"
            no-data-label="No items match filter and category setting"
          >
            <template v-slot:header="props">
            <q-tr :props="props">
              <q-th></q-th> <!-- leave space for icon -->
              <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 class="cursor-pointer" :props="props"
              @click.native="selectRow(props.row, $event)">
                <q-td auto-width>
                  <q-icon size="xs" :name="props.row.icon.name" :color="props.row.icon.color" />
                </q-td>
                <q-td auto-width v-for="col in props.cols" :key="col.name" :props="props">
                  {{ col.value }}
                </q-td>
              </q-tr>
            </template>
            <template v-slot:bottom>
              <div class="row" style="width: 100%">
                <div class="col-8">
                  <div v-if="searchTerm">
                    <div v-if="inCategoryName === allCategories">
                      Showing search result {{ stockStatus }} in all categories
                    </div>
                    <div v-else>
                      Showing search result {{ stockStatus }} in category: <b>{{ inCategoryName }}</b>
                    </div>
                  </div>
                  <div v-else>
                    <div v-if="inCategoryName === allCategories">
                      Showing {{  tableItems.length }} items {{ stockStatus }} in all categories
                    </div>
                    <div v-else>
                      Showing {{  tableItems.length }} items {{ stockStatus }} in category: <b>{{ inCategoryName }}</b>
                    </div>
                  </div>
                </div>
                <div class="col">
                  <div>
                    Total value: {{ totalValueDisplay }}
                  </div>
                </div>
              </div>
            </template>
          </q-table>
        </div>
    

    Any help will be appreciated.



  • OK, found the solution - I just enclosed the table in a q-scroll-area when in mobile.


Log in to reply