Create a Table that opens pop up

Ask the community
, , , ,
1

Hello,
I want to create a table that opens a pop up if you click on a row. So for each row it should open a pop up on click (not a new window).

I am working with Wix Studio.

I am trying to achieve a List that the user can sort by column and that opens a pop up when clicked on a row.

Thank you for any ideas on how to achieve that!

1 Like
2

https://dev.wix.com/docs/velo/api-reference/wix-window-frontend/lightbox/introduction

3

import wixWindowFrontend from ‘wix-window-frontend’;
$w(‘#table1’).onRowSelect((e) => {
console.log(e);
wixWindowFrontend.openLightbox(“LightboxName”, e);
})

4

Nice thank you! But how can I make a different pop up for each row?

5

Dynamic Lightbox

Depends, if they all should look similar (layout) except for their data (text, images, etc.) - Use the same approach as when creating a dynamic page, and simply link the data using the lightbox context

For example:
page.js

import wixWindow from 'wix-window-frontend'

$w('#repeater').onItemReady(($item, itemData) => {
    $item('#openLightbox').onClick(() => wixWindow.openLightbox('lightboxName', itemData))
    // itemData is passed as the lightbox context
})

lightboxName.js

import wixWindow from 'wix-window-frontend'

context = wixWindow.lightbox.context

Different Lightboxes

You can hold a CMS field specifying which lightbox should open

import wixWindow from 'wix-window-frontend'

$w('#repeater').onItemReady(($item, itemData) => {
    $item('#openLightbox').onClick(() => 
        wixWindow.openLightbox(itemData.lightbox))
}
})
6

try like this
$w(‘#table1’).onRowSelect((e) => {
console.log(e.rowData.columnName);
if (e.rowData.columnName == “value”)
wixWindowFrontend.openLightbox(“LightboxName”, e);
else if (e.rowData.columnName == “value2”)
wixWindowFrontend.openLightbox(“LightboxName”, e);
})