I'm working on a web application that handles in-house registration. While completing the request, a user is allowed to enter an email into a text field that, when saved, will allow that user with the associated email address to receive emails about the status of the request. Right now, I have a text field where a user can enter a valid email address, and click a button to add it to my email list. That code is working correctly, but I am stuck trying to figure out a way to intuitively convey visually back to the user that they have added an email to their list, and where they can edit or remove that address should they wish. I thought of making a table with the email address on one side and some icons on the other to edit/delete, along with pagination, but that seems like a lot for just conveying a simple email list. I don't want to just print it out in the UI, the user could enter in 100 emails for all we care, and have simple html list with possible pagination doesn't look very nice. Are there any examples of displaying a possible large list to the user cleanly, and in a fixed amount of space?
Once you're dealing with long lists you need to be able to search, sort, or both.
If you want to avoid pagination then the only way is to have a single long list.
Here's a quick sketch showing a possible UI with search and sort as well as the ability to add, remove, and edit list entries:
Of course, you could make this prettier by swapping the edit and delete buttons for pencil and trashcan icons, and you could move the 'add' line to the top of the list depnding on your users preferences and workflow.