Data Table sticky header 0.15
I would like to ask how to make sticky header in Data Table component ?
There is no documentation for that.
Sticky header or columns are no longer possible. Cannot accommodate this with the highly requested feature of being able to fully customise rows, so sorry.
This is sad news
The Quasar Data Table component is really great and sticky header is a very helpful feature (working with large data, live scores etc.) I was hoping it was still there.
Thank you Razvan for your answer. You are doing a great job !
Is there any chance to see this feature in future versions of Quasar Framework?
Unfortunately, having those sticky header/columns relies on too many things which the developer would need to do if they used scoped slots, so it’s not an option at the moment, sorry.
fsgiudice last edited by
I had to stop updating an application to the new version because some features are missing in the new datatable: scroll version and sticky columns. Can I help in some way to push the addition of above features to v 0.15?
So sad, because the ability to highly customize is what made me choose the datatable. What is preventing the scroll area to be created when user is customizing the cells ? Any workaround like creating a custom sticky header (instead the ones at the table) and then use a scroll area around the table ?
I quickly put together a hacked wrapper component for the data table in order to support sticky headers as it is a must for a project I am working on. The issue that I currently have is passing custom slot templates into the child data table and getting them to recognize/render. I am rather new to both Vue and Quasar so I may eventually get it, but currently have to move on with what I have. Hopefully this is not an impossible feat as this type of functionality is crucial to our application layout?
The wrapper component also has a custom footer so I could determine the placement independent of the table. The purpose of an independent footer was to have the application layout contain a top toolbar, sticky search bar, full page scrolling table, and then the footer always pinned to the bottom while in desktop view.
Below is a pen demonstrating what I quickly hacked together. Would love to see a built-in wrapper component within quasar which accomplishes similar functionality.
I need this feature as well.
You can play with the
position: stickyfor sticky headers. https://css-tricks.com/position-sticky-2/
@rstoenescu I have seen your suggestion somewhere else as well and I was about to copy it over here. Thank you !
The basic idea if anyone is interested. Note that
position: stickywill not work with