Repository files navigation

This library is not actively maintained.Please find and discuss alternatives here.

A React component for Drag-and-drop sortable representation of hierarchical data. Checkout theStorybook for a demonstration of some basic and advanced features.

• Getting Started
• Usage
• Props
• Data Helpers
• Themes
• Browser Compatibility
• Troubleshooting
• Contributing

Installreact-sortable-tree using npm.

# NPMnpm install react-sortable-tree --save# YARNyarn add react-sortable-tree

ES6 and CommonJS builds are available with each distribution.For example:

// This only needs to be done once; probably during your application's bootstrapping process.import'react-sortable-tree/style.css';// You can import the default tree with dnd contextimportSortableTreefrom'react-sortable-tree';// Or you can import the tree without the dnd context as a named export. egimport{SortableTreeWithoutDndContextasSortableTree}from'react-sortable-tree';// Importing from cjs (default)importSortableTreefrom'react-sortable-tree/dist/index.cjs.js';importSortableTreefrom'react-sortable-tree';// Importing from esmimportSortableTreefrom'react-sortable-tree/dist/index.esm.js';

importReact,{Component}from'react';importSortableTreefrom'react-sortable-tree';import'react-sortable-tree/style.css';// This only needs to be imported once in your appexportdefaultclassTreeextendsComponent{constructor(props){super(props);this.state={treeData:[{title:'Chicken',children:[{title:'Egg'}]},{title:'Fish',children:[{title:'fingerline'}]},],};}render(){return(<divstyle={{height:400}}><SortableTreetreeData={this.state.treeData}onChange={treeData=>this.setState({ treeData})}/></div>);}}

Need a hand turning your flat data into nested tree data?Want to perform add/remove operations on the tree data without creating your own recursive function?Check out the helper functions exported fromtree-data-utils.js.

• getTreeFromFlatData: Convert flat data (like that from a database) into nested tree data.
• getFlatDataFromTree: Convert tree data back to flat data.
• addNodeUnderParent: Add a node under the parent node at the given path.
• removeNode: For a given path, get the node at that path, treeIndex, and the treeData with that node removed.
• removeNodeAtPath: For a given path, remove the node and return the treeData.
• changeNodeAtPath: Modify the node object at the given path.
• map: Perform a change on every node in the tree.
• walk: Visit every node in the tree in order.
• getDescendantCount: Count how many descendants this node has.
• getVisibleNodeCount: Count how many visible descendants this node has.
• getVisibleNodeInfoAtIndex: Get the th visible node in the tree data.
• toggleExpandedForAll: Expand or close every node in the tree.
• getNodeAtPath: Get the node at the input path.
• insertNode: Insert the input node at the specified depth and minimumTreeIndex.
• find: Find nodes matching a search query in the tree.
• isDescendant: Check if a node is a descendant of another node.
• getDepth: Get the longest path in the tree.

Using thetheme prop along with an imported theme module, you can easily override the default appearance with another standard one.

File Explorer	Full Node Drag	Minimalistic theme inspired from MATERIAL UI
react-sortable-tree-theme-file-explorer	react-sortable-tree-theme-full-node-drag	react-sortable-tree-theme-minimal
Github |NPM	Github |NPM	Github |NPM

Help Wanted - As the themes feature has just been enabled, there are very few (onlytwo at the time of this writing) theme modules available. If you've customized the appearance of your tree to be especially cool or easy to use, I would be happy to feature it in this readme with a link to the Github repo and NPM page if you convert it to a theme. You can use myfile explorer theme repo as a template to plug in your own stuff.

This issue may be related to an ongoing incompatibility between UglifyJS and Webpack's behavior. See an explanation atcreate-react-app#2376.

The simplest way to mitigate this issue is by addingcomparisons: false to your Uglify config as seen here:https://github.com/facebookincubator/create-react-app/pull/2379/files

react-dnd only allows for one DragDropContext at a time (see:react-dnd/react-dnd#186). To get around this, you can import the context-less tree component viaSortableTreeWithoutDndContext.

// beforeimportSortableTreefrom'react-sortable-tree';// afterimport{SortableTreeWithoutDndContextasSortableTree}from'react-sortable-tree';

Please read theCode of Conduct. I actively welcome pull requests :)

After cloning the repository and runningyarn install inside, you can use the following commands to develop and build the project.

# Starts a webpack dev server that hosts a demo page with the component.# It uses react-hot-loader so changes are reflected on save.yarn start# Start the storybook, which has several different examples to play with.# Also hot-reloaded.yarn run storybook# Runs the library testsyarntest# Lints the code with eslintyarn run lint# Lints and builds the code, placing the result in the dist directory.# This build is necessary to reflect changes if you're#  `npm link`-ed to this repository from another local project.yarn run build

Pull requests are welcome!

MIT