[Bug Report][3.3.11] VDataTable - Unable to set initial page

[hackel]

Environment

Vuetify Version: 3.3.11
Vue Version: 3.3.4
Browsers: Firefox 117.0
OS: Linux x86_64

Steps to reproduce

Set the page prop to something other than 1. (e.g. from a URL query parameter)

Expected Behavior

Table displays the given page of the table.

Actual Behavior

The page prop is always changed back to 1 on load.

Reproduction Link

https://play.vuetifyjs.com/#...

[websitevirtuoso]

Yes I can confirm. Issue persist and datatable reset it always to 1 on mounting. I think this is easy fix

[nekosaur]

Set the initial value of items-length prop to x * items-per-page where x is the page you want to start on.

I'm not sure if we should call this a bug or not. Maaybe we'd want different behavior in -server variant. I'll keep this open for now.

[HristoAntov]

I can confirm that this is a bug and it's present at least from August this year. The workaround with the items-length prop not only doesn't fix anything, but completely messes up the pagination behavior

It practically makes using the table pagination in sync with url parameters impossible.

[K4GR]

I can offer a temporary and very strange but working solution. If you add to your table
@update:page="() => {}"
then everything starts working correctly

playground

[KozakoPolako]

vuetify 3.4.9 and still not fixed 😒 btw U can bring back options prop to VDataTable. Now with only update:options event is confusing, especially when U migrate from vue 2

[KozakoPolako]

I can offer a temporary and very strange but working solution. If you add to your table @update:page="() => {}" then everything starts working correctly

playground

Except of page change, unfortunately

[Melvinvmegen]

I really appreciate your work but i have to say I really don't understand how this is labeled as maybe. How are we supposed to save the pagination in the navigation if the table keeps resetting to the first page?

[websitevirtuoso]

we need to fix it to implement this ability.
Any help and PR are welcome

[naglafar]

+1 on this.

I cant initialise a table on any page other than 1.

Workaround: Don't render the table until you have loaded the data. Use a skeleton load while you wait.

[klondikemarlen]

+1 on this.

I cant initialise a table on any page other than 1.

Workaround: Don't render the table until you have loaded the data. Use a skeleton load while you wait.

Thanks @naglafar. I can confirm that, "delaying render until after loading completes", works for me.

<template>
  <v-skeleton-loader
    v-if="isLoading"
    type="table"
  />
  <v-data-table-server
    v-else
    v-model:items-per-page="itemsPerPage"
    v-model:page="page"
    :headers="headers"
    :items="items"
    :items-length="totalCount"
    :loading="isLoading"
  />
</template>

Assuming items are loaded like

async function fetch() {
  isLoading.value = true
  try {
     items.value = await fetchSomeItems()
  } finally {
     isLoading.value = false
  }
}

where isLoading resolves after items have fully loaded.

EDIT: see icefoganalytics/internal-data-portal@fe84016 for full example.

[klondikemarlen]

Is this just a bug in

vuetify/packages/vuetify/src/components/VDataTable/composables/paginate.ts

Line 84 in a95aeb2

page.value = 1

?

Should it be something like page.value = page.value || 1?

[klondikemarlen]

I've found a work-around for the flicker introduced by using v-if with a skeleton loader.
You can ignore updates to page while isLoading is true, assuming that isLoading resolves after items have been updated.

<template>
  <v-data-table-server
    v-model:items-per-page="itemsPerPage"
    :page="page"
    :headers="headers"
    :items="items"
    :items-length="totalCount"
    :loading="isLoading"
    @update:page="updatePage"
  />
</template>

<script setup lang="ts">
// ... other code and variable setup

function updatePage(newPage: number) {
  if (isLoading.value) return

  page.value = newPage
}

async function fetch() {
  isLoading.value = true
  try {
    items.value = await fetchSomeItems()
  } finally {
    isLoading.value = false
  }
}
</script>

See icefoganalytics/internal-data-portal@49fbafc