Sortable List with Drag & Drop

Home
Collections
About Us
My Account

Usage

'use client';
 
import {
  DragAndDropSortableList,
  DragAndDropSortableItem,
} from '@/components/drag&drop/sortable-list/list';

export const ExampleComponent = () => {
  const data = [
    {
      id: 'Home',
      children: [],
    },
    {
      id: 'Collections',
      children: [
        { id: 'Spring', children: [] },
        { id: 'Summer', children: [] },
        { id: 'Fall', children: [] },
        { id: 'Winter', children: [] },
      ],
    },
    {
      id: 'About Us',
      children: [],
    },
    {
      id: 'My Account',
      children: [
        { id: 'Addresses', children: [] },
        { id: 'Order History', children: [] },
      ],
    },
  ];
 
  return (
    <DragAndDropSortableList
      componentItem={data => {
        return <DragAndDropSortableItem>{data.id}</DragAndDropSortableItem>;
      }}
      data={data}
    />
  );
};

With actions

export const ExampleComponent = () => {
  return (
    <DragAndDropSortableList
      componentItem={data => {
        return (
          <DragAndDropSortableItem

            actions={

              <>

                <Button>Edit</Button>

                <Button>Delete</Button>

              </>

            }
          >
            {data.id}
          </DragAndDropSortableItem>
        );
      }}
      data={data}
    />
  );
};

API Reference

Prop	Type	Default
`componentItem`	`(data: any, parentId: string \| number \| null) => ReactNode`	-
`data`	`any[]`	-
`maxDepth`	`number`	-
`onCollapse`	`(props: { id: string \| number; isOpen: boolean }) => void`	-
`onDragEnd`	`(props: { id: string \| number; parentId: string \| number \| null; indexToMove: number; }) => void`	-

Sortable List with Drag & Drop

Usage

With actions

API Reference

On this page