i want custom scroll bar in table

[qwerty]

styledthumb and bar

i want scroll styledthumb and bar in table insted of normal scroll

[dobbel]

@qwerty

This is not yet supported in Quasar. You could look in open Quasar Github issues if there is already a feature request for this. If not you could create one.

But maybe you could use this:

https://binaryify.github.io/vue-custom-scrollbar/en/

[tdumitr]

I was just grappling with the same problem. The issue I am facing is that on the same page I have a QScrollArea and a QTable and, obviously, they have very different scrollbars. I did get close, by using ::webkit-scrollbar. There are a couple of issues with my solution:

1. The QScrollArea uses transparent scroll thumb. However, the opacity property does not seem to work for ::webkit-scrollbar or for ::webkit-scrollbar-thumb.
2. The QScrollArea uses a transition when showing/hiding the scrollbar. Again, the transition property does not seem to work for ::webkit-scrollbar or for ::webkit-scrollbar-thumb.
3. The scrollbar for the table occupies a piece of the table header on the right side. This is a consequence of the opacity not working.
4. Most importantly, the ::webkit-xxx works for WebKit browsers, but not for Gecko or IE. I know IE is sort of dying out, but Firefox has a loyal following, and the Tor browser is also based on Gecko. In my case, I am building an Electron app, which uses Chromium, which is based on WebKit. Browser support is not one of my problems, but it may be yours.

You can check an example of side-by-side table and scroll area and their scrollbars here

To Quasar team members: While my solution works (sort of) for QTable, I would have to replicate the styling for wherever else a scrollbar appears. It would be really nice if you would have a consistent way of handling scroll bar styling.