frontend-collective / react-sortable-tree

Note on maintenance This library is not actively maintained. Please find and discuss alternatives here. React Sortable Tree > A React component for Drag-and-drop sortable representation of hierarchical data. Checkout the Storybook for a demonstration of some basic and advanced features. Table of Contents • Getting Started • Usage • Props • Data Helpers • Themes • Browser Compatibility • Troubleshooting • Contributing Getting started Install using npm. ES6 and CommonJS builds are available with each distribution. For example: Usage Props | Prop | Type | Description | | :----------------------------- | :------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | treeData _(required)_ | object[] | Tree data with the following keys: is the primary label for the node. is a secondary label for the node. shows children of the node if true, or hides them if false. Defaults to false. is an array of child nodes belonging to the node. **Example**: | | onChange _(required)_ | func | Called whenever tree data changed. Just like with React input elements, you have to update your own component's data to see the changes reflected. | | getNodeKey _(recommended)_ | func | Specify the unique key used to identify each node and generate the array passed in callbacks. With a setting of , for example, in callbacks this will let you easily determine that the node with an of is (or has just become) a child of the node with an of , which is a child of ... and so on. It uses by default, which returns the index in the tree (omitting hidden nodes). | | generateNodeProps | func | Generate an object with additional props to be passed to the node renderer. Use this for adding buttons via the key, or additional / settings. | | onMoveNode | func | Called after node move operation. | | onVisibilityToggle | func | Called after children nodes collapsed or expanded. | | onDragStateChanged | func | Called when a drag is initiated or ended. | | maxDepth | number | Maximum depth nodes can be inserted at. Defaults to infinite. | | rowDirection | string | Adds row direction support if set to Defaults to . | | canDrag | func or bool | Return false from callback to prevent node from dragging, by hiding the drag handle. Set prop to to disable dragging on all nodes. Defaults to . | | canDrop | func | Return false to prevent node from dropping in the given location. | | canNodeHaveChildren | func | Function to determine whether a node can have children, useful for preventing hover preview when you have a condition. Default is set to a function that returns . Functions should be of type . | | theme | object | Set an all-in-one packaged appearance for the tree. See the Themes section for more information. | | searchMethod | func | The method used to search nodes. Defaults to , which uses the string to search for nodes with matching or values. NOTE: Changing will not update the search, but changing the will. | | searchQuery | string or any | Used by the to highlight and scroll to matched nodes. Should be a string for the default , but can be anything when using a custom search. Defaults to . | | searchFocusOffset | number | Outline the th node and scroll to it. | | onlyExpandSearchedNodes | boolean | Only expand the nodes that match searches. Collapses all other nodes. Defaults to . | | searchFinishCallback | func | Get the nodes that match the search criteria. Used for counting total matches, etc. | | dndType | string | String value used by react-dnd (see overview at the link) for dropTargets and dragSources types. If not set explicitly, a default value is applied by react-sortable-tree for you for its internal use. **NOTE:** Must be explicitly set and the same value used in order for correct functioning of external nodes | | shouldCopyOnOutsideDrop | func or bool | Return true, or a callback returning true, and dropping nodes to react-dnd drop targets outside of the tree will not remove them from the tree. Defaults to . | | reactVirtualizedListProps | object | Custom properties to hand to the internal react-virtualized List | | style | object | Style applied to the container wrapping the tree (style defaults to ) | | innerStyle | object | Style applied to the inner, scrollable container (for padd _...truncated for preview_