Ways of editing data in a table
A brief overview with editing data in data-tables
At work, a few colleagues and me, recently discussed the ideal way to display data in tables in terms of User Experience (UX). In this article, I attempt to share my experience with data-tables.
Here are five ways you can update data:
- Inline editing
- Dedicated row
- Use of Modal
- Opens in current or new Tab
- Opens in a side split view
Inline Editing
With Inline editing, you can directly change data without navigating to a different view.
What I like with this feature is you can instantly change data, without having to navigate or go through a separate view. This helps you be more productive without having to switch views; and keep unnecessary cognitive load (you have to remember where you are in the app and what you are doing).
Before the advent of modern front end frameworks such as Angular, ReactJS and VueJS, implementing this type of data manipulation was tedious.
The first time I implemented such a feature with jQuery, working at the time, on Salesforce — creating a custom view, I struggled with the presentation layer. I had to embed the record’s ID with the class name — to know which record the user selected; while experimenting with an acceptable solution to retrieve and update the exact row.
As an improvement to the Inline Editing UX, you can edit text using a small dialog — as illustrated below and confirm the change by pressing Enter.
Dedicated Row
Dedicated row resembles Inline Editing but has one empty row, either at the top or bottom of the table. With this feature, you can add and saved a new record; or you can, by clicking on the row you want to update — load it in the dedicated one.
I have rarely come across this functionality in Web Applications; but I’ve used it on Oracle E-Business Suite a few years back. The only drawback I understand is; if you have plenty of rows, it’s troublesome to keep track on which record you are editing. Otherwise, adding new rows is highly intuitive as it’s always at the same place, where you expect.
For my preferred development case, I use a mixture of dedicated and inline editing; that is, you always have a new empty row, that cannot be deleted — for the purpose of adding a new record. But when you click on existing ones, you can directly edit it inline. Best of both worlds.
In the example below from the MD Bootstrap library, you can directly change any field as input elements are used in the rows. Furthermore, you have a green add icon button above to add a new record — an alternative for adding a new record.
Modal
Modal, also referred as Dialog, can be used to display and update data. Until recently, developers and users alike, preferred this way of interacting with forms in Web Applications.
When you click on a record in the table or on an edit icon or label, you are prompted with a modal containing the row data — that you can change and update — without losing the current view state (or data). You don’t have to navigate back and forth.
The one drawback I can think of using modals is with smaller screens. I find it difficult, due to lack of screen space, to navigate back and forth. And sometimes, the modal takes the entire screen; when you press the back button, instead of closing the dialog, the page moves to the previous URL.
Open Details In Same Tab Or New Window
This is another option users have often requested me to add in their apps. Clicking either on a row or an edit icon, opens the details of the record. You can then update the data. The advantage is you have more screen real state and can display more information especially with objects with plenty of fields as is the case with ERP systems.
Side Split View
This feature is similar to modal in that it provides a way to edit data without changing URL state or View State. Once you update your data, you can continue likewise.
I find it useful when dealing with multiple properties that are not displayed in the table and you don’t want dialog.
You can use the drawer component from Material Design, either on the right side or at the bottom, to differentiate with navigation menus.
Instead of displaying menus as above, you display the information for the row you want to update.
