DataTables Editor jsTree field type example.

editor.jsTree.js

'use strict';

if (!$.fn.dataTable.ext.editorFields) {
    $.fn.dataTable.ext.editorFields = {};
}

let _fieldTypes = $.fn.dataTable.Editor ?
    $.fn.dataTable.Editor.fieldTypes :
    $.fn.dataTable.ext.editorFields;

require('jstree');

_fieldTypes.jsTree = {
    create(conf) {
        conf._div = $('<div />');
        conf._searchForm = $('<div class="input-group mb-1" />');
        conf._div.append(conf._searchForm);

        conf._searchForm.prepend(
            '<div class="input-group-prepend">' +
            '<span class="input-group-text">' +
            '<i class="fa fa-fw fa-search"></i>' +
            '</span>' +
            '</div>'
        );
        conf._search = $('<input class="form-control form-control-sm" placeholder="Enter search keyword..." />').appendTo(conf._searchForm);
        conf._searchForm.append(
            '<div class="input-group-append">' +
            '<button class="btn btn-sm btn-primary btn-clear">' +
            '<i class="fa fa-fw fa-undo"></i>' +
            '</button>' +
            '<button class="btn btn-sm btn-primary btn-select-all">' +
            '<i class="fa fa-fw fa-check-square"></i>' +
            '</button>' +
            '<button class="btn btn-sm btn-primary btn-deselect-all">' +
            '<i class="fa fa-fw fa-square"></i>' +
            '</button>' +
            '</button>'
        );

        conf._searchForm.on('click', '.btn-clear', () => {
            conf._search.val('');
            conf._tree.jstree('close_all');
            conf._tree.jstree('clear_search');
        });
        conf._searchForm.on('click', '.btn-select-all', () => {
            conf._search.val('');
            conf._tree.jstree('select_all');
        });
        conf._searchForm.on('click', '.btn-deselect-all', () => {
            conf._search.val('');
            conf._tree.jstree('deselect_all');
        });

        conf._tree = $('<div />')
            .attr($.extend({
                id: $.fn.dataTable.Editor.safeId(conf.id)
            }, conf.attr || {}));

        conf._div.append(conf._tree);

        conf._to = false;
        conf._search.on('keyup', () => {
            if (conf._to) {
                clearTimeout(conf._to);
            }
            conf._to = setTimeout(function () {
                let v = conf._search.val();
                conf._tree.jstree('search', v);
            }, 250);
        });

        let options = $.extend({
            core: {
                data: conf.options,
            },
            search: {
                fuzzy: false,
                show_only_matches: true,
                search_leaves_only: true,
                close_opened_onclear: true
            },
            plugins: ["checkbox", "wholerow", "search"]
        }, conf.opts);

        conf._tree.jstree(options);

        return conf._div;
    },

    get(conf) {
        return conf._tree.jstree('get_selected');
    },

    set(conf, val) {
        conf._tree.jstree('deselect_all');

        if ($.isArray(val)) {
            val.forEach((v) => conf._tree.jstree('select_node', v))
        }
    },

    enable(conf) {
        $(conf._tree).removeAttr('disabled');
    },

    disable(conf) {
        $(conf._tree).attr('disabled', 'disabled');
    },

    update(conf, data) {

    },

    focus(conf) {

    },

    owns(conf, node) {
        return true;
    },

    canReturnSubmit() {
        return false;
    }
};

JSTreeField.php

<?php

namespace App\Editor\Fields;

use Yajra\DataTables\Html\Editor\Fields\Field;

class JSTreeField extends Field
{
    protected $type = 'jsTree';
}

Permission.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Collection;
use Illuminate\Support\Str;
use Yajra\Acl\Models\Permission as AclPermission;
use Yajra\Auditable\AuditableTrait;

/**
 * @property \Illuminate\Database\Eloquent\Collection roles
 */
class Permission extends AclPermission
{
    use AuditableTrait;

    protected $fillable = [
        'slug',
        'resource',
        'name',
        'system',
    ];

    public static function jsTree()
    {
        $groups = static::query()->orderBy('resource')->orderBy('name')->get()->groupBy('resource');

        $tree = [];
        $groups->each(function (\Illuminate\Support\Collection $items, $group) use (&$tree) {
            $tree[] = [
                'id' => $group,
                'text' => $group,
                'children' => $items->map(function ($item) {
                    return [
                        'id' => $item->id,
                        'text' => $item->name,
                    ];
                }),
            ];
        });

        return $tree;
    }
}

RolesDataTableHtml.php

    public function html()
    {
        return $this->builder()
            ->columns($this->getColumns())
            ->minifiedAjax()
            ->orderBy(2)
            ->scrollY('50vh')
            ->responsive(false)
            ->selectStyleOS()
            ->buttons([
              Button::make('create')->editor('editor'),
              Button::make('edit')->editor('editor'),
              Button::make('remove')->editor('editor'),
            ])
            ->editors(
                Editor::make()
                    ->fields([
                        Fields\Text::make('name'),
                        Fields\Text::make('slug'),
                        JSTreeField::make('permissions[].id')
                            ->label('Permissions')
                            ->options(Permission::jsTree()),
                    ])
            );
    }