Does anyone have any suggestions for displaying a large data table in a mobile app? Some of the columns (the ones that are underlined) need to be able to be sorted when clicked.
2
-
Are all of the fields in your table absolutely required? I would start with trying to figure out the absolutely needed fields. Often users find only a few fields needed in the table. Good question though :) I will be thinking about it.– Anna RoubenNov 9, 2012 at 19:19
-
Mobile as in phone or tablet? Like @Anna mentioned, the client may say all fields are required, but chances are, they aren't. Especially on the phone, the type of operations they can perform comfortably will be limited.– VevWongNov 9, 2012 at 20:29
Add a comment
|
2 Answers
The company Filament Group suggests an interesting solution for displaying complex tables:
- The markup of the table is the same for all the devices.
- The author sets the importance of each column by applying CSS classes to the table headings: essential, optional, or persist.
- The webpage shows only some of the columns of the table depending on: the user's device and the importance of each column.
- The webpage lets the user select which columns wants to see.
An example of how it works.
The full article: A Responsive Design Approach for Complex, Multicolumn Data Tables.
-
Great find. Was wondering what about for charts and displaying datapoints? I posted this question ux.stackexchange.com/questions/73759/… and SO gave me your answer as a possible hint. Feb 18, 2015 at 2:22
Interesting question! My take at providing a solution.
There has to be multiple screen transitions involved.
1st. Provide the option to select which columns to be displyed - this could potentially allow all the columns to fit in to the mobile screen, if all columns are not needed in the result Also, an option to select all and deselect all will also be helpful here. 2nd. Provide the user to select the Sort options according to which the table will be sorted. 3d. -optional- You can also provide the user with options to select the number of columns they would want to see at a time. 4th -optional- You might, along with the function to scroll through the results(columns), as well provide a search.
It could be challenging to display a very large data table with all the columns !
