6 ms·

React Arborist – A full-featured tree component for React

210 points by jameskerr 5y ago

juliangamble 5y ago
I thought it was going to be a sortable tree-table like MacOS 8. I saw a tree like this in Java Applets in 1994.
- jameskerr 5y ago
  Yeah, this is not quite the tree-table component. Unless your table only needs one or two columns!
- kabes 5y ago
  Antd offers such a react component, as well as atlaskit https://codesandbox.io/embed/9b6dxf?codemirror=1 https://codesandbox.io/embed/9b6dxf?codemirror=1 https://atlassian.design/components/table-tree/examples https://atlassian.design/components/table-tree/examples
- deleted 5y ago
  [deleted]
jluxenberg 5y ago
This is a great survey of the many ways trees can be used in UX: https://medium.com/@hagan.rivers/interaction-design-for-trees-5e915b408ed2 https://medium.com/@hagan.rivers/interaction-design-for-tree... My favorite is the Tree Table
- bredren 5y ago
  Wow, that really is a great piece. Thanks for sharing.
- jmiskovic 5y ago
  Did you see this collection? https://treevis.net/ https://treevis.net/
- rwieruch 5y ago
  FWIW I am working on such a table library for React [0] which has a great tree plug-in. So you can use it either as tree table or tree list (if just having one column). [0] https://react-table-library.com/ https://react-table-library.com/
bruhvinston 5y ago
It looks very cool. However, I didn't see a license file, so I'm reluctant to try it out. Don't want to touch what I can't play with, that's what my momma always told me.
- jameskerr 5y ago
  Oh sorry, it is MIT. I'll update the repo.
  - bruhvinston 5y ago
    no need to apologize, I forget it all the time. Rather, I should thank you for making it MIT. Now I can use it if I want to create an electron app with react that can deal with the file system very good.
    - jameskerr 5y ago
      You're welcome. I created it for an electron app myself. I needed a sidebar like you see in VSCode.
      - milkers 5y ago
        Have you seen https://github.com/BlueMagnificent/monaco-tree https://github.com/BlueMagnificent/monaco-tree?
yuchi 5y ago
Very sad to discover that this is NOT a ready made component to display actual trees. What a deceitful name! Jokes apart, nice library. Will try it out sooner or later. May I suggest to not use children as the prop to Ps the Node component? Maybe a more explicit NodeComponent prop would have been better imho.
- pjerem 5y ago
  > Very sad to discover that this is NOT a ready made component to display actual trees. What a deceitful name! Hey, since you get to decide the structure yourself, I’m sure you could use that to draw a real tree using SVG.
- jameskerr 5y ago
  Dang it, I can see how the title was deceptive. This is headless component, leaving the markup and styling completely up to the user. Many of the tree components I looked at before building this didn't let me do exactly what I wanted with the style like this one does. However, I was thinking of shipping a default "<Item>" component that comes with some default styling to get people up and running quickly. I've just made an issue for this.
  - gedy 5y ago
    This is really great that it's headless btw, so many react components hard-code style that it's makes them difficult to use in another design system
    - jameskerr 5y ago
      I felt this same pain and it was one of main motivations to make this library.
  - bredren 5y ago
    If anything, it would be great to see some of the other components you’ve styled for this. The behavior is important but the visuals sell.
  - 5y ago
citelao 5y ago
I should apologize off-the-bat for not digging in too deeply, but how does this handle keyboard and screenreader accessibility? W3C has some in-depth list of expected keyboard interactions, though I'm not sure how complete they are: https://w3c.github.io/aria-practices/#TreeView https://w3c.github.io/aria-practices/#TreeView https://w3c.github.io/aria-practices/examples/treeview/treeview-navigation.html https://w3c.github.io/aria-practices/examples/treeview/treev... I ask because I've tried to implement a [TreeGrid](https://w3c.github.io/aria-practices/#treegrid https://w3c.github.io/aria-practices/#treegrid) myself before and... it's a lot of work. I'd love an accessible, keyboard-friendly React tree :).
- ctoth 5y ago
  Just tried it with NVDA on Windows and it appears that it does not handle keyboard accessibility at all and does not communicate the relationships between nodes.
- jameskerr 5y ago
  Thank you for bringing this up. It's I who apologize for being ignorant of these expected keyboard interactions. I'll make an issue in the repo to address this.
  - eurasiantiger 5y ago
    Thank you! Don’t sweat not knowing, but without 100% accessibility coverage, the component might as well not exist — it could not be used in any publicly funded project in EU/USA or any commercial project in the EU, because it would be against the law to do so.
    - lelandfe 5y ago
      > without 100% accessibility coverage If that's the standard for open-source projects, it's a wonder any FE components get used
      - eurasiantiger 5y ago
deleted 5y ago
[deleted]
o_____________o 5y ago
There's a lack of performant, beautiful, extensible packages to visualize large JSON trees. It'd be nice to see a demo of that.
- jameskerr 5y ago
  I agree. If you want things to perform on the web, you've got to virtualize the rows. Many web libraries don't.
- culi 5y ago
  I totally agree. Firefox's default JSON viewer (an example[0] if u wanna try it with Firefox) is one of the most well-done tools I've come across at solving JSON trees. I wish I could get this as a component to play with in web design [0] https://old.reddit.com/r/zerowaste.json https://old.reddit.com/r/zerowaste.json
  - lioeters 5y ago
    I tracked down the source of Firefox Devtools' JSON viewer. https://github.com/mozilla/gecko-dev/tree/master/devtools/client/jsonview https://github.com/mozilla/gecko-dev/tree/master/devtools/cl... It's based on React, but also uses require.js for its dependencies from other parts of Devtools, like TreeView - so it looks tough to separate into an independent component.
samradelie 5y ago
Your company ( brimdata ) looks really good and your work on the Zed client app is impressive.
- jameskerr 5y ago
  Thanks! We are prepping some blog content for after we get the next release out. You'll be seeing some more posts about zed on here soon.
  - samradelie 5y ago
    Watched the talk linked on brimdata.io - stoked to see what's coming out. As a Typescript dev like yourself, very interested in how the dynamic types in Zed could be generated into ts, live.
PaulHoule 5y ago
… I like that it’s a controlled component.
teaearlgraycold 5y ago
Why provide the Node component as a child and not a prop? Seems less intuitive to me.
- jameskerr 5y ago
  The library I used for virtualization does this. https://react-window.vercel.app https://react-window.vercel.app I just followed Brian's pattern. I think it looks nice.
- searchableguy 5y ago
  You can always set children in the component. <Tree children={Node} />
adeptima 5y ago
Good efforts! Here's some quick feedback: My first thought - how React Arborist is different from Ant Tree? https://ant.design/components/tree/ https://ant.design/components/tree/ React Arborist dependencies looks sane https://github.com/brimdata/react-arborist/blob/main/packages/react-arborist/package.json https://github.com/brimdata/react-arborist/blob/main/package... "memoize-one": "^6.0.0", "react-dnd": "^14.0.3", "react-dnd-html5-backend": "^14.0.1", "react-window": "^1.8.6" However I was never a fan of react-dnd. Extremely hard to reason about react-dnd-html5-backend and spagetti code once you face edge scenarios. Hard coded css means I need to fork the library https://github.com/brimdata/react-arborist/blob/main/packages/react-arborist/src/components/drop-cursor.tsx https://github.com/brimdata/react-arborist/blob/main/package... const style: CSSProperties = { position: "absolute", pointerEvents: "none", top: top - 2 + "px", left: treeView.indent + left + "px", right: treeView.indent + "px", };
- thoughtpalette 5y ago
  Been using AntTree with great success for a complex query builder. Highly recommend.
- jameskerr 5y ago
  Ant tree looks like a great tree library and is certainly more mature than react-arborist. However, react-arborist supports renaming a node, has a slightly different drag and drop feel, and leaves all styling up to the user. Not just the title, icon, and expand buttons. I agree that the hard-coded DefaultCursor styles need to be configurable. I'll soon update. You'll be able to pass in your own component to render the DropCursor (blue line indicating the new position of the node you're dragging).
aivisol 5y ago
Does it miss Delete functionality for folders/files (I see rename) or I just dont see it?
- jameskerr 5y ago
  This is a controlled component, so all mutation of the tree data structure will need to happen in the tree's parent component. Add a function in your node renderer (maybe after clicking a trash icon), that deletes the node from the tree state. The component will re-renderer and your node will be gone. I was thinking of making a generic tree manager class to provide basic functions (move, rename, add, delete) for managing the tree data structure in the parent component. Maybe I'll call it "Arborist"!
milkers 5y ago
Great component, thank you for sharing. I was working on a similar component called `react-monaco-tree`, which is waay immature right now. I took `https://github.com/BlueMagnificent/monaco-tree https://github.com/BlueMagnificent/monaco-tree` as the base. Are there any list of all these 'file-tree' components for React?
- jameskerr 5y ago
  Looks like the start of a great component! It's amazing to me how there is not a really good tree component that already exists, considering how ubiquitous the tree is in user interfaces.
  - milkers 5y ago
    Yes you are right. I wouldn't start that component if I had seen react-arborist. Since then I am looking for good file tree components. Thank you for the contribution, I will keep looking for the alternatives but in the mean time react-arborist seems like a great choice.
deleted 5y ago
[deleted]

210 points by jameskerr 5y ago

juliangamble 5y ago

I thought it was going to be a sortable tree-table like MacOS 8. I saw a tree like this in Java Applets in 1994.

jameskerr 5y ago
Yeah, this is not quite the tree-table component. Unless your table only needs one or two columns!
kabes 5y ago
Antd offers such a react component, as well as atlaskit https://codesandbox.io/embed/9b6dxf?codemirror=1 https://codesandbox.io/embed/9b6dxf?codemirror=1 https://atlassian.design/components/table-tree/examples https://atlassian.design/components/table-tree/examples
deleted 5y ago
[deleted]

jluxenberg 5y ago

This is a great survey of the many ways trees can be used in UX: https://medium.com/@hagan.rivers/interaction-design-for-trees-5e915b408ed2 https://medium.com/@hagan.rivers/interaction-design-for-tree... My favorite is the Tree Table

bredren 5y ago
Wow, that really is a great piece. Thanks for sharing.
jmiskovic 5y ago
Did you see this collection? https://treevis.net/ https://treevis.net/
rwieruch 5y ago
FWIW I am working on such a table library for React [0] which has a great tree plug-in. So you can use it either as tree table or tree list (if just having one column). [0] https://react-table-library.com/ https://react-table-library.com/

bruhvinston 5y ago

It looks very cool. However, I didn't see a license file, so I'm reluctant to try it out. Don't want to touch what I can't play with, that's what my momma always told me.

jameskerr 5y ago
Oh sorry, it is MIT. I'll update the repo.
- bruhvinston 5y ago
  no need to apologize, I forget it all the time. Rather, I should thank you for making it MIT. Now I can use it if I want to create an electron app with react that can deal with the file system very good.
  - jameskerr 5y ago
    You're welcome. I created it for an electron app myself. I needed a sidebar like you see in VSCode.
    - milkers 5y ago
      Have you seen https://github.com/BlueMagnificent/monaco-tree https://github.com/BlueMagnificent/monaco-tree?

yuchi 5y ago

Very sad to discover that this is NOT a ready made component to display actual trees. What a deceitful name! Jokes apart, nice library. Will try it out sooner or later. May I suggest to not use children as the prop to Ps the Node component? Maybe a more explicit NodeComponent prop would have been better imho.

pjerem 5y ago
> Very sad to discover that this is NOT a ready made component to display actual trees. What a deceitful name! Hey, since you get to decide the structure yourself, I’m sure you could use that to draw a real tree using SVG.
jameskerr 5y ago
Dang it, I can see how the title was deceptive. This is headless component, leaving the markup and styling completely up to the user. Many of the tree components I looked at before building this didn't let me do exactly what I wanted with the style like this one does. However, I was thinking of shipping a default "<Item>" component that comes with some default styling to get people up and running quickly. I've just made an issue for this.
- gedy 5y ago
  This is really great that it's headless btw, so many react components hard-code style that it's makes them difficult to use in another design system
  - jameskerr 5y ago
    I felt this same pain and it was one of main motivations to make this library.
- bredren 5y ago
  If anything, it would be great to see some of the other components you’ve styled for this. The behavior is important but the visuals sell.
- 5y ago

citelao 5y ago

I should apologize off-the-bat for not digging in too deeply, but how does this handle keyboard and screenreader accessibility? W3C has some in-depth list of expected keyboard interactions, though I'm not sure how complete they are: https://w3c.github.io/aria-practices/#TreeView https://w3c.github.io/aria-practices/#TreeView https://w3c.github.io/aria-practices/examples/treeview/treeview-navigation.html https://w3c.github.io/aria-practices/examples/treeview/treev... I ask because I've tried to implement a [TreeGrid](https://w3c.github.io/aria-practices/#treegrid https://w3c.github.io/aria-practices/#treegrid) myself before and... it's a lot of work. I'd love an accessible, keyboard-friendly React tree :).

ctoth 5y ago
Just tried it with NVDA on Windows and it appears that it does not handle keyboard accessibility at all and does not communicate the relationships between nodes.
jameskerr 5y ago
Thank you for bringing this up. It's I who apologize for being ignorant of these expected keyboard interactions. I'll make an issue in the repo to address this.
- eurasiantiger 5y ago
  Thank you! Don’t sweat not knowing, but without 100% accessibility coverage, the component might as well not exist — it could not be used in any publicly funded project in EU/USA or any commercial project in the EU, because it would be against the law to do so.
  - lelandfe 5y ago
    > without 100% accessibility coverage If that's the standard for open-source projects, it's a wonder any FE components get used
    - eurasiantiger 5y ago

deleted 5y ago

[deleted]

o_____________o 5y ago

There's a lack of performant, beautiful, extensible packages to visualize large JSON trees. It'd be nice to see a demo of that.

jameskerr 5y ago
I agree. If you want things to perform on the web, you've got to virtualize the rows. Many web libraries don't.
culi 5y ago
I totally agree. Firefox's default JSON viewer (an example[0] if u wanna try it with Firefox) is one of the most well-done tools I've come across at solving JSON trees. I wish I could get this as a component to play with in web design [0] https://old.reddit.com/r/zerowaste.json https://old.reddit.com/r/zerowaste.json
- lioeters 5y ago
  I tracked down the source of Firefox Devtools' JSON viewer. https://github.com/mozilla/gecko-dev/tree/master/devtools/client/jsonview https://github.com/mozilla/gecko-dev/tree/master/devtools/cl... It's based on React, but also uses require.js for its dependencies from other parts of Devtools, like TreeView - so it looks tough to separate into an independent component.

samradelie 5y ago

Your company ( brimdata ) looks really good and your work on the Zed client app is impressive.

jameskerr 5y ago
Thanks! We are prepping some blog content for after we get the next release out. You'll be seeing some more posts about zed on here soon.
- samradelie 5y ago
  Watched the talk linked on brimdata.io - stoked to see what's coming out. As a Typescript dev like yourself, very interested in how the dynamic types in Zed could be generated into ts, live.

PaulHoule 5y ago

… I like that it’s a controlled component.

teaearlgraycold 5y ago

Why provide the Node component as a child and not a prop? Seems less intuitive to me.

jameskerr 5y ago
The library I used for virtualization does this. https://react-window.vercel.app https://react-window.vercel.app I just followed Brian's pattern. I think it looks nice.
searchableguy 5y ago
You can always set children in the component. <Tree children={Node} />

adeptima 5y ago

Good efforts! Here's some quick feedback: My first thought - how React Arborist is different from Ant Tree? https://ant.design/components/tree/ https://ant.design/components/tree/ React Arborist dependencies looks sane https://github.com/brimdata/react-arborist/blob/main/packages/react-arborist/package.json https://github.com/brimdata/react-arborist/blob/main/package... "memoize-one": "^6.0.0", "react-dnd": "^14.0.3", "react-dnd-html5-backend": "^14.0.1", "react-window": "^1.8.6" However I was never a fan of react-dnd. Extremely hard to reason about react-dnd-html5-backend and spagetti code once you face edge scenarios. Hard coded css means I need to fork the library https://github.com/brimdata/react-arborist/blob/main/packages/react-arborist/src/components/drop-cursor.tsx https://github.com/brimdata/react-arborist/blob/main/package... const style: CSSProperties = { position: "absolute", pointerEvents: "none", top: top - 2 + "px", left: treeView.indent + left + "px", right: treeView.indent + "px", };

thoughtpalette 5y ago
Been using AntTree with great success for a complex query builder. Highly recommend.
jameskerr 5y ago
Ant tree looks like a great tree library and is certainly more mature than react-arborist. However, react-arborist supports renaming a node, has a slightly different drag and drop feel, and leaves all styling up to the user. Not just the title, icon, and expand buttons. I agree that the hard-coded DefaultCursor styles need to be configurable. I'll soon update. You'll be able to pass in your own component to render the DropCursor (blue line indicating the new position of the node you're dragging).

aivisol 5y ago

Does it miss Delete functionality for folders/files (I see rename) or I just dont see it?

jameskerr 5y ago
This is a controlled component, so all mutation of the tree data structure will need to happen in the tree's parent component. Add a function in your node renderer (maybe after clicking a trash icon), that deletes the node from the tree state. The component will re-renderer and your node will be gone. I was thinking of making a generic tree manager class to provide basic functions (move, rename, add, delete) for managing the tree data structure in the parent component. Maybe I'll call it "Arborist"!

milkers 5y ago

Great component, thank you for sharing. I was working on a similar component called `react-monaco-tree`, which is waay immature right now. I took `https://github.com/BlueMagnificent/monaco-tree https://github.com/BlueMagnificent/monaco-tree` as the base. Are there any list of all these 'file-tree' components for React?

jameskerr 5y ago
Looks like the start of a great component! It's amazing to me how there is not a really good tree component that already exists, considering how ubiquitous the tree is in user interfaces.
- milkers 5y ago
  Yes you are right. I wouldn't start that component if I had seen react-arborist. Since then I am looking for good file tree components. Thank you for the contribution, I will keep looking for the alternatives but in the mean time react-arborist seems like a great choice.

deleted 5y ago

[deleted]