plotly / plotly/dash

Dash editable DataTable issues

Offen
#2,018 3 Kommentare 4 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

bug dash-data-table P3
Vorherrschende Sprache
Python
Sterne
24.4k
Forks
2.3k
Ø Merge
2 T. 7 Std.
Gemergte PRs (30 T.)
13

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginnen Sie in components/dash-table/src/dash-table/components/ControlledTable/index.tsx bei etwa den Zeilen 612–628, und bilden Sie anschließend das Tastaturverhalten in der bearbeitbaren DataTable-Dokumentation unter dash.plotly.com/datatable/editable nach. Vergleichen Sie Enter in der untersten Zeile und Tab in der äußerst rechten Spalte mit der normalen Navigation, und testen Sie das Löschen mit Del, Backspace und Escape. Als abgeschlossen gilt die Aufgabe, wenn Bearbeitung, Navigation, Löschen, das Aufheben der Auswahl und das Abbrechen konsistent funktionieren, ohne vorzeitige Datenaktualisierungen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
python, react, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Aktiv
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
38/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.