6

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?

tooshel
  • 239
  • 2
  • 6

6 Answers6

14

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

David Perini
  • 391
  • 1
  • 4
  • arrows can be very confusing - do they mean 'I'm sorted like this right now' or 'click me to sort me like this'? – Toni Leigh Apr 18 '16 at 19:00
5
  • 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

Rahul
  • 23,822
  • 10
  • 76
  • 168
4

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.

Rob Allen
  • 249
  • 1
  • 4
4

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.

Glen Lipka
  • 11,752
  • 1
  • 34
  • 51
2

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.

Steve E.
  • 21
  • 1
1

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

dierre
  • 111
  • 3