How to programmatically expand all rows in a v-data-table component (Vuetify version 1.5)

0
votes

v-data-table component has a propery "expanded" that allows to show some additional info for each row.

It works fine and I need to expand all the rows immediately when a page is loaded.

Is there a way to do that?

It is used version 1.5 of Vuetify Framework.

https://v15.vuetifyjs.com/en/components/data-tables

1
vue.jsvuetify.js

1 Answers

1
votes

This is fairly easy in the new Version of Vuetify, you just use the property expanded which holds an Array of the items that are currently expanded.

<v-data-table
   id="issues-table"
   :value="selectedIssues"
   :expanded="expandedIssues"
   :items="issues"
>

<v-switch @change="(v) => expandAllIssues(items, v)" />

expandAllIssues (items, status) {
   if (status) {
     this.expandedIssues = items
   } else {
     this.expandedIssues = []
   }
 }

In V1.5.xx of Vuetify you don't have that luxury, but when I took a look, Vuetify works with a similar system under the hood. Firstly you should set the expand prop on the table to true, so it can expand multiple rows.

You can define a reference on your data table and then access it via this.$refs.myDataTableRef. You then realise that they store the expanded rows in an Object called expanded. You can set the rows either true by the id/name of the row in this object or you simply set the whole row objects in the vuetify expanded object to true.

I have pasted the Codepen example of their old data table and made a simple expand all button, that you can obviously change to your desires, but it should make the concept clear.

Codepen example