Scrollable tables

Paginated tables are great! Is there a way that we can make tables scrollable and paginated (either or, and together?) The current hack that I am doing now is a container that allows scrolling, extending the table to ~50 rows. This works except for the pagination doesn’t stay at the top (obviously), and the bottom horizontal scroll bar stays at the bottom. This would be helpful to reduce the amount of pages that you have to tab through with large amounts of data and user friendly on top of that

5 Likes

Hey @mrgnhnt96 and welcome to the community! This is a pretty popular feature request on the community (Infinite scrolling instead of pagination (For tables) and Table Vertical Scroll (or alternative)) - we’re definitely thinking about tackling this soon.

4 Likes

I would just like to +1 this. I have an app that has two columns, a table in one left column, and the right column is a detailed view of each record. We would like to have more rows in the table than the default but the only way to make this happen is to make the table extremely tall. That on the other hand means you’re scrolling down past the right column which shows the content. The only way around this is the hack that @mrgnhnt96 described with the container which comes with it’s own undesirable side effects.

1 Like

Would also be very relevant for me :slight_smile:

1 Like

Agreed. A lot of folks seem to not even realize there’s a second page! Would help a lot to simply be able to scroll.

1 Like

Upvote from me as well.

1 Like

+1 for me. Any update on this?

  • 1 for me. :slight_smile:

Quite a basic feature, upvoting as well

1 Like

Upvoted - Need this for a project.

Hello @mrgnhnt96 and everyone in the thread,
Scrolling / Infinite scrolling is now available on Retool cloud. You can set your tables to scroll and it should work seamlessly with the existing table options, including server side pagination.

scrolling-table-option

6 Likes

Hi, thanks for the great update. Tested it now on a table with Server Side Pagination set for the table. When using a mouse scroll wheel to go down. Once you hit the bottom of the table's page it will stop for a sec and if the query hasn't loaded the next page it will scroll down the entire app, not the table. Is there a way to lock the scroll while hovering on the table to only the table?

2 Likes

My brilliant coworker figured out how to adjust the scroll behavior to accomplish this. Just add this as a CSS style to your app (substitute tableName for the name of your table).

#rt-table-tableName {
  overscroll-behavior: contain; 
}
4 Likes

I love this new feature. Currently, we can set the table to "paginate" or "scroll" in the table settings. I see that this is tied to the "pagination" property on the table Object. Are there any plans to allow us to change the overflow type on the fly? For example, will I be able to assign a switch for my users that allow them to toggle the view between paginated and scroll?

1 Like

Hey punnyprogrammer, I don't believe that we have that on the roadmap right now. But I can add that as a feature request. Thanks for the feedback!

1 Like