Tree View Component Test

Basic Tree View with Static Data

This example uses a static data provider with sample files and folders.

Resizable Tree View

This tree view can be resized by dragging the handle on the right edge.

Keyboard Navigation

The tree view supports full keyboard navigation:

• Arrow Up/Down: Navigate between visible nodes
• Arrow Right: Expand folder or move to first child
• Arrow Left: Collapse folder or move to parent
• Enter/Space: Toggle folder or select file

CRUD Operations

Test create, rename, and delete operations. All events are logged below.

Tip: Select a folder to create items inside it, or create at root level if nothing is selected.

Azure Storage Integration

The tree view can be connected to Azure Blob Storage using the AzureStorageTreeProvider.

import { AzureStorageTreeProvider } from './providers/AzureStorageTreeProvider.js';

const provider = new AzureStorageTreeProvider({
  storageAccount: 'your-storage-account',
  container: 'your-container',
  authMethod: 'quantum-auth',
  allowedExtensions: ['.drawio', '.svg', '.png']
});

const treeView = document.querySelector('qds-tree-view');
treeView.dataProvider = provider;