No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Data Table sticky header 0.15

    Help
    6
    11
    2163
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • K
      krugeros last edited by

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

      1 Reply Last reply Reply Quote 2
      • rstoenescu
        rstoenescu Admin last edited by

        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.

        1 Reply Last reply Reply Quote 0
        • K
          krugeros last edited by

          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?

          1 Reply Last reply Reply Quote 0
          • rstoenescu
            rstoenescu Admin last edited by

            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.

            1 Reply Last reply Reply Quote 0
            • fsgiudice
              fsgiudice last edited by

              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?

              1 Reply Last reply Reply Quote 3
              • D
                danielo515 last edited by

                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 ?

                1 Reply Last reply Reply Quote 0
                • B
                  bobbyross last edited by

                  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

                  1 Reply Last reply Reply Quote 1
                  • T
                    turigeza last edited by

                    I need this feature as well.

                    1 Reply Last reply Reply Quote 0
                    • rstoenescu
                      rstoenescu Admin last edited by

                      You can play with the position: sticky for sticky headers. https://css-tricks.com/position-sticky-2/

                      1 Reply Last reply Reply Quote 0
                      • T
                        turigeza last edited by

                        @rstoenescu I have seen your suggestion somewhere else as well and I was about to copy it over here. Thank you !

                        1 Reply Last reply Reply Quote 0
                        • T
                          turigeza last edited by

                          The basic idea if anyone is interested. Note that position: sticky will not work with thead or tr.
                          https://codepen.io/turigeza/pen/QoBNjz

                          1 Reply Last reply Reply Quote 0
                          • First post
                            Last post