({ id: hostKey, name: hosts[hostKey].name, icon: 'server', children: Object.keys(connection?.databases || {}).sort().map(dbKey => ({ id: dbKey, name: dbKey, icon: 'db', count: Object.keys(connection.databases[dbKey].collections || {}).length || '', children: Object.keys(connection.databases[dbKey].collections).sort().map(collKey => ({ id: collKey, name: collKey, icon: 'list', menu: buildMenu(hostKey, dbKey, collKey), })) || [], menu: buildMenu(hostKey, dbKey), })), }))} actions={[ { icon: 'reload', fn: reload }, { icon: '+', fn: evt => contextMenu.show(evt, buildMenu(activeHostKey, activeDbKey, activeCollKey, 'new')) }, { icon: 'edit', fn: evt => contextMenu.show(evt, buildMenu(activeHostKey, activeDbKey, activeCollKey, 'edit')), disabled: !activeHostKey }, { icon: '-', fn: evt => contextMenu.show(evt, buildMenu(activeHostKey, activeDbKey, activeCollKey, 'drop')), disabled: !activeDbKey }, ]} bind:activePath={activeGridPath} on:select={e => { const key = e.detail.itemKey; switch (e.detail?.level) { case 0: return openConnection(key); case 1: return openDatabase(key); case 2: return openCollection(key); } }} />