10

I have a table that is very tight horizontally. Each column in the table is sortable by clicking the title of the header.

Column Headers

As you can see, on most columns there is just not enough room for the order indicator.

Any ideas on a better way to indicate sort order? I would like to keep the font size and column widths as is.

Improve this question
1
  • 2
    Something like what you have is fine - but I would keep the column heading labels vertically aligned and put the arrow above the column title instead.
    – Roger Attrill
    Jan 8, 2014 at 12:48

5 Answers 5

Reset to default
17

I made a demo solution with CSS3. The Salary column is in ascending sorted status and the Bonus column is in descending one.

horiontal-tight-table-sorter-css3

I commit the work to github at horiontal-tight-table-sorter-css3.

You can have a quick review of the html page here htmlpreview horiontal-tight-table-sorter-css3.

For the sake of the demo, I only tested it on Chrome.

Hope this help.

Improve this answer
6
  • That's really nice-looking!
    – LindaCamillo
    Jan 8, 2014 at 13:51
  • 1
    Nice, but your example is confusing to me. The triangles seem to be contradicting the order you mention in the text. Bonus values are indeed in descending order, but the triangle with the tip at the top is often used for ascending order (from smallest value ~ smallest width to largest value ~ largest width). In addition the Salary values are neither ascending nor descending - leading me to conclude that their sort order significant when Bonus values are equal. That would be more intuitive if the Salary column comes after the Bonus column.
    – Marjan Venema
    Jan 9, 2014 at 19:42
  • @MarjanVenema You're right. My bad. I was meant to demonstrate the concept and styling of the header only. The data was left as random since I though nobody would mind.
    – tiengtinh
    Jan 11, 2014 at 4:51
  • 2
    Yes, I did understand that that was what you were trying to do. The trouble is that people tend to read more from examples than what you are trying to convey. Examples either have to be limited to what you are trying to show (the header and perhaps the first data row) or have to be consistent to avoid confusion and the risk of being misinterpreted.
    – Marjan Venema
    Jan 11, 2014 at 11:19
  • 1
    This is still confusing. Now both the salary and the bonus column are sorted ascending, which doesn't seem to be what the icons indicate at all. With the icon above the salary column, I'd expect to see $300 at the top.
    – AlexC
    Jan 14, 2014 at 21:31
5

Try something like this. Keep the horizontal positioning of the column labels the same and add sorting horizontally on top but in smaller font using some noticeable color.

If possible, make the whole div (or table cell) having that column label clickable and sort icons clickable.

enter image description here

Improve this answer
2
  • 1
    That works for strings (in languages where they use the western alphabet), but how would that look for dates, for the rating column, or for numbers? All of these appear in the original question.
    – André
    Jan 8, 2014 at 11:40
  • I like this, but andre makes a good point.
    – NSjonas
    Jan 8, 2014 at 19:40
1

If indicating sort direction without utilizing more horizontal space is a requirement, your main option is to utilize more vertical space to display sort direction.

Other things you may wish to consider, however:

  1. Analyze your columns and only show the most important/relevant sections. You may wish to remove certain items from the main table view to gain more space. If the items in your table are clickable and go to a detailed view, maybe you can show view/download count in the detailed view instead. It seems like the most important metric for sorting titles will be rating, and I'm not sure that the view count really tells the end user very much about the quality of the item.

  2. Maybe it's not important to indicate sort direction. If your title columns indicate that they are clickable by using the same styling as all your other links I don't see much of an advantage to adding the sort direction arrow. If a user clicks a column item once and sees the list rearrange, but the order is not what they desire, it makes sense they would click it again until the order is correct, since they know clicking the link rearranges the list.

  3. Maybe you can implement a single sort direction solution, based on whichever sort direction makes the most sense for each item. Clicking title or author rearranges the list alphabetically ascending, clicking rating rearranges the list numerically (or by stars) descending, etc. Is anyone ever going to want to sort by lowest rating? If not highest rating should be default. This can simplify the whole process. You click a column, the table is sorted whichever direction it makes sense to sort by (based on the column you clicked), and the column is highlighted temporarily (maybe with a color fade in/out) to indicate that an action was just taken based on the clicked item.

Improve this answer
2
  • For an example of solution 3, please see area51.stackexchange.com/?tab=hot
    – circuitry
    Jan 8, 2014 at 17:33
  • Good thoughts, unfortunately at the moment everything is as the client asked. I do have a details page but most of the columns in the table are key values that the user might want to sort on. The single sort isn't a bad idea but most my columns would need to be bi-directional.
    – NSjonas
    Jan 8, 2014 at 19:29
1

You could considder if using the background of the header cell would work. Something like this perhaps?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

This is of course just a very rough sketch, any graphics guy should be able to make something subtle and pretty...

Improve this answer
1
  • I thought about this solution, but I think its somewhat difficult to make look good with the simplistic design my table has
    – NSjonas
    Jan 9, 2014 at 0:44
1

You could account for the possibility of the arrow by reserving space in each item. This would keep the column widths the same (arrow or not), and allow for the arrow and text to be horizontal.

enter image description here

Reserved space indicated in red.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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