The issue
The problem is already described in the title: When i use a server side paginated datatable (this component: https://vuetifyjs.com/en/components/data-tables) and want it to sort client side (e.g. i use a public API i am not developing) the default sorting does not work on the component.
Is it even possible? The docs give only an example on paginating AND sorting server side.
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>
The JS 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);
}
get attributes(): any {
const res: any = [];
if (this.selectedDatapoint == null) return [];
Object.keys(get(this.selectedDatapoint, ['attributes'], {})).forEach((key: string) => {
if (Object.prototype.hasOwnProperty.call(get(this.selectedDatapoint, ['attributes'], {}), key)) {
res.push({ name: key, value: this.selectedDatapoint.attributes[key] });
}
});
return res;
}
get datapoints(): any {
return this.$store.getters.getDatapoints.datapoints
? get(this.$store.getters.getDatapoints.datapoints, 'items', []).map((item: any) => ({
...item,
last_value: Math.floor(get(item, ['data', '0', '1'], 0) * 100) / 100,
}))
: [];
}
get datapointsCurrentPage(): number {
return get(this.$store.getters.getDatapoints, ['datapoints', 'meta', 'current_page'], 1);
}
get datapointsPerPage(): number {
return get(this.$store.getters.getDatapoints, ['datapoints', 'meta', 'per_page'], 10);
}
get datapointsTotalPages(): number {
return get(this.$store.getters.getDatapoints, ['datapoints', 'meta', 'total_pages'], 0);
}
get datapointsTotalItems(): number {
return get(this.$store.getters.getDatapoints, ['datapoints', 'meta', 'total_items'], 0);
}
EDIT
I just noticed: As soon as i remove the server-items-length property from the v-data-table component, the sorting works client-side. But then , obviously, the total lenght of the items gets lost and it only shows the current per_page as the maximum for the items length.
