Been starting some user testing on my app and I am getting a complaint about how inefficient it is to edit data in a table.
We have a list of line items and the Quantity column is editable. They click to enter the cell, backspace to remove the current value that is there then type the new value. Then they have to click to set the new value and click again to start editing a new cell and backspace to remove the current value and so on.
I would like to just get by with one click - accept the edited value of the previous cell, open the newly selected cell and auto-select the contents of the cell. When you have a few dozen cells to edit, taking two clicks out of each one goes a long way.
Ideas on how to do this?
I hear ya! That's definitely not ideal. You could have a form to the side of the table that uses {{ table.selectedRow.data.etc }} data, and starts off with certain fields empty. That way, it would require 1 click to select the row, and then 1 click to submit. You could even set the component (like a text input) to run a query on submit (hitting enter after typing in the text input). Would something like this work for you?
Yeah, I use that pattern a lot in the app.
But a little playing has revealed that if the user just triple-clicks the cell, it closes the previous edit, select the new cell and highlights the contents. I think that will be fine for my client once they get used to it. So I say we don't have any issue! Thanks.
But I guess related feature requests would be: cellOnclick event. And programmatically editable cells. I could probably fashion a single click solution with these if I so desired and it opens up a lot more UX possibilities in general.
1 Like
