Vuetify data table grouping with paging not working as expected

user_1644708 0
Viewed 457

It doesn't appear the Vuetify data table grouping handles the paging correctly when group headers are collapsed. If you want to collapse all group headers, you have to page through was appears to be empty pages until you get to the next group header.

Codepen example

<v-data-table
      :headers="headers"
      :items="stocks"
      item-key="name"
      sort-by="name"
      group-by="sector"
      class="elevation-1"
    ></v-data-table>

After collapsing the first header, I would think the next group header would appear with enough rows to fill the page. Instead, you have to page through several "empty" pages (the number of pages corresponds to the number of rows in the first grouping). How can I configure the grouping which will bring the next grouping into view when I collapse the previous grouping?

vuetify.js
1 Answers

yes, this is pretty annoying. there is an open issue for it: https://github.com/vuetifyjs/vuetify/issues/13754

as you're likely aware, the 'workaround' is to disable paging (or grouping). if you have a large table performance will be poor - which is why you used paging in the first place.

user_8017510
Related