Vue: custom formatting of display columns

[JuliusSettili]

Hello everyone,
I just started working with @tanstack/vue-table and tried to implement a simple display column like so:

columnHelper.display({
    id: 'actions',
    cell: (cellProps) => `<span>${cellProps.row.getValue('id')}</span>`,
  })

But unfortunately the html is not rendered, but is displayed as a plain string:

<td>
    "<span>2</span>"
</td>

How can I get the html to render, without using tsx syntax like in all the examples in the docs?

[v1adko]

Same question. How do you create dynamic cells? Documentation and examples for Vue is quite lacking, and it seems like a fundamental feature.

[JuliusSettili]

In the meantime I found a solution:

cell: (cellProps) => cellProps.getValue().map((value) => h(
      'span',
      value,
    )),

[Kolobamanacas]

In the meantime I found a solution:

cell: (cellProps) => cellProps.getValue().map((value) => h(
      'span',
      value,
    )),

Unfortunately, it's far from perfect solution as I guess we all want to have possibility to pass custom Vue components with their styles, classes and props. Did you find a way to implement this by any chance?

[seanockert]

You can pass any HTML params to the h render function like so:

{
  header: 'Email',
  accessorKey: 'email',
  cell: (cellProps: any) => h('a', { href: `mailto:${cellProps.getValue()}`, class: 'some-class' }, cellProps.getValue())
}

this wraps the email address in each row cell:

<td>
  <a href="mailto:[email protected]" class="some-class">[email protected]</a>
</td>

You can use Vue components in the same way eg. if you want to wrap a status in a component called Tag:

import { h } from 'vue'
import Tag from 'Tag.vue'

...

const columns = [
  {
    header: 'Status',
    accessorKey: 'status',
    cell: (cellProps: any) => h(Tag, { id: 1, status: 'success' }, cellProps.getValue())
  },
  ...
]

I've been using Tanstack Table on a few Vue3 projects and the above works pretty well. There's no need for the extra map function as mentioned in the comment above

[Kolobamanacas]

Thanks a lot for the examples! I didn't know about the h function before. )

[bloor]

Yea but using h renderer is obnoxious ... You mean I have to create a component each time I want a customized cell ? eh??!
Isn't there any way to directly use JSX or Template as string what am I missing ?