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.

  • I need this feature as well.

  • Admin

    You can play with the position: sticky for sticky headers.

  • @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: sticky will not work with thead or tr.

Log in to reply