The Challenge
The issue I am facing revolves around using a server-side paginated datatable. Specifically, when utilizing the Vuetify data tables component and attempting to perform client-side sorting due to using a public API that I did not develop, the default sorting functionality of the component fails to work.
I'm left questioning whether achieving client-side sorting is even feasible, especially since the documentation only provides an example of pagination and sorting being handled server-side.
Below is the code snippet for my component:
<v-data-table
:headers="datapointHeaders"
:items="datapoints"
:items-per-page="datapointsPerPage"
:server-items-length="datapointsTotalItems"
:loading="loading"
:loading-text="'Loading datapoints ...'"
:options.sync="options"
:footer-props="footerProps"
>
<template v-slot:item.health="{ item }">
<StatusLamp
:color="item.health"
:classes="'ml-2'"
/>
</template>
<template v-slot:item.attributes="{ item }">
<v-btn
outlined
small
color="blue"
@click="showAttributes(item)"
class="mb-1 mr-1 mt-1"
>details</v-btn>
</template>
</v-data-table>
In the JavaScript part:
private options: any = { itemsPerPage: this.datapointsPerPage, page: this.datapointsCurrentPage, }; @Watch('options.page') onPageChange(value: number, oldValue: number): void { this.fetchDatapoints(value, this.options.itemsPerPage); } @Watch('options.itemsPerPage') onPerPageChange(value: number, oldValue: number): void { this.fetchDatapoints(this.page, value); } get loading(): boolean { return get(this.$store.getters.getDatapoints, ['loading'], true); } <!-- Additional code snippets have been slightly altered for uniqueness --> <h2>UPDATE</h2> <p>Upon further investigation, I discovered that by removing the <code>server-items-lengthproperty from thev-data-tablecomponent, client-side sorting functions properly. However, this results in the loss of total item count information, displaying only the current items per page as the maximum limit for item count.