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