is it good practice to keep my table rows inline-editable

Question

i am kind of struggling with tables with a lot of data that need to be editable. The table holds financial data. The table has about 12 columns for which at least 10 need to be editable.

• For the sake of ease the client prefers making them inline editable but there is a possibility more columns will be needed in the future and i'm afraid for the general scalability of this approach. Moreover, the application now is mainly for desktop but will in the future also be more and more used on a tablet (and i'm thinking portrait).

• The other approach would be that the rows are not editable and that, for updating, you'd select a row and edit it in a separate inputfield region above. Same would be done for creating and duplicating.

• Third option would be a mixture of the two: as a user you'd be able to edit some cells in the table but for creating a new or duplicating one you'd select the row and go into a separate inputfield region. Problem here is that the inputfield region above would always be visible and when you click on a row the data in that row gets displayed in the inputfield region but the editable cell (if so) would also show.

The thing is a lot of times the client wants to edit only one field and prefers the ease of inline editing.

I myself prefer the second approach but would like to hear some opinions from you guys. What would be your best practice?

Thanks alot

Answer 1

I would recommend going with section level edits. If I click on Edit for a specific section only that section becomes editable and a user should be allowed to edit any fields he wants and ignore the rest.

Inline edit for each and every field as that would greatly increase the clutter on the screen and can cause accidental clicks, therefore should be avoided.

creating new line can be done in two ways: either you can do it section wise or you can do it globally i.e. you can create a row in any section and save it globally

Answer 2

A fourth option is in-line editing but have a check box on the whole form if you are in edit mode. They might want to copy values for like a spread sheet and not chance changing data. It makes for taking up a column but a Dup button that adds the row at the bottom. A single Add button for each section. And you will need a Delete button for each row. As for size put it in a scroll viewer.

If those activities are actions for the selected row then I don't agree. User may not make that association. Use up a column on the row.

Answer 3

I agree, second solution would be a better one of the three you listed. However, instead of editing a larger form in a region above, consider replacing or expanding "edit" region inline as well.

Example: https://demos.devexpress.com/ASPxGridViewDemos/GridEditing/EditModes.aspx

Alternate ways you may consider are... (I am going to assume your application is for multi-device / platform use):

1. on click (select a row / cell), you can reveal additional tool set for each cell (eg. edit and erase). Clicking edit will replace the value with respective form field and allow you to edit. Example:

   • http://www.astuteo.com/estimator/ (I'd suggest click vs. hover, unless your application is for desktop only)

2. double tap or double click a cell to replace the value with a respective form field. Examples:

   • http://www.phpmyadmin.net/home_page/index.php - click on "try a demo". Try to edit one of the tables that has records)
   • http://yui.github.io/yui2/docs/yui_2.9.0_full/examples/datatable/dt_cellediting.html