Tree component

[ibelar]

Implementation of PrimeVue component: Tree

Since PrimeVue 4.0 compatibility with TailwindCss is out-of-the-box, Fohn-Ui will start integrating some of their Vue Ui component.

Features:

• support single, multiple or checkbox selection mode;
• server callback when node is select / deselect;
• user selection value can be retrieve/restore;
• Html Template specific to each node type;
• Apply filter on Tree by field;
• Collapsable / Expandable

More info on: PrimeVue

Usage

$fileModel = new File(Data::db());
$tree = Tree::addTo(Ui::layout());

$tree->setNodes($fileModel->getFilesHierarchy());
$tree->setSelectionMode('checkbox') // 'single' or 'multiple' are also supported.
    ->setHeight('600px')
    ->setFilter(['label', 'type'], 'lenient', 'Search file');

$tree->onNodeSelected(static function ($tree, $key) {
    return JsToast::notify('node selected', $key);
});

Preview

Note

• require fonh-js v.1.8.0
• require fohn-css v.1.4.0