'how to move to a newly added row and make the scroll disappear as the data grows in Tabulator

I have a tabulator. When loading, it will be dynamically populated with data from an ajax call. I also have a custom add button add-new-task which adds new row to the table.

How to move the row which has been added now automatically and make any scroll disappear by expanding the table div as the data grows?

I would also be great if the focus shifts to the cell editor on the 'Task Name' column in that newly added row.

var workflowTasksTable = new Tabulator("#inputWorkflowTasks", {
    layout:"fitColumns",
    movableRows:true,
    pagination: false,
    columns:[
        {rowHandle:true, formatter:"handle", headerSort:false, frozen:true, width:30, minWidth:30, download:false},
        {title:"Task ID", field:"task_id", headerSort:false, editor:false, width:50, minWidth:50, resizable:false, visible:true, download:false},
        {title:"Task Name", field:"task_name", headerSort:false, editor:"input"},
        {title:"Task Abbreviation", field:"task_abbr", headerSort:false, editor:"input"},
        {formatter: actionsBtnList, title:"Action", headerSort:false, download:false, resizable:false},
    ],
});

// Action to be taken whenever the user clicks "Add Task"
$('#add-new-task').on('click', async function(e) {
    workflowTasksTable.addRow({})
    .then((row) => {
        workflowTasksTable.scrollToRow(row.getPosition(),"center");
    });
});

Thanks

tabulator


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions