64 lines
2.1 KiB
Vue
64 lines
2.1 KiB
Vue
<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>
|
|
|