1

I've a list with 20+ key-value pairs that I need to display in my app. The data is static and cannot be edited.

I'm using a table, currently it looks like this:

keyA valueA
keyB valueB
keyC valueC
keyD valueD
keyE valueE
... ...

For more than 20 key-value pairs, this takes a lot of vertical space and wastes horizontal space.

I was thinking of putting 2 tables side-by-side, or a single table where every cell displays a key-value pair (instead of a column for keys, a column for values)

keyA: valueA keyB: valueB
keyC: valueC keyD: valueD
keyE: valueE keyF: valueF
... ...

Not sure if this is right? Is the data easily readable?

2

I would stick to your original approach, where you have a column for the key and a column for the value, now I'm assuming that the user don't need the 20+ tuples at the same time. You always need to think on how to make information accessible to the user when they need it.

I would add a search field on he top of the table that allow the user to search for a given value/key and the table below can show only the relevant tuples like when you search for a contact at your phone address book.

2
  • Thing is, the data is displayed in a modal, and the data is only used as a reference. The user imports the data from another application, there is a modal where they can correct fields that haven't been imported correctly, and the reference data is displayed under the fields. I want to minimize scrolling, that's why I thought it would be better to have 2 columns
    – Simon Tran
    Aug 10 at 16:40
  • 1
    Got it, probably the only suggestion that I would made if you are going with two columns is try to be really explicit on how a key item looks vs a value item to avoid confusions, use font weights and/or colors
    – Richard
    Aug 10 at 19:09

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.