QTable mobile style

[RobbeV]

Dear all,
I’m a big fan of the QTable look and feel when I open it on my smartphone. The table is nicely centered on page and does not show scroll bars.
Whenever I use it on dekstop however, the table extends to its full width, the bars appear and everything else centered on the pages shifts to the right due to the page being wider. I’ve included some pictures and the code as reference.

<q-table
      v-if="list"
      :data="list"
      :columns="columns"
      row-key="id"
      :filter="filter"
      :filter-method="filterIgnoreSpecialCharacters"
      flat
      bordered
      hide-bottom
      binary-state-sort
      :pagination.sync="pagination"
    > ... <q-table>

Does anyone know how I can mimic the look and feel of the mobile version, or how do I force it to render as a mobile table?

Thanks in advance!
Robbe

Mobile (up) vs Desktop (down)

[RobbeV]

Not really necessary anymore, since I made a workaround using CSS calc() and custom scrollbars.

I do think however the solution to force mobile view would be nice to know.

Thanks for taking a look.

[yo]

@RobbeV what about using a table inside virtual scroll ? It could solve the desktop problem, but change the mobile style.

[dobbel]

q-tables are a bad experience on mobile right now with the current visual behavior ( no scrollbars or the lack of visual aids). Depending on the visible table content you sometimes have no idea that the table has more ‘hidden’ content/columns and is scrollable.