Expand all data table entries at once in VuetifyJS/VueJS

Question

How to expand all entries of this VuetifyJS/VueJS data table example at once and not only one at the time?

 <div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      hide-actions
      item-key="name"
      expand
    >
      <template slot="items" slot-scope="props">
        <tr @click="props.expanded = !props.expanded">
          <td>{{ props.item.name }}</td>
          <td class="text-xs-right">{{ props.item.calories }}</td>
          <td class="text-xs-right">{{ props.item.fat }}</td> 
        </tr>
      </template>
      <template slot="expand" slot-scope="props">
        <v-card flat>
          <v-card-text>Peek-a-boo!</v-card-text>
        </v-card>
      </template>
    </v-data-table>
  </v-app>
</div>

Here is an example for a single expand:

https://codepen.io/anon/pen/yEWNxE?&editors=101#

Answer 1

There is an open-issue with regards to this feature, make sure to follow it and get notified when it's resolved.

---

Temporary solution by @zikeji follows:

Add reference to the table:

<v-data-table ref="dTable">

Expand rows manually when component loads:

mounted() {
    for (let i = 0; i < this.desserts.length; i += 1) {
        const item = this.desserts[i];
        this.$set(this.$refs.dTable.expanded, item.name, true);
    }
},

Codepen