How can I concisely present lists in table cells?

Question

I am presenting data in a table. One of the columns will contain list data.

The length of the list will generally be around 1-4 entries. These lists will have entries looking like property-comparison-value, with properties and comparisons from a known and limited set.

Here's a toy example:

I would like to make the table easier to read for my users.

How I can present these lists (more) concisely?

Answer 1

You have a couple choices here.

Chips, or lozenges as discreet elements

Chips can be used to represent discreet pieces of data, and you'll start to see this in more modern representations of spreadsheets.

• Pro: They are separate visual elements
• Con: They may look like they are interactive themselves, which sounds from your use that they are not. Using a neutral color, like a very light gray can mitigate this. Another is that this might make the table a bit wide, depending on how long the properties are.

Render the array as separate inline rows

In this case, you can stack the elements as a nested row.

• Pro: Saves on width, as elements are stacked
• Con: Potentially longer scroll, as table is taller

Answer 2

Unless there is a need for comparison, I don't suggest using a table at all. Instead you can use cards, with each card containing the information of each row of your table. This way it'll be more pleasant for users to look at specially on small devices and it looks much cleaner. Something like the image below