search

HC200ok / vue3-easy-data-table

A customizable and easy-to-use data table component made with Vue.js 3.x
MIT License
536 stars 105 forks source link

render HTML element (url) in table #359

Open nicoKoehler opened 6 months ago

nicoKoehler commented 6 months ago

Hi all

Love the Easy Table, but one core feature I have not yet figured out. Is there a way to render a url in a column's cells dynamically based on the items provided? To stick with the basketball example, rendering a URL for each player that links to the ESPN page, like https://www.espn.com/nba/player/_/id/{PLAYER_ID}.

Is this possible? If so, how?

djplaner commented 5 months ago

G'day,

I'm still a newbie with Easy Table. Not sure how much help this will be.

The item slot example seems to demonstrate one approach to achieve this. Adding in a link for the team, rather than the player.

David.

nicoKoehler commented 5 months ago

@djplaner Thanks! Your link links to this very issue :) I figured it out soon after, using a template for the column (similar to how button operation is deployed). Something like this:

<template #item-link="item">
    <a target="_blank" :href="'www.base-url.com/'+item.linkpath">{{ item.linktext }}</a>
</template>