How do I display a PrimeVue DataTable starting at a specified row?

Question

Assume I have a Datatable with 1000 rows, and it displays nicely with scrollbars. I would like to programmatically scroll to a specified row so that this specified row appears as the first row of my table, giving me the ability to scroll upwards or downwards from this row. Note that the entire table is loaded into memory.

Is there any way to accomplish this in Vue 3?

Marcello B. · Accepted Answer · 2021-08-02 15:32:54Z

0

First, in your template add an ID to each row.

<tr v-for="(i, count) in arr" :key="i.id" :id="`id${count}`">
    <!-- YOUR ROW'S <td> TAGS -->
</tr>

Then in your javascript, you need to figure out where to scroll. Assuming you want to just scroll vertically you can find where to scroll based on the ID.

ScrollToID(recordNum){
    const ScrollToRow = window.scrollY + document.querySelector(`id${recordNum}`).getBoundingClientRect().top
    window.scrollTo({
      top: ScrollToRow,
      left: 0,
      behavior: 'smooth'
    });
}

answered Aug 2, 2021 at 15:32

Marcello B.

4,47011 gold badges48 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I display a PrimeVue DataTable starting at a specified row?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related