Tabulator does not re-sort data after new data is added

[bryyytl]

In the example provided in the Overview data reactivity section (http://tabulator.info/docs/4.9/reactivity), the table does not maintain it's sort order whenever new data is added.

Video Demonstration https://user-images.githubusercontent.com/78176335/106758321-61fd7b00-65ff-11eb-8a6d-e438a0dafd4d.mp4

Tabulator Info

• Tabulator 4.9.3

Working Example Here is a link to the JSFiddle: http://jsfiddle.net/7nhqu6pg/1/ which is basically a replica of the example provided in the Overview section.

To Reproduce

1. Click on name column to sort table (which in this case will sort the rows based on column names in ascending order)
2. Click on "Add New Row" button to add row to table
3. See that "IM A NEW ROW" is not in it's proper sorted position and that the name column sort icon is still "sorted" color.

Expected behavior User should click on "name" column, click on "add new row" button, and then see "IM A NEW ROW" display between the rows name="Christine Lobowski" and name="Margret Marmajuke".

Desktop:

• OS: Windows 10
• Chrome version 88.0.4324.146

Additional context I am still fairly new to Tabulator and have loved working with it so far. I am hoping that there is a resolution to this issue which will also not involve the scrollbar position being reset to the top after the table has been reinitialized with the proper sorting order.

[vmsh0]

I don't think the behaviour you describe should be built into Tabulator. Please note that you can listen to dataChanged (http://tabulator.info/docs/4.9/callbacks#data) and re-sort the table when a new row is added.

[olifolkerd]

This is the intended functionality, if for example you wanted to add a blank row for users to enter their own data it would be completely wrong for this to be sorted.

As for a solution to your issue, please dont follow @vmsh0 advice as it will interrupt the render pipeline, the correct approach would be to wait for the promise to resolve on the addRow function and then retrigger the sort:

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

Cheers

Oli :)

[vmsh0]

Apologies - I thought that the rendering pipeline was interruptible.

Since I have pretty much the same issue, what is the canonical solution if I can't wait on the promise?

[olifolkerd]

Could you explain more why you cannot use the promise? I don't see a situation in which that would be a problem

[bryyytl]

In the example of using live data (websocket or other implementation), the scrollbar will return to the top on each addition to the table. See https://stackoverflow.com/questions/65945239/tabulator-does-not-re-sort-data-after-adding-updating-row on StackOverflow.

[olifolkerd]

That is only because you are using add data and using it to put a new row at the top of the table.

If you simply want to update the tables contents then you should look at the updateData or replaced at functions

[vmsh0]

Could you explain more why you cannot use the promise? I don't see a situation in which that would be a problem

My use case is probably a bit convoluted, but basically at our company we're integrating Tabulator into a small custom framework (way too small to completely wrap Tabulator's interface), and we would like to manipulate the data in situations such as the consumer of the framework adding rows to the tables.

[olifolkerd]

if it is a general manipulation on any data change then that should be fine, it was more that this issue was specifically linked to the addRow function and the dataChanged event is triggered for a variety of reasons including user edits.

your approach should be fine for your usage dcase