Server side pagination arrow navigation doesn't load next/previous page

When having a table loaded server side (Server side pagination), the arrow keys does not switch between pages; it cycles on existing page.

Expected behaviours

  • When the last row of the page is selected and down arrow is pressed, table should load next page (if available)
  • When the first row of the page is selected and up arrow is pressed, table should previous next page (if available)

Hi @philippe-boyd-maxa! Happy to help. Would you be able to share any screenshots of your current setup?

Hi @Tess ,

Currently have my last row selected on the table, by pressing the down arrow key again, page 2 of the table is not being selected/loaded.

@philippe-boyd-maxa Can you share the query that populates the table? If you're using server-side pagination you'll need to have the limit and offset there as well.


  {{ table1.pageSize }} offset {{ table1.paginationOffset }};

The loading and changing between page works, the issue is with the arrow keys not loading new pages once we reach the end of the table (view)

Ahh, I see what you mean now. So the server-side pagination works as expected but you would like the additional functionality of the arrow key moving to the next/previous page if the item is last/first.

Yeah, I don't think you can do that natively currently :slight_smile:

I just had an idea tho. What you could do if you're really need that UX is listening to the selectedRow value of your table and if the data becomes undefined, aka the index of the row is outside of the current view, turn the page with {{table.selectPage(n+1)}}

It's not really an additional functionality when this behaviour works without server side pagination.

When the whole data is loaded into the table and you navigate with arrow keys, once you reach the bottom or top, it goes to the next or previous page as expected.

I completely understand your logic here but the fact it's not working makes it additional functionality :stuck_out_tongue:

I tried to hack around it mainly by trying to subscribe to the selectedRowIndex and calculate when a page should change. If the table holds n = 10 rows, each n+1 row is outside the current view and would trigger a selectPage(selectedPageIndex + 1) call to the table. Dirty, but should do the job.

Didn't have much luck, which made me also realise that this is a mini feature improvement to basically Treat arrowing down/up a table as a Row Select event which you could then use to turn pages.

Other then that, you could add a feature request :))