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.
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.
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 !