Comments (13)
+1
from react-virtualized.
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:
- It doesn't bloat the library size for existing react-virtualized users who don't want this functionality.
- It keeps things focused and more maintainable for people like me.
from react-virtualized.
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. :)
from react-virtualized.
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...
from react-virtualized.
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. :)
from react-virtualized.
🙇
from react-virtualized.
Hi @zenorocha. Would you mind sharing some insight into your use-case WRT pagination and react-virtualized?
from react-virtualized.
It would be very nice to:
- Trigger some callback on scroll reaches bottom or top (depends on setting) with some threshold (depends on setting)
- Put loader element (passed to props) to top or bottom, when property
isPending
(or similar) set totrue
from react-virtualized.
It would be very nice to:
- 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).
- 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.
from react-virtualized.
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.
from react-virtualized.
[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.
from react-virtualized.
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
from react-virtualized.
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.
from react-virtualized.
Related Issues (20)
- Grid rows disappear when sibling elements are conditionally rendered in HOT 1
- [Question] What are the criteria for determining the number of rows in a list?
- Your official website is blocked HOT 1
- Main link is broken HOT 1
- Access to Multigrid public method recomputeGridSize() returns undefined
- Version 9.22.5 is a ghost not visible in this repository?
- Height Issue after rendering
- Virtualisation fail ? Why invisible content is added to my list ?
- react18.2.0 HOT 1
- Tips for displaying a dropdown to overflow the React Virtualized container without being hidden?
- Failed to fetch dynamically
- The styles.css isn't part of the 9.23.0 version
- How to load JSON-formatted data virtually?
- TypeError : RegisterChild in WindowScroller
- Props ScrollElement of WindowScroller load every items if parent is InfiniteLoader HOT 2
- Autosizer component does not accept any refs or spread props.
- Change scrolling approach for Table component
- Table's data columns are not resized until scrolling the content [regression]
- `scrollToRow()` on `List` with `WindowScroller` not working HOT 1
- How to use search functionality similar to ctrl+f using react-virtualized HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-virtualized.