Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I frequently need to show tabular data and I want all the magic . . . sorting columns, pagination, etc. I prefer to use columns where you click on the name of the column and the sorting is done for the user (usually using javascript though it's more difficult if you have pagination too because do you sort just the data on the screen or do you resort it by that column and then put them back at the first page?) but how do I indicate it's been sorted? What's a good UI hint for that? How should the column names look? Also, I like to color every other result with grey but then I see someone with a screen with the brightness too high and it's not grey enough for them to be able to distinguish the rows but if I up the amount of grey there isn't enough contrast to comfortably read the black text.

What are some examples of tables done right?

share|improve this question
add comment

closed as not constructive by Rahul Aug 16 '11 at 15:50

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.If this question can be reworded to fit the rules in the help center, please edit the question.

6 Answers

up vote 14 down vote accepted

Traditionally, "Sort By" is indicated via up/down arrows that represent sorting ascending or descending. The column names should have a higher level of contrast than the values, such as bolder text or a shaded background.

Personally, when coloring alternating rows, I usually go lighter rather than darker, because the effect grows more pronounced the longer your users interact with the table.

Here are some great examples of table layout options: http://patterntap.com/tap/collection/tables

share|improve this answer
add comment
  • Sort the data in the entire table, not just the data on the screen. Yes, they'll have to start from page one of the new sort order, but that's okay - would you expect to be able to make sense of things if you were sorting by ID, and then on page 10 decided to sort by surname?
  • Indicate it's been sorted by highlighting the background of the table header cell in the column that's being sorted. You could go even further and highlight the entire column. Use arrows to make it even more obvious (and more accessible) - arrows pointing right for unsorted, and an arrow pointing down for sorted, for instance.
  • Column names should merely be distinguishable as column names. I tend to make them slightly bigger and bolder than the table cell contents.
  • Color every other result with grey only if you need to do so in order to increase the scannability of individual rows. If that's what you're designing for, then the tradeoff of slightly decreasing the overall legibility is fine because the user is scanning, not reading. And ultimately, it's impossible to design for every screen brightness, so just make sure you choose a happy medium and stick with that.

I don't have any immediate examples for you right now, but here's an example of a table I designed for my web app that follows my above advice/preferences:

image of a table

share|improve this answer
1  
The line height here within lists and their items is really horrible! :( –  Rahul Aug 16 '10 at 20:56
add comment

From a purely visual perspective, check out http://www.datatables.net/ (plugin for jQuery). The sample table on the home page has the features you mention implemented already.

Tech-wise, it depends on what your back-end tech is using. If you are running on a .Net server, the controls included in ASP 3.5 and 4 are very easy to get working as you describe without the jQuery and plug-in dependency.

share|improve this answer
add comment

Check out ExtJS grids. http://dev.sencha.com/deploy/dev/examples/#sample-3

Best user interaction of any JS framework I have seen. We rely on it extensively for our application at Marketo.

share|improve this answer
add comment

If you need a datagrid with "all the magic", try dhtmlxGrid: http://www.dhtmlx.com/docs/products/dhtmlxGrid/index.shtml

It's one of the most powerful JavaScript grids I've seen.

share|improve this answer
add comment

Well if you want to sort in both way, there's the classic arrow up/down like in windows explorer/gnome nautilus, they're usually in a darker color than the cell.

alt text

share|improve this answer
add comment

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