Retrieve data from selected table row

Ask the community
,
1

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.

2

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

3

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?

4

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)?

5

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.

6

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.

7

Thank you for your help.

8

hey Yisrael, how do i get only the value as a string instead of an object?

i want to use this string to filter another dataset, is that possible?

9

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.

10

Fixed the issue. Table had wrong protection. My bad.

11

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();
}