@0x30-ch/collection-tree

Strapi Collection Tree Plugin

A powerful Strapi 5 plugin that enables hierarchical tree structures for your collections with drag-and-drop sorting functionality. Perfect for managing categories, menus, nested content, and any data that benefits from hierarchical organization.

✨ Features

• 🌳 Hierarchical Tree Structures: Transform any collection into a nested tree structure
• 🖱️ Drag & Drop Interface: Intuitive drag-and-drop reordering with visual feedback
• 🔧 Configurable Field Names: Customize tree field names to match your schema
• ⚡ Performance Optimized: Efficient nested set model implementation
• 🔄 Real-time Updates: Live tree structure updates with save confirmation

🚀 Installation

npm install @0x30-ch/collection-tree
# or
yarn add @0x30-ch/collection-tree
# or
pnpm add @0x30-ch/collection-tree

🔧 Configuration

1. Configure Collections

Navigate to Settings > Collection Tree in your Strapi admin panel to:

• Select Collections: Choose which content types should have tree functionality
• Customize Field Names: Configure the names of tree-related fields
• Validate Settings: Ensure proper configuration before applying

The plugin automatically adds these fields to enabled collections:

• lft - Left boundary for nested set model
• rght - Right boundary for nested set model
• parent - Parent relationship field
• children - Children relationship field (virtual)
• tree - Tree display path field

2. Restart Your Server

After configuration, restart your Strapi server to apply the schema changes.

📖 Usage

Admin Interface

• Navigate to the Collection Tree page in your admin panel
• Select the collection you want to organize
• Choose a locale (if i18n is enabled)
• Drag & Drop items to reorganize the tree structure
• Save your changes to persist the new structure

Tree Structure Features

• Unlimited Nesting: Create deep hierarchical structures
• Visual Indicators: Expand/collapse controls for better navigation
• Real-time Preview: See changes immediately while dragging
• Unsaved Changes Warning: Never lose your work with save reminders

🔌 API Usage

Query Sorted Data

Retrieve your hierarchically organized data using the nested set left boundary:

// Get all items in tree order
const treeData = await strapi.entityService.findMany('api::category.category', {
  sort: { lft: 'asc' }
});

REST API Examples

# Get tree-ordered categories
GET /api/categories?sort=lft:ASC

# Filter by parent
GET /api/categories?sort=lft:ASC&filters[parent_document_id][id][$eq]=1

🏗️ Development

Prerequisites

• Node.js >= 18.0.0
• Strapi 5.x
• TypeScript support

Setup

# Clone and install dependencies
git clone <repository-url>
cd strapi-collection-tree
pnpm install

# Start development
pnpm dev

# Build plugin
pnpm build

# Type checking
pnpm test:ts:front  # Frontend types
pnpm test:ts:back   # Backend types

Project Structure

packages/collection-tree/
├── admin/                 # Frontend React components
│   ├── src/
│   │   ├── components/    # UI components (SortElement, SortNav)
│   │   ├── pages/         # Admin pages (Settings, SortPage)
│   │   ├── api/           # API client functions
│   │   ├── translations/  # i18n files
│   │   ├── styles/        # CSS styles
│   │   └── types/         # TypeScript definitions
│   └── tsconfig.json
├── server/                # Backend logic
│   ├── src/
│   │   ├── controllers/   # API controllers
│   │   ├── services/      # Business logic
│   │   ├── routes/        # Route definitions
│   │   ├── utils/         # Tree algorithms & utilities
│   │   └── config/        # Default configurations
│   └── tsconfig.json
└── package.json

🔧 Advanced Configuration

Nested Set Model

The plugin uses the Nested Set Model for efficient tree operations:

• Left/Right Boundaries: Enable fast ancestor/descendant queries
• Tree Path: Provides readable hierarchy representation
• Parent Relations: Maintain direct parent-child relationships

🤝 Contributing

• Fork the repository
• Create a feature branch (git checkout -b feature/amazing-feature)
• Commit your changes (git commit -m 'Add amazing feature')
• Push to the branch (git push origin feature/amazing-feature)
• Open a Pull Request

Development Guidelines

• Follow TypeScript best practices
• Use Strapi Design System v2 components
• Write comprehensive tests
• Follow existing code patterns
• Update documentation

📄 License

MIT License - see LICENSE file for details.

🙏 Acknowledgments

• Strapi - For the excellent CMS framework
• SortableJS - For drag-and-drop functionality
• Nested Set Model - For efficient tree structure implementation
• 0x30 - Original plugin author

📞 Support

• 📋 Issues
• 📖 Documentation
• 💬 Community

Made with ❤️ for the Strapi community