SKILL.md
Implementing Dropdown Tree
The Dropdown Tree component displays hierarchical data in a collapsible tree structure within a dropdown interface. It combines tree navigation with dropdown accessibility, supporting multi-selection via checkboxes, lazy loading for large datasets, comprehensive customization through templates and events, filtering, and full accessibility with RTL and localization support.
When to Use This Skill
Use Dropdown Tree immediately when you need to:
- Display hierarchical data - Show nested categories, organizational structures, file trees, or department hierarchies
- Enable multi-selection - Allow users to select multiple items with checkbox support or keyboard modifiers
- Support lazy loading - Optimize performance with large datasets by loading children on demand
- Customize display - Use templates to format items, headers, footers, selected values, or error states
- Implement filtering - Enable search functionality with configurable filter types (StartsWith, EndsWith, Contains)
- Ensure accessibility - Provide WAI-ARIA compliance, keyboard navigation, and screen reader support
- Support multiple languages - Localize UI with customizable keys and RTL support
- Bind remote data - Integrate with OData, OData V4, Web APIs, or other remote data services
- Handle complex selection logic - Use events, auto-check hierarchy, or selective node disabling