How to Remove Group Title and Auto Expand VDataTable Group Header

Question

i'm Using Nuxt 3 and Vuetify 3.3.1

and using v-data-table and group by Date and using template group-header like this

<script setup lang="ts">
import { VDataTable } from 'vuetify/labs/VDataTable'

const headers = ref([
  { title: 'Employee Name', align: 'start', sortable: false, key: 'name' },
  { title: 'Time In', align: 'center', sortable: false, key: 'timeIn' },
  { title: 'Status In', align: 'center', sortable: false, key: 'statusIn' },
  { title: 'Location In', align: 'center', sortable: false, key: 'locationIn' },
  { title: 'Time Out', align: 'center', sortable: false, key: 'timeOut' },
  { title: 'Status Out', align: 'center', sortable: false, key: 'statusOut' },
  { title: 'Status', align: 'center', sortable: false, key: 'status' },
  { title: 'Workhour', align: 'center', sortable: false, key: 'workhour' },
  { title: 'Action', align: 'end', sortable: false, key: 'action' }
])

const items = ref([
    { id: 1, date: "12-06-2023", name: 'Geofany Galindra', timeIn: '07:39:38 WIB', statusIn: 'On Time', locationIn: 'Others', timeOut: '17:49:18 WIB', statusOut: 'Checked Out', status: 'Present', workhour: '08:50:28', },
    { id: 2, date: "11-06-2023", name: 'Geofany Galindra', timeIn: '07:39:38 WIB', statusIn: 'On Time', locationIn: 'Others', timeOut: '17:49:18 WIB', statusOut: 'Checked Out', status: 'Present', workhour: '08:50:28', },
  ])

const groupBy = ref([
    { key: 'date' }
  ])
</script>

<template>
  <v-data-table :group-by="groupBy" :headers="headers" :items="items" item-value="name" class="elevation-0">
    <template #group-header="{ item, columns, toggleGroup, isGroupOpen }">
      <tr>
        <td :colspan="columns.length">
          <VBtn size="small" variant="text" :icon="isGroupOpen(item) ? '$expand' : '$next'" @click="toggleGroup(item)">
          </VBtn>
          {{ item.value }}
        </td>
      </tr>
    </template>
  </v-data-table>
</template>

and this is the result Result

i want to take out the 'Group' Title in Header and make the list of group is Expanded by default without Toggle

Expected Result

Answer 1

To take out 'Group' from the title.

There are two options. Both use the special 'data-table-group' name.

Option 1: Include as first item in headers array. As you don't specify a title, the title will be an empty string

 headers: [
        { key: 'data-table-group' }, 

Option 2: Use the slot for this header and return empty.

<template v-slot:header.data-table-group=""></template>

To Auto Expand VDataTable Group Header

You need to define a 'loading' ref that you set to true when you load in data for the table and false after loaded. You can then use a template ref in the group-header slot like this

 <template  v-slot:group-header="{ item, toggleGroup, isGroupOpen }">
                <template :ref="(el)=>{
                    if (loading && !isGroupOpen(item))
                        toggleGroup(item);
                    }"></template>