Examples

Basic example

The Finder component requires a tree prop, for example:

const tree = {
  id: "root",
  children: [
    {
      id: "fruits",
      label: "Fruits",
      children: [
        { id: "apple", label: "Apple" }
        // ...
      ]
    },
    {
      id: "vegetables",
      label: "Vegetables",
      children: [
        { id: "bean", label: "Beans" }
        // ...
      ]
    }
  ]
};

Fruits

Vegetables

Apple

Banana

Grape

Lemon

Orange

Selection

You can enable the selection of items with selectable:

<Finder :tree="tree" :selectable="true"></Finder>

All items are then selectable by default, but you can prevent the selection of a given item by setting selectable: false:

{
  id: "vegetables",
  label: "Vegetables",
  selectable: false
}

Fruits

Vegetables

Filtering

You can filter displayed items by defining the filter prop:

<Finder :tree="tree" :filter="filter"></Finder>

Where filter is a Function that takes an item as argument, and should return true if this item must be displayed.

const filter = item => item.id === "apple";

Fruits

Drag and drop

You can enable the drag and drop of items with dragEnabled:

<Finder :tree="tree" :dragEnabled="true"></Finder>

Fruits

Vegetables

You can show handles to drag items with hasDragHandle:

Fruits

Vegetables

If you want to enable the drag of only some items, you can set a function as dragEnabled prop:

const dragEnabled = item => item.movable;

Fruits

Vegetables