How to scrollTo a row in a sorted table.

[olaf]

Hi,

I have got a table which can be sorted. I want to know how I can find the row index of a row after sorting so I can pass it to the scrollTo method.
I have made a codepen sample to show the problem.
Just run the sample and press the scroll to button.
https://codepen.io/olafxso/pen/eYNydPR

After that you will see it scrolls to row ‘15 jelly bean’. (it is know the last visible row in the table)

Then sort the column Calories by clicking on the column header.
The hit the button again. You will see it scrolls to row ‘51 Ice cream sandwhich’

Well I would like to know how to scrollto row 15 after sorting a table column.

Thanks for any idea’s!

[cmanique]

@olaf

This is my first answer here, so I hope someone has better ideas

From what I could understand the scrollTo() is the index on the current state of the table, which apparently you get from computedRows, so you do need to scroll to the index of your row in the computedRows array.

I tried to do something with filter, but I’m not proficient enough with javascript and failed to return the index of the filtered object.
Apparently you cannot break forEach, so the following code worked for me:

    scrollTo: function () {
      for (let i = 0; i < this.$refs.table.computedRows.length; i++) {
        if (this.$refs.table.computedRows[i].index === 15) {
          this.$refs.table.scrollTo(i)
          break
        }
      }
    }

For the obvious reasons I strongly discourage the usage of this in large data sets and I hope there’s a cleaner solution!

[olaf]

Hi @cmanique ,

Thanks for pointing me to the computedRows property. I changed it by using the array map prototype.
This works well after filtering and sorting .

  scrollTo: function () {
      const index = this.$refs.table.computedRows.map(e => e.index).indexOf(15)
      this.$refs.table.scrollTo(index)
    }

I am also pretty new with vue, quasar and javascript. So if any body has got some improvements, I would like to know it.

[metalsadman]

@olaf the for loop should perf better, but wouldn’t matter much if the data is not too big.