Tag Info

Hot answers tagged

16

I made a demo solution with CSS3. The Salary column is in ascending sorted status and the Bonus column is in descending one. 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 ...


4

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.


2

Here's an idea on how to make column A and B look sortable (buttons, pushable). Column C is in a disabled state, meaning interaction isn't possible. You really want to avoid forcing the user to have to roll over the headers to discover which ones that can be sorted and which ones that can't.


1

A few options: Forgo labels and use an up and down arrow to toggle the list. This visual metaphor is used a lot when toggle the sort order for tables. Remove the toggle altogether and change your initial "sort" text to "Sort by Newest" instead of "Sort by Date" and then presenting two new buttons. An example: Use Newer to Older. The Most/Least Recent ...


1

I don't think there's anything inherently wrong with Newest or Oldest, but here are some suggestions for both button names: download bmml source – Wireframes created with Balsamiq Mockups


1

Without knowing what kind of products you are selling, it's my opinion that you don't need to have both Newest to Oldest or Oldest to Newest, just have Sort by Date or even New where you default to showing the newest products first.


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. Reserved space indicated in red.


1

You could considder if using the background of the header cell would work. Something like this perhaps? 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...


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: 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 ...


1

I'd suggest using the 4th option. It is the most direct way to do the sorting, without any extra fields or radio buttons. It is the result columns that define the fields sorting is based on, after all. This approach is the most used option, as well, AFAIK. To tackle the "technical difficulties", one could use client side sorting (no round-trips to server), ...


1

Essentially what you are wanting to do is create sub-lists within a global list. Why not prepend all of of your items with an alphabetised prefix. For example: EMAIL: a task EMAIL: forward this EMAIL: reply with report PICS: create album x PICS: create album y PICS: delete picture 2 from album x This way you could scroll, or browser find straight to ...


1

ux's answer is ideal, but if rows cannot be selected it is better to move to page 1. When a user is browsing a table and they sort it, they are starting their browsing from scratch. So it makes sense to start them at the beginning. If you keep them on the same page then the user is essentially starting from an arbitrary position in the results. How could ...


1

I agree with @dmvrb - label to make it clear what the control does. Changing the type of control to another paradigm might just shift the confusion to other users. One possibility to prevent user's confusion is to change the wording. For example: instead of "Filter by" use "Show only", and instead of "Sort by" use "Order by"



Only top voted, non community-wiki answers of a minimum length are eligible