I have elaborated a solution to have pagination with continuation tokens on a v-data-table but I have arrived to a dead end. I'm using Vuetify 2.5.6 and cannot migrate to version 3
I have a data-table like the one below. I have a vuex store that before the table component is loaded has the next continuation token from an Azure function, the total numbers of elements in the database (that substitutes the totalItems from the footer in the second template from the bottom) and finally, I was trying to enable the next button based on the existance of the continuation token. Apart, I would need to implement a function in such button to make a call back to the Azure funtion to retrieve the next page.
The solution so far reads from the parent component the page and then is displayed in this table component, but I don't see a way to enable the next button depending on the existance of the continuation token, or more broadly, how to configure the next button to make calls. I'm afraid my knowledge on this area is not that wide.
Can someone tell me how to change the properties of the next button based on the component data? Thanks
<template>
<v-data-table
class="tableContent"
:headers="header"
:items="data"
sort-by="email"
:id="pagetableStyle"
:footer-props="{
'items-per-page-options': [10]
//'pagination': {
// 'itemsLength': 10
//}
}"
:items-per-page="10"
>
<template
v-slot:top
v-if="tableToolbarButtons !== undefined && tableName !== undefined"
>
<v-toolbar flat>
<v-toolbar-title :v-if="tableName" class="tableNameStyle">{{
tableName
}}</v-toolbar-title>
<template :v-if="tableToolbarButtons">
<div v-for="(item, index) in tableToolbarButtons" :key="index">
<v-btn
class="button"
color="primary"
v-on:click="item.clickButton"
dark
>
<v-icon>
{{ item.icon }}
</v-icon>
{{ item.name }}
</v-btn>
</div>
</template>
</v-toolbar>
</template>
<template v-slot:[`item.deleteItem`]="{ item }" v-if="customDelete">
<div v-for="(deleteItem, index) in customDelete" :key="index">
<v-icon small @click="deleteItem.clickButton(data.indexOf(item))">
{{ deleteItem.icon }}</v-icon
>
</div>
</template>
<template v-slot:[`item.actions`]="{ item }">
<div v-for="(actionItem, index) in customActions" :key="index">
{{ item.user }}
<v-icon small @click="actionItem.clickButton(data.indexOf(item))">
{{ actionItem.icon }}</v-icon
>
</div>
</template>
<template v-slot:[`item.requestedActions`]="{ item }">
<div
v-for="(requestItem, index) in requestedActions"
:key="index"
class="selectStyle"
>
<Select
:selectedValue="item.status"
:items="requestItem.selectItems"
@onChangeSelectedValue="
requestItem.clickButton(data.indexOf(item), item)
"
styleName="adminSelect"
/>
</div>
</template>
<template v-slot:[`item.accessListActions`]="{ item }">
<div
v-for="(accesItem, index) in accessListActions"
:key="index"
class="selectStyle"
>
<Button
buttonName="Remove"
@onClickButton="accesItem.clickButton(data.indexOf(item), item)"
styleName="button"
/>
</div>
</template>
<template #footer.page-text="props">
{{props.pageStart}}-{{props.pageStop}} of {{itemsCount}}
</template>
<template v-if="getContToken() != false" #footer.next-icon="{nexticon}" >
{{nexticon.disabled=false}}
</template>
</v-data-table>
</template>
<script>
import Select from "../Select.vue";
import Button from "../Button.vue";
import store from "../../store/store";
export default {
name: "PageTable",
props: {
tableName: { typeof: String, require: true },
header: { typeof: Array, require: true },
data: { typeof: Array, require: true },
pagetableStyle: { typeof: String, require: true },
tableToolbarButtons: { typeof: Array, require: false },
customActions: { typeof: Array, require: false },
customDelete: { typeof: Array, require: false },
requestedActions: { typeof: Array, require: false },
accessListActions: { typeof: Array, require: false },
},
components: {
Select: Select,
Button: Button,
},
data() {
return {
itemsCount: this.getLogEventsCount()
};
},
methods: {
getLogEventsCount() {
if (!(store.getters.getLogEventsCount == null) && !(store.getters.getLogEventsCount == undefined)) {
return store.getters.getLogEventsCount;
}
else {
return 0;
}
},
getContToken() {
if (!(store.getters.getCompositeToken == null) && !(store.getters.getCompositeToken == undefined)) {
return store.getters.getCompositeToken;
}
else {
return false;
}
}
}
};
</script>
<style scoped>
#start {
margin-right: auto;
margin-left: 50px;
}
#end {
margin-left: auto;
margin-right: 50px;
}
#activityLog {
background-color: #fff;
}
#tableContent {
justify-content: center;
height: 100px;
display: flex;
flex-wrap: wrap;
}
.v-btn > .v-btn__content .v-icon {
color: inherit;
margin-right: 10px;
font-size: 20px;
text-transform: none;
}
.v-btn > .v-btn__content {
text-transform: none;
}
.button {
background-color: #616e7c !important;
margin-right: 32px;
width: 127px;
height: 38px;
border: 1px solid
rgba(97.00000181794167, 110.00000104308128, 124.00000020861626, 1);
border-radius: 64px;
}
.selectStyle {
height: 20px;
align-items: center;
float: right;
}
.v-data-table ::v-deep .v-application ::v-deep .primary--text,
.v-application ::v-deep .primary--text {
color: #fff !important;
}
.tableNameStyle {
display: block;
height: 72px;
font-family: "Poppins";
font-style: normal;
font-weight: bold;
font-size: 48px;
line-height: 72px;
color: #3e4c59;
margin-right: 32px;
}
#tableContainer {
overflow: hidden;
margin-bottom: 0px;
}
.v-input__slot {
min-height: 0px;
}
.v-data-table ::v-deep .v-data-table__wrapper {
overflow: unset;
}
.v-application .primary {
background-color: #616e7c !important;
}
.selectStyle {
margin-top: -14px;
}
.theme--dark.v-text-field--solo > .v-input__control > .v-input__slot {
width: 144px;
}
.theme--dark.v-btn.v-btn--has-bg {
text-transform: none;
}
.selectStyle >>> .v-btn:not(.v-btn--round).v-size--default[data-v-015de462] {
text-transform: none;
}
.tableContent ::v-deep thead tr th span {
color: #9aa5b1;
font-family: "Poppins";
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 18px;
}
.tableContent {
font-family: "Poppins";
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 18px;
}
.tableContent
::v-deep
.v-text-field.v-text-field--solo:not(.v-text-field--solo-flat)
> .v-input__control
> .v-input__slot,
.tableContent ::v-deep.v-btn--is-elevated {
box-shadow: none;
}
.tableContent ::v-deep .v-data-footer {
justify-content: flex-end;
align-items: center;
}
#table > .v-data-footer .v-icon {
disabled: false;
}
.tableContent ::v-deep tbody tr td {
height: 62px !important;
}
.v-btn__content {
text-transform: none;
}
</style>
