CODEWITHSUNDEEP
tabulator
kale
kale

Reputation: 191

Tabulator: Add and Scroll to New row

I have a Tabulator table with time series data. I do not currently have an index on this data as I don't want it shown to the user.

I also have a button that triggers a table.addRow() to allow for a new record to be manually entered. But due to layout this row isn't visible and you have to scroll to see it. As I don't have an index (and wouldn't anyway since the row is blank), is there a way to scroll to see it.

Bonus points for activating the input editor on the TmStamp column in that new row.

Sample javascript with non-working scrolling:

var table = new Tabulator("#datatable", {
    ajaxURL: getUrlVars(),
    height:"540px",
    layout:"fitColumns",
    placeholder:"No Data Set",
    layout:"fitDataFill",
    layoutColumnsOnNewData:true,
    selectable:false,
    initialSort:[
        {column:"TmStamp", dir:"asc"}],
    columns:[
       {title:"TimeStamp", field:"TmStamp", sorter:"datetime", width:250, hozAlign:"center", editor:dateEditor, frozen:true, formatterParams:{
        inputFormat:"YYYY-MM-DDTHH:mm:ss.sssZ",outputFormat:"YYYY-MM-DD hh:mm A",invalidPlaceholder:"(invalid date)",timezone:"America/Chicago"}},
       {title:"Pressure", field:"pressure", sorter:"number", formatter:"number",editor:"input"}
],
});


document.getElementById("addrow").addEventListener("click", function(){
    table.addRow({}).then((row) => {
    }).then(table.scrollToRow(table.getDataCount(),"top"));
});

Upvotes: 0

Views: 1516

Answers (1)

Oli Folkerd
Oli Folkerd

Reputation: 8398

A Row Component for the newly completed row is passed into the promise returned from the addRow function, you can call the scrollTo function on this to scroll to it:

table.addRow({})
.then((row) => {
    row.scrollTo();
});

Upvotes: 3

Related Questions