Any way to show a dynamic number of columns?

[samuel-messing]

Hello!

This is more a question than an issue. I'd love to have a list where the number of columns is specific to the size of the window. Right now with react-viewport-list I seem to only be able to create a list with a single column. Any suggestions on how I might be able to make dynamic? I know how I might go about making it a fixed number of columns (e.g., 2), but curious if there's any way to make it dynamic.

[samuel-messing]

Also... thank you for this project! It's super easy to use and well documented. Kudos.

[oleggrishechkin]

Hi, @samuel-messing
Thank you for your warm feedback.

At this moment I have not a good solution to multi column in all cases.

The best solution at this moment for me is to chunk items by number of columns and render rows (where row is a 2/3/4 column and so on). It will be work good if you have a fixed number of columns (I mean not a hundred+). And you can utilise this solution to adaptive layout via media match from js code.

If you want to virtualize x and y axis at the same time... well, you can create a viewport of columns where each column is a viewport list of rows. You should chunk items by your side too.

I think I can support flex wrapping/or grid columns in the future. But this will be not a both axis virtualization, just support for several grid columns and flex-wrap (which can be used to multicolumns by css flex layout)