Table Vertical Scroll (or alternative)

It looks like the table component is paginated by design. I’d like to request either to consider adding vertical scroll as an option or some guidance on how best to recreate it. A button group is great for lists of items before a modal (i.e. the github pull request project) but lacks the columnar format.
There are a couple of react components that do this. I’m not familiar with custom components or react (yet) but I’m going to take a crack at it.

5 Likes

+1

Thanks for the feature suggestion! @blue-coat-atc + @kelvin-reyes — would it work if mapped “scroll down” to the “next page” button? That’s probably the easiest way for us to get this working, although the UX could probably be better…

That would definitely work for my purposes!

Follow-up question, is there a way to disable user-facing controls on the table and make it view-only? i.e., non-sortable, data-presentation only.

@alex — can we look into adding this to our feature spreadsheet? I will see if we can get this done soon — I think it should take an hour or so. Thanks!

No, this isn’t supported out of the box, but you can probably hack it with CSS (e.g. hide the headers, make them non-clickable, etc.): https://stackoverflow.com/a/7392038

The custom component route works fine. I’ve been able to get handsontable working and stability outside of edit view is good enough for me.

Bumping this as an actual feature request since right now it’s the primary roadblock to moving forward with some of the things that I’m building. I see there’s an example for React Table that uses react-window for virtualized rows. I’m not sure how hard that would be to use in Retools React Table integration but I thought I’d mention it: https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/virtualized-rows

Any update on this? Can I at least modify the number of rows in each page?

1 Like

This is actually somewhat complex to implement so we haven’t been able to focus on it quite yet (see also: Infinite scrolling instead of pagination (For tables)). Tables have a “compact mode” toggle that let you put more rows in each page, although it’s not exactly custom.

Hello @blue-coat-atc 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

2 Likes

How do you do this? I don't see it in the settings.

Hey @szabon

Its in the pagination section on the right side panel:

I have a working server-side paginated with the classic overflow: pagination approach. Changing it to "scroll" won't work. Is there anything else that must be set, or is there any incompatible feature I might've enabled? I'd say that size is not correctly computed, so the "next page" event is not triggered. This is how the bottom of the table looks like:

In addition: what happens with scroll if "download" is clicked? It'd be great if all the table was downloaded (or having an option for downloading all), downloading one page doesn't make much sense.

Thanks!

Hey Juan, would you mind sharing how your query is set up? If pagination is working with the overflow setting, you shouldn't have to do anything else beyond switching to scroll in the Pagination UI.

It's an API (restapi) resource configured to "Run query automatically when inputs change), and one of the inputs is the selectedPageIndex of the table widget. {{ resource_name.data }} is the data expression.

Would you mind sharing what your query and pagination settings look like?

I believe that you will need the paginationOffset as well as the selected page index for this to work correctly, but without seeing the query setup, it is hard to say for sure.