Treegrid
Grille arborescente
Un treegrid est un tableau interactif avec des lignes qui peuvent avoir des sous-lignes. Les gens peuvent ouvrir les niveaux de lignes tandis que les cellules restent alignées en colonnes.
Un autre exemple
Un responsable financier compare les départements, les équipes et les centres de coûts dans les colonnes Budget, Réel et Écart. La flèche droite ouvre un département ou entre dans ses cellules. Le fermer supprime les lignes enfants mais garde le focus et les totaux sur la ligne parente.
Parties principales
- 01Lignes hiérarchiques
- 02Cellules de colonne
- 03Métadonnées d'expansion
Utilisez-le lorsque
Utilisez-le uniquement lorsque les gens ont vraiment besoin d'ouvrir des niveaux de lignes et de comparer des colonnes de tableau dans la même tâche.
Ne l'utilisez pas lorsque
Si ses contrôles clavier sont plus difficiles que la tâche, utilisez une option plus simple. Essayez un arbre avec un panneau de détails ou des tableaux imbriqués.
Nom utilisé dans le code
role=treegrid with row aria-level/expanded and gridcell columns Avant d'expédier
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with Grille arborescente (Treegrid). User context: Un responsable financier compare les départements, les équipes et les centres de coûts dans les colonnes Budget, Réel et Écart. La flèche droite ouvre un département ou entre dans ses cellules. Le fermer supprime les lignes enfants mais garde le focus et les totaux sur la ligne parente. Recommended pattern: Grille arborescente (Treegrid). Why it fits: Utilisez-le uniquement lorsque les gens ont vraiment besoin d'ouvrir des niveaux de lignes et de comparer des colonnes de tableau dans la même tâche. Do not use it when: Si ses contrôles clavier sont plus difficiles que la tâche, utilisez une option plus simple. Essayez un arbre avec un panneau de détails ou des tableaux imbriqués. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): C'est officiel pour cette source. D'autres plateformes ou équipes peuvent utiliser le terme d'une autre manière. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Vérifiez cette demande
Review how Grille arborescente (Treegrid) is used now. Definition: Un treegrid est un tableau interactif avec des lignes qui peuvent avoir des sous-lignes. Les gens peuvent ouvrir les niveaux de lignes tandis que les cellules restent alignées en colonnes. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.