I have a table where there might be two values in one cell, what is the best practice to display this? With a comma or line break or something else? Unfortunately the values are quite long, and I believe is it rather important to let the user see both values, i.e. there cant be any hiding.
3
-
5Can you show a sample table and some data so we can see what we'd be working with?– SeiyriaCommented May 23, 2016 at 15:37
-
5If your table cells have two values, there's a chance you need to re-think what you're doing, an example and some context would be handy– DevinCommented May 23, 2016 at 17:49
-
Totally agree with Seiyria and Devin on this. You really need to give us an example - a quick screenshot or two would do the trick.– MonomeethCommented May 23, 2016 at 22:05
Add a comment
|
4 Answers
Maybe a traditional tabular layout is not right UI approach? You could consider variable height rows so that multiple values appear vertically in a cell, i.e.
-
If the values are long, as the question suggests, then having two rows would definitely be a better way to manage the display of the values.– Michael Lai ♦Commented May 23, 2016 at 22:38
You can try something like this, the most common and familiar with user way.
-
1
-
4That said, I don't think this is a good choice if there are only ever two values, and they might not be removable. This is more for picking multiple values, not just displaying them.– SeiyriaCommented May 23, 2016 at 15:37
-
3@Fasih, you're mixing form controls with static data display, this is not a good approach at all, as a matter of fact is what the OP should avoid– DevinCommented May 23, 2016 at 18:35
-
Also OP specified the value are large, this would result in either the selections scrolling out of the box or abnormally wide columns. Vertical as opposed to horizontally aligned such as Splatz answer would do better. Commented May 23, 2016 at 19:18
-
How about just removing the 'x' control from the UI element? There are actually Bootstrap UI elements that are stylized data labels.– Michael Lai ♦Commented May 23, 2016 at 22:37
Having two values in one cell means that presumably you have to differentiate the two pieces of data. Differentiating them by being either side of a comma may not make them noticeable if the values themselves may be quite long, so you need an alternative approach.
Unfortunately though, this often means having a primary and secondary item which may not be what you want. Some options may be more or less helpful if either one of the items may be present but not the other.
- use font style (e.g. colour or weight) to distinguish the two
- use a background colour (not too bright!) and divide the cell into two equal portions left/right or top/bottom
- use position and justify them left and right, or align them top and bottom
- notionally divide the cell into two using a faint dividing line that doesn't reach the full extent of the cell (horz or vert)
- use brackets around the second item if, for example, it's a conversion or differentiator that is related to the first item
- use a discrete icon or glyph to prefix each items
- use a forward slash if the indication is that either the first or the second item is usable
- use some other symbol to imply the relationship between the two items
Within that last option might lie a clue as to your answer:
- What is the relationship between the two items, if any
- How do you want to represent that relationship to the user
Use some mechanism that doesn't just present the two items but helps to add value to the user by indicating their meaning, their equality, their relationship, or how it matters that there are two items in the cell.
To be honest I don't think we can answer the question without...
- making lots of assumptions
- speculating about possible use cases
- presenting lots of options that may or may not be relevant
...like I have probably done here.
answered May 23, 2016 at 19:34
I do not want to argue with those who say "You should rethink your tables". I have lots of tables that have fields whose contents are ... lists!
If you ever work with postGIS or any geographic database you will find many examples of list data stored in fields (polygons are stored as lists of coordinates). You can also have "lists of things" in selection forms. I even have "lists of lists" in some web applications.
Yes, list management is a nuisance, but ... why not? There's no much difference with lists generated dynamically from tables and is great for static values or values that don't change often.
I use Select2 to display data in forms, even with moderately long data. Data is stored as CSV (Comma Separated Values), and may treat them easily in javascript, php or even in SQL "SELECT * WHERE Id IN (list)"
This is an example of selection form with plenty of lists.
This another example contains lists of lists.
You may populate the "select" control with data from a table, and store the resulting CSV straight away. Fast and easy.
