Integration with Vue and Selectable Cell Range with Clipboard breaks after calling setData

[peteralfredoflynn]

Describe the bug
This may not be a bug, but more of an issue with Vue integration. Thank you so much for the time on this awesome library! If this is not the correct forum, please close out, but I sure could use some help.

I also have the question on stackoverflow

I'm trying to set up a tabulator table with Vue and Selectable Cell Range with Clipboard based on this example from Tabulator and these Vue Integration docs from Tabulator

The problem is, after calling setData, pasting the selectable range no longer works and the console warns No bounds defined on Range

I can confirm this is not an issue with tabulator, but only an issue when integrating with Vue.

Tabulator Info
Version 6.3

Working Example
Here is a working JSFiddle without Vue integration.

Here is the broken JSFiddle that is nearly identical, with Vue integration.

To Reproduce

1. Go the Vue JS Fiddle (2nd link)
2. Copy and Paste a range to see that it does work (optional)
3. Hit the "Set Data" button
4. Try copying and pasting another range, and see it does not work.

Expected behavior
I expect the copying and pasting to still work after calling setData

Desktop

• Browser Chrome

Additional context
It works if I change setData to updateData but I would prefer to use setData for reasons of historical cell data like CellComponent.getInitialValue().

Once again, thank so much for the time spent on this awesome library!

[hash-bash]

Hello, I am facing the same issue. I can't use updateData in my use case. So there is no other way to set the data apart from using setData right? One dirty approach that I am using is to destroy the tabulator instance and recreate a new one (with new data), this fixes the issue (No bounds defined for range) but the table blinks every time whenever there's an update in the data.

EDIT: We get same error after doing clipboard range paste after table.redraw(true) method too.

[ArjanKn]

I'm experiencing kind of the same, setData makescell.getIndex() return -1 always. Using 'tab' key to switch to next cell to edit goes wrong and jumps to the first of the row.
Also using Tabulator@6.3.1 within vue@3.4.18 app.

Workaround: recreate/replace new Tabulator and set data: yourdata instead of setData( yourdata )

[hash-bash]

I'm experiencing kind of the same, setData makescell.getIndex() return -1 always. Using 'tab' key to switch to next cell to edit goes wrong and jumps to the first of the row.
Also using Tabulator@6.3.1 within vue@3.4.18 app.

Workaround: recreate/replace new Tabulator and set data: yourdata instead of setData( yourdata )

Creating new table and destroying previous one works fine, but it blinks the table, and bounds of Cell Range selection, row groups open status, all is reset. Thanks for the comment though.

[ArjanKn]

After some debugging I noticed vuejs created a proxy for the tabulator instance, which lead to problems within tabulator because the reactivity proxy seems transitive within tabulator. (a lot of tabulator objects become proxy-ed too)

Using the vuejs markRaw on the creation of the tabulator instance: this.tabulator = markRaw( new Tablulator.., solved the problems.

Adapted the broken jsfiddle with markRaw which seems to solve the issues there too. fixed broken jsfiddle with vue

[hash-bash]

After some debugging I noticed vuejs created a proxy for the tabulator instance, which lead to problems within tabulator because the reactivity proxy seems transitive within tabulator. (a lot of tabulator objects become proxy-ed too)

Using the vuejs markRaw on the creation of the tabulator instance: this.tabulator = markRaw( new Tablulator.., solved the problems.

Adapted the broken jsfiddle with markRaw which seems to solve the issues there too. fixed broken jsfiddle with vue

Thank you so much, I just checked and it works perfectly with markRaw() from vue. 💯 🥇

[peteralfredoflynn]

@ArjanKn Thanks so much! I haven't had a chance to test it out yet but really appreciate you looking into it. I'll report back if I find anything else. Cheers! 🎉

[peteralfredoflynn]

markRaw works so closing this. Thanks!