How to use the babylonjs-editor.Grid function in babylonjs-editor

// Create layout
        this.layout = new Layout('Code');
        this.layout.panels = [
            { type: 'top', content: '<div id="CODE-BEHAVIOR-TOOLBAR"></div>', size: 30, resizable: false },
            { type: 'left', content: '<div style="width: 100%; height: 100%;" id="CODE-BEHAVIOR-LIST"></div>', size: 250, overflow: 'auto', resizable: true },
            { type: 'main', content: '<div style="width: 100%; height: 100%;" id="CODE-BEHAVIOR-EDITOR"></div>', resizable: true }
        ];
        this.layout.build(div.attr('id'));

        // Add toolbar
        this.toolbar = new Toolbar('CodeToolbar');
        this.toolbar.items = [{ id: 'add', text: 'Add...', caption: 'Add...', img: 'icon-add' }];
        this.toolbar.build('CODE-BEHAVIOR-TOOLBAR');

        // Add grid
        this.grid = new Grid('CodeGrid', {
            toolbarReload: false,
            toolbarSearch: false,
            toolbarEdit: false
        });
        this.grid.columns = [{ field: 'name', caption: 'Name', size: '100%', editable: { type: 'string' } }];
        this.grid.onClick = (id) =&gt; this.selectCode(id[0]);
        this.grid.onAdd = () =&gt; this.add();
        this.grid.onDelete = (ids) =&gt; this.delete(ids);
        this.grid.onChange = (id, value) =&gt; this.change(id, value);
        this.grid.build('CODE-BEHAVIOR-LIST');

        // Add code editor
        await this.createEditor();
        this.template = await Tools.LoadFile('./assets/templates/code.txt', false);

        // Events

private _buildGrid (): void {
        if (this._grid)
            return;
        
        // Configure div
        const div = $('#' + this.divId);
        div.css('width', '100%');
        div.css('height', '100%');

        // Build grid
        this._grid = new Grid('BEHAVIOR-GRAPH-TOOL', {
            header: 'Variables',
            toolbarReload: false,
            toolbarSearch: false,
            toolbarEdit: true
        });
        this._grid.columns = [
            { field: 'name', caption: 'Name', size: '60%', editable: { type: 'string' } },
            { field: 'type', caption: 'Type', size: '20%', editable: { type: 'string' } },
            { field: 'value', caption: 'Value', size: '20%', editable: { type: 'string' } }
        ];
        this._grid.onAdd = () => this._addVariable();
        this._grid.onDelete = (ids) => this._removeVariables(ids);
        this._grid.onEdit = (id) => this._editVariable(id);
        this._grid.build('BEHAVIOR-GRAPH-TOOL');
    }

// Add toolbar
        this.toolbar = new Toolbar('GRAPH-EDITOR-TOOLBAR');
        this.toolbar.items = [
            { id: 'save', text: 'Save', caption: 'Save', img: 'icon-export', },
            { type: 'break' },
            { id: 'play-stop', text: 'Start / Stop', caption: 'Start / Stop', img: 'icon-play-game' },
            //{ type: 'break' },
            //{ id: 'import', text: 'Import from...', caption: 'Import from...', img: 'icon-add' }
        ];
        this.toolbar.onClick = id => this.toolbarClicked(id);
        this.toolbar.right = 'No object selected';
        this.toolbar.build('GRAPH-EDITOR-TOOLBAR');

        // Add grid
        this.grid = new Grid('GRAPH-EDITOR-LIST', {
            toolbarReload: false,
            toolbarSearch: false,
            toolbarEdit: false
        });
        this.grid.columns = [
            { field: 'name', caption: 'Name', size: '80%', editable: { type: 'string' } },
            { field: 'active', caption: 'Active', size: '20%', editable: { type: 'checkbox' } }
        ];
        this.grid.onAdd = () => this.add();
        this.grid.onClick = ids => this.selectGraph(ids[0]);
        this.grid.onDelete = (ids) => this.delete(ids);
        this.grid.onChange = (id, value) => this.change(id, value);
        this.grid.build('GRAPH-EDITOR-LIST');

        // Graph
        System.import('./node_modules/litegraph.js/css/litegraph.css');