TABLE API - onRowSelect

Ask the community
1

I’m using a table that is not connected to a collection.
I read from the collection, calculate additional columns, then set the table with the array created.
The table has about 12,000 entries.

The table does not use pagination. There is one simple scroll bar for the whole thing, on one page of a lightbox. Users have requested a “Go To” (or scroll to) feature.
Is this possible without pagination, which is not desired?

$w(’ #table1 ').onRowSelect will highlight the correct row, but will not scroll to the correct row.
Spent a lot of time reading this forum, but I cannot find a way to scroll to a given row index.
If this is possible, please let me know.

Another vexing issue with the Wix table API is the lacking ability to dynamically change cell/row background colors, or text colors. Wix staff insists on using repeaters instead, but that is not always possible.

Last I checked, staffers said there was not a way to dynamically change cell/row background colors, or text colors with regular tables. Has this changed?

2

12000?! That’s a lot of information to display. Maybe too much, I’m not sure you should load that much information in your browser

The trick is to load only a fraction of your data set in the browser. Only the fraction that your user is currently viewing (let say 25 items). Then when he scrolls and reachs the bottom, it load 25 items more. You can also remove 25 items from the list once you reach 75 so you keep only 75 items in memory (25 past, 25 current, 25 next)

Once he clicks “go to”, you reload your data set from that point and display the 25 following items

I would suggest using repeater as they are more flexible (even though table might be a bit more performant for larger data set). You can design your repeater to look like a table

Regarding the scrolling have you tried

$w("#myTable").onRowSelect(event => {
   event.target.scrollTo()
});

In theory, it should work but did not try (let me know how it goes)

Lastly, you could have a look at one infinity scroll web component and use a custom web component or HTML to embedded it.

read on infinite scrolling Infinite Scroll: Let’s Get To The Bottom Of This — Smashing Magazine

infinite scrolling js library
Infinite Scroll.

Let me know if this works

3

Quentin, thanks for taking the time to respond.
Tried this:

$w("#myTable").selectRow(Number(indexValue));
$w("#myTable").onRowSelect(event => {
   event.target.scrollTo()
});

That code highlights the row correctly, but no scrolling to the selected row.
The 12000 rows take a painful 14 seconds to load.
But, once loaded, the table works fine, and it is very responsive, including filtering by columsn, etc. - with a desktop PC. On mobile devices, the scrolling is a bit cumbersome, hence the request to “scroll to” a particular index.
Pagination would slow down the scrolling and make the list almost unusable.

To make a repeater look like a table looks very time consuming, with the proper outcome very much in question.

There are js tables that have “scroll to” and dynamic coloring of text, cells, background, etc.

I guess that would be the next step. Shuffling data to and from the HTML component is a bit of a pain, though, and it could slow down things to the point of being unusable.

Infinite scrolling looks interesting, but I don’t think it that would work as the script combines html pages to simulate infinite scrolling. I need a container (table, repeater, etc.) that scrolls and changes colors dynamically.

It’s a shame Wix hasn’t improved on the table and pushes repeaters instead.
It looks like changing colors dynamically should be possible with the table element, but it was never properly implemented into the API.
Same with the scroll-to.

4

Maybe you should consider creating your own table using custom element. The performance will be probably much better.