q-table: Fixed height?



  • Say I setup a rowsPerPage to 5, but I only have 2 rows, the table will be shorter than when there is 5 rows. Any way to get the table to render to the same height no matter how many rows we have, i.e. creating blank rows to fill the remaining space?

    I ask as I don’t want the UI below the table to jump around as I page the table. If I were to have 7 rows, as I page onto the 2nd page with 2 rows, the table gets shorter and everything below it jumps up



  • I’m not sure of understanding, but I think you could set some CSS properties to QTable component to achieve something similar of what you want:

    /* Stylus Properties */
    .q-table-container
        height 100vh !important /* filling 100% of window vertical measure */
    .q-table-middle
        height 100%
    

    Simultaneously, you may set the rowsPerPage pagination property in order to define the page rows number. If data exceed the .q-table-container height, it will show as scrollable.

    Tested on Quasar 0.17.13


Log in to reply