Bug found in TableRowEvent

Ask the community
,
1

Situation:
I have a table connected to a dataset. When a row is selected I need a copy of the full data record as opposed to the row data in the table. In the rowSelect event handler I use event.rowIndex to index into event.target.rows to get the record. This works fine unless there are multiple pages in the table. On the second and subsequent pages, the rowIndex value for the first row is the absolute index in the dataset as opposed to the relative index on the page. The rest of the rowIndex values on the page are correct.

To Demonstrate:
Connect a dataset with 9 records in it to a table. Set the table’s Rows per page to 3.
Add an onRowSelect event handler and have it print the row index to the console. Then select rows in sequence going through three pages.

export function table1_rowSelect(event) {
 console.log('event.target.rows.length:',event.target.rows.length)
 console.log('event.rowIndex:', event.rowIndex)
}

Console output:
event.target.rows.length: 3
event.rowIndex: 0
event.target.rows.length: 3
event.rowIndex: 1
event.target.rows.length: 3
event.rowIndex: 2
event.target.rows.length: 3
event.rowIndex: 3
event.target.rows.length: 3
event.rowIndex: 1
event.target.rows.length: 3
event.rowIndex: 2
event.target.rows.length: 3
event.rowIndex: 6
event.target.rows.length: 3
event.rowIndex: 1
event.target.rows.length: 3
event.rowIndex: 2

The workaround:
Add code to detect when the rowIndex is out of range and change it to 0.

export function table1_rowSelect(event) {
 let rowIndex = event.rowIndex;
 if (rowIndex >= event.target.rows.length) {
 rowIndex = 0;
    }
 let selectedRecord = event.target.rows[rowIndex];
}
2

You can also add an invisible column to the table with the record id, and pick up the full record based on the id of the selected row.

3

How do you add an invisible column?

4

You set the “visible” value of the column to be false.
See:
https://www.wix.com/corvid/reference/$w/table/columns

5

@jonatandor35 Very interesting, never noticed that before. Thanks for the pointer. Could come in handy.
I’m assuming since I could not find anywhere in the UI to set the column invisible, this must be done in code.
As a solution to my problem above I would still opt for the workaround that adds three lines of obvious code (which does not break when they fix the bug).
The invisible column solution requires:

  1. adding the id column to the table

  2. writing code that sets the column invisible on startup that must copy the columns array, find the id column, set its visible property to false, then copy the array back to the table.

  3. when the row is selected the handler must now make an explicit call to the database to get the record.

  4. In addition, when optimizing the table size and column widths in the backend UI, you now have to compensate for the column that is only invisible when running.

6

First of all, it’s not a bug. It’s the expected behavior, as the index refers to the current table contestants and not to all the pages.
Second, your code can be handy in simple situations, but if you also sort or filter the table (or the original data) or add rows dynamically it might be difficult to handle in your way, and it’s bug-prone.

If I used wix tables, I’d go for my solution (but anyway I prefer making my tables using custom elements from so many reasons…).

7

@jonatandor35 I do filter the table when doing searches and it works fine. The TableRowEvent class is simply supplying event data for the current table page being displayed. It supplies the row index on the current page. And target.rows is an array of the records for that page.
What I have pointed out is indeed a bug, not expected behavior. On page 2 and beyond, the rowIndex of the first row is out of range. All other rowIndex values are correct.

8

I see. If it mixes the index per page with the total index it indeed sounds like a bug.