Hi. I have a collection with data, a dataset connected to that collection, and a table connected to that dataset. When a user clicks on a row of the table, I would like to retrieve the data from each of the fields of the clicked row. How do I do that? Thanks.
top of page
Important forum update
This forum is migrating to one unified Wix community forum starting July 26th, and will be read-only during the process.
![feature fixed.png](https://static.wixstatic.com/media/3bfa8a_f845e1016b8a49758acdd6edd6610c3b~mv2.png/v1/crop/x_0,y_2,w_852,h_508/fill/w_104,h_62,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/feature%20fixed.png)
Wishlist Page is the official platform for requesting new features. You can vote, comment, and track the status of the requested features.
bottom of page
I had a similar challenge - I would prefer a repeater nested in a repeater for several reasons including the adjusting row size. However, until that is available here is a solution that will work for me. I hope it is useful to others who use tables but struggle with the fact that the amount of data in each record varies (so it row size is never perfect for all rows). I decided I would commit to a row height of two courses (two rows of text) then use a pop-up box for those that want to read more. I used the cellSelect() event because my issue was cell by cell.
Elements I needed
Table
Box (text element and button go in here)
Text Element (or rich text box in my case)
Button
Element States
Table: under settings -> clicking selects cells
Box: hidden, collapsed, and pinned to the center of the screen
Text Element: disabled because mine was a rich text box and I didn't want editing
export function Table_cellSelect(event) { let cellData = event.cellData; $w('#box').show(); $w('#box').expand(); $w('#richTextBox').value = cellData; } export function closeBox_click(event) { $w('#box').hide(); $w('#box').collapse(); }
Fixed the issue. Table had wrong protection. My bad.
I have made my page and a dataset table, I am able to get the data I need from Row-1 only. So how do I select the data I want to display on my page from Row-2 and Row-3, etc.
Thank you for your help.
The code snippet that I posted before works just fine without the need to scroll. I tried the following:
scroll down the table
click on a row
the console.log() shows the data for the selected row
the table display remains on the location of the selected row
If you continue to have problems, please post the URL of your site. Only authorized Wix personnel can get access to your site in the editor.
Hi Yisrael. Yes, that's what I'm doing, and it does select the correct data. I just wanted the table to scroll to the selected record, which I can't get it to do. It always goes back to the first record, even if I scroll down hundreds of items and click on a row. The scrollTo() doesn't seem to work.
export function tblBookList_rowSelect(event, $w) { let rowData = event.rowData.title; let rowIndex = event.rowIndex; $w("#BookData").text = rowData; //text box on form
$w("#tblBookList").scrollTo(rowIndex); //table console.log(rowData); console.log(rowIndex); }
Thanks for your help.
Well, I don't really know what you're doing, but I tried the following code for a table and it works fine:
export function table1_rowSelect(event, $w) { //Add your code for this event here: let rowData = event.rowData; console.log(rowData); let rowIndex = event.rowIndex; console.log(rowIndex); }
I put some console.log() statements in to check that I was in fact retrieving the correct row and its information. It worked perfectly.
Can you supply more information on what you're doing (and how)?
Thanks, Yisrael. I find that if I use onRowSelect(), I get data from the wrong row, The only way it seems to get the correct data is by using the onClick() event handler. But, in that case, even though I get the correct data, the row doesn't actually get highlighted and the table scrolls back to the beginning. Is there some way to visually stay on the selected row and show the user what row was selected by highlighting it?
Hi,
You will need to use the onRowSelect() event handler to catch the user's click of a row. From there, you can extract the data you need. See the usage examples in the documentation.
I hope this helps,
Yisrael