plotly / plotly/dash

Dash editable DataTable issues

Abierto
#2,018 3 comentarios 4 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

bug dash-data-table P3
Lenguaje dominante
Python
Estrellas
24.4k
Forks
2.3k
Merge medio
2 d 7 h
PR fusionados (30 d)
13

Descripción

Describe your context

dash                          2.3.1
dash-core-components          2.0.0
dash-html-components          2.0.0
dash-table                    5.0.0

Describe the bug

The editable datatable could be really great for a data entry tool, but there are a number of inconsistencies in the behavior that are making it very tough to use in practice.

First up, the behavior of the enter key is inconsistent in the bottom row (or tab in the rightmost column). Normally, when a cell becomes active and you begin to type, it clears the contents allowing you to enter a new value. Then, the enter key commits the change, and moves the active cell down 1. However, in the last row enter commits the change but then doesn't move, and importantly doesn't re-activate the cell such that if you type again, it appends to the existing value instead of clearing it first as it does normally.

I'm not familiar with typescript at all, but it seems like a quick and dirty fix for this particular issue would be to check if the nextCell is equal to active_cell and then set whatever flag indicates that the cell has newly become active before line 620 below. Perhaps that would be better accomplished inside the setProps function?
https://github.com/plotly/dash/blob/693b62cc68701628b4836fc80f6306af5ae50a9b/components/dash-table/src/dash-table/components/ControlledTable/index.tsx#L612-L628

Alternately, changing the behavior of the enter key (and tab) to mimic the behavior when a range of cells is selected would be a good solution. When a range of cells is selected, enter in the bottom row of the selection goes to the top row of the next column. I would argue that with no selection, the table should behave the same way (i understand Excel doesn't behave like that, but it effectively has infinite rows...).

Another related issue, is that the behavior of the del or backspace key is inconsistent. The element's data is cleared immediately (which is different from any other entry), but it is still displayed in the active cell as if it is an entry until the enter key is pressed (at which point it clears). This is the most obvious when a range is selected, the range clears except for the active cell immediately. Things get really confusing if you begin to edit a cell, then use del or backspace then enter. Again, it doesn't affect the entry, and if there was a value in the cell it clears it immediately. But, if there wasnt a value in the cell initially, on enter, it now commits the entry (which i dont want since i just tried to delete it). So there is no clear or consistent way to correct a typo, you have to commit a bad change, then go back and edit it again.

The del key should clear the current entry, backspace should clear the last character of the current entry, and the underlying data should not be modified until the active_cell changes to be consistent with the other forms of entry.

Also, as a feature request, i would like escape to first clear a selection (if its larger than the active_cell) and then on a second press clear the active_cell without committing changes. Its frustrating that there is no built in way to clear the 'active_cell' once there is one.

I tried to make a gif to demonstrate, but struggled to get keyboard input with the low frame rate, all of these issues are reproducible in the help documentation. I know the descriptions above are hard to follow, so try editing a cell twice in the bottom row using enter to confirm the change. Then try to correct a typo in an entry using the backspace. Those will highlight the biggest issues in my opinion.
https://dash.plotly.com/datatable/editable

I believe the following are related.
#1800
plotly/dash-table#427

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza en components/dash-table/src/dash-table/components/ControlledTable/index.tsx alrededor de las líneas 612-628 y reproduce después los comportamientos del teclado en la documentación de DataTable editable en dash.plotly.com/datatable/editable. Compara Enter en la fila inferior y Tab en la columna más a la derecha con la navegación normal, y prueba la eliminación con Del, Backspace y Escape. Se considera terminado cuando la edición, la navegación, la eliminación, el borrado de la selección y la cancelación se comporten de forma coherente sin actualizaciones prematuras de los datos.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
python, react, typescript
Área
frontend
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Activo
Claridad
Necesita aclaración
Aptitud para principiantes
38/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.