<script setup lang="ts">
import { ref } from 'vue';
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
import UiParentCard from '@/components/shared/UiParentCard.vue';
import {BasicDatatables} from '@/_mockApis/components/datatable/dataTable';
const page = ref({ title: 'Data Tables Grouping' });
// const breadcrumbs = ref([
//     {
//         text: 'Dashboard',
//         disabled: false,
//         href: '#'
//     },
//     {
//         text: 'Data Tables Grouping',
//         disabled: true,
//         href: '#'
//     }
// ]);

/*Header Data*/
const sortBy : any = ref([
    { key: 'name', order: 'asc' }
])
const groupBy : any = ref([
    { key: 'status', order: 'asc' }
])


</script>
<template>
    <!-- <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb> -->
    <!-- <v-row>
        <v-col cols="12"> -->
            <!-- <UiParentCard title="Grouping"> -->
                <div class="vf-element-layout vf-col-12  border border-gray-200 rounded-xl">
          <ListElement name="pages" :default="props.items" class="mx-4" >
            <template #default="{ index }">
                <ObjectElement :name="index" class="px-3">
  <div class="vf-element-layout vf-col-12">
                <v-data-table items-per-page="5"  :items="BasicDatatables" item-value="name"
                    :group-by="groupBy" :sort-by="sortBy"
                    class="border rounded-md datatabels">
                    <template v-slot:headers>
                        <!-- <thead class="v-data-table-header"> -->
                            <tr v-if="index === 0">
                                <th>Module</th>
                                <th>Permission</th>
                                <th>post</th>
                            </tr>
                        <!-- </thead> -->
                    </template>
                    <template v-slot:item="{ item }">
                        <tr>
                            <td></td>
      <td> {{ item.name }} </td>
      <td> {{ item.post }} </td></tr>
    </template>
                </v-data-table>
            <!-- </UiParentCard> -->
        <!-- </v-col>
    </v-row> -->
</template>

