Table row location change on "Run this query periodically"

💬 App Building
1
  • Goal:
    Hey,
    I have a table which based on a periodic query (every5 seconds).
    The issue is that when a user scrolls down the table to view at other records the
    view get reset to the top of the table whenever the periodic query runs.

I see that there is an option to set the location of the table row index that is set into view.
But I don't see any way to update the current row index based on a table scrolling event.

Do someone have a workaround for this?

Best,
Roy

2

Hi @royroy, if the component re-renders once the data source updates, we'll lose our place on the table. We can use use pagination instead of scrolling to workaround this issue, and a way to keep track of what page we are in because we'll probably lose this too.

  1. Create a state variable to track the 'current page.'

  2. Use client side pagination to only render enough data without the need to scroll.

  3. Add an event handler to increment or decrement the value of the state variable on page change.

  4. Add a success event handler to the query to set the table's page number to the value of the current page state variable (tableName.setPage(variableName.value)). That way, when the data source updates, we'll see the correct page in instead of the first one.

Keep in mind that the first page in the component's properties is 0:

Screenshot 2024-07-22 at 11.50.37 AM