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

    Always show x-scroll bar on <q-table> even when the amount of rows goes beyond visible page

    CLI
    3
    7
    2698
    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.
    • C
      carlos_proj last edited by

      I have a q-table that has many rows that often extends past the visible page. Additionally, there are many columns so users often have to scroll the x-scroll to the left and right. However, since many rows exist, users have to scroll to the bottom of the web document in order to view the x-scrollbar, scroll left and right, and finally go back to the desired position. The documentation on q-table does not have options for controlling the placement of this scroll bar.

      I have already tried adding an overflow property on the css styling. I have tried wrapping by q-table in a div and giving css properties to that div class.

      Below is an example of the problem. Notice that there is a y-scrollbar but no x-scrollbar.
      0_1539732257988_d6dd6093-6fdb-4d25-8458-33a084aaf827-image.png

      I have to scroll to the bottom of the document to see the x-scrollbar like in this image. I want that x-scrollbar to visible at all times similar to the y-scrollbar.
      0_1539732307530_97858346-0ef5-43a7-bace-40a640340cf9-image.png

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

        @carlos_proj Are you looking for a solution like this? https://forum.quasar-framework.org/topic/2682/solution-to-sticky-datatable

        1 Reply Last reply Reply Quote 0
        • C
          carlos_proj last edited by

          @Hawkeye64 I’m looking for a solution to how this handles the scrolling https://amphiluke.github.io/handy-scroll/. I’m currently trying to implement this with no luck

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

            That’s nice functionality, but why use that when you don’t have to? Just restrict the bottom of the DataTable to the bottom of the page, as in the example above, then the user will always have the scrollbar available.

            1 Reply Last reply Reply Quote 0
            • C
              carlos_proj last edited by

              @Hawkeye64 The issue is that there are many rows. I am currently implementing a pagination scheme but if the user overrides it by trying to view more, then this issue occurs.

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

                Create a scrollable div around the table and restrict the div. Here’s what I do:

                  <div id="table-wrapper">
                    <div id="table-alerts-scroll" class="non-selectable">
                      <q-table
                        id="alerts"
                        dense
                        hide-bottom
                        row-key="id"
                        :color="mainColor"
                        :data="alarms"
                        :columns="columns"
                        :pagination.sync="pagination"
                      >
                ...
                

                Notice, I have an id on the table.
                Then, I muck with the CSS like this:

                <style scoped>
                  #table-alerts-scroll >>> #alerts .q-table-container {
                    box-shadow: none;
                  }
                
                  #table-alerts-scroll >>> #alerts .q-table-middle.scroll {
                    overflow: auto;
                  }
                
                  #table-alerts-scroll >>> #alerts thead tr th {
                    position: sticky;
                    position: -webkit-sticky;
                    background: lightgrey;
                    top: 0px;
                    z-index: 1
                  }
                
                  #table-alerts-scroll >>> #alerts .q-table table {
                    display: block;
                    width: 100%;
                    min-width: 100%;
                  }
                
                  #table-alerts-scroll >>> #alerts .q-table thead,
                  #table-alerts-scroll >>> #alerts .q-table tr,
                  #table-alerts-scroll >>> #alerts .q-table th,
                  #table-alerts-scroll >>> #alerts .q-table td {
                    height: 24px !important;
                  }
                
                  #table-alerts-scroll >>> #alerts .q-table thead,
                  #table-alerts-scroll >>> #alerts .q-table tr {
                    width: 100% !important;
                    display: inline-table !important;
                  }
                
                  #table-alerts-scroll >>> #alerts .q-table tbody {
                    display: block;
                    position: relative;
                    overflow: auto;
                    width: 100%;
                    min-width: 100%;
                    min-height: 200px;
                  }
                </style>
                

                In this case, I am not using the scrollable outside div (I used to do it that way). Now, I restrict the TBODY of the table.
                I have a computed function:

                    tableElement: function () {
                      let element = null
                      let tables = document.getElementsByTagName('TABLE')
                      Array.prototype.forEach.call(tables, (table) => {
                        if (table.parentElement.parentElement.id === 'alerts') {
                          element = table.parentElement
                        }
                      })
                      return element
                    },
                

                This gets my table element and makes sure it is the correct one as I may have more than one.
                Then, my parent page figures out how high the child (table) component should be and uses a parameter :height="tableHeight"

                Watch:

                    height: function (value) {
                      this.setTableHeight(value)
                    },
                

                Functions:

                    setTableHeight: function (height) {
                      // 28 is height of header row
                      this.setTBody(height - 28)
                    },
                
                    setTBody: function (height) {
                      if (this.tableElement) {
                        let tbody = this.tableElement.childNodes.item(0).childNodes.item(1)
                        tbody.style.height = height + 'px'
                      }
                    },
                
                1 Reply Last reply Reply Quote 1
                • B
                  Bui Van Hiep last edited by

                  You can try with
                  .q-table-middle {
                  max-width: 100%;
                  max-height: 600px;
                  }

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