CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
Connie DeCinko
Connie DeCinko

Reputation: 902

Scroll to top when going to next page of results in v-data-table

When using the Vuetify v-data-table element set to allow scrolling, is there a way or setting that would cause the results to scroll back to the top when clicking to the next page of results? By default when you click to show the next 10 records after having scrolled down you have to manually scroll back up to start looking at record 11, etc.

<v-data-table
    :headers="headers"
    fixed-header
    :height="height"
    :items="invoices"
    item-key="id"
    :search="search"
    class="elevation-1"
    :loading="loading"
    loading-text="Loading...please wait..."
    no-data-text="No invoices needing approval."
    no-results-text="No invoices found for your search."
>

Upvotes: 1

Views: 4574

Answers (2)

Ken
Ken

Reputation: 663

The following prop worked fine for me:

@update:page="$vuetify.goTo(0)"

Upvotes: 1

NaN
NaN

Reputation: 1985

If you use vuetify 2.0 you can try something like but this event also triggers when you change count per page:

<v-data-table
  ref="dataTable"
  @update:page="$vuetify.goTo($refs.dataTable)"
  ...

Upvotes: 1

Related Questions