Inline Editing and Validation in Tables

Inline editing of table

Tables are an essential part of the user interface that helps users to visualize large data at once in an organized form. Providing an easy to use experience for a data table is a challenging task when you are dealing with large data.

Tables have several elements including pagination, editing, filtering, sorting, show/hide columns, search, etc. that a UX designer needs to take care of while designing a table. This article describes a few ways of displaying input validation messages when users are performing inline editing of table content.

What is Inline editing?

Inline editing provides a way of editing the table content while remaining within the same page without navigating to any other pop-up, dialog, or page. The users can simply click on a row or cell and edit its text. This helps to change the content instantly without moving away from the current view.

This is a convenient and quick way of editing the table’s content. If you take the user to another view like a pop-up or dialog, they will lose the context of the current view, items, and their details.

The layout of a table and its content
Editing table row
Inline editing of content in the table’s cell

UX World is an approved Educational Partner of the Interaction Design Foundation, the world’s largest UX Design learning community.

Get 3 months of free membership to learn UX Design here!

How to do inline editing and input validation?

When you are giving the users an option of inline editing the table content, there is a need to provide an approach of input data validation. This input validation approach can easily be related to a form where users enter the input and the validation is being done at the same time along with the input control.

However, since the table is a container that can have large data, finding an appropriate way to display the validation messages can be a challenging design problem. Below are a few ways to display UI messages when the user is entering and editing the text in the table.

Along with the cell that is being edited

The simplest option is to provide the error indication along with the cell the user is currently editing. Just like inline validation in input forms, display an error icon along with the cell that helps the user identify that he has entered an invalid input in the cell.

Inline input validation

Hovering on the error icon displays a help tip explaining the error and the way to resolve it. User can follow the given guidelines and enter a valid input in the cell to remove the error.

Inline Input validation

Below the row or cell that is being edited

Another option is to display the error message below the row where user has entered the invalid input.

Using this method requires an extra space below the affected row in the table.

And providing the error below each erroneous row will require additional space in the table unless the user removed the error and entered the correct input.


UX World is an approved Educational Partner of the Interaction Design Foundation, the world’s largest UX Design learning community.

Get 3 months of free membership to learn UX Design here!

On top of the current view

Another good option is to display the error message on top of the table. When the user has entered an invalid input in a cell in any row, the error message displays on the top.

The affected cell will display in red color so that the user can identify the error easily and make the necessary corrections.

error message on top of table

The important point is to keep the error message on top of the current view otherwise error message can hide if the user has already scrolled down the view for a large table.

The same error message will display the detail of errors if it occurs on multiple rows. The error message will hide when the user removes all the incorrect entries in the table.

Changing the row color

One more option is to change the background color of the row to indicate the invalid entries. The details of the error can be displayed on the top of the current view that will hide when the user resolves the error.

Following in any of the ways given above can help you better handle the input validation problem in table design.


Thanks for reading. Find more related articles at uxdworld.com. If you have any questions, contact here: Linkedin | Twitter |Facebook

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s