0

This question already has an answer here:

I'm in the process of redesigning my website to be responsive, and some of my account pages I show some detailed product information in a data table view.

What are some of the best methods to show a data table in mobile / tablet view?

I came across this link and I like the way he set this up, but I'm seeing if there are any other methods that are good which I'm not aware of.

http://dbushell.com/2012/01/05/responsive-tables-2/

http://dbushell.com/demos/tables/rt_05-01-12.html

Thank you!

marked as duplicate by JohnGB Feb 3 '15 at 8:59

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

0

Your question seems to be digging for implementation tips. I can't code your table, but I can speak to UX ... and isn't that why we're here?

Tables are tables

Unless you're talking about editable spreadsheets (which your question doesn't currently specify), there isn't a big difference in tabular data on GUI vs touch interface. Obviously a narrow screen can cause you pain with wide tables, but that can happen on a crowded desktop or small laptop screen too. For anything more than a few narrow columns, you should support some kind of horizontal scrolling.

The samples you referenced are quite simplistic. Most tables benefit from both a horizontal and vertical header column. They both need to be available for proper evaluation of a given cell. In those cases, just flipping the table doesn't provide any benefit. Keep both the header row and column in view and scroll/swipe the body of the table.

Just don't forget the controls. If you choose to allow row sorting, a simple desktop solution is control indication on hover. For touch (or both), remember to make the control persistently visible. Subtle, but oft forgotten.

  • Just wanted to add that if you choose to implement horizontal scrolling make sure to somehow colorcode the rows and/or keep the row labels fixed – aexl Feb 3 '15 at 9:06
  • That's what I meant by keeping both the header row and column in view. Color coding alone won't solve the problem. – plainclothes Feb 3 '15 at 16:15

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