Prev next rows in table to navigate between rows

Hello, i got a basic functional for your use case.

is this what you are looking for?

Note: table component is just visual, App doesn't use table at all

Dummy App.json (28.9 KB)

1 Like

Works good but my concern is my query have pagination limit and offset right now with table server side pagination , how i achieve that without table and control when to go to next page of results

I didn't use the table in any way



You'd still need the pagination in your query and the recordcount
The total number of pages is the recordcount divided by the pageSize (you'll need this if they try to scroll past the last record of the last page)

In your query, Limit is your pageSize. Offset is the number of records to skip, ie the number of the page you're currently on * the pageSize

Your next/prev buttons are adding or removing 1 from the current record index

  • If that new number is more than the last record on this page (ie offset + pagesize) then you need to load the next page by updating the offset and rerunning the query
  • If that new number is less than the current offset then we're going back a page so you need to load the last page by updating the offset and rerunnning the query
  • If the new number is neither of those then we're navigating within the current page so just add or remove one from the current record index

The pagination component does all this for you in the background

1 Like

i made the @Oscar_Ortega solution but not working well with pagination:

if (currentIndex.value > pageSize.value - 1) {
  currentPage.setValue(currentPage.value + 1)
} else if (currentIndex.value < 0) {
  currentPage.setValue(currentPage.value - 1)
  currentIndex.setValue(pageSize.value - 1)

this is the script for prev and next row

but its not changing page, its looping first page

Next button config:

1 Like

i got same code, but i have my query manually trigger, not when input change (as in the same app i use it to save update records)

Adding query.trigger() in both conditionals should work

1 Like

yeah i tried that, but see what is happening, what im thinking is i need another query without filter?

my app also filter in the same query, as user may switch filter and navigate tru rows, but also they can update add new information.

So when switch is == true then i enable the row navigation, but also, user may filter by location, name, id, etc all inputs in the blue container (kinda complex app)

any idea? @Oscar_Ortega

Catching up on this thread now! @agaitan026 would you be able to make it into office hours today? Could be helpful to show us what’s going on live! :slight_smile:

1 Like

didnt make it :frowning: but need help yet @Oscar_Ortega @dcartlidge @victoria , as im using server side pagination