github.com/frontend-collective/react-sortable-tree @v2.8.0 sqlite
README
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
Install react-sortable-tree using npm.
# NPM
npm install react-sortable-tree --save
# YARN
yarn 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 context
import SortableTree from 'react-sortable-tree';
// Or you can import the tree without the dnd context as a named export. eg
import { SortableTreeWithoutDndContext as SortableTree } from 'react-sortable-tree';
// Importing from cjs (default)
import SortableTree from 'react-sortable-tree/dist/index.cjs.js';
import SortableTree from 'react-sortable-tree';
// Importing from esm
import SortableTree from 'react-sortable-tree/dist/index.esm.js';
Usage
import React, { Component } from 'react';
import SortableTree from 'react-sortable-tree';
import 'react-sortable-tree/style.css'; // This only needs to be imported once in your app
export default class Tree extends Component {
constructor(props) {
super(props);
this.state = {
treeData: [
{ title: 'Chicken', children: [{ title: 'Egg' }] },
{ title: 'Fish', children: [{ title: 'fingerline' }] },
],
};
}
render() {
return (
<SortableTree
treeData={this.state.treeData}
onChange={treeData => this.setState({ treeData })}
/>
);
}
}
Props
| Prop | Type |
Description
|
| :----------------------------- | :------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | treeData
(required) | object[] | Tree data with the following keys:
title is the primary label for the node.
subtitle is a secondary label for the node.
expanded shows children of the node if true, or hides them if false. Defaults to false.
children is an array of child nodes belonging to the node.
Example: [{title: 'main', subtitle: 'sub'}, { title: 'value2', expanded: true, children: [{ title: 'value3') }] }] |
| 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.
( treeData: object[] ): void
|
| getNodeKey
(recommended) | func | Specify the unique key used to identify each node and generate the path array passed in callbacks. With a setting of getNodeKey={({ node }) => node.id}, for example, in callbacks this will let you easily determine that the node with an id of 35 is (or has just become) a child of the node with an id of 12, which is a child of ... and so on. It uses defaultGetNodeKey by default, which returns the index in the tree (omitting hidden nodes).
({ node: object, treeIndex: number }): string or number
|
| generateNodeProps | func | Generate an object with additional props to be passed to the node renderer. Use this for adding buttons via the buttons key, or additional style / className settings.
({ node: object, path: number[] or string[], treeIndex: number, lowerSiblingCounts: number[], isSearchMatch: bool, isSearchFocus: bool }): object
|
| onMoveNode | func | Called after node move operation.
({ treeData: object[], node: object, nextParentNode: object, prevPath: number[] or string[], prevTreeIndex: number, nextPath: number[] or string[], nextTreeIndex: number }): void
|
| onVisibilityToggle | func | Called after children nodes collapsed or expanded.
({ treeData: object[], node: object, expanded: bool, path: number[] or string[] }): void
|
| onDragStateChanged | func | Called when a drag is initiated or ended.
({ isDragging: bool, draggedNode: object }): void
|
| maxDepth | number | Maximum depth nodes can be inserted at. Defaults to infinite. |
| rowDirection | string | Adds row direction support if set to 'rtl' Defaults to 'ltr'. |
| canDrag | func or bool | Return false from callback to prevent node from dragging, by hiding the drag handle. Set prop to false to disable dragging on all nodes. Defaults to true.
({ node: object, path: number[] or string[], treeIndex: number, lowerSiblingCounts: number[], isSearchMatch: bool, isSearchFocus: bool }): bool
|
| canDrop | func | Return false to prevent node from dropping in the given location.
({ node: object, prevPath: number[] or string[], prevParent: object, prevTreeIndex: number, nextPath: number[] or string[], nextParent: object, nextTreeIndex: number }): bool
|
| canNodeHaveChildren | func | Function to determine whether a node can have children, useful for preventing hover preview when you have a canDrop condition. Default is set to a function that returns true. Functions should be of type (node): bool. |
| 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 defaultSearchMethod, which uses the searchQuery string to search for nodes with matching title or subtitle values. NOTE: Changing searchMethod will not update the search, but changing the searchQuery will.
`(
Core symbols most depended-on inside this repo
changeNodeAtPathShape
Languages
Modules by API surface
Dependencies from manifests, versioned
For agents
$ claude mcp add react-sortable-tree \
-- python -m otcore.mcp_server <graph>