CODEWITHSUNDEEP
javascriptvue.jsdatatablevuejs2vuetify.js
Almic
Almic

Reputation: 77

Modify default slot isOpen in data table Vuetify 2.0

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>

Upvotes: 4

Views: 2493

Answers (3)

Erich Neumayer
Erich Neumayer

Reputation: 46

The solution provided by @jk1 worked perfectly for me. Additionally, my requirement was, to keep the first group "open" and so I could easily achieve this by removing (popping) the last entry from the keys array.

let table = this.$refs.table;
let keys = Object.keys(table.$vnode.componentInstance.openCache);
keys.pop() //remove last element so that first group stays open
keys.forEach(x => {
    table.$vnode.componentInstance.openCache[x] = false;
})

It worked like a charm.

Upvotes: 1

jk1
jk1

Reputation: 21

Since I also encountered the problem, I share my solution, which can be done within the component:

Working example: https://codepen.io/joke1/pen/bGEPdYL

...
mounted () {
    let table = this.$refs.table;
    let keys = Object.keys(table.$vnode.componentInstance.openCache);
     keys.forEach(x => {
    table.$vnode.componentInstance.openCache[x] = false;
 })
   }
...
<v-data-table ref="table" ...></v-data-table>

Upvotes: 2

Vash79
Vash79

Reputation: 165

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.

Upvotes: 3

Related Questions