q-table with a fixed header, pagination turned off, scrolling records, full page height?

[9223000]

Hello!

I am trying to get the following behavior from q-table:

1. with a fixed header
2. off pagination
3. scrolling record lines
4. full page height - ???

Actually, it’s impossible to make the height of the q-table correspond to the height of the page or container in which the q-table is.

I want to use the style “full-height” but I can’t.

I have to adjust the height through sass
.q-table__middle
max-height: 400px

how to make q-table height automatic across the entire page height ??

<template>
<q-page>
<q-table class=“q-pa-xs my-sticky-header-table” separator=“cell” hide-bottom wrap-cells :pagination.sync=“cfgPagination” row-key=“ID” :data=“dataSet” :columns=“cfgColumns” />
</q-page>
</template>

<style lang=“sass”>
.my-sticky-header-table
.q-table__middle
max-height: 400px

.q-table__top,
thead tr:first-child th
background-color: $grey-4

thead tr:first-child th
position: sticky
top: 0
opacity: 1
z-index: 1
</style>

<script>

export default {
data(){
return {
cfgPagination: {
descending: false,
page: 0,
rowsPerPage: 0
},
cfgColumns:[
{ field: ‘Col1’ , name: ‘Col1’, label: “Column 1”, align: ‘left’, sortable: true, style: ‘width: 200px’ },
{ field: ‘Col2’ , name: ‘Col2’, label: “Column 2”, align: ‘left’, sortable: true, style: ‘width: auto’ },
],
dataSet:[
{ID: 1 , Col1: ‘Record Row 1’ , Col2: ‘Record Row 1’},
{ID: 2 , Col1: ‘Record Row 2’ , Col2: ‘Record Row 2’},
{ID: 3 , Col1: ‘Record Row 3’ , Col2: ‘Record Row 3’},
{ID: 4 , Col1: ‘Record Row 4’ , Col2: ‘Record Row 4’},
{ID: 5 , Col1: ‘Record Row 5’ , Col2: ‘Record Row 5’},
{ID: 6 , Col1: ‘Record Row 6’ , Col2: ‘Record Row 6’},
{ID: 7 , Col1: ‘Record Row 7’ , Col2: ‘Record Row 7’},
{ID: 8 , Col1: ‘Record Row 8’ , Col2: ‘Record Row 8’},
{ID: 9 , Col1: ‘Record Row 9’ , Col2: ‘Record Row 9’},
{ID: 10, Col1: ‘Record Row 10’, Col2: ‘Record Row 10’},
{ID: 11, Col1: ‘Record Row 11’, Col2: ‘Record Row 11’},
{ID: 12, Col1: ‘Record Row 12’, Col2: ‘Record Row 12’},
{ID: 13, Col1: ‘Record Row 13’, Col2: ‘Record Row 13’},
{ID: 14, Col1: ‘Record Row 14’, Col2: ‘Record Row 14’},
{ID: 15, Col1: ‘Record Row 15’, Col2: ‘Record Row 15’},
{ID: 16, Col1: ‘Record Row 16’, Col2: ‘Record Row 16’},
{ID: 17, Col1: ‘Record Row 17’, Col2: ‘Record Row 17’},
{ID: 18, Col1: ‘Record Row 18’, Col2: ‘Record Row 18’},
{ID: 19, Col1: ‘Record Row 19’, Col2: ‘Record Row 19’},
{ID: 20, Col1: ‘Record Row 20’, Col2: ‘Record Row 20’},
{ID: 21, Col1: ‘Record Row 21’, Col2: ‘Record Row 21’},
{ID: 22, Col1: ‘Record Row 22’, Col2: ‘Record Row 22’},
{ID: 23, Col1: ‘Record Row 23’, Col2: ‘Record Row 23’},
{ID: 24, Col1: ‘Record Row 24’, Col2: ‘Record Row 24’},
{ID: 25, Col1: ‘Record Row 25’, Col2: ‘Record Row 25’},
{ID: 26, Col1: ‘Record Row 26’, Col2: ‘Record Row 26’},
{ID: 27, Col1: ‘Record Row 27’, Col2: ‘Record Row 27’},
{ID: 28, Col1: ‘Record Row 28’, Col2: ‘Record Row 28’},
{ID: 29, Col1: ‘Record Row 29’, Col2: ‘Record Row 29’},
{ID: 30, Col1: ‘Record Row 30’, Col2: ‘Record Row 30’},
],
}
}
}
</script>

[DDP]

I’m in a similar situation, I’m converting an ExtJS grid to Q-Table, but there are too many manual tweaks, also columns resizing, columns reorder. But in the end they named the component as Q-Table not Q-Grid so maybe in future I hope they’ll add a Grid (like in Syncfusion or ExtJS) to this awesome framework.

Anyway I’m watching this thread if there are some useful info to auto expand the QTable with sticky header.

[9223000]

Of course, you can use third-party components, but I would like to solve it with a basic q-table.

And so far I have solved the issue with ag-grid, but I want to use q-table. Request to the developers, help with the question if it does not. Your advice will be very helpful.