Render Data fetched from External Server in Tanstack Table

[nvijayap]

Hi,

I have this working piece of code in my nuxt3 app ...

<template>
  <div>
    <p v-for="user in users" :key="user.id">{{ user.name }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      users: {},
    }
  },
  async mounted() {
    this.users = await $fetch('https://jsonplaceholder.typicode.com/users')
  },
}
</script>

How can I refactor it to show the data in Tanstack Table or AG-Grid Table?

Thanks

[Shyam-Chen]

Check out their documents.
https://tanstack.com/table/v8/docs/adapters/vue-table

[sadeghbarati]

Check this document to demonstrate how to use @tanstack/vue-table

https://www.shadcn-vue.com/docs/components/data-table.html