Q-table no horizontal scroll on narrow window

CWoodman

I have a q-table that is too wide on mobile. I want it to provide horizontal scrolling (with first column sticky) when the window is too narrow to show all columns, but it’s not working. Just cuts off the table without showing any scrollbar.

Here’s the code:

<div class="q-pa-none col">
  <q-table
    class="sticky-header full-height non-selectable"
    ref="table"
    dense
    flat
    square
    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="selected"
    :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 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 v-for="col in props.cols" :key="col.name" :props="props">
          {{ col.value }}
          <span v-if="col.name === 'stock'">
            <q-icon size="xs" :name="props.row.icon.name" :color="props.row.icon.color" class="q-pl-xs" />
          </span>
        </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 q-pl-sm">
          <div>
            Total value: {{ totalValueDisplay }}
          </div>
        </div>
      </div>
    </template>
  </q-table>
</div>

Shoooryuken

hi, it is possible that <q-td auto-width interfere with <q-table dense can you try to delete auto-width ?

CWoodman

@Shoooryuken OK I removed the auto-width. But still not getting horizontal scrolling.

dobbel

@CWoodman

What if you disable virtual scroll?

codepen?

CWoodman

@dobbel Removed virtual-scroll but still no horizontal scrolling. Vertical works still, so guess I don’t need the virtual-scroll unless I want a custom scrollbar.

dobbel

@CWoodman

By default ( see quasar examples) horizontal scrollbar works. So something is ‘wrong’ with your code. You could remove properties to the bare minimum and disable any custom css to see if it makes a difference(a global overflow: hidden maybe) .

Without codepen it’s hard to tell…

CWoodman

@dobbel OK I’ll play with it some more. Maybe start with a minimal table and add stuff I want until it breaks. Thanks. If I’m stuck, I’ll post a reply with some code.

CWoodman

@dobbel Got it working. Upgraded to the latest Quasar and now it works as expected.

dobbel

@CWoodman

You did not have to change anything apart from upgrading?

CWoodman

@dobbel Yes it works fine. Should have upgraded a while ago. Sorry for the bother.