1

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:

enter image description here

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

How I can present these lists (more) concisely?

2 Answers 2

3

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.

enter image description here

  • 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

enter image description here

1
  • 1
    Nice summary. Also, we should observe that the separate items appear to be fairly consistent, so they almost suggest columns of their own -- if they're not too numerous. (Of course, the real data may look nothing like OP's example.) Aug 21, 2021 at 5:02
1

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

enter image description here

1
  • This is a good suggestion. It would be nice if you can make it a bit more convincing by giving examples or ideas preferably through some images.
    – jazZRo
    Aug 21, 2021 at 16:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.