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