Element - Nestable

The CElement_Component_Nestable component renders a drag-and-drop sortable nested list. It is commonly used for managing hierarchical data such as menus, categories, or organizational structures.

Add a nestable using addElement('nestable'):

$app = c::app();
$nestable = CElement_Component_Nestable::factory();
$nestable->setDataFromArray([
    ['id' => 1, 'name' => 'Item 1', 'children' => [
        ['id' => 2, 'name' => 'Item 1.1'],
        ['id' => 3, 'name' => 'Item 1.2'],
    ]],
    ['id' => 4, 'name' => 'Item 2'],
]);
$app->add($nestable);

return $app;

Data Sources

From Array

$nestable->setDataFromArray([
    ['id' => 1, 'name' => 'Parent'],
    ['id' => 2, 'name' => 'Child', 'parent_id' => 1],
]);

From Model

$nestable->setDataFromModel(CategoryModel::class, function ($q) {
    $q->orderBy('sort_order');
});

From TreeDB

$nestable->setDataFromTreeDb($treeDb, $parentId);

Display Callback

Customize how each item is rendered:

$nestable->setDisplayCallback(function ($row) {
    return '<span>' . carr::get($row, 'name') . '</span>'
        . ' <small class="text-muted">' . carr::get($row, 'code') . '</small>';
});

Options

Disable Drag and Drop

Use the nestable as a read-only tree display:

$nestable->disableDnd();

Checkboxes

Enable checkboxes for selecting items:

$nestable->setHaveCheckbox(true);