Scroll table to a selected row

App Building
1

Hello,
I have a scrolled table and change the selected row from Java Script. It works but the selected row is not in the visible part of a table and the table needs to be scrolled manually. Is it possible to scroll the table from Java Script so that the selected row is immediately visible? It works only for the paginated table.

2

Hey @micahelr! Would the .scrollIntoView method or .scrollToRow method work for you?

e.g. table1.scrollToRow({index: 10})

3

I am having a related problem. First off, where is the documentation for this .scrollToRow()? Here is what I see in the IDE:

image
image993×143 18.6 KB

In other words, no information.

Second, if you need to know an index to call scrollToRow how do you find out what the index is?

In my case I am using the "search term" feature to wire up a search box for the user. So the user types in a string and bang! the table selects a matching row. This is great.

But the problem is the row may be scrolled out of view. So it needs to be scrolled into view so the user can see a match was found and what it is.

After the search the obvious thing to do is something like:

table1.scrollToRow({index:10});

But how do I find out the index value of the currently selected row?

Second problem is that the above does not work anyway. The table does not scroll to row 10 (or 9). It does not move at all.

4

Hey @Roland_Alden!

You should be able to use the selectedRowKey and selectedDataIndex properties to scroll to the selected row!

Documentation for scrollToRow should be coming to the code editor as well, for now, here's something you can reference:

scrollToRow: (options: {
    mode: "index" | "key";
    indexType: "display" | "data";
    index: any;
    key: any;
}) => unknown
Scrolls to a specific row.

@param 
options.mode
Controls how rows are targeted.
"Index" will target a specific index.
"Key" will target the row of the first matching item in the Table's configured primary key column, id.

@param
options.indexType
How the index will be interpreted by the Table.  
"Display" will use the displayed indexes.
"Data" will use the data indexes.

@param
options.index
The targeted index in the Table's configured primary key column, id.

@param
options.key
When the row is targeted by key, this will be the value used to find the first row with a matching value.
1 Like
5

Ok. I think this is "working" but it is insufficient:

footable.scrollToRow({mode:'key', indexType:'display', key:footable.selectedRowKey});

This does seem to scroll the table so that the selected row is "in view" but the table is scrolled up so that the selected row is at the very bottom of the table. Because the table is taller than the screen the row in not "in view". As I understand it the .scrollIntoView method deals with the entire component and does not understand rows inside a table. So presumably that won't help.

It seems like .scrollToRow is missing a fundamental concept. While rethinking this I suggest some attention be paid to scrolling to columns as well and the various options be unified.