Data Grid
Cuadrícula de datos
Una cuadrícula de datos es una tabla similar a una aplicación. Permite mover, seleccionar, ordenar o editar muchos datos.
| Owner · Enter to edit | State · Enter to change | Due | |
|---|---|---|---|
| Auditoría de tecladoQA-036 | Sol | Review | |
| Estado vacío del checkoutWEB-142 | Maya | Ready | |
| Paleta de comandosAPP-087 | Noah | Review | |
| Panel móvilAPP-104 | Inez | Ready | |
| Recuperación de subidaWEB-153 | Lin | Blocked |
Arrow keys move between cells. Space selects work; Enter edits an owner or changes state.
Un ejemplo real
Una cuadrícula de finanzas admite moverse con el teclado, columnas fijas, selección de filas y edición en el mismo lugar.
Partes principales
- 01Trigger or task context
- 02Primary control surface
- 03Feedback, focus, and dismissal
Úsalo cuando
Úselo cuando los datos de la tabla necesiten los tipos de acciones que se encuentran en una hoja de cálculo.
No lo uses cuando
Nunca agregues la complejidad de un grid ARIA a una tabla que la gente solo lee.
Nombre usado en código
role="grid" 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 datos (Data Grid). User context: Una cuadrícula de finanzas admite moverse con el teclado, columnas fijas, selección de filas y edición en el mismo lugar. Recommended pattern: Cuadrícula de datos (Data Grid). Why it fits: Úselo cuando los datos de la tabla necesiten los tipos de acciones que se encuentran en una hoja de cálculo. Do not use it when: Nunca agregues la complejidad de un grid ARIA a una tabla que la gente solo lee. 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): El estándar cubre únicamente el alcance listado. No elige el estilo visual, la decisión del producto ni el ejemplo de Vibulary. 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 datos (Data Grid) is used now. Definition: Una cuadrícula de datos es una tabla similar a una aplicación. Permite mover, seleccionar, ordenar o editar muchos datos. 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.