59 lines
2.0 KiB
Vue
59 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { ref,computed } 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 Table Pagination' });
|
|
const breadcrumbs = ref([
|
|
{
|
|
text: 'Dashboard',
|
|
disabled: false,
|
|
href: '#'
|
|
},
|
|
{
|
|
text: 'Data Table Pagination',
|
|
disabled: true,
|
|
href: '#'
|
|
}
|
|
]);
|
|
|
|
|
|
|
|
/*Header Data*/
|
|
const pagination = ref(1);
|
|
const itemsPerPage = ref(5);
|
|
const headers : any = ref([
|
|
{ title: 'Name', align: 'start', key: 'name' },
|
|
{ title: 'Project Name', align: 'start', key: 'project' },
|
|
{ title: 'Post', align: 'start', key: 'post' },
|
|
{ title: 'Status', align: 'start', key: 'status' },
|
|
{ title: 'Budget', align: 'end', key: 'budget' },
|
|
|
|
])
|
|
|
|
/*page count*/
|
|
const pageCount = Math.ceil(BasicDatatables.length / itemsPerPage.value)
|
|
|
|
</script>
|
|
<template>
|
|
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<UiParentCard title="External Pagination">
|
|
<v-data-table :items-per-page="itemsPerPage" :headers="headers" :items="BasicDatatables" v-model:page="pagination"
|
|
hide-default-footer class="border rounded-md datatabels">
|
|
<template v-slot:bottom>
|
|
<div class="text-center pt-2 mb-3 px-3">
|
|
<v-pagination v-model="pagination" :length="pageCount"></v-pagination>
|
|
<v-text-field :model-value="itemsPerPage" class="pa-2" label="Items per page" type="number"
|
|
min="-1" max="15" hide-details
|
|
@update:model-value="itemsPerPage = parseInt($event, 10)"></v-text-field>
|
|
</div>
|
|
</template>
|
|
</v-data-table>
|
|
</UiParentCard>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
|