vuejs3tanstack

Render components in cell using tanstack tables with Vue3

Using @tanstack/vue-table, I am trying to return a component to cell(like react JSX), trying to achieve something like

columnHelper.accessor((row) => row.data, {
id: 'Any Id',
cell: (data) => <MyVue3Component/>
})

I have tried the FlexRender(Component, props) but it doesn't work

Solution

  • Figured you can actually achieve this with:

     import { h} from 'vue'
    
 columnHelper.accessor((row) => row.data, {
    id: 'Status',
    cell: (data) => h(MyViewComponent)
 })

    This will render your component in the table cell in vue-3