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



  • 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>



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



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


Log in to reply