QTable n rows

[eloy.silva]

in q-table, in a special case that will always show 6 to 20 rows I don’t need the pagination, try with the classes and properties but I don’t get it

 <q-table
              class="my-sticky-header-table"
                dense
                :data="error"
                :columns="columns"
                separator="none"
                bordered
                square
                wrap-cells
    virtual-scroll
      pagination.sync="0"
      :rows-per-page-options="[20]"
                table-header-style="background-color: #F7F7F7; color:#333;"
              />

the reults

Thanks in advance

[s.molinari]

How about controlling the data set you are giving the QTable? i.e. just filtering the results you want shown?

Scott

[eloy.silva]

@s-molinari

I just want all the rows to appear, since they will always do 10 0 20, very few, and they are not data that comes from the server, it is from an internal process that is done in the client and that data must be shown in the q- table

the problem is that when only 5 appears, it forces the user to paginate, and what should come out would be the scroll with all the rows
As I said, I am new and I am learning to use these technologies

Best regards

[s.molinari]

Ah. You have to give the pagination prop an object. In that object you can define the default number of rows per page.

Scott

[ghada]

Can we make the rowsPerPage in the pagination props vary according to the screen size?
something like this:
pagination: {
sortBy: ‘desc’,
descending: false,
page: 1,
rowsPerPage: this.$q.screen.width>768 && this.$q.screen.width <= 1024? 14 : 7
},
this is working but I need to reload the page to see the rows per page changing according to screen width , Is there a solution to make it responsive ?

[metalsadman]

@ghada yes, see the code of this example https://quasar.dev/layout/grid/flexbox-patterns#Example--Masonry-like-table-grid

[ghada]

@metalsadman this is also not working unless I reload the page I can see the number of rows changing