Reactive props for useVueTable

[d-lasagno]

I was experimenting with vue-table, but I can't understand how to pass reactive data as props for useVueTable. I wrapped the table options inside a reactive object, but whenever the options update, the table remains the same. Is there a way to update the table?

Here is a snippet of what I used:

const tableOptions = reactive<TableOptions<Document>>({
  data: props.data, // Updating this doesn't work
  getCoreRowModel: getCoreRowModel(),
  columns, // Updating this doesn't work too: tableOptions.columns.push(columns[0])
});

const table = useVueTable(tableOptions);

[vojvodics]

@d-lasagno Sorry, this is a year late, but I just recently started using vue-table. You can get data to be reactive by making it a js-getter. I didn't try it with columns, but I don't see why it wouldn't work

const tableOptions = reactive<TableOptions<Document>>({
  get data() { 
    return props.data;
  },
  getCoreRowModel: getCoreRowModel(),
  get columns() {
    return props.columns
  }, 
});

const table = useVueTable(tableOptions);

[andreiculda]

Thank you. This works indeed.

[rlsystems]

I love it when someone comes along and provides a clear, understandable solution

[vojvodics]

@rlsystems thanks, but I can't take the credit for it - I took it from the examples folder: https://github.com/TanStack/table/blob/main/examples/vue/basic/src/App.vue#L100-L106

I opened up a new discussion to allow more vue-like API when using vue-table #5102. The current API confuses me - I guess it makes sense in the react ecosystem, but we might need something slightly different for vue

[shax-xxx]

Hello.
Maybe someone can share a working example?

All my attempts to get reactivity from the table have failed.
I update defaultData in onBeforeMount after 10 seconds, but the table does not update automatically or manually with the Rerender button.

My last try:
https://codesandbox.io/p/devbox/lucid-heisenberg-f6w7xz?file=%2Fsrc%2FApp.vue%3A56%2C22

[TonyG89]

As mentioned above, use a getter.

const table = useVueTable({
  get data() {
    return data.value
  },
  columns,
  getCoreRowModel: getCoreRowModel(),
})

[vojvodics]

@shax-xxx Your example didn't work because defaultData has a reference to the same object/array.

I changed your example: https://codesandbox.io/p/devbox/lucid-heisenberg-forked-mv8t6f?file=%2Fsrc%2FApp.vue%3A71%2C1
You could also change the defaultData to be a let, and change the reference to defaultData instead of calling .push