Pagination?

[bradparks]

Hey! I see you've got a Grid issue #22 listed.... Would that include pagination? While it may sound initially simple, and something people may want to roll their own for, the idea of having a locked header/footer potentially (and the page navigation gui) may be nice to include in the component by default. Thanks!

[bvaughn]

My focus for issue #22 is purely about column virtualization. Pagination is kind of a concern that cuts across all components (VirtualScroll, FlexTable, and Grid).

To be honest I hadn't considered pagination because it almost seems more of an alternative to virtualized rows than a compliment. (If you're paginating then you're presumably not rendering that much data in any given set.) But if there's interest I could consider adding support for that. :)

[bradparks]

yeah I get what you mean there - to me adding pagination/header/footer stuff opens your table up to a different audience - the "grid" audience, which arguably things like DataTables have a big userbase from in the free/opensource world - people that want a drop in grid for data editing, and of course get lots of user requests for being able to navigate data in a database/spreadsheet kind of way....

with your customizable fixed width columns, and fixed row heights, you've got some key features working and demoable out of the box.... to me the one difference lots of people would want in comparison would be pagination support...

[bvaughn]

That's good feedback. I'll tag this as an "enhancement" ticket then and see if I can't get around to looking into it. :)

[bradparks]

🙇

[zenorocha]

+1

[bvaughn]

Hi @zenorocha. Would you mind sharing some insight into your use-case WRT pagination and react-virtualized?

[Strate]

It would be very nice to:

1. Trigger some callback on scroll reaches bottom or top (depends on setting) with some threshold (depends on setting)
2. Put loader element (passed to props) to top or bottom, when property isPending (or similar) set to true

[bvaughn]

It would be very nice to:

1. Trigger some callback on scroll reaches bottom or top (depends on setting) with some threshold (depends on setting)

This is already available using either the onRowsRendered or onScroll callback properties. It's also available as a HOC in the form of the InfiniteLoader component (see docs, demo).

1. Put loader element (passed to props) to top or bottom, when property isPending (or similar) set to true

This is one I've considered but since it complicates the virtualization layout (even if slightly) I've left it up to users up until this point. It's possible to do achieve this by passing a rowsCount of +1 and then render a loading indicator as your last row. It's a little complicated when it comes to FlexTable or Grid components though.

[bvaughn]

I'm going to close this issue due to inactivity for now. I still feel that pagination is something that doesn't quite fit into react-virtualized since the main purpose of this library is to display lots of unpaginated data. I've also created high-order components like InfiniteLoader to help with chunking the loading of remote data.

The idea of supporting a footer loading indicator is one that may be worth reconsidering in the future. (I've actually thought about it a few times myself). The difficulty with it is that you may be loading data in the middle of a table or grid, or at the top, (not just at the bottom). This obviously complicates things if it's the case. It's possible to use VirtualScroll for this purposes and just manage the rendering of each row-of-cells manually but I realize that's a bit more work than is desirable.

If that specific feature is something people want then feel free to open a new issue and we can discuss it there, separate from pagination. :)

Edit: When I say I'm closing it "due to inactivity" I mean no slight to anyone who has commented or +1'ed the feature. It's just that I didn't intend to invest any time building this unless there seemed to be significant interest in the feature and I think that doesn't seem to be the case.

[adamcee]

[EDIT: Enterprise users also are very comfortable with pagination and often uncomfortable with other UI/UX approaches]

Adding to this as we are looking at virtualized for driving our table/list, for a file/media browser tool. Its power and flexibility is very appealing.

Pagination is of interest of us because it allows the user to explore the data in a different way, especially if, say, for hundreds or a few thousand images, filenames or descriptions are not sufficiently useful for search.

A search box, plus sorting, plus previewing, plus pagination, allows the user control over a large data set in a way I'm not sure that infinite scroll behavior would replicate.

Curious what your thoughts are.

[bvaughn]

Hey @adamcee,

Thanks for adding additional context. 😄

The focus of react-virtualized is windowing. It's not a general UI library (like Material or Bootstrap). There are already a few well established UI libraries and they're also probably too ambitious for a single developer (me) to try to take on anyway. So I try to keep the focus of all of the components/HOCs in this library on windowing. Pagination is related but I think it's related in a meta way.

I assume you (and the others above) are picturing a component that uses a combination of pagination and windowing to make the data more navigable. So maybe you have 1 million rows, and they're split up into "chunks" of 500 rows each- each chunk navigable via a pagination menu, rows within a chunk windowed by List or something similar. That sounds like a pretty useful UX. However pagination UI is much more complex and opinionated than any of the existing react-virtualized UI. For example, with the exception of some very basic formatting for Table headers, the only styles react-virtualized set by default are functional. The presentational styles are all left in user land. This is very intentional. I don't want to be opinionated about presentation and I couldn't hope to satisfy everyone if I did. There are just too many ways to display things.

Now, focusing back on a pagination menu like you described. There are multiple components- search input, page list, sort icons, etc- and users would probably want to use all possible combinations of them. That already sounds like it could get pretty complicated. (Useful but complicated.) And so...while it's at least loosely related to the focus of this library...I think that sort of component would be better managed by one or more add-ons. This has a couple of benefits:

1. It doesn't bloat the library size for existing react-virtualized users who don't want this functionality.
2. It keeps things focused and more maintainable for people like me.

[scibernix]

Hello Brian,

Your last comment describes a more abstract solution for pagination with windowing support. I think having just paging support on top List or Grid would be very useful.

Having a component where user defines totalRows, pageCount , pageCacheSize. Will allow the component to divide the collection into pages and render a navigable page list, which works like an index for the associated collection. Clicking on a page number renders elements for that page, if available, otherwise fetch rows.

Let me know, your thoughts.

Alan

[bvaughn]

Hey Alan,

I agree that that sort of component is probably useful in a variety of use cases. I would argue though that it's predominately a visual component. (The "business logic" part of it would be pretty minimal.) I try to keep the focus of react-virtualized on functional rather than presentational things because I don't want to have to handle all of the features that come along with themeable UI (and things like pagination menus have tons of UI variety).

I would encourage you (or anyone) to release an add-on library that works with react-virtualized to add this behavior though. I think a lot of people could benefit from it.