View/Edit mode used in data tables

Question

I am working on data table for HR managers that implements in-line editing as well as drop-down menu with detailed options. In-line edit is a must as it will be re-used in dashboard for different pop-ups so we chose in-line edit instead of pop-ups so it wouldn't turn out as a pop-up on a pop-up. The thing is that I was just told to show different values during edit and view mode, in a new iteration of wireframes, as some of the items are not editable. I was told to think of somewhat more elegant solution than I have right now. Please bear with me I started to get into UX just couple of months ago and I am an intern in the company.

Anyways my question: Is there a correct approach to designing detailed dropdown options and follow-up question can you think of more elegant solution to my problem? Any ideas and examples are appreciated.

Here are wireframes of what I have so far. The non-editable fields are : Created on, Lastly modified on, Modified by.

Edit mode

View mode

Answer 1

I think the solution is elegant and user-friendly (btw it's called 'Expandable Row').

I can suggest the 'Quick View' option as an alternative that might be preferable since it doesn't alter the table's view: when clicking on 'edit row', a sidebar slides from the side with the details ready to be updated:

This is the resource I use when designing tables: Design better data tables (Highly recommended).

Answer 2

The Shield UI Grid editing section show a lot of different editing scenarios and types, that you can take a look at and choose the best one for your case.