phloxcz/components-tree

Nette Framework Tree UI component – lazy AJAX loading, drag-and-drop with server persistence, keyboard navigation, Bootstrap 5 theme support.

v1.0.1 2026-03-15 17:50 UTC

Requires

• php: ^8.1
• nette/application: ^3.1
• nette/database: ^3.1

Requires (Dev)

• nette/tester: ^2.5
• phpstan/phpstan: ^1.10
• squizlabs/php_codesniffer: ^3.7

MIT

• tree
• bootstrap
• ajax
• nette
• control
• component
• drag-and-drop

README

Nette Framework TreeControl component. Lazy AJAX loading, drag & drop, keyboard navigation, zero hardcoded colors.

composer require phloxcz/components-tree

Quick start

Registrace v config.neon:

extensions:
    tree: Phlox\Components\Tree\DI\TreeExtension

Presenter:

use Phlox\Components\Tree\TreeControl;
use Phlox\Components\Tree\TreeControlFactory;

protected function createComponentCategoryTree(): TreeControl
{
    return $this->treeFactory
        ->create($this->db->table('categories'))
        ->setLabelColumn('name')
        ->setTreeLines()
        ->setDragAndDrop()
        ->setMoveUrl($this->link('move!'))
        ->setUrlPattern('/admin/categories/{id}');
}

Šablona:

{control categoryTree}

Assets:

<link rel="stylesheet" href="vendor/phloxcz/components-tree/assets/tree-control.css">
<script src="vendor/phloxcz/components-tree/assets/tree-control.js" defer></script>

JS events:

document.addEventListener('pt:select', e => {
    const { id, data } = e.detail;
    naja.makeRequest('GET', `/admin/categories/${id}`);
});

document.addEventListener('pt:move', e => {
    const { dragId, targetId, position, rollback } = e.detail;
    // rollback() plně vrátí DOM při chybě
});

Dokumentace

Kompletní dokumentace je v docs/README.md.

Licence

MIT