T
TanStack3y ago
genetic-orange

Column Display Accessor for Vue 3 (TS and Options API)

Hello, I am trying to use Tan Stack tables with Vue 3 with Typescript and Options API. I can not seem to figure out the display column accessor for an actions column where I need to add a button with a pencil icon, that can redirect page to an edit page for a given row. I can not insert html elements as `cell: <button>Click here</button>. while defining the columns.
3 Replies
ambitious-aqua
ambitious-aqua3y ago
cell: props => h("button", null, "Click here")
cell: props => h("button", null, "Click here")
shoudl do it. see here for more info https://vuejs.org/guide/extras/render-function.html
genetic-orange
genetic-orangeOP3y ago
Would it support custom components too?
ambitious-aqua
ambitious-aqua3y ago
Yeah sure, just like
cell: props => h(SomeVueComponent)
cell: props => h(SomeVueComponent)
If it starts getting complex you can also use jsx which makes things more readable (at the cost of introducing yet another syntax, but you have that with the h() function, anyway). It's also described in the link above Then you can do:
cell: props => <button>Click here</button>

// or
cell: props => <SomeVueComponent>Click here</SomeVueComponent>
cell: props => <button>Click here</button>

// or
cell: props => <SomeVueComponent>Click here</SomeVueComponent>
for anyone finding this in future: you need to add lang="jsx" or lang="tsx" to your setup script

Did you find this page helpful?