Table in repeater: How can I create a link for the rows?

Ask the community
,
1

Question:
I have a table inside a repeater and want to link each row with a url. How would I do that?

Here’s my code so far, but the rows of the table are not clickable:

$w("#sessions").onItemReady(($item, itemData, index) => {
    let speakersData = itemData.speakers.map(speaker => ({
        pic: speaker.photo,
        name: speaker.nameAndTitle,
        link: speaker["link-team-1-title]
    }));

    $item("#speakersTable").rows = speakersData;
    speakersData.forEach((speaker, rowIndex) => {
        $item(` #speakersTable_${rowIndex + 1}`).link = speaker.link;
    });
});

Thanks so much for your help!

2

This line is missing a closing quote on linke-team-1-title which is causing the rest of the code to not work. There could be other issues but definitely want to fix and debug after this first.

2 Likes
3

table rows in Velo do not have a link property that can be assigned to make them clickable. Instead use an event handler to listen for click events on the table rows and then navigate to the URL when a row is clicked

$w("#sessions").onItemReady(($item, itemData, index) => {
    let speakersData = itemData.speakers.map(speaker => ({
        pic: speaker.photo,
        name: speaker.nameAndTitle,
        link: speaker["link-team-1-title"]
    }));

    $item("#speakersTable").rows = speakersData;
    speakersData.forEach((speaker, rowIndex) => {
        $item(`#speakersTable_${rowIndex + 1}`).onClick(() => {
            wixLocation.to(speaker.link);
        });
    });
});
1 Like
4

Thank you very much! The only (small) challenge I have left is the fact that the mouse pointer doesn’t indicate that the table row is clickable. Instead, it seems to suggest that you can write in the table row. Is there a fix?

5

Unfortunately, Velo by Wix does not currently support hover events for table rows directly.

1 Like
6

Thanks for the info, Dan!