Data Table sticky header 0.15



  • Hi,
    I would like to ask how to make sticky header in Data Table component ?
    There is no documentation for that.


  • Admin

    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?


  • Admin

    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.



  • Hi @rstoenescu
    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.

    https://codepen.io/bobbyross/pen/ZjGVpa