vue3-easy-data-table icon indicating copy to clipboard operation
vue3-easy-data-table copied to clipboard

render HTML element (url) in table

Open nicoKoehler opened this issue 10 months ago • 2 comments

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?

nicoKoehler avatar Apr 05 '24 11:04 nicoKoehler

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.

djplaner avatar Apr 10 '24 21:04 djplaner

@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>

nicoKoehler avatar Apr 12 '24 07:04 nicoKoehler