Sortable Virtual Tree for React | React Sortable Tree

If you’re looking for a sortable, virtual, customizable tree component for React.js, look no further.

React Arborist is a library that provides all the common features for working with trees in React.

You can select one or many nodes to drag and drop into new positions, open and close folders, render an inline form for renaming, efficiently show thousands of items, and provide your own node renderer to control the style.

How to use it:

1. Installation.

# Yarn
$ yarn add react-arborist

# NPM
$ npm i react-arborist

2. This example shows how to create a basic tree view in the app.

const data = {
  id: "The Root",
  children: [{id: "Node A"}, {id: "Node B"}]
}
function App() {
  return (
    <Tree data={data}>
      {Node}
    </Tree>
  );
}
function Node({ ref, styles, data}) {
  return (
    <div ref={ref} style={styles.row}>
      <div style={styles.indent}>
        {data.name}
      </div>
    </div>
  )
}

3. Available tree props.

export interface TreeProps<T> {
  children: NodeRenderer<T>;
  data: T;
  height?: number;
  width?: number;
  rowHeight?: number;
  indent?: number;
  hideRoot?: boolean;
  onToggle?: ToggleHandler;
  onMove?: MoveHandler;
  onEdit?: EditHandler;
  getChildren?: string | ((d: T) => T[]);
  isOpen?: string | ((d: T) => boolean);
  disableDrag?: string | boolean | ((d: T) => boolean);
  disableDrop?: string | boolean | ((d: T) => boolean);
  openByDefault?: boolean;
  className?: string | undefined;
  handle?: Ref<TreeApi<T>>;
  onClick?: MouseEventHandler;
  onContextMenu?: MouseEventHandler;
}

4. Available tree provider props.

export type TreeProviderProps<T> = {
  imperativeHandle: React.Ref<TreeApi<T>> | undefined;
  children: ReactElement;
  height: number;
  indent: number;
  listEl: MutableRefObject<HTMLDivElement | null>;
  onToggle: ToggleHandler;
  onMove: MoveHandler;
  onEdit: EditHandler;
  onClick?: MouseEventHandler;
  onContextMenu?: MouseEventHandler;
  renderer: NodeRenderer<any>;
  rowHeight: number;
  root: Node<T>;
  width: number;
};

Preview:

Download Details:

Author: brimdata

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/brimdata/react-arborist

License: MIT

#react #reactjs