antd-nestable

antd-nestable

Drag & drop hierarchical list made as a react component for Ant Design

Project resource

https://github.com/primetwig/react-nestable

Install

yarn add antd-nestable

Usage

import Nestable from 'antd-nestable';

const items = [
  { id: 0, text: 'Andy' },
  {
    id: 1, text: 'Harry',
    children: [
      { id: 2, text: 'David' }
    ]
  },
  { id: 3, text: 'Lisa' }
];

const renderItem = ({ item }) => item.text;

const Demo = () => (
  <Nestable items={items} renderItem={renderItem} />
);

Props

Property	Type	Default	Description
className	string	undefined	Extra class name which can be passed to a root element.
items	array	[]	Array of items. Every item must be of shape { id: @uniq }.
threshold	int	30	Amount of pixels which mouse should move horizontally before increasing/decreasing level (nesting) of current element.
maxDepth	int	10	Maximum available level of nesting.
collapsed	boolean	false	Are groups collapsed by default.
group	string or int	random string	Different group numbers may be passed if you have more than one nestable component on a page and want some extra styles for portal instances.
handler	component		If you pass react component here, you may use it in your render method.
childrenProp	string	"children"	Optional name of property with children.
renderItem	function	({ item, index }) => item.toString()	Function for rendering every item. Has a single parameter with keys: item - item from your array, index - index of the item, collapseIcon - icon for items with children (allows you to collapse group), handler - component which you have passed via the same property, but covered with some additional events.
renderCollapseIcon	function	({ isCollapsed }) => <DefaultIcon />	Function for rendering collapse icon. Has a single parameter with keys: isCollapsed - boolean, true if this group has children and collapsed.
onChange	function	() => {}	Callback which has two parameters: items - new array after position was changed, item - item which has been moved.
confirmChange	function	() => true	Callback which has two parameters: dragItem - item which is being dragged, destinationParent - item where dragItem is about to land. Let function return false if this movement should not happen.

Public methods

Method	Accepts	Description
collapse	string or array	"NONE" - expand all groups; "ALL" - collapse all groups; [] - collapse all groups with ids from given array

useRef

You can use ref control the component.

Example:

const nestableRef = useRef<{ collapse: (type: string | number[]) => void }>();
const collapse = (collapseCase: number) => {
  if (nestableRef.current) {
    switch (collapseCase) {
      case 0:
        nestableRef.current?.collapse('NONE');
        break;
      case 1:
        nestableRef.current?.collapse('ALL');
        break;
      case 2:
        nestableRef.current?.collapse([1]);
        break;
      default:
    }
  }
};
// Other Code
return (
  <Nestable
    ref={nestableRef}
    items={items}
    renderItem={renderItem}
    onChange={(value: []) => {
      console.log(value);
    }}
  />
)

Styles

To prevent overwriting the custom styles to antd, antd-nestable does not import the style files of components.