Nested Sortable

This is a small library used for creating a sortable nested list.

NPM package

@nuttrtools/nested-sortable

Screenshot

Usage

nested-sortable/src/App.tsx

Line 31 in f78a841

<NestedSortable defaultItems={items} collapsible onOrderChange={(newItems) => console.log(newItems)} itemStyle={itemStyle}/>

Props

Item Style (CSSProperties)

Used to style list items

nested-sortable/src/App.tsx

Lines 7 to 9 in f78a841

	const itemStyle: CSSProperties = {
	padding: 0
	}

Collapsible (Boolean)

used to enable the collapsible option

Default Items (TreeItem[])

Used to pass the items in the sortable list

Structure:

nested-sortable/src/App.tsx

Lines 11 to 27 in f78a841

	const items: TreeItems = [
	{
	id: 'id1',
	name: 'Home',
	children: [],
	},
	{
	id: 'id2',
	name: 'Collections',
	children: [
	{id: 'id3', name: 'Spring', children: []},
	{id: 'id4', name: 'Summer', children: []},
	{id: 'id5', name: 'Fall', children: []},
	{id: 'id6', name: 'Winter', children: []},
	],
	},
	];

Indicator (Boolean)

Used to add a drop indicator

Indentation Width (Number)

Specify indentation for the nested components.

Default is 50

Removable (Boolean)

Specify whether the removed feature is required or not.

Default false

*onOrderChange (Function)

The function triggers when the given list of items changes (either rearranged or removed)

Start demo

git clone https://github.com/nuttrtools/nested-sortable
cd nested-sortable && npm install
npm run dev

Storybook

https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/story/examples-tree-sortable--all-features