React-virtualized: Render a set of items with dynamic row properties

[aweary]

I have a quick question about whether react-virtualized would fit our use case and, if so, what the best way to go about it would be.

We have a list of <Card/> components that looks like:

We want to virtualize this list as it's going to get rather large. Currently there is no conception of rows in the parent rendering component, it's just a large list and we rely on CSS to create rows. The "rows" also contain a dynamic number of cards (two cards on smaller viewports, one card on mobile).

The questions I have are:

1. Does react-virtualize require the data be split into discrete "rows" or is there a component/method that would allow us to virtualize this without augmenting our data structure?
2. How would you handle dynamic properties like card count per row? For example, when the user resizes the window from 1400px to 900px all rows should go from 3 cards to 2 cards.
3. For question 2 I though we might be able to set a rowCardCount variable in local state that updates on resize that we use the get a slice of the main list, but would that affect already rendered rows?

[bvaughn]

Hey @Aweary! Welcome to the project. :)

1. Does react-virtualize require the data be split into discrete "rows" or is there a component/method that would allow us to virtualize this without augmenting our data structure?

All RV components require explicit row counts. That's an important part of how the windowing is done. But I think what you've described could work within that constraint.

1. How would you handle dynamic properties like card count per row? For example, when the user resizes the window from 1400px to 900px all rows should go from 3 cards to 2 cards.

You could use a high-order component like AutoSizer (or your own resize listener) to notify you of the available space for your list and then determine your row and column counts based on the size (similar to how you do with media queries).

If you have 1000 items and the current width is sufficient for 2 items per row then you have 500 rows. If it can fit 3 items per row then you have 334 rows. etc.

1. For question 2 I though we might be able to set a rowCardCount variable in local state that updates on resize that we use the get a slice of the main list, but would that affect already rendered rows?

Yes, any time the row-count changes the window of data is refreshed.

If your column widths aren't fixed- you may also want to consider using a Grid and ColumnSizer high-order component as is shown in this demo to help with the exact layout of each card/cell.

[bvaughn]

@Aweary I'm going to close this issue since it's just a question and _I think_ I've provided the information you need. We can keep chatting here though if you still have questions. I don't mind. I just don't like leaving non-actionable issues open.

[aweary]

@bvaughn yeah totally :+1: I may have some more questions in the near future so I'll ping you here if I do. Thanks!

[ghost]

@aweary Hey! Did you manage to make it work? Cause I have a similar problem now.

[bvaughn]

@Pszek You might find this proof of concept helpful: http://plnkr.co/edit/zjCwNeRZ7XtmFp1PDBsc?p=preview

[ghost]

@bvaughn Thanks! I believe adding InfiniteLoader to that would be impossible (I mean the detection when to load more rows)?

[bvaughn]

@Pszek Should still be possible. Assuming you were doing something like the proof of concept I linked to, you'd just need to multiply the row indices InfiniteLoader provided by itemsPerRow to get the real range. (So if 4 items fit per row and InfiniteLoader tells you to load rows 100-110, you know that actually means loading items 400-440.)

[SevenSinS02]

@bvaughn I know this is an old thread.

I had a doubt though as to how one would handle the size of the cards when the window resizes.

Like as @aweary had asked :

How would you handle dynamic properties like card count per row? For example, when the user resizes the window from 1400px to 900px all rows should go from 3 cards to 2 cards.

I would also like to add that when the cards go from 3 to 2, the dimensions of the card also usually change to enable responsiveness. How can I handle this?

Please let me know if I wasn't clear enough.

[SevenSinS02]

Nevermind. I solved it by using List.recomputeHeights.

Can't believe I didn't notice that method.

[nicolaspavlotsky]

@SevenSinS02 do you have a working example of what you did? I'm trying to implement this in a website with a responsive grid and I'm having trouble.