Show more information from a table row

Question

I have a Table which contains some basic information for a Product. Upon clicking a row, I wish to show more information (on the same page) for that product where a user can edit certain information. I've tried using a hidden table row between each product that expands when a product row is clicked.

The problem with that is that the <form> element is not allowed inside tables, so this just doesn't feel right to me, there must be a better way to solve this problem?

Answer 1

Two patterns come to mind:

Pop-up modal form when clicking edit in row:

or

Place the Edit form below when they click on the row.

I would suggest that the pop-up modal form is a bit better, as 'more info' that loads below the data grid might not be visible to the user.

Answer 2

I recommend taking a look at the answers to this question: Best design for displaying list under a list of items ?. One of the suggestions seems particularly relevant to your needs:

This uses nested table rows and allows for inline editing of data, both of which your scenario requires.

(Note: I'm unclear on the restrictions around using <form> in a table. But I know ASP has more-or-less built-in support for inline table editing, so presumably there must be some semantically reasonable way to implement it? But from a UX perspective, that's not a compelling requirement.)

Answer 3

Perhaps using dividers inside of tables? Don't know if that's necessarily a "fix" but it's certainly an option worth trying.

Answer 4

One downfall using a modal window over the table is having the information in the table behind, and users may not be able to view it if necessary.

If only three columns can be edited, I would recommend inline editing.

See Designing Web Interfaces