Link in a grid not working

[R-fred]

I tried using the code below to insert a link in an item in a Grid. The link does not show. I am guessing it only returns the link object rather than the link itself.

Adding the link separately worked as expected.

import pglet
from pglet import Grid, Columns, Column, Items, Item, SearchBox, Stack, Link, Html

class VideoItem2:
    def __init__(self, title: str, publishedon: str, duration: str, link: str):
        self.title = title
        self.publishedon = publishedon
        self.duration = duration
        self.link = Link(title=link, value=link, url=link)

class VideoItem3:
    def __init__(self, title: str, publishedon: str, duration: str, link: str):
        self.title = title
        self.publishedon = publishedon
        self.duration = duration
        self.link = Html(value=f"<a href={link}>{link}</a>")

class VideoItem4:
    def __init__(self, title: str, publishedon: str, duration: str, link: str):
        self.title = title
        self.publishedon = publishedon
        self.duration = duration
        self.link = f"<a href={link}>{link}</a>"

def main(page):
    page.title = "Youtube downloader"
    page.update()

    page.add(Stack(width="80%", controls=[SearchBox(width=600, value="search")]))
    page.add(Stack(width="80%", controls=[Grid(preserve_selection=True,
        columns=[
            Column(resizable=True, name="title", field_name="title", sortable=True),
            Column(resizable=True, name="published on", field_name="publishedon"),
            Column(resizable=True, name="duration", field_name="duration"),
            Column(min_width=250,resizable=True, name="link", field_name="link")
            ],
            items=[
                VideoItem2(title="Google", duration="12:00", publishedon="20 years ago", link="http://www.google.com"),
                VideoItem3(title="Apple", duration="11:00", publishedon="40 years ago", link="http://www.apple.com"),
                VideoItem4(title="BBC", duration="13:00", publishedon="70 years ago", link="http://www.bbc.co.uk")
            ])]))

    v1 = VideoItem2(title="Google", duration="12:00", publishedon="20 years ago", link="http://www.google.com")
    page.add(v1.link) # works great - link in Grid does not work.

pglet.app(name="Youtube Downloader", local=True, target=main)

HTML output:

<div role="gridcell" aria-readonly="true" aria-colindex="4" class="ms-DetailsRow-cell cell-105 cellUnpadded-103" data-automationid="DetailsRowCell" data-automation-key="_9" style="width: 270px;">&lt;pglet.link.Link object at 0x104f4a490&gt;</div>

<div role="gridcell" aria-readonly="true" aria-colindex="4" class="ms-DetailsRow-cell cell-105 cellUnpadded-103" data-automationid="DetailsRowCell" data-automation-key="_9" style="width: 270px;">&lt;pglet.html.Html object at 0x104f4a6d0&gt;</div>

<div role="gridcell" aria-readonly="true" aria-colindex="4" class="ms-DetailsRow-cell cell-105 cellUnpadded-103" data-automationid="DetailsRowCell" data-automationkey="_9"style="width:270px;">&lt;ahref=http://www.bbc.co.uk&gt;http://www.bbc.co.uk&lt;/a&gt;</div>

[FeodorFitsner]

You can use "template" column. This is a working example:

import pglet
from pglet import Grid, Columns, Column, Items, Item, SearchBox, Stack, Link, Html

class VideoItem2:
    def __init__(self, title: str, publishedon: str, duration: str, link: str):
        self.title = title
        self.publishedon = publishedon
        self.duration = duration
        self.link = link

class VideoItem3:
    def __init__(self, title: str, publishedon: str, duration: str, link: str):
        self.title = title
        self.publishedon = publishedon
        self.duration = duration
        self.link = link

class VideoItem4:
    def __init__(self, title: str, publishedon: str, duration: str, link: str):
        self.title = title
        self.publishedon = publishedon
        self.duration = duration
        self.link = link

def main(page):
    page.title = "Youtube downloader"
    page.update()

    page.add(Stack(width="80%", controls=[SearchBox(width=600, value="search")]))
    page.add(Stack(width="80%", controls=[Grid(preserve_selection=True,
        columns=[
            Column(resizable=True, name="title", field_name="title", sortable=True),
            Column(resizable=True, name="published on", field_name="publishedon"),
            Column(resizable=True, name="duration", field_name="duration"),
            Column(min_width=250, resizable=True, name="link", template_controls=[
                Link(value='{link}', url='{link}', size='small')
                ])
            ],
            items=[
                VideoItem2(title="Google", duration="12:00", publishedon="20 years ago", link="http://www.google.com"),
                VideoItem3(title="Apple", duration="11:00", publishedon="40 years ago", link="http://www.apple.com"),
                VideoItem4(title="BBC", duration="13:00", publishedon="70 years ago", link="http://www.bbc.co.uk")
            ])
        ])
    )

pglet.app(name="Youtube Downloader", local=False, target=main)

[R-fred]

@FeodorFitsner, I tested it, works great thanks!

[FeodorFitsner]

Cool, thanks for the update!