CODEWITHSUNDEEP
vue.jsnuxt.jsvuetify.js
Fozle Rabbi Shafi
Fozle Rabbi Shafi

Reputation: 753

Why does vuetify data table group show the same group more than once?

I have created a data table with vuetify and tried to group it with a field called "unit" like below:

<v-data-table
      :loading="loading"
      :headers="headers"
      :items="modifiedChapters"
      item-key="id"
      class="elevation-1"
      disable-sort
      group-by="unit"
      :page.sync="chaptersInput.pageNo"
      :items-per-page="chaptersInput.limit"
      :server-items-length="totalCount"
      @update:options="onUpdatePagination"
    >

The output of the code is a bit weird. It is grouping the item more than once with the same name. I have added a photo below for better understanding. Here you see that both the units "Introduction" and "Unit One" are grouped more than once. How can I solve the issue? enter image description here

Upvotes: 0

Views: 1896

Answers (1)

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37853

It seems this is cause by disable-sort. You can try it by opening Grouping example in Code Pen - if you add disable-sort it will break...

There is already an issue in Vuetify repo but it is hard to say whether it is a bug or intended behavior as nobody of maintainers commented on it...

Workaround is to not use disable-sort and instead set sortable: false on each header definition (tested)

Other workaround would be to pre-sort your data yourself by the same column you are passing into group-by as the group-by logic apparently (and logically) expects the rows are sorted by the grouping column. But this is of course less practical if you want to allow user to switch grouping by using show-group-by prop (also tested)

Upvotes: 1

Related Questions