Tabulator: scrollToRow not working

[answerquest]

Hi! I have a table where the row with index column value 'MACE' is at the end, out of view. The table div's height is fixed at 350px by css:

#stops-table { height: 350px;}

If I run this code on pressing a button on the page (table is fully visible),

$("#stops-table").tabulator("scrollToRow", 'MACE');
$("#stops-table").tabulator("selectRow", 'MACE');

Then there is no scrolling happening. The selectRow line works.. if I manually scroll down to it, the row has been selected. But it does not scroll.
Using Chromium browser Version 64.0.3282.140 (Official Build) Built on Ubuntu , running on Ubuntu 16.04 (32-bit)

[olifolkerd]

Hey @answerquest

Which version of tabulator are you running, and do you get any warning on your console log when you run the scrollToRow function?

Cheers

Oli :)

[answerquest]

Hi Oli,
It's the latest, v3.4.3 . I re-downloaded it from the site just to be sure and re-tested. Still same issue : Selecting works, scrolling doesn't. No errors reported in console. And hey it does one more thing: If the table is already scrolled down, it scrolls back to top on running the scrollToRow function! So its doing a scroll-to-top. If I only run the select command then none of this happens.

You can test it for yourself: see the live page, and here's the code at the bottom of: stops.js

Might there be something in the declaration? (It's there in the same .js file, around line 16) Would defining the rowClick: be messing with it? Or freezing a column? Here's the declaration code:

$("#stops-table").tabulator({
    selectable:1,
    movableRows: true,
    index: "stop_id", 
    history:true,
    addRowPos: "top",
    columns:[
        {rowHandle:true, formatter:"handle", headerSort:false, frozen:true, width:30, minWidth:30},
        {title:"stop_id", field:"stop_id", editor:"input", frozen:true, headerFilter:"input" },
        {title:"stop_name", field:"stop_name", editor:"input", headerFilter:"input" },
        {title:"stop_lat", field:"stop_lat" },
        ...
    ],
    rowClick:function(e, row){ 
        console.log("Row " + row.getData().stop_id + " Clicked, index: " + row.getIndex() );
        mapPop(row.getData().stop_id);
    },
});

[seb303]

I'm also seeing this bug with v3.4.3 (on Firefox 58.0.2 / Windows).

What I found is that if the row to scroll to is near the bottom of the table, so that it would have to scroll right to the bottom, then it jumps right to the top. If the row is further up, so it's possible to position it at the top of the viewport when scrolled, then it jumps to this position ok.

I'm seeing the same behaviour for scrollToRow and the keyboard shortcut scrollToEnd.

I'm seeing no message in the console.

[seb303]

Further to this, I noticed another odd behaviour, possibly unrelated. If I place the exact same scrollToRow command inside a dataSorted callback then I get an error in the console:
Scroll Error - No matching row found: 117 tabulator.min.js:4:1006
Scroll Error - Row not visible tabulator.min.js:2:23664

Here's the complete code:

$("#messageindex").tabulator({
            columns: [
                {title:"Date",      field:"ts",     width: 120, formatter:format_ts },
                {title:"Subject",   field:"subject" },
                {title:"From",      field:"from",       width: 200 }
            ],
            initialSort:[
                {column:"ts", dir:"asc"}
            ],
            layout: "fitColumns",
            resizableRows: false,
            placeholder: "No messages",
            index: 'messageid',
            dataSorted: function(sorters, rows) {
                $("#messageindex").tabulator("scrollToRow", latestmessageid);
            },
        }).tabulator("setData", messageindex).tabulator("scrollToRow", latestmessageid);

The row id latestmessageid does definitely exist - it's the last row of the data.

[seb303]

After some more playing around, I've found that the bug only occurs when the table has relatively few rows compared to the viewport (e.g. a 6 row table in a 3 row height viewport). When there is more data, scrollToRow works as expected (except when called on dataSorted - this still gives an error).

[olifolkerd]

Hi @seb303

Thanks for your detailed observations, i will have a look into it today

The issue you are having with the dataSorted callback is expected, the sorting happens before the table is drawn, so there is no way to scroll to the row the list of visible rows does not exist yet.

Cheers

Oli

[seb303]

Hi @olifolkerd
Thanks for you reply. Is there an appropriate callback where I can scroll the table after sorting and drawing?
Seb

[olifolkerd]

Hey @seb303 and @answerquest

I have just pushed a fix for this to the master branch and will include it in the patch release this weekend.

Cheers

Oli :)

[answerquest]

confirming that _scrollToRow_ is working properly now in my script since v3.4.4 . Good job Oli! :+1:

[seb303]

Yep, good for me too :)