Hi everyone,
I’m developing an app to manage a large set of requirements, and I’m looking for advice on the best way to implement a Hierarchical List or Tree Structure. Each requirement has a parent (main section) and, optionally, a grandparent (subsection). While the ability to go multiple levels deep would be great, it’s not essential for this particular project.
Key Considerations:
- Screen real estate: To keep the UI clean and uncluttered, I want to avoid using extra columns to visualize the main section and subsection for each item. Instead, I’d like to use a Hierarchical List for better organization and clarity. (Screenshots attached below for reference.)
Requirements:
- Each item should have a parent, and potentially a grandparent, as well as siblings and an index.
- When a new item is added, it must automatically:
- Be assigned a parent (unless it’s a main section).
- Receive the next available index within its parent section.
- When an item is removed, the indexes of the remaining items should automatically recalculate.
- Items should be re-assignable to a different parent, with indexes recalculating accordingly.
- Items should be reorderable (moved up or down) within their sibling list.
Attempts So Far:
- Approach 1:
This method meets all the requirements above but has significant performance issues. It’s slow to load and heavily reliant on calculated rows, making maintenance more complex. - Approach 2:
This system is much faster but doesn’t support automatic recalculation of indexes when items are removed or reassigned to a new parent.
What I Need Help With: Before spending more time experimenting, I’d love to hear how you experts might tackle this challenge. Would a JavaScript column be a potential solution for this use case? Should I migrate to SQL? Or has anyone successfully implemented a similar setup in Glide that balances performance and functionality?
Any advice, best practices, or examples would be greatly appreciated. Thanks so much for your help!