Problem: I've got a table with 10 columns and ~100 rows. What is the best way to present these on small screens? My idea: effective search + data displayed row-by-row. Is there any better solution?
I have had this problem several times before and aside from the recommendations above, another option is to limit the number of columns you have to only the attributes essential for users to make an informed comparison between rows. Then link each row to a card or somesuch containing all the information.
If users need to see all attributes then ignore this.
Two solutions I've used are card view, and transposing the rows and columns, and displaying 10 columns with 2 rows - if the default orientation is vertical, like on the iPhone. In both cases each screen only shows one "row" of the original table.
And then you can enhance this with effective search, or with a smart scrollbar like on the iPhone contacts list, which can show you the groupings before you take your finger off the screen. Of course, that's only possible when the grouping is clear and the data supports it.
I think it is important to know what the users need to do with the data: is comparison between rows most important? Or is it more a per-record view?
Things that seem important are when viewing on a small screen:
- sorting the data well and making that easy to customize (so they will see most relevant rows first)
- good navigation from record to record. Allow 'next' navigation based on the chosen ordering
- for comparison views you need to be able to bring the columns that are important close to each other, so make it possible to lock columns in view, or order or hide them to minimise horizontal scrolling
This solution is very good http://jsbin.com/apane6/14/ see this on desktop then phone