T
TanStack•3y ago
correct-apricot

How to update table's data in vue-table?

Hi, recently I started a new project and we're using vue for it. I wanted to use vue-table since I've used react-table in the past... but I can't figure out how to update the data inside the table. Here's a snippet: 
const table = useVueTable({
  data: props.data,
  getCoreRowModel: getCoreRowModel(),
  columns,
});
const table = useVueTable({
  data: props.data,
  getCoreRowModel: getCoreRowModel(),
  columns,
});
As you can see I pass the data directly from the props. But when props.data changes the table doesn't update. I guess that's because the code is executed just once when the component is created, but doesn't useVueTable watch the changes on its options? I admit that I'm fairly new to Vue 3 so my understanding of the composition api may be wrong: in that case could anyone point out what's wrong?
4 Replies
foreign-sapphire
foreign-sapphire•3y ago
This you figure it out? I got the same issues with you! I also very new to Vue3, but I do research a lot on composition API and already try to use a lot of composable but still dusked (ref, useState, computed) nothing work.
sunny-green
sunny-green•3y ago
I just wanted to share this here, hope it’s useful. https://github.com/bytebase/bytebase/blob/main/frontend/src/views/sql-editor/TablePanel/DataTable.vue
GitHub
bytebase/DataTable.vue at main · bytebase/bytebase
Database CI/CD for DevOps teams. https://www.bytebase.com - bytebase/DataTable.vue at main · bytebase/bytebase
foreign-sapphire
foreign-sapphire•3y ago
Thank for the help, but I do have a problem with SSR pagination on CSR everything fine Oh I just managed it to work thank you!
extended-salmon
extended-salmon•3y ago
@tfh fyi the link above is now broken i was able to find the component here for anyone else landing on this thread: https://github.com/bytebase/bytebase/blob/886ea3d04898b565ca44193bf07785b6a9a73232/frontend/src/views/sql-editor/EditorCommon/DataTable.vue nothing in there seemed to help me though... but digging around a little more, i found that you define data as a getter in the useVueTable options: https://github.com/bytebase/bytebase/blob/886ea3d04898b565ca44193bf07785b6a9a73232/frontend/src/views/sql-editor/EditorCommon/TableView.vue#L208-L210 it was this which fixed the issue for me 🎉 
const table = useVueTable({
  get data() {
    return data.value;
  },
  // ...
});
const table = useVueTable({
  get data() {
    return data.value;
  },
  // ...
});

Did you find this page helpful?