How best to display multiple data points in a single row in a list view?

Question

Hey! I'm designing a list that needs to accommodate multiple data points in a single row under a single category, and I'm wondering if there are any UI patterns that are best suited for this need.

I've seen lists that have rows with one long chunk of text (like a paragraph), but it still represents one discrete chunk of data - whereas what I'm designing will represent many separate data points (ex. Protocol 1, Protocol 2, etc.)

The user basically needs to quickly and efficiently identify which Protocols are associated with their corresponding Rules. I've thought about an expanding row interaction, as well as a modal, but both seem kinda click-intensive.

Any thoughts? Thanks for taking a look, eager to hear your feedback!

Answer 1

Having it in a list view just as you have it is intuitive. However, I would suggest that you add a border around the 'protocol' just like you have it on the 'remove' button. The remove button can now be replaced with an icon just beside the protocols.

That way, you can save more space for longer protocol titles and have the protocols easily identifiable.