Tabulator scrollToRow not working and no errors shown

Question

When the page loads, no scrolling is done. There are no errors too.

Can anyone tell me what I'm doing wrong?

Is there another way to go to the desired row? I don't need the scrolling animation, just to get to the row.

$: if (tableElement && data && columns) {
    table = new Tabulator(tableElement, {
        height: "100%",
        layout: "fitData",
        data: data,
        cellVertAlign: "middle",
        resizableColumns: "header",
        groupStartOpen: true,
        groupToggleElement: "header",
        columnHeaderSortMulti: true,
        columnCalcs: "both",
        tooltipsHeader: true,
        virtualDomBuffer: 50000, // I read in another post to increase this, but it does nothing
        groupHeader: (value, count, data, group) => {
            return `
                ${value}
                <span style="color:#d00; margin-left:10px;">
                    ${count}
                </span>
            `;
        },
        columns: columns,
    });
}

$: if (table && $scrollToRecordId) {
    console.log("SCROLLING");

    table
        .scrollToRow($scrollToRecordId, "top", true)
        .then(() => {
            console.log("done");
        })
        .catch((error) => {
            console.log(error);
        });
}

Answer 1

The solution to this is using tick.

import { tick } from "svelte";

$: if (table && $scrollToRecordId) {
    scrollTable();
}

async function scrollTable() {
    await tick();
    table.scrollToRow($scrollToRecordId, "top", true);
}

If you are getting a no matching row error, use this:

table.on("tableBuilt", () => {
    if ($scrollToSku) {
        table.scrollToRow($scrollToSku, "top", true);
        $scrollToSku = null;
    }
});