Tabulator: How can I know when table is "ready"?

Created on 12 Sep 2018  路  7Comments  路  Source: olifolkerd/tabulator

I want to take a certain cell from a row. I need the cell-object(need to set focus on the cell).
My problem is that this row is being rendered by an ajax call, and I do not know how long this takes. This is fine, I can always use the renderComplete function callback.
But even though it is completed rendering, I can still not call getCell on a certain row. This is still undefined. How can I ensure that the rows are ready for "getCell" interaction?

Question - Ask On Stack Overflow

All 7 comments

Hey @Rodbjartson

Cells are only generated for a row when it is first made visible on the screen, ie when you scroll to it. if you never scroll to it, it will never have cells.

If you can let me know what you need to do with the cell i can suggest a suitable approach.

Cheers

Oli :)

I have a modal that loads up with a table.
Once it is loaded I want to FOCUS on a particular cell. So that instead of having to click there myself, I can automatically start typing in the cell that is focused.
The focus should be on a cell(say in a column called price) in the first row, i.e. it will be visible.
How can I approach this?:)

Ahh, in that case i can certainly show you how to do that.

what you want to do is scroll to the row first, then focus on the cell.

if you have the row component already you can call the scrollTo function on it:

row.scrollTo();

or you can use the scrollToRow function on the table passing in the rows index:

$("#example-table").tabulator("scrollToRow", 23);

that will scroll the row into view, you can then trigger the editor on the cell etc...

I hope that helps,

Cheers

Oli :)

Thanks, but this will not solve my fundemental problem.
After calling scrollTo I will have to getCell(), but what if my table is not ready? I mean the modal is being opened and immidiately these functions are called, so this will fail when the table is not ready

Hey @Rodbjartson

I have started moving things over to using promises in version 4.0

When i am finished with that this weekend, the addRow function and the scrollTo function will return promises that will let you know when the table is finished rendering that action.

I hope that helps,

Cheers

Oli :)

Sound very smart, thank you so much!

Hey @Rodbjartson

i have just pushed the promise updates to the 4.0 branch.

When it is released later today you will be able to achieve what you are looking for using promises:

//set table data
table.setData(tabledata)
.then(()=>{
        //pick row to scroll to
    var row = table.getRows()[5000];

        //scroll to row
    row.scrollTo()
    .then(()=>{
               //edit cell
        var cell = row.getCells()[0];
        cell.edit(true);
    })
    .catch((err)=>{
        console.log("scroll err", err)
    });
})
.catch((err)=>{
    console.log("data err", err)
});

I hope that helps,

Cheers

Oli :)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

sphynx79 picture sphynx79  路  3Comments

tomvanlier picture tomvanlier  路  3Comments

c3pos-brother picture c3pos-brother  路  3Comments

alainpannetier picture alainpannetier  路  3Comments

mindcreations picture mindcreations  路  3Comments