React-window: Support nested arrays
Hi,
Is there a plan to support nested arrays with children?
like in infinite-tree or react-virtualized-tree.
Avivhdr
All 5 comments
react-window only knows about the number of items in a list— not whether it's an array or a Set or whether it's nested, etc. So technically, what you're asking about could already work, but you would need to do some work to recurse the array and determine how many items it contains in total.
I have no plans to create a tree component as part of this library though, no. The one you linked to could be refactored to support react-window pretty easily though I would imagine.
bvaughn
on 23 Nov 2018
@Avivhdr I published react-aspen a few days ago that does just what you need and uses react-window as the renderer. Hope you find it useful!
NeekSandhu
on 24 Jan 2019
@NeekSandhu Looks amazing! I would love to try it out.
The documentation is not so clear though. is it work-in-progress?
Avivhdr
on 24 Jan 2019
Hey @NeekSandhu, react-aspen looks cool!
I may try it out for something I'm working on. :)
bvaughn
on 24 Jan 2019
@Avivhdr react-aspen, at least the core (besides fancy features like drag and drop etc.) is solid as a rock, and production ready.
It's a pity that documentation isn't great. Something I hate myself. You see, this project is written in TypeScript and the dependencies are split into separate projects. I'm using TypeDoc to generate documentation, which is terrible at doing that one job.
I was hoping I would give TypeDoc an entry point (react-aspen/src/index.ts) and it'd automatically walk the import/export graph and document all the stuff it finds in the process (including the said dependencies). But unfortunately, it doesn't work that way leading to a shit documentation.
The recommended way to consume react-aspen is not npm i react-aspen, but instead fork off of react-aspen-demo which has most features implemented and ready to go. And from there, you can see how the API is used.
Once react-aspen is in your project, then if you're using VSCode, it's intellisense will explain every function/method call as you go!
@bvaughn
Many thanks, Brian! If you do use it, consider git submoduling react-aspen-demo instead of having to deal with low-level stuff from scratch.
To leverage Aspen's potential to the fullest, I recommend getting to know it's family:
aspen-decorationsStyling engine for flattened nested treesaspen-tree-modelState container for everythingreact-aspen(this comes withTreeStateWatcherthat let's you save the current state of Aspen tree, like all expanded directories and scroll position)aspen-coreThe thing that "manages" flattened representation of nested trees and supervises moving/adding/removing items on the fly.
NeekSandhu
on 24 Jan 2019
Related issues
delateurj
·
3Comments
gonuit
·
3Comments
bnikom
·
3Comments
maynir
·
4Comments
migueloller
·
3Comments
Most helpful comment
@Avivhdr
react-aspen, at least the core (besides fancy features like drag and drop etc.) is solid as a rock, and production ready.It's a pity that documentation isn't great. Something I hate myself. You see, this project is written in TypeScript and the dependencies are split into separate projects. I'm using TypeDoc to generate documentation, which is terrible at doing that one job.
I was hoping I would give TypeDoc an entry point (
react-aspen/src/index.ts) and it'd automatically walk the import/export graph and document all the stuff it finds in the process (including the said dependencies). But unfortunately, it doesn't work that way leading to a shit documentation.The recommended way to consume
react-aspenis notnpm i react-aspen, but instead fork off ofreact-aspen-demowhich has most features implemented and ready to go. And from there, you can see how the API is used.Once
react-aspenis in your project, then if you're using VSCode, it's intellisense will explain every function/method call as you go!@bvaughn
Many thanks, Brian! If you do use it, consider
git submodulingreact-aspen-demoinstead of having to deal with low-level stuff from scratch.To leverage Aspen's potential to the fullest, I recommend getting to know it's family:
aspen-decorationsStyling engine for flattened nested treesaspen-tree-modelState container for everythingreact-aspen(this comes withTreeStateWatcherthat let's you save the current state of Aspen tree, like all expanded directories and scroll position)aspen-coreThe thing that "manages" flattened representation of nested trees and supervises moving/adding/removing items on the fly.