0

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

0 Answers0