Vuetify Data Table jump to page with selected item

Question

Using Vuetify Data Tables, I'm trying to figure out if there's a way to determine what page the current selected item is on, then jump to that page. My use case for this is, I'm pulling data out of the route to determine which item was selected in a Data Table so when a user follows that URL or refreshes the page that same item is automatically selected for them. This is working just fine, however, I can't figure out how to get the Data Table to display the correct page of the selection.

For example, user visits mysite.com/11 The Data Table shows 10 items per page. When the user enters the site, item #11 is currently auto-selected, but it is on the 2nd page of items. How can I get this to show items 11-20 on page load?

I'm interested in your use case too. Here is a [pen](https://codepen.io/HarrisWebApps/pen/EMWOEO) that may get you started in the right direction. It shows a way to control page number on load. I can see need to filter the array data and divide that by rows per page to get a page number. Looking forward to seeing any other proposed solutions/answers. — ExcessJudgment, Mar 07 '19 at 18:18
@varit05, I did not try , and I'm not sure how that would help here? — drew kroft, Mar 10 '19 at 03:54

score 4 · Accepted Answer · answered Mar 10 '19 at 03:51

I ended up using a solution similar to what @ExcessJudgement posted. Thank you for putting that code pen together, BTW! I created this function:

jumpToSelection: function(){
    this.$nextTick(() => {
      let selected = this.selected[0];
      let page = Math.ceil((this.products.indexOf(selected) + 1) / this.pagination.rowsPerPage);
      this.pagination.sortBy = "id";
      this.$nextTick(() => {
        this.pagination.page = page;
      });
    });
  }

I'm not sure why I needed to put this into a $nextTick(), but it would not work otherwise. If anybody has any insight into this, it would be useful to know why this is the case.

The second $nextTick() was needed because updating the sortBy, then the page was causing the page to not update, and since I'm finding the page based on the ID, I need to make sure it's sorted properly before jumping pages. A bit convoluted, but it's working.

Vuetify Data Table jump to page with selected item

1 Answers1