Modify default slot isOpen in data table Vuetify 2.0

Question

Good afternoon, I modified the group header slot to customize the group row, only I would like to set the value isOpen = false by default and I can't find a way to do it, I would appreciate your help.

<template v-if="group_by" v-slot:group.header={group,items,headers,isOpen,toggle}>
    <td v-for="header in headers" @click="toggle(items[0].category)">
        <template v-if="header.group_header">
            <template v-if="link_row">
                <strong><a :href=setInvoiceLink(group)>{{group}}</a> ({{getQuantity(group)}})</strong>
            </template>
            <template v-else>
                <strong>{{group}} ({{getQuantity(group)}})</strong>
            </template>
            <strong style="color:blue" v-if="group_extra_title"> - {{getExtraTitle(group,group_extra_title)}}</strong>
        </template>
        <template v-if="header.sum">
            <strong>{{MoneyFormat(getSuma(header.value,group))}}</strong>
        </template>
        <template v-if="header.value == 'data-table-select'">
            <v-checkbox 
                :disabled="enable_if"
                :input-value="check_checkbox(group)"
                @change="selectAllInvoiceAction(group,$event)" 
                ></v-checkbox>
        </template>
    </td>
</template>

Answer 1

I thought the same thing than you, that I could change the default behavior from group-by prop from v-data-table.

Looking deeper in the GitHub code I saw the Push Request that added the isOpen prop to group-header slot and an example of its usage. Here it is:

<template>
  <v-container>
    <v-data-table :items="items" :headers="headers" group-by="type">
      <template #group.header="{ isOpen, toggle }">
        <v-btn @click="toggle" icon>
          <v-icon>
            {{ isOpen ? '$minus' : '$plus' }}
          </v-icon>
        </v-btn>
      </template>
    </v-data-table>
  </v-container>
</template>

As you can see it is just a reactive prop to inform the slot if the group header is open or closed. If you want to add a button to open or close all at the same time, this another stackoverflow question show you how:

Collapse or expand Groups in vuetify 2 data-table

The logical place to inform that you want all the groups originally closed would be at the v-data-table props, but it isn't implemented yet as you can see at the props from the source code.

v-data-table source code

****EDIT****

After thinking about how to solve this issue I came to this solution that will work on your build code.

On your chunk-vendors.[hash].jsfile from your dist/js folder remove the ! from this code before the 0 (zero) at the end.

genGroupedRows:function(t,e){var n=this;return t.map((function(t){return n.openCache.hasOwnProperty(t.name)||n.$set(n.openCache,t.name,!0)

What will make look like this:

genGroupedRows:function(t,e){var n=this;return t.map((function(t){return n.openCache.hasOwnProperty(t.name)||n.$set(n.openCache,t.name,0)

The chunk file is hard to read because of the uglify process. But you just need to find the genGroupedRows function in the middle of it, and remove the exclamation point. In other words, you are just saying to the source code from Vuetify to create groups closed by default.

You can make it work on your dev too, but in this case you would need to change the source code from vuetify module. Same function name genGroupedRows.