How to scroll to a specific line on vue good table

[adiyehezkeli]

Issue Type (delete the irrelevant ones)

• [x] Question

Specs

What version are you using? 2.21.11

What browser? chrome

Hi,

I'm using vue-good-table in my project, and sometimes in my app the user requests to highlight a specific row. sometimes the table is big and this row is not in the current view, so i want to automatically scroll to that specific line.

I don't use pagination, I just have a table with, let's say 100 rows.

So my first question is - is there a way to automatically scroll to a specific row?

And if not - is there a way to tell current row order (after filter and sort)

Thank you very much!!

Adi

[yashnarkhedkar]

You can scroll to a specific line in a Vue Good Table using the "vue-scrollto" library. Here's how you can achieve this:

First, import the scroller from "vue-scrollto":

import { scroller } from "vue-scrollto/src/scrollTo";
const scrollTo = scroller();

Define the scroll options. You can customize these options based on your requirements:

let tableScrollToOptions = {
  container: ".line-table .vgt-responsive", // Specify the container to scroll within
  easing: "ease-in", // Easing function for the scroll animation
  offset: -60, // Offset to fine-tune the scroll position
  force: true, // Force the scroll to occur even if it's currently in progress
  cancelable: true, // Allow canceling the scroll animation
  x: true, // Enable horizontal scrolling
  y: true, // Enable vertical scrolling
};

Determine the element you want to scroll to. In this example, we're using a CSS selector to target the specific row you want to scroll to:

let scrollToElement = `.${this.parameters.tableName} tr:nth-child(${scrollToRowIndex})`;

Finally, use the scrollTo function to perform the scroll. You can specify the element to scroll to, the duration of the animation (800 milliseconds in this example), and the scroll options you defined earlier:

scrollTo(scrollToElement, 800, tableScrollToOptions);

By following these steps and using the "vue-scrollto" library, you can scroll to a specific line in your Vue Good Table with ease.

[SciManJD]

Hi! I'm trying to do this, but I can't make it to work. probably I don't set the container correct of I don't set the element to scroll correct. So what I have to set to the container? I have the following code in the template (it is simplified:

<vue-good-table id="par-grp-table" class="par-grp-table">
</vue-good-table>

The settings:

let tableScrollToOptions = {
    container: ".par-grp-table .vgt-compact", // Specify the container to scroll within
    easing: "ease-in", // Easing function for the scroll animation
    offset: 0, // Offset to fine-tune the scroll position
    force: true, // Force the scroll to occur even if it's currently in progress
    cancelable: true, // Allow canceling the scroll animation
    x: true, // Enable horizontal scrolling
    y: true, // Enable vertical scrolling
};

Then the following code:

let scrollToElement = $('#par-grp-table').find('tr').last();
scrollTo(scrollToElement, 800, tableScrollToOptions);

It seems to be correct, but the table is not scrolled. What I'm doing wrong?

[yashnarkhedkar]

I think scrollToElement is getting undefined you've to check let scrollToElement = $('#par-grp-table').find('tr').last();. Please check this line and scrollToElement element is getting or not in browser console.

If any another things please reply me. Thank you.

[SciManJD]

I checked this. The variable is not undefined. However, I solved the problem without the this component and it works fine. I used element.scrollTop . Thanks for your effort to help me.