Preview / live differences after 'onCellSelect'

I am using the ‘onCellSelect’ function with collection data being shown in a table. When I click on a cell I want to retrieve another field in the row and display it in a lightbox. When I run in preview mode, and click in my cell of choice, console.log shows that I am retrieving the correct ‘cellRowIndex’. However all the other fields that I retrieve are from a totally different row! When I run in live mode, everything works fine and the correct data is retrieved and displayed in the lightbox!!

The live version works correctly in Edge, Chrome and Opera. The preview version doesn’t.

My sandbox and live collections are definitely the same and in sync.

Any ideas anyone? Please?

Please share your code in a code block so that everyone can see what you are doing.

OK thanks.

I am clicking in the column headed “Comments”. However this column actually displays the values from a field called ‘commentsClick’. This column will either be empty or contain the word “CLICK”. The reason for this is that the actual comments are too long to display in the table and are consequently in another field in the collection called ‘comments’ which is not displayed in the table. So the idea is that the user sees the word “CLICK”, clicks on that and the contents of the ‘comments’ field will be displayed in a lightbox.

Here’s my code:

export function table1_cellSelect(event) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center |
// Add your code for this event here:
let cellRowIndex = event.cellRowIndex;
let rows = $w( “#table1” ).rows;
let cellColumnId = event.cellColumnId;
let commentsText = rows[cellRowIndex].comments;
if (cellColumnId == “Comments” && commentsText !== undefined )
{wixWindow.openLightbox( ‘Results Comments’ , commentsText)}

Here are my thoughts

	$w('#Table').onCellSelect((event) => {
		let col = event.cellColumnId;

can produce four different values for col.

  1. The column header which was defined when the table was created. This value is actually the value for label in the table columns array. This is the value returned in the Preview version of WiX Velo and was, until recently, the value returned for several years in the Live version of WiX Velo.

  2. The id for the column which is defined in the table columns array. This value looks like this: ‘column_kmirk4tc’ and is the same value generated for the table in Preview or Live. It may be generated when the table is created but it may change if the table is changed.

  3. The value listed in the Velo documentation which looks like this ‘columnId_b2h3-87d9-49250’.

  4. A user defined id which is created by making a copy of the table columns array and replacing the id with something else. A relatively simple solution to the problem would be to replace the id values with the label values and everything will work in both Preview and Live.
    However, there is a simpler solution which deals with the first three cases and it goes like this:

$w('#Table').onCellSelect((event) => {
    let col = event.cellColumnId;
    if (col.indexOf('column') === 0) { //returned id instead of label
        for (var i in cols) {
            if (cols[i].id === col) {
                col = cols[i].label;

Everything works as before and if the retuned value should be changed back in future the code will still work. There may be a better answer. I always look for simple solutions. But the problem should not have appeared.