[Vue] Pushing to data ref does not add table row

[lsalling]

Describe the bug

When pushing a new object to the array for the data option, no new row is added to the table. Been spending hours trying to track down this issue.

Using Array.push will not update the table but updating the array like so data.value = [...data.value, { name: "new row"}] will however.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/epic-fog-1zmcd1?file=%2Fsrc%2FApp.vue

Steps to reproduce

1. Click the "Add" button

Expected behavior

While the object has been added to the array (shown by the printed array), no new row is inserted in the table.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Ubuntu 20.10

react-table version

3.2.25

TypeScript version

No response

Additional context

No response

Terms & Code of Conduct

• [x] I agree to follow this project's Code of Conduct
• [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[radusuciu]

I also see this issue. I suspect it's related to the fact that the table options property, as observed in Vue devtools, holds data for the table as an array of reactive items, but the array itself is not reactive.

[anthony-bernardo]

I have the same problem. I want to update data when user type in search field. Tried with [...array], tried push,... But nothing seems to be working

[anthony-bernardo]

any clue ? this is a major bug for me, without this feature, I cannot filter the table list, I cannot use tanstack table anymore

[WickyNilliams]

It is surprising useVueTable does not accept a ref (or type MaybeRef) as an argument. IMO this is a baseline requirement for vue integration. It is odd (and as far as i could see undocumented) that you have to define a getter as per the example above:

const table = useVueTable({
  // why a getter?
  get data() {
    return data.value;
  },
  // ...
});

this caused us confusion when integrating with tanstack query. we would delete an item, clear the relevant cache, and the table would not update.

[radusuciu]

Looks like the Solid adapter may have similar issues: https://github.com/TanStack/table/issues/4702

[StereoApp]

I had the same issue

[osm-dev]

I ran into similar issue and found this in the documentation:

When the data option changes reference (compared via Object.is), the table will reprocess the data. Any other data processing that relies on the core data model (such as grouping, sorting, filtering, etc) will also be reprocessed.

When you push something into an array it doesn't change it's reference, therefore it doesn't trigger tanStack's reprocessing. IMHO the vue adapter should handle this if we use method reactive, but I also tried that and had no success. So the way I found to force it is making sure to change the array reference used by the table instance and triggering the re-render manually after the new value is pushed:

Here is a fork of you sample with the adjustment: https://codesandbox.io/p/sandbox/ecstatic-mountain-8zfmdx?file=%2Fsrc%2FApp.vue

const add = () => {
  defaultData.push({
    firstName: "test",
    lastName: "testin",
    age: 41,
    visits: 10,
    status: "Single",
    progress: 15,
  });
  rerender();
};

const rerender = () => {
  data.value = [...defaultData];
};

[9mm]

Is there a way to do this without changing the data.value reference? This causes the entire table to disappear and all the expanded state is lost... I'm so confused why it's done this way.

I literally just want to update a single row of the table...

[OlaAlsaker]

Reactivity for data in the Vue-adapter has been introduced in v8.20.0 (#5687)

Documentation: https://tanstack.com/table/latest/docs/framework/vue/guide/table-state#using-reactive-data