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

[carlos_proj]

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.

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.

[Hawkeye64]

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

[carlos_proj]

@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

[Hawkeye64]

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.

[carlos_proj]

@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.

[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'
      }
    },

[Bui Van Hiep]

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