QTable scrollTo(0) with sticky header should not hide first item behind the header

[jmcopeland]

What happened?

GIVEN I have a paginated table with a sticky header and the table is scrolled down, WHEN I try to using table.scrollTo(0) to scroll to the top, THEN the first row is hidden behind the sticky header.

What did you expect to happen?

WHEN scrolling to the top of a table (index 0) then I expect that first row to be visible, not hidden behind the sticky header.

Reproduction URL

https://codepen.io/jmcopeland/pen/rNvwOGq

How to reproduce?

Steps:

1. Go to the reproduction link
2. Scroll the table down towards the bottom
3. Hit "Scroll to top" button

Expected:

1. Scroll the table to the top so that first item is visible

Actual:

1. Scroll the table to the top, but the first item is hidden behind the sticky header

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Components (quasar)

Platforms/Browsers

Chrome, Safari

Quasar info output

Operating System - Darwin(21.6.0) - darwin/arm64
NodeJs - 16.3.0

Global packages
  NPM - 8.5.0
  yarn - 1.22.11
  @quasar/cli - 1.3.2
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.8.3 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.6.0 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.15.3 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - 1.1.0 -- Official ESLint plugin for Quasar
  vue - 3.2.37 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.1.5
  pinia - Not installed
  vuex - 4.0.2 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.17.9 -- Babel compiler core.
  webpack - 5.72.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.9.3 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.5.5 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  @quasar/quasar-app-extension-qcalendar - 4.0.0-beta.15 -- A Quasar App Extension for @quasar/quasar-ui-qcalendar

Relevant log output

No response

Additional context

No response

[pdanpdan]

It's an interesting case, but unfortunately it's impossible to solve it. I'll leave the issue open, but do not expect any solution.

[jmcopeland]

Just curious, what makes it impossible?

[jmcopeland]

I'm trying to make this work to fix an annoying UI/UX issue with the table that has shown up in our user testing, which is that when you move between pages the scroll holds its place, and users get confused. So I'm trying to auto-scroll to the top upon page change. Maybe there is another way to deal with this?

[pdanpdan]

The header does not occupy space in the scrolling parent, except when the scroll top is 0. So from the pov of the virtual scroll the first row is scrolled in the right position. I'll take a look again this week, maybe I missed something.

[pdanpdan]

:) I was tired yesterday - it cannot be solved for normal QTable, but it's already solved for QTable using virtual-scroll

https://codepen.io/pdanpdan/pen/rNvzWbz?editors=1000

[jmcopeland]

Awesome! Thank you so much. Any gotchas to be aware of when using the virtual-scroll?

[pdanpdan]

Not that I can think of right now. But I think I'll be able to fix it for non-virtual also if you provide the height of the sticky on top

[rstoenescu]

Enhancement will be available in Quasar v2.8.4 and v1.20.2