Treegrid
Cuadrícula de árbol
Un treegrid es una tabla interactiva con filas que pueden tener filas hijas. Las personas pueden abrir los niveles de fila mientras las celdas todavía se alinean en columnas.
Otro ejemplo
Un gerente financiero compara departamentos, equipos y centros de costos en las columnas Presupuesto, Real y Variación. La flecha derecha abre un departamento o entra en sus celdas. Cerrarlo elimina las filas secundarias pero mantiene el enfoque y los totales en la fila principal.
Partes principales
- 01Filas jerárquicas
- 02Celdas de columna
- 03metadatos de expansión
Úsalo cuando
Úselo solo cuando las personas realmente necesiten abrir niveles de filas y comparar columnas de tablas en la misma tarea.
No lo uses cuando
Si sus controles de teclado son más difíciles que la tarea, usa una opción más sencilla. Prueba un árbol con un panel de detalles o tablas anidadas.
Nombre usado en código
role=treegrid with row aria-level/expanded and gridcell columns Antes de lanzarlo
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 Cuadrícula de árbol (Treegrid). User context: Un gerente financiero compara departamentos, equipos y centros de costos en las columnas Presupuesto, Real y Variación. La flecha derecha abre un departamento o entra en sus celdas. Cerrarlo elimina las filas secundarias pero mantiene el enfoque y los totales en la fila principal. Recommended pattern: Cuadrícula de árbol (Treegrid). Why it fits: Úselo solo cuando las personas realmente necesiten abrir niveles de filas y comparar columnas de tablas en la misma tarea. Do not use it when: Si sus controles de teclado son más difíciles que la tarea, usa una opción más sencilla. Prueba un árbol con un panel de detalles o tablas anidadas. 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): Es oficial para esa fuente. Otras plataformas o equipos pueden usar el término de otra manera. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how Cuadrícula de árbol (Treegrid) is used now. Definition: Un treegrid es una tabla interactiva con filas que pueden tener filas hijas. Las personas pueden abrir los niveles de fila mientras las celdas todavía se alinean en columnas. 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.