How to set v-data-table groups order?

user_931247 0
Viewed 803

By default, the groups initiated by the group-by property are sorted alphabetically, but I just want it to keep the original order or set it manually. How to configure v-data-table groups order ?

<v-data-table
    :headers="headers"
    :items="questions"
    :item-class="rowClass"
    :group-by="'group'"
    disable-pagination
    hide-default-footer
>
vuetify.js vue.js javascript
1 Answers

Per the docs it doesn't seem to support sorting the categories per your needs. However @DevonDahon is on the right track and helped me sort my grouped content as I needed it.

But if you are here, also read where one of the answers shows you how to style the category.

Just to run you through how I managed to make it work:

  1. Get the data (here I stored in a data property called notificationTypes
notificationCategoryOrder: [
  "All Notifications",
  "Request",
  "Order",
  "Inventory",
  "Spend Code",
];


this.notificationTypes = resp.data.data.map((notification) => ({
  ...notification,
  position: this.notificationCategoryOrder.indexOf(notification.category),
}));

Then use it in the v-data-table like :

<v-data-table
  :headers="headers"
  hide-default-footer
  :items="notificationTypes"
  disable-pagination
  dense
  group-by="position"
>
                <template #group.header="{ group, headers, toggle, isOpen }">
                    <td :colspan="headers.length">
                        <v-btn @click="toggle" x-small icon :ref="group">
                            <v-icon v-if="isOpen">mdi-plus</v-icon>
                            <v-icon v-else>mdi-minus</v-icon>
                        </v-btn>
                        <span class="mx-5 font-weight-bold">{{
                            notificationCategoryOrder[group]
                        }}</span>
                    </td>
                </template>
  </v-data-table>

Came out pretty clean!

user_123699200
Related