Treegrid
Grade de árvore
Um treegrid é uma tabela interativa com linhas que podem ter linhas filhas. As pessoas podem abrir os níveis das linhas enquanto as células ainda se alinham em colunas.
Outro exemplo
Um gerente financeiro compara departamentos, equipes e centros de custo nas colunas Orçado, Real e Variação. A seta para a direita abre um departamento ou entra em suas células. Fechar o departamento remove as linhas filhas, mas mantém o foco e os totais na linha principal.
Partes principais
- 01Linhas hierárquicas
- 02Células da coluna
- 03Metadados de expansão
Use-o quando
Use-o apenas quando as pessoas realmente precisarem abrir níveis de linha e comparar colunas da tabela na mesma tarefa.
Não o use quando
Se os controles do teclado forem mais difíceis do que a tarefa, use uma opção mais simples. Experimente uma árvore com um painel de detalhes ou tabelas aninhadas.
Nome usado no código
role=treegrid with row aria-level/expanded and gridcell columns Antes de lançar
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 Grade de árvore (Treegrid). User context: Um gerente financeiro compara departamentos, equipes e centros de custo nas colunas Orçado, Real e Variação. A seta para a direita abre um departamento ou entra em suas células. Fechar o departamento remove as linhas filhas, mas mantém o foco e os totais na linha principal. Recommended pattern: Grade de árvore (Treegrid). Why it fits: Use-o apenas quando as pessoas realmente precisarem abrir níveis de linha e comparar colunas da tabela na mesma tarefa. Do not use it when: Se os controles do teclado forem mais difíceis do que a tarefa, use uma opção mais simples. Experimente uma árvore com um painel de detalhes ou tabelas aninhadas. 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): É oficial para essa fonte. Outras plataformas ou equipes podem usar o termo de outra maneira. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Conferir este pedido
Review how Grade de árvore (Treegrid) is used now. Definition: Um treegrid é uma tabela interativa com linhas que podem ter linhas filhas. As pessoas podem abrir os níveis das linhas enquanto as células ainda se alinham em colunas. 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.