How to work correctly cell with components at Vue?

[ivolkoff]

To render the data, I want to pass the value to my component that will render the data representation.
I decided it like this, but I think it's a crutch

<template>
...
<td
  v-for="cell in row.getVisibleCells()"
  :key="cell.id"
>
  <FlexRender
    :render="cell.column.columnDef.cell"
    :props="cell.getContext()"
  />
  <component
    :is="cell.column.columnDef.component"
    v-bind="cell.getContext()"
  />
</td>
...
</template>

<script setup lang="ts">
import { h } from 'vue';
import TestName from './TestName.vue';
...
const table = useVueTable({
  columns: [{
      accessorKey: 'name',
      cell: () => h('div', {}, 'TestName 3'), // I want to use TestName component here
      component: TestName,
    },
...

How to do it correctly through the cell property?

[Kolobamanacas]

@ivolkoff, I came here to ask the exact same question. There are dozens examples with React with JSX, but not a single example of how to render custom cell-component with Vue. Did you happen to find a solution by any chance?

[ivolkoff]

Hi, thanks for the question!

Here I pass a custom component
https://github.com/TanStack/table/pull/4978/files#diff-e7ff5baa2852dbb9a211a6cc3ee0879732f8ce6330ffbc03cb924aa406d8665bR20

And this is the implementation of a custom component
https://github.com/TanStack/table/pull/4978/files#diff-fa5a5d1473f1696303f90f9ed32c0e96375b8643cb27edb73d406900e3bc525b

If this does not help, ask the question again, with a different wording

ps: use

import TdCheckbox from "./TdCheckbox.vue";
...
cell: ({row}) => h(TdCheckbox, {row}),

[Kolobamanacas]

Thanks a lot for fast reply and examples, that is exactly what I was looking for. :) I wasn't aware of this neat Vue feature.