{"repo":"jameskerr/react-arborist","free":true,"listed":false,"github":"https://github.com/jameskerr/react-arborist","clone":"git clone https://github.com/jameskerr/react-arborist.git","description":"The complete tree view component for React","language":"TypeScript","stars":3692,"topics":["arborist","react","tree","treeview","treeview-component"],"license":"MIT","category":"ui-components","readme_excerpt":"React Arborist See the Demos The tree view is ubiquitous in software applications. This library provides the React ecosystem with a complete solution to build the equivalent of a VSCode sidebar, Mac Finder, Windows Explorer, or Sketch/Figma layers panel. Here is a Gmail sidebar clone built with react-arborist. Features - Drag and drop sorting - Open/close folders - Inline renaming - Virtualized rendering - Custom styling - Keyboard navigation - Aria attributes - Tree filtering - Selection synchronization - Callbacks (onScroll, onActivate, onSelect) - Controlled or uncontrolled trees Installation Examples Assume our data is this: The Simplest Tree Use all the defaults. The initialData prop makes the tree an uncontrolled component. Create, move, rename, and delete will be handled internally. Demo Customize the Appearance We provide our own dimensions and our own Node component. Demo Control the Tree data Here we use the data prop to make the tree a controlled component. We must handle all the data modifications ourselves using the props below. The onMove index onMove 's index is a pre-removal slot : it counts positions in the destination parent's child list as shown on screen , with the dragged rows still in place. If your handler removes the dragged rows before inserting them — the natural way to reorder an array — every dragged row that started before the drop slot shifts your target one place to the left, so dragging a row to just below itself would jump it past its neighbor","default_branch":null,"files":null,"tree":[],"storefront":"/r/jameskerr","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/jameskerr/react-arborist/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}